/* ============================================================================
   Winter theme overlay for templates/landing.html
   Loaded ONLY when season == 'winter' (see current_season() in app.py).

   Re-skin, not a re-paint: every summer declaration this page touches now
   reads var(--mnm-*) (static/css/tokens.css, tools/harvester). Winter changes
   what those tokens EQUAL under html[data-season="winter"] -- it does not
   restate the declarations. The only per-class rules left below are ones a
   token override cannot express (a summer property whose winter version is a
   different FORMULA -- solid -> gradient -- or a summer token shared by
   another element that must stay unchanged); every one of those rules is
   composed only of var() references, never a literal colour.
   Source: F:\CleanupClaude\hearth_audits\mnm_inventory\winter-home-v3-minimal.html
   (draft 2, "minimal"), 2026-09-12. See docs/SEASON_OVERLAY.md.
   ============================================================================ */

html[data-season="winter"] {
  /* ---- token value overrides: same --mnm-* names static/css/tokens.css
     defines for summer, re-pointed at the winter palette. Each comment names
     the summer literal being replaced and the declaration(s) that pick it up
     automatically (landing.html's own <style> block is never edited). ---- */
  --mnm-ink:             #0a1524;               /* was #0f172a -- body, .section-title, ink-on-light text */
  --mnm-navy:            #0a1220;               /* was #0f172a -- hero/why/hiring/cta-strip gradient stop 1 */
  --mnm-ink-2:           #16233a;               /* was #1e293b -- hero/why/hiring/cta-strip gradient stop 2 */
  --mnm-ink-2-b:         #131f34;               /* was #172033 -- hero/hiring gradient stop 3 */
  --mnm-bg-slate-dark-4: rgba(6,12,22,.96);     /* was rgba(15,23,42,.96) -- .topnav background */
  --mnm-bg-red:          rgba(127,185,228,.14); /* was rgba(220,38,38,.15) -- .step-meta bg (ice); lint-ok: token definition block (guide Q6), value unchanged, only this comment was edited */
  --mnm-brand-4:         rgba(127,185,228,.4);  /* was rgba(220,38,38,.4) -- .btn-hiring glow (ice); lint-ok: token definition block (guide Q6), value unchanged, only this comment was edited */
  --mnm-danger-4-text:   #bfe0f7;               /* was #fca5a5 -- unused on this page since the hero badge was removed; kept for other -ondark consumers; lint-ok: token definition block (guide Q6), value unchanged */
  --mnm-ink-5:           #7fb9e4;               /* was #f87171 -- hero h1 span, why/hiring .section-label, .why-card i, .service-pill i */
  --mnm-accent-on-dark:  #7fb9e4;
  --mnm-faint:           #a9c3da;               /* was #94a3b8 -- hero p, .hero-sub a, .why-card p, .hiring-section .lead, footer a:hover, .resume-callout p */
  --mnm-muted:           var(--mnm-muted-2);    /* P18: was #7992ab (tuned for the dark hero, 3.2:1 on the light cards); the hero sub-line now takes --mnm-muted-2-ondark */
  --mnm-muted-2:         #3c4c5e;               /* P18: was #5c7590 (4.5:1 on the page ground); 7.4:1 on #e3ecf5, 8.6:1 on the cards */
  /* on-dark set in winter blues (P18): tokens.css's are slate; these keep the hero and dark bands in the season */
  --mnm-muted-ondark:    #a9c3da;
  --mnm-muted-2-ondark:  #c6d8e8;
  --mnm-text-ondark:     #dff0fb;
  --mnm-faint-ondark:    #8aa5c0;
  --mnm-surface:         #fbfdff;               /* was #ffffff -- .step-card/.services-section/panels/un-classed light sections */
  --mnm-line:            #cad9e8;               /* was #e2e8f0 -- .step-card/panel/light-section borders */
  --mnm-bg:              #e3ecf5;               /* was #f8fafc -- .steps-section bg */
  --mnm-bg-2:            #dce8f2;               /* was #f1f5f9 -- .step-extras border, info chips */
  --mnm-danger-3-b:      rgba(127,185,228,.14); /* was #fee2e2 -- .service-pill:hover bg (ice) */
  --mnm-danger-4:        rgba(127,185,228,.4);  /* was #fca5a5 -- .service-pill:hover border (ice) */
  --mnm-shade-black-4:   rgba(3,10,22,.55);     /* was rgba(0,0,0,.08) -- .step-card:hover shadow */
  --mnm-warning-3:       #16273c;               /* was #fef3c7 -- .resume-callout gradient stop 1 */
  --mnm-danger-6-fill:   #0d1a29;               /* was #fde68a -- .resume-callout gradient stop 2 */
  --mnm-warning-5:       rgba(127,185,228,.3);  /* was #fcd34d -- .resume-callout border */
  --mnm-danger-7:        #dff0fb;               /* was #7c2d12 -- .resume-callout h4 */
  --mnm-brand-7:         #a9c3da;               /* was rgba(255,255,255,.8) -- .cta-strip p */
  --mnm-bg-slate-dark-5: #050a13;               /* was #020617 -- footer bg */
  --mnm-line-white:      rgba(127,185,228,.16); /* was rgba(255,255,255,.08) -- .why-card border */
  --mnm-bg-white-6:      rgba(127,185,228,.07); /* was rgba(255,255,255,.05) -- .why-card bg */

  /* ---- winter-only values: no summer declaration uses these, so they stay
     local custom properties rather than tokens.css entries -- used only by
     the button finish, snow/drift effects and the tiny exception rules
     below (all still var()-only, never a literal, in the rules that follow). */
  --w-ice-ink:     #3f7fac;
  --w-shadow:      rgba(3,10,22,.55);
  --w-amber:       #e9a13f;
  --w-amber-deep:  #c9781c;
  --w-amber-ink:   #2a1705;
  --w-footer-text: #8a9eb8;   /* was #587091 (3.9:1); 7.2:1 on the footer, P18's 7:1 floor for small text */
  --w-footer-link: #9db2c6;   /* was #7c98b3 (6.6:1); 9.1:1 */
  /* the one site footer (templates/_footer.html, P18): dark tone in these blues, light tone in winter ink */
  --mnm-footer-dark-text:    var(--w-footer-text);
  --mnm-footer-dark-link:    var(--w-footer-link);
  --mnm-footer-dark-strong:  var(--mnm-faint);
  --mnm-footer-light-text:   var(--mnm-text);
  --mnm-footer-light-link:   var(--mnm-ink);
  /* WARM BRASS (Joseph, 2026-09-21: "Add warm brass as an accent"). The winter
     palette is all cold blues, so one warm metal keeps it from feeling clinical
     and gives the calls to action somewhere to live. Brass on the dark hero is
     about 8.0:1; brass-deep on the light card ground is about 4.6:1, so both
     are safe for text. The pale brass is EDGES ONLY. */
  --w-brass:       #c9a227;
  --w-brass-lit:   #e3c05a;
  --w-brass-deep:  #8a6d12;
  --w-brass-ink:   #2a2105;
  --mnm-accent:        #5c480c;   /* SG-4 + P18: winter's accent, the deepest brass: 7.4:1 on the page ground #e3ecf5, white on it 8.9:1 (was #765d0f, 5.26:1; small labels need 7:1) */
  --mnm-accent-soft:   #f4efdc;
  --mnm-accent-soft-2: #ece3c4;
  --mnm-accent-line:   #d9c68a;
  --w-snow:        #eef5fb;
  --w-tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ================================================================
   Structural exceptions -- a token override alone can't express these
   (summer's declaration is a different FORMULA, or its token is shared
   with an element that must stay unchanged). Every value here is an
   existing var(), never a literal. Kept deliberately short.
   ================================================================ */
html[data-season="winter"] .cta-strip { background: linear-gradient(135deg, var(--mnm-navy), var(--mnm-ink-2)); }
html[data-season="winter"] .why-section { background: linear-gradient(135deg, var(--mnm-navy) 0%, var(--mnm-ink-2) 60%, var(--mnm-ink-2-b) 100%); }
html[data-season="winter"] .service-pill { background: var(--mnm-surface); border-color: var(--mnm-line); color: var(--mnm-ink); }
html[data-season="winter"] .service-pill:hover { color: var(--w-ice-ink); }
html[data-season="winter"] .service-pill i { color: var(--mnm-ink-5); }
html[data-season="winter"] .step-card .step-meta { background: var(--mnm-bg-red); color: var(--w-ice-ink); }
html[data-season="winter"] .resume-callout p { color: var(--mnm-faint); }

/* ---- winter nav mark: logo_winter.svg (report 134; was logo_winter.png, kept as the fallback file) is square 638x627 with alpha; the
   summer logo.png is a different aspect ratio, so fit it to the nav height
   without distorting instead of inheriting the summer img rule (sizing, not
   a colour -- no token involved). ---- */
/* Joseph 2026-09-22: "Add a white background to the winter logo, like the other logos have" (the summer/main
   logo has white baked in; chimney sits on a light plate). Same plate idea, white, same 36px box. */
html[data-season="winter"] .topnav-brand img { height: 36px; width: 36px; object-fit: contain; box-sizing: border-box;
  padding: 3px; border-radius: var(--mnm-radius-small); background: var(--mnm-surface); }

/* Report 143 (Joseph, 2026-09-28, WL-1), permanent since LG-1 (2026-09-29, "use full logos everywhere"):
   "none should use a backplate anymore, use the appropriate logo for the header color." _topnav.html now
   wears the dark-background mark and adds .topnav-flat-mark to the bar; this cancels the plate above
   rather than replacing it. The one exception left is report 144's own test-site-only winter_logo_svg
   switch: OFF there, _topnav.html leaves .topnav-flat-mark off and the plate above (the raster PNG's
   fallback look, as before report 134) is the untouched original rule -- see _topnav.html. */
html[data-season="winter"] .topnav.topnav-flat-mark .topnav-brand img { padding: 0; background: transparent; }

/* ---- hero snow-grain overlay (decorative texture, not a colour swap) ---- */
html[data-season="winter"] .hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--w-tex-grain); background-size: 150px; mix-blend-mode: overlay; opacity: .12;
}

