/* ==========================================================================
   Pinewoods Landscape Co. — Christmas season theme
   --------------------------------------------------------------------------
   Inert unless the inline <head> script on each page has set:
     html[data-season-available]   in the season window, or a ?season= preview
     html[data-season="christmas"] the theme is switched on

   The season window (FROM / TO, as MMDD) lives in that inline script, which
   is copied into every page's <head>. christmas.js builds the band, toggle,
   garland and snow; this file styles them. Bump ?v= in every page when this
   file changes — it is cached for a year.
   ========================================================================== */

html[data-season-available]{
  --holly:#ad1f2b;
  --xm-sky:linear-gradient(175deg,#081510 0%,#0d1f17 56%,#112a1e 100%);
  --xm-h:150px;
  --xm-tg-w:136px;            /* fits "Christmas" (128px) and "Lawn Care" (131px) in Inter, with slack for the fallback font */
}
@media (max-width:620px){ html[data-season-available]{ --xm-h:116px; --xm-tg-w:44px } }
@media (min-width:981px) and (max-width:1247px){ html[data-season-available]{ --xm-tg-w:44px } }

/* Seasonal copy in the HTML ships with the `hidden` attribute. The browser's
   own [hidden]{display:none} LOSES to any site rule that sets display — .btn
   and .textlink are inline-flex — so it is reinforced here, and the two flex
   elements also carry an inline display:none in case this file never loads.
   The show rules need !important to win that back. */
.xm-on[hidden]{display:none!important}
html[data-season="christmas"] .xm-on[hidden]{display:inline!important}
html[data-season="christmas"] .xm-on--block[hidden]{display:block!important}
html[data-season="christmas"] .xm-on--flex[hidden]{display:inline-flex!important}
html[data-season="christmas"] .xm-off{display:none}

/* ── 1. Reserve the band's height from the first paint ──────────────────────
   christmas.js inserts the real band a moment later, at exactly this height,
   then sets .xm-built. Without this the whole page drops 150px on load. */
html[data-season="christmas"]:not(.xm-built) body::before{
  content:"";display:block;height:var(--xm-h);background:var(--xm-sky);
}

/* ── 2. The band ────────────────────────────────────────────────────────── */
/* visibility, not just height: once collapsed, the countdown link inside must
   leave the tab order, or keyboard focus lands on something nobody can see */
.xm-band{position:relative;height:0;overflow:hidden;background:var(--xm-sky);visibility:hidden;
  transition:height .5s var(--ease),visibility 0s linear .5s}
html[data-season="christmas"] .xm-band{height:var(--xm-h);visibility:visible;transition:height .5s var(--ease)}
.xm-band__stars{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle 1.4px at 22% 26%,rgba(255,255,255,.75),transparent 100%),
  radial-gradient(circle 1px   at 31% 58%,rgba(255,255,255,.5),transparent 100%),
  radial-gradient(circle 1.6px at 44% 20%,rgba(255,255,255,.8),transparent 100%),
  radial-gradient(circle 1px   at 55% 46%,rgba(255,255,255,.45),transparent 100%),
  radial-gradient(circle 1.3px at 63% 15%,rgba(255,255,255,.7),transparent 100%),
  radial-gradient(circle 1px   at 72% 38%,rgba(255,255,255,.5),transparent 100%),
  radial-gradient(circle 1.5px at 84% 22%,rgba(255,255,255,.72),transparent 100%),
  radial-gradient(circle 1.2px at 10% 40%,rgba(255,255,255,.6),transparent 100%),
  radial-gradient(circle 1.2px at 93% 48%,rgba(255,255,255,.55),transparent 100%)}
/* the flight happens inside a centred, clipped stage so on very wide screens
   Santa still launches from behind the pole rather than out of empty sky */
.xm-band__in{position:relative;height:var(--xm-h);max-width:1440px;margin:0 auto;
  overflow:hidden;container-type:inline-size}

