/* =====================================================================
   Vaquero Plumbing — Christmas theme (seasonal layer)
   Turned on/off across every page by tools/xmas.py (on|off).
   Also used by the self-contained Ads landing pages (/plumber, /water-heater),
   which don't load styles.css, so every shared token below has a fallback.
   ===================================================================== */

:root{
  --xm-pine:#1d4433;      /* evergreen — ribbon, garland   */
  --xm-pine-2:#163427;    /* evergreen deep                */
  --xm-needle:#2f6a4c;    /* garland highlight             */
  --xm-red:#b8363b;       /* cranberry — ornaments, dots   */
  --xm-red-2:#8f2529;
  --xm-gold:#e3b46a;      /* warm gold, sits beside bronze */
}

/* ---------- Holiday ribbon above the nav ---------- */
.xmas-ribbon{
  position:relative;background:var(--xm-pine);color:var(--white,#fff);
  font-family:inherit;
  font-size:14px;letter-spacing:-.01em;line-height:1.3;
  background-image:
    radial-gradient(circle at 12% 50%,rgba(255,255,255,.07) 0 1.5px,transparent 2px),
    radial-gradient(circle at 62% 30%,rgba(255,255,255,.06) 0 1px,transparent 1.5px);
  background-size:46px 46px,31px 31px;
}
.xmas-ribbon-in{
  max-width:1280px;margin:0 auto;padding:10px var(--gutter,20px);
  display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;
}
.xmas-ribbon svg{width:16px;height:16px;flex:none;color:var(--xm-gold);}
.xmas-ribbon a{font-weight:600;color:var(--xm-gold);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;transition:color var(--t,.35s);}
.xmas-ribbon a:hover{color:var(--white,#fff);}

/* ---------- String lights hanging from the sticky nav ---------- */
.xmas .nav{border-bottom-color:transparent;}
.xmas header.top{position:relative;z-index:5;} /* Ads LP header */
.xmas-lights{
  position:absolute;left:0;right:0;top:100%;height:30px;
  pointer-events:none;overflow:hidden;z-index:1;
}
.xmas-lights svg.wire{position:absolute;inset:0 0 auto 0;width:100%;height:14px;}
.xmas-lights .bulbs{position:absolute;inset:0;display:flex;justify-content:space-around;}
.xmas-lights .bulb{
  position:relative;width:9px;height:14px;margin-top:5px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:var(--c);
  box-shadow:0 0 6px 1px var(--c),0 0 14px 2px color-mix(in srgb,var(--c) 45%,transparent);
  animation:xm-twinkle var(--d,2.8s) ease-in-out var(--dl,0s) infinite;
}
.xmas-lights .bulb:nth-child(even){margin-top:9px;}
.xmas-lights .bulb::before{ /* socket */
  content:"";position:absolute;left:50%;top:-4px;width:5px;height:5px;
  transform:translateX(-50%);border-radius:1px;background:#3a2f26;
}
@keyframes xm-twinkle{
  0%,100%{opacity:1;filter:brightness(1.05);}
  50%{opacity:.45;filter:brightness(.7);box-shadow:0 0 2px 0 var(--c);}
}

/* ---------- Snow over the hero photo ---------- */
.xmas-snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.xmas .hero .container,.xmas .hero .wrap{position:relative;z-index:2;}
.xmas .hero-bar{z-index:3;}

/* ---------- Ornament dots on every tag ---------- */
.xmas .tag::before{
  background:radial-gradient(circle at 35% 30%,#e8686c 0 18%,var(--xm-red) 45%,var(--xm-red-2) 100%);
  box-shadow:0 0 0 1.5px rgba(227,180,106,.55);
}
.xmas section:nth-of-type(even) .tag::before{
  background:radial-gradient(circle at 35% 30%,#5d9c78 0 18%,var(--xm-needle) 45%,var(--xm-pine-2) 100%);
}

/* ---------- Pine garland above the footer ---------- */
.xmas-garland{
  position:relative;height:64px;margin:-6px 0 -28px;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' viewBox='0 0 240 64'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 6 Q120 46 240 6' stroke='%23163427' stroke-width='13'/%3E%3Cpath d='M0 6 Q120 46 240 6' stroke='%231d4433' stroke-width='9' stroke-dasharray='2 3'/%3E%3Cpath d='M0 4 Q120 42 240 4' stroke='%232f6a4c' stroke-width='3' stroke-dasharray='1 5'/%3E%3C/g%3E%3Cpath d='M120 26v10' stroke='%23c08a52' stroke-width='1.4'/%3E%3Crect x='116' y='34' width='8' height='5' rx='1' fill='%23c08a52'/%3E%3Ccircle cx='120' cy='48' r='10' fill='%23b8363b'/%3E%3Cpath d='M111 46 Q120 50 129 46' stroke='%23e3b46a' stroke-width='1.4' fill='none'/%3E%3Ccircle cx='116' cy='44' r='2.6' fill='%23ffffff' fill-opacity='.45'/%3E%3Cg fill='%23b8363b'%3E%3Ccircle cx='38' cy='17' r='3'/%3E%3Ccircle cx='43' cy='20' r='3'/%3E%3Ccircle cx='198' cy='18' r='3'/%3E%3Ccircle cx='203' cy='15' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center top;background-size:240px 64px;
}
.xmas .footer{padding-top:28px;}
.xmas .foot{padding-top:52px;}

/* ---------- Mobile ---------- */
@media(max-width:640px){
  .xmas-ribbon{font-size:13px;}
  .xmas-ribbon-in{gap:8px;padding:9px var(--gutter,20px);flex-wrap:wrap;}
  .xmas-ribbon .xm-long{display:none;}
  .xmas-garland{height:52px;background-size:180px 48px;margin-bottom:-22px;}
}

@media(prefers-reduced-motion:reduce){
  .xmas-lights .bulb{animation:none;}
}