/* ---- buttons: rustic amber finish, shared shape/padding/labels -- this
   whole visual (gradient, rim light, lip shadow, pressed state, grain) does
   not exist in summer at all, so it is new CSS, not a token override ---- */
html[data-season="winter"] .hero-cta,
html[data-season="winter"] .topnav-cta,
html[data-season="winter"] .btn-hiring,
html[data-season="winter"] .cta-strip .btn-light,
html[data-season="winter"] .btn.btn-dark.btn-lg,
html[data-season="winter"] .rc-btn {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f3b768 0%, var(--w-amber) 55%, var(--w-amber-deep) 100%);
  color: var(--w-amber-ink);
  border: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 #8a5a15, 0 10px 28px var(--w-shadow);
}
html[data-season="winter"] .hero-cta:hover,
html[data-season="winter"] .topnav-cta:hover,
html[data-season="winter"] .btn-hiring:hover,
html[data-season="winter"] .cta-strip .btn-light:hover,
html[data-season="winter"] .btn.btn-dark.btn-lg:hover,
html[data-season="winter"] .rc-btn:hover {
  background: linear-gradient(180deg, #f6c583 0%, #edb055 55%, var(--w-amber-deep) 100%);
  color: var(--w-amber-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 #8a5a15, 0 14px 34px var(--w-shadow);
}
html[data-season="winter"] .hero-cta:active,
html[data-season="winter"] .topnav-cta:active,
html[data-season="winter"] .btn-hiring:active,
html[data-season="winter"] .cta-strip .btn-light:active,
html[data-season="winter"] .btn.btn-dark.btn-lg:active,
html[data-season="winter"] .rc-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #8a5a15, 0 6px 18px var(--w-shadow);
}
html[data-season="winter"] .hero-cta::after,
html[data-season="winter"] .topnav-cta::after,
html[data-season="winter"] .btn-hiring::after,
html[data-season="winter"] .cta-strip .btn-light::after,
html[data-season="winter"] .btn.btn-dark.btn-lg::after,
html[data-season="winter"] .rc-btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--w-tex-grain); background-size: 130px; mix-blend-mode: overlay; opacity: .28;
}
html[data-season="winter"] .hero-cta::before,
html[data-season="winter"] .topnav-cta::before,
html[data-season="winter"] .btn-hiring::before,
html[data-season="winter"] .cta-strip .btn-light::before,
html[data-season="winter"] .btn.btn-dark.btn-lg::before,
html[data-season="winter"] .rc-btn::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
  background:
    radial-gradient(15px 9px at 19% 100%, var(--w-snow) 0 60%, transparent 64%),
    radial-gradient(21px 11px at 51% 100%, var(--w-snow) 0 60%, transparent 64%),
    radial-gradient(13px 8px at 82% 100%, var(--w-snow) 0 60%, transparent 64%),
    linear-gradient(0deg, var(--w-snow) 0 34%, rgba(238,245,251,.6) 68%, transparent 100%);
  opacity: .18;
}