/* North Pole */
.xm-pole{position:absolute;left:clamp(14px,3.2cqw,46px);bottom:0;width:96px;height:116px;z-index:3}
.xm-pole__glow{position:absolute;left:-60px;right:-60px;bottom:-10px;height:110px;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 40% 100%,rgba(173,214,255,.17),transparent 72%)}
.xm-pole__drift{position:absolute;left:-18px;right:-24px;bottom:0;height:22px;border-radius:50% 50% 0 0;
  background:radial-gradient(ellipse 100% 150% at 50% 100%,#eef5f7 0%,#d7e4ea 58%,transparent 72%)}
.xm-pole__shaft{position:absolute;left:20px;bottom:14px;width:11px;height:80px;border-radius:6px;
  background:repeating-linear-gradient(-38deg,var(--holly) 0 8px,#fbfbfa 8px 16px);
  box-shadow:inset -3px 0 0 rgba(0,0,0,.2),0 0 14px rgba(173,214,255,.25)}
.xm-pole__ball{position:absolute;left:14px;bottom:88px;width:23px;height:23px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0%,#dfeaef 48%,#a9bfc9 100%);
  box-shadow:0 0 16px rgba(190,225,255,.45)}
.xm-pole__sign{position:absolute;left:28px;bottom:40px;white-space:nowrap;transform:rotate(-4deg);
  background:linear-gradient(#f6f1e4,#e7dfca);color:#20331f;border:1.5px solid #b6a479;border-radius:3px;
  padding:4px 9px 5px;font-family:var(--serif);font-size:.72rem;font-weight:700;letter-spacing:.06em;
  box-shadow:0 3px 8px rgba(0,0,0,.4)}

/* Houston */
.xm-city{position:absolute;right:clamp(14px,3.2cqw,46px);bottom:0;width:184px;height:120px;z-index:3}
.xm-city__glow{position:absolute;left:-10px;right:-20px;bottom:0;height:62px;pointer-events:none;
  background:radial-gradient(ellipse 80% 120% at 55% 100%,rgba(255,205,130,.34),transparent 70%)}
.xm-city__sky{position:absolute;right:0;bottom:0;width:184px;height:62px;display:block}
.xm-city__sign{position:absolute;right:6px;bottom:52px;white-space:nowrap;transform:rotate(2deg);
  background:var(--green-700);color:#f3efe2;border:1.5px solid var(--brass-300);border-radius:4px;
  padding:4px 10px 5px 24px;font-family:var(--serif);font-size:.74rem;font-weight:700;letter-spacing:.05em;
  box-shadow:0 3px 10px rgba(0,0,0,.45)}
.xm-city__star{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--brass-300)}

/* Santa — an animated SVG loaded as a plain <img>; the trot and the wave
   run inside the file. This element only moves him across the sky.
   He sits BELOW the signs and the countdown in the stack, so he launches
   out from behind the North Pole and disappears behind the Houston skyline. */
.xm-santa{position:absolute;top:0;left:-18%;width:300px;width:clamp(190px,24cqw,330px);
  z-index:2;pointer-events:none;animation:xmFlyX 19s linear infinite}
.xm-santa__in{position:relative;transform-origin:50% 60%;animation:xmFlyY 19s linear infinite}
.xm-santa__glow{position:absolute;inset:-18% -10%;
  background:radial-gradient(ellipse 50% 46% at 50% 52%,rgba(255,214,140,.22),transparent 72%)}
.xm-santa img{position:relative;display:block;width:100%;height:auto}
@keyframes xmFlyX{0%,4%{left:-18%}96%,100%{left:109%}}
@keyframes xmFlyY{
  0%,4%   {transform:translateY(52px) rotate(-7deg)}
  26%     {transform:translateY(26px) rotate(-4deg)}
  46%     {transform:translateY(6px)  rotate(-1deg)}
  66%     {transform:translateY(10px) rotate(3deg)}
  86%     {transform:translateY(34px) rotate(5deg)}
  96%,100%{transform:translateY(56px) rotate(7deg)}
}

/* Days until Christmas */
.xm-count{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;
  padding:8px 15px 9px;white-space:nowrap;text-decoration:none;
  background:rgba(8,21,15,.74);border:1px solid rgba(168,132,60,.62);
  border-radius:var(--radius-sm);box-shadow:0 6px 20px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s}
.xm-count:hover{border-color:var(--brass-300)}
.xm-count__row{margin:0;display:none;align-items:center;gap:11px}
.xm-count__merry,.xm-count__wait{margin:0;display:none;font-family:var(--serif);font-style:italic;
  font-size:1.02rem;color:var(--brass-300)}
.xm-count[data-state="count"] .xm-count__row{display:flex}
.xm-count[data-state="merry"] .xm-count__merry{display:block}
.xm-count[data-state="init"]  .xm-count__wait{display:block}
.xm-count__num{font-family:var(--serif);font-size:1.72rem;font-weight:700;line-height:1;
  color:var(--brass-300);font-variant-numeric:tabular-nums;
  min-width:3ch;text-align:center;display:inline-block}            /* holds the box 364 -> 1 */
.xm-count__words{display:flex;flex-direction:column;line-height:1.18}
.xm-count__unit{font-size:.7rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#f1ead9}
.xm-count__till{font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,234,217,.62)}
.xm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){ .xm-count[data-tick] .xm-count__num{animation:xmTick .5s var(--ease)} }
@keyframes xmTick{0%{transform:translateY(-7px);opacity:0}100%{transform:none;opacity:1}}

/* ── 3. Header: the toggle ─────────────────────────────────────────────── */
.xm-toggle{display:none}
/* christmas.js inserts the toggle after first paint. Without this the whole
   desktop nav slides 71px left on every page load in season (layout shift).
   Same width as the toggle, removed the moment the real one is in place. */
html[data-season-available]:not(.xm-tg-ready) .header__cta::before{
  content:"";flex:none;width:var(--xm-tg-w);height:44px}
html[data-season-available] .xm-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  width:var(--xm-tg-w);flex:none;min-height:44px;padding:0 10px;border-radius:999px;cursor:pointer;
  font:600 .9rem/1 var(--sans);color:var(--green-800);background:transparent;
  border:1.5px solid var(--line);transition:background .25s var(--ease),color .25s,border-color .25s}
html[data-season-available] .xm-toggle:hover{border-color:var(--brass-300)}
.xm-toggle:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.xm-toggle svg{width:17px;height:17px;flex:none}
.xm-toggle__bulb{fill:none;transition:fill .3s}
html[data-season="christmas"] .xm-toggle{background:var(--holly);color:#fff6ee;border-color:transparent;
  box-shadow:0 2px 0 #8a1822}
html[data-season="christmas"] .xm-toggle:hover{background:#9b1b26}

/* Room for the toggle. The header is capped at 1200px wide and is already
   full: on the live site the phone number wraps at 1024px. So the toggle goes
   icon-only below 1248px, the nav gaps tighten a little in season, and the
   phone is held to one line wherever that fits. No extra nav link: the
   countdown plaque directly above links to the lights page on every page. */
@media (min-width:981px) and (max-width:1247px){
  html[data-season-available] .xm-toggle{padding:0;gap:0}
  html[data-season-available] .xm-toggle .xm-toggle__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  html[data-season-available] .nav{gap:20px}
}
@media (min-width:981px) and (max-width:1100px){
  html[data-season-available] .nav{gap:14px}
  html[data-season-available] .header__cta{gap:10px}
}
@media (min-width:1101px){ html[data-season-available] .header__phone{white-space:nowrap} }

/* ── 4. Light garland hanging from the (sticky) header ──────────────────── */
.xm-garland{position:absolute;left:0;right:0;top:100%;height:36px;pointer-events:none;
  overflow-x:clip;opacity:0;transition:opacity .5s var(--ease) .15s}   /* last bulb overhung 5px -> sideways scroll */
html[data-season="christmas"] .xm-garland{opacity:1}
.header.nav-open .xm-garland{opacity:0;transition:none}     /* don't hang over the open mobile menu */
.xm-garland svg{position:absolute;inset:0;width:100%;height:100%}
.xm-bulb{position:absolute;width:9px;height:9px;border-radius:50% 50% 60% 60%;transform:translateX(-50%)}
.xm-bulb::before{content:"";position:absolute;left:50%;top:-3px;transform:translateX(-50%);
  width:4px;height:4px;background:#2e3d34;border-radius:1px}
@media (prefers-reduced-motion:no-preference){ .xm-bulb{animation:xmTwinkle var(--d,3s) ease-in-out var(--o,0s) infinite alternate} }
@keyframes xmTwinkle{from{opacity:.68}to{opacity:1}}

/* ── 5. Snow (inside the band and the top hero only) ────────────────────── */
.xm-snow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;display:none}
html[data-season="christmas"] .xm-snow{display:block}
.xm-flake{position:absolute;top:-14px;border-radius:50%;background:#fff;
  animation:xmFall var(--t,10s) linear var(--o,0s) infinite}
@keyframes xmFall{
  0%  {transform:translate3d(0,-14px,0);opacity:0}
  12% {opacity:.85}
  88% {opacity:.7}
  100%{transform:translate3d(var(--dx,14px),var(--fd,420px),0);opacity:0}
}

/* ── 6. Homepage ─────────────────────────────────────────────────────────── */
/* hero photo: the lawn photo fades out, the lit house fades in over it */
html[data-season="christmas"] .hero__photo:not(.xm-photo){opacity:0}
.xm-photo{opacity:0;transition:opacity .7s var(--ease)}
html[data-season="christmas"] .xm-photo.is-in{opacity:1}
html:not([data-season="christmas"]) .xm-photo{display:none}

/* the seasonal service card: photo + link swap; Kaden's own copy is untouched */
.svc-card .xm-cardphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .6s var(--ease)}
html[data-season="christmas"] .svc-card .xm-cardphoto.is-in{opacity:1}
html[data-season="christmas"] [data-xm-card] .svc-card__no{z-index:2}   /* the photo is inserted after it and would paint over it */
html:not([data-season="christmas"]) .svc-card .xm-cardphoto{display:none}
.xm-badge{position:absolute;top:14px;right:14px;z-index:2;font:700 .62rem/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;background:var(--brass-300);color:#3a2c0c;border-radius:3px;padding:5px 8px}
html[data-season="christmas"] .svc-card[data-xm-card]{box-shadow:0 0 0 1.5px rgba(173,31,43,.28),var(--shadow-sm,0 1px 2px rgba(0,0,0,.06))}
html[data-season="christmas"] .svc-card[data-xm-card]:hover{box-shadow:0 0 0 1.5px rgba(173,31,43,.28),0 14px 36px rgba(16,35,26,.10)}

/* the gallery */
.xm-gallery{display:none;background:var(--green-900);color:#fff}   /* spacing comes from .section */
html[data-season="christmas"] .xm-gallery{display:block}
.xm-gallery .section-head h2{color:#fff}
.xm-gallery .section-head p{color:rgba(255,255,255,.7)}
/* CSS columns, not a cropped grid: these photos run from 0.87 to 1.54 in
   aspect ratio, and object-fit:cover would cut the walkway out of the tall
   shot and the roofline off the wide ones. Every photo shows whole. */
.xm-gallery__grid{columns:3;column-gap:16px}
.xm-gallery__grid figure{break-inside:avoid;margin:0 0 16px;border-radius:var(--radius-sm);overflow:hidden;
  position:relative;background:#06110c;border:1px solid rgba(255,255,255,.07)}
.xm-gallery__grid img{display:block;width:100%;height:auto;transition:transform .7s var(--ease)}
.xm-gallery__grid figure:hover img{transform:scale(1.035)}
.xm-gallery__grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  font-size:.8rem;line-height:1.35;color:rgba(255,255,255,.94);background:linear-gradient(transparent,rgba(4,12,8,.88))}
.xm-gallery__cta{text-align:center;margin-top:28px}

/* ── 7. Narrow screens ──────────────────────────────────────────────────── */
@media (max-width:980px){
  .xm-count{bottom:8px;padding:6px 12px 7px}
  .xm-count__row{gap:9px}
  .xm-count__num{font-size:1.4rem}
  .xm-count__till{display:none}
  .xm-count__merry,.xm-count__wait{font-size:.9rem}
  .xm-gallery__grid{columns:2}
}
@media (max-width:620px){
  /* kept, compact: on inner pages this is the only route to the lights page.
     Centred in the gap between the pole sign (ends ~99px in) and the scaled
     skyline (~150px from the right), which is 25px left of the screen centre. */
  .xm-count{bottom:6px;padding:4px 9px 5px;left:calc(50% - 25px)}
  .xm-count__row{gap:6px}
  .xm-count__num{font-size:1.1rem}
  .xm-count__unit{font-size:.58rem;letter-spacing:.12em}
  .xm-count__merry,.xm-count__wait{font-size:.8rem}
  .xm-pole{transform:scale(.76);transform-origin:left bottom}
  .xm-city{transform:scale(.74);transform-origin:right bottom}
  /* icon-only toggle so the header row still fits next to the menu button */
  html[data-season-available] .xm-toggle{padding:0;gap:0}
  .xm-toggle__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (max-width:560px){ .xm-gallery__grid{columns:1} }
@media (max-width:420px){ .xm-count__merry,.xm-count__wait{font-size:.72rem} }
@media (max-width:340px){ .xm-count{display:none} }    /* no room left between the signs */

/* ── 8. Reduced motion: Santa parks mid-flight, everything else holds still ─ */
@media (prefers-reduced-motion:reduce){
  .xm-santa{animation:none;left:38%}
  .xm-santa__in{animation:none;transform:translateY(6px)}
  .xm-snow{display:none!important}
  .xm-band{transition:none}
}