/* ================================================================
   Effects: snow canvas, corner drifts, header-top drift, hero-bottom
   drift. These elements only exist in the DOM when season == 'winter'
   (see landing.html), so no display:none toggling is needed here --
   just their appearance. Positioning + drift shapes only, no tokens.
   ================================================================ */
/* The snow falls only inside the splash (Joseph 2026-09-22: "only where the map is visible ... BEHIND the top bar,
   the snow at the bottom of the splash, all text and buttons, and hidden everywhere else"). The canvas is a child
   of the hero, on the map's layer (0): the hero's content is z-index 1, the drift 2, the top bar is outside the
   hero, and the hero clips it (overflow: hidden). The ID outranks landing.html's `.hero > *:not(.hero-up-map)`. */
html[data-season="winter"] .hero > #snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.corner-drift { position: fixed; bottom: 0; z-index: 2; pointer-events: none; width: 46vw; height: 150px; max-width: 520px; }
.corner-drift.left  { left: -60px;  background: radial-gradient(60% 120% at 22% 118%, rgba(238,245,251,.20), rgba(238,245,251,.07) 45%, transparent 68%); }
.corner-drift.right { right: -60px; background: radial-gradient(60% 120% at 78% 118%, rgba(238,245,251,.17), rgba(238,245,251,.06) 45%, transparent 68%); }

/* The snow bar that hung over the top bar is gone (Joseph, 2026-09-21: "broken and isnt worth effort"). */

/* The drift sits on the bottom edge of the splash, which is now exactly one screen (chrome.css), so it
   is on the bottom edge of the screen when the page loads (Joseph, 2026-09-21: "delightful, but isnt
   properly placed. Make it so it is at the bottom of the page when it loads"). It used to be pulled
   back into the flow by landing.html's `.hero > *:not(.hero-up-map) { position: relative }`, which
   left it floating under the copy; this selector outranks that one. */
html[data-season="winter"] .hero > .mnm-hero-drift { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; line-height: 0; }
.mnm-hero-drift svg { display: block; width: 100%; height: 80px; }

/* ---- brass accents -------------------------------------------------------
   Used sparingly and only where the eye should go: the primary call to action,
   the icon on an in-season card, and a hairline on the season-change card. The
   ice blues stay in charge; brass is the warm note, not a second theme. */
html[data-season="winter"] .btn-main,
html[data-season="winter"] .hero-cta,
html[data-season="winter"] .cta-strip .btn-light {
  background: linear-gradient(180deg, var(--w-brass-lit), var(--w-brass));
  color: var(--w-brass-ink);
  border: 1px solid var(--w-brass-deep);
}
html[data-season="winter"] .tile .ico,
html[data-season="winter"] .svc-card .svc-icon {
  color: var(--w-brass-deep);   /* P18: was --w-brass, 2.4:1 on the light card; icons need 3:1 (this is 4.8:1) */
}
html[data-season="winter"] .tile .go,
html[data-season="winter"] .svc-go,
html[data-season="winter"] .foot a {
  /* .foot a: SG-7, 2026-09-23 -- /start and /s/<key>'s "Start a general ... request" /
     "Just start here" links reuse the same red-by-default rule the tile action line does
     (var(--mnm-danger), never repointed for winter -- only chimney repoints it), so without this
     they were the one red thing left on an otherwise brass winter picker.
     P18: --mnm-accent (the deepest brass, 7:1+) instead of --w-brass-deep (4.8:1): these lines are 13 px. */
  color: var(--mnm-accent);
}
html[data-season="winter"] .season-card.flipped {
  border-color: var(--w-brass);
  box-shadow: 0 0 0 4px rgba(201,162,39,.22), 0 8px 26px var(--mnm-shade-black-10);
}