/* ─────────────────────────────────────────────────────────────────────
   Buy Off-Season — dark-mode token overrides

   theme.js sets data-theme="dark" on <html> when the user's preference
   resolves to dark (either explicit or via prefers-color-scheme:dark).
   This stylesheet overrides the brand color tokens so the existing
   inline <style> blocks in each page automatically re-theme.

   We only override the SHARED tokens. Per-component refinements (e.g.
   product cards, charts) get tweaked here when contrast needs it.
   ───────────────────────────────────────────────────────────────────── */

/* ── "Available at Amazon" badge — official asset, theme-aware ──
   Injected by nav-settings.js into the header (next to logo) and
   footer. Two variants ship in the markup; CSS shows the right one:
     • badge-light (dark SQUID art) → on light surfaces
     • badge-dark  (white art)      → on dark surfaces
   Compliance: official unmodified PNG, ≥140px wide horizontal, wrapped
   in the affiliate link, clear space preserved via margins. */
.amazon-badge-link {
  display: inline-block;
  line-height: 0;
  transition: opacity 0.15s;
}
.amazon-badge-link:hover { opacity: 0.82; }
.amazon-badge {
  width: 150px;       /* ≥140px Amazon minimum for the horizontal badge */
  height: auto;
  display: block;
}
/* Default (light theme): show dark-art badge, hide white-art badge */
.amazon-badge.badge-dark { display: none; }
:root[data-theme="dark"] .amazon-badge.badge-light { display: none; }
:root[data-theme="dark"] .amazon-badge.badge-dark { display: block; }

/* Header placement — glued to the logo (left), with clear space + a
   divider so it reads as a separate link, not a fused co-brand lockup.
   `margin-right: auto` pushes everything that comes after (nav-auth,
   icon buttons, hamburger) all the way to the right edge of the header,
   while the badge itself stays anchored next to the logo. */
.header-amazon {
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid rgba(20,24,43,0.15);
  align-self: center;
  margin-right: auto;
}
:root[data-theme="dark"] .header-amazon {
  border-left-color: rgba(245,241,232,0.18);
}
.header-amazon .amazon-badge { width: 140px; }  /* Amazon minimum for horizontal badge */
/* The footer is ALWAYS dark navy → force the white badge there
   regardless of theme. */
footer .amazon-badge.badge-light,
.footer .amazon-badge.badge-light { display: none !important; }
footer .amazon-badge.badge-dark,
.footer .amazon-badge.badge-dark { display: block !important; }
.footer-amazon { margin-top: 18px; }

/* Phone breakpoint: HIDE the Amazon badge in the navbar entirely.
   Amazon's horizontal badge has a hard 140px width minimum which we
   can't fit alongside the logo + search input + hamburger on a 375px
   phone. The badge remains visible (and affiliate-compliant) via the
   footer on every page + the mobile hamburger drawer. */
@media (max-width: 720px) {
  .header-amazon { display: none !important; }
}
@media (max-width: 640px) {
  /* Shrink the logo on phones so [logo · search · hamburger] fits at 375px */
  nav .logo img,
  header.navbar .logo img {
    height: 48px !important;
  }
  /* Trim nav padding for more content room */
  nav,
  header.navbar .nav-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* Narrowest phones (≤380px): shrink logo once more so 320px–375px
   screens don't overflow. */
@media (max-width: 380px) {
  .header-amazon {
    margin-left: 8px;
    padding-left: 0;
    border-left: 0;
  }
  nav .logo img,
  header.navbar .logo img {
    height: 40px !important;
  }
}

/* Base trademark-attribution styling (applies on every page's footer,
   not just the homepage which had it inline). Footer is dark in both
   themes, so light cream at low opacity reads correctly. */
.footer-trademark {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: rgba(245, 241, 232, 0.40);
  max-width: 1400px;
  margin: 14px auto 0;
  padding: 0 4px;
  text-align: center;
}

:root[data-theme="dark"] {
  /* Brand surface palette inverted */
  --cream: #0F1220;          /* was #FFFFFF — primary surface  */
  --paper: #1A1F33;          /* was #F7F7F8 — sectioned bands  */
  --ink:   #F5F1E8;          /* was #14182B — primary text     */
  --ink-soft: rgba(245,241,232,0.72);  /* was #2A3045 — secondary text */

  /* Ember stays — it pops on dark backgrounds */
  --ember: #FF6B35;
  --ember-deep: #FFB347;     /* swap deep ↔ light in dark for hover */
  --ember-light: #E14A14;
  --frost: #7FC8F8;          /* lighter blue reads better on dark */
  --frost-deep: #B8E0FF;
  --frost-light: #2E5B9E;

  /* Gold and rule re-toned for contrast on dark */
  --gold: #D4A852;
  --rule: rgba(245,241,232,0.16);
}

/* ── Body/document tone in dark ── */
:root[data-theme="dark"] body {
  background: var(--cream);
  color: var(--ink);
}

/* ── Inputs + buttons: re-tone backgrounds that were hardcoded white ── */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: var(--paper);
  color: var(--ink);
  border-color: rgba(245,241,232,0.20);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: rgba(245,241,232,0.42);
}

/* ── Product cards: rebalance the hardcoded white surfaces ── */
:root[data-theme="dark"] .pcard,
:root[data-theme="dark"] .holiday-card {
  background: var(--paper);
  border-color: rgba(245,241,232,0.10);
}

/* ── CRITICAL: product-image containers stay LIGHT in dark mode ──
   Amazon's product photography is shot on white/transparent backgrounds.
   If we tinted these dark, product silhouettes would disappear into the
   surface. We keep a fixed warm cream — a neutral neither too bright
   (jarring on dark) nor dark enough to swallow product photos. */
:root[data-theme="dark"] .pcard-stage,
:root[data-theme="dark"] .pcard-img,
:root[data-theme="dark"] .holiday-card-product,
:root[data-theme="dark"] .pdp-stage:has(img),
:root[data-theme="dark"] .cal-card-featured-img,
:root[data-theme="dark"] .splash-product-img,
:root[data-theme="dark"] .product-vis,
:root[data-theme="dark"] .hero-deal .product-vis,
:root[data-theme="dark"] .deal-card .product-vis,
:root[data-theme="dark"] .ds-slide .product-vis,
:root[data-theme="dark"] .adrc-product,
:root[data-theme="dark"] .adst-product,
:root[data-theme="dark"] .adh-product,
:root[data-theme="dark"] .adr-product {
  background: #F2EBDB !important;  /* fixed warm cream — keeps product photos visible */
}

/* Cart row images — outer dark frame stays dark (design intent), but
   the inner <img> background needs to stay light or mix-blend-mode
   multiply would wash product photos out. */
:root[data-theme="dark"] .cart-item-img {
  background: #14182B !important;  /* keep dark frame regardless of theme */
}
:root[data-theme="dark"] .cart-item-img img {
  background: #F2EBDB !important;  /* light surface under the multiply blend */
}

/* Homepage trending grid (.product .vis) — colored gradient backgrounds
   stay as-is in light mode but get a light overlay in dark mode so
   product photos read with contrast against the dark surface. */
:root[data-theme="dark"] .product {
  background: var(--paper) !important;
  border-color: rgba(245,241,232,0.10) !important;
}
:root[data-theme="dark"] .product .vis,
:root[data-theme="dark"] .product.cold .vis,
:root[data-theme="dark"] .product.warm .vis,
:root[data-theme="dark"] .product.holiday .vis {
  background: #F2EBDB !important;
}
:root[data-theme="dark"] .product .vis .product-vis-img {
  background: transparent;
}

/* Login / auth page in dark mode —
   the auth-lede subtitle uses var(--ink-soft) which already flips, but
   the auth-page background and card need explicit theme overrides
   because login.html ships with its own --cream + --paper assignments
   that override the inherited tokens. */
:root[data-theme="dark"] .auth-page {
  background: var(--cream, #0F1220) !important;
}
:root[data-theme="dark"] .auth-card {
  background: var(--paper, #1A1F33) !important;
  border-color: rgba(245,241,232,0.10) !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4) !important;
}
:root[data-theme="dark"] .auth-lede,
:root[data-theme="dark"] .auth-fineprint,
:root[data-theme="dark"] .auth-secondary {
  color: rgba(245,241,232,0.80) !important;
}
:root[data-theme="dark"] .auth-title {
  color: var(--ink, #F5F1E8) !important;
}
:root[data-theme="dark"] .auth-back {
  color: rgba(245,241,232,0.72) !important;
}

/* When the PDP image stage has no real photo (SVG icon fallback),
   keep the dark navy treatment so the brand monogram still glows. */
:root[data-theme="dark"] .pdp-stage:not(:has(img)) {
  background: var(--ink, #14182B);
}

/* ── Header chrome ── */
:root[data-theme="dark"] header {
  background: var(--cream);
  border-color: var(--rule);
}

/* ── "Always-dark anchor" surfaces ──
   These sections are designed as deep-navy contrast blocks in both
   themes (footer, pitch section, splash CTA, holiday "all" tile,
   current-month calendar card, etc.). They use `var(--ink)` + `var(--cream)`
   in their inline CSS. When dark mode flips those tokens, the surfaces
   invert and end up cream-bg with cream-text — invisible.

   We lock them here to a constant dark navy + light cream so the
   contrast holds in BOTH themes. */
:root[data-theme="dark"] footer,
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .pitch,
:root[data-theme="dark"] .splash-section--cta,
:root[data-theme="dark"] .hol-all,
:root[data-theme="dark"] .cal-card.current {
  background: #14182B !important;
  color: #F5F1E8 !important;
}
:root[data-theme="dark"] .pitch h2,
:root[data-theme="dark"] .pitch h4,
:root[data-theme="dark"] .pitch .pitch-point h4,
:root[data-theme="dark"] .splash-section--cta h2,
:root[data-theme="dark"] .splash-section--cta h3 {
  color: #F5F1E8 !important;
}
:root[data-theme="dark"] .pitch p,
:root[data-theme="dark"] .pitch .pitch-point p,
:root[data-theme="dark"] .splash-section--cta p {
  color: rgba(245,241,232,0.85) !important;
}
:root[data-theme="dark"] .pitch .num,
:root[data-theme="dark"] .pitch .accent {
  color: #FF6B35 !important;  /* keep ember accent */
}

/* Dark primary buttons (used across the site) — lock to dark navy + cream */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .signup-form button {
  background: #14182B !important;
  color: #F5F1E8 !important;
  border-color: #14182B !important;
}
:root[data-theme="dark"] .btn-ghost {
  background: transparent !important;
  color: #F5F1E8 !important;
  border-color: rgba(245,241,232,0.30) !important;
}
:root[data-theme="dark"] .btn-ghost:hover {
  background: #F5F1E8 !important;
  color: #14182B !important;
}
:root[data-theme="dark"] footer a,
:root[data-theme="dark"] .footer a,
:root[data-theme="dark"] .footer-col a,
:root[data-theme="dark"] .footer-links a {
  color: rgba(245,241,232,0.72) !important;
}
:root[data-theme="dark"] footer a:hover,
:root[data-theme="dark"] .footer a:hover,
:root[data-theme="dark"] .footer-col a:hover,
:root[data-theme="dark"] .footer-links a:hover {
  color: #F5F1E8 !important;
}
:root[data-theme="dark"] .footer-col h5 {
  color: #FF6B35 !important;  /* ember accent stays */
}
:root[data-theme="dark"] .footer-brand,
:root[data-theme="dark"] .footer-brand p,
:root[data-theme="dark"] .footer-copy,
:root[data-theme="dark"] .footer-bottom {
  color: rgba(245,241,232,0.85) !important;
}
:root[data-theme="dark"] .footer-bottom span,
:root[data-theme="dark"] .footer-bottom .disclosure {
  color: rgba(245,241,232,0.60) !important;
}
/* The big BUY/OFFSEASON wordmark in the footer */
:root[data-theme="dark"] .footer-brand .word,
:root[data-theme="dark"] .footer-brand strong {
  color: #F5F1E8 !important;
}
:root[data-theme="dark"] .footer-brand .off,
:root[data-theme="dark"] .footer-brand .ember {
  color: #FF6B35 !important;
}

/* ── Section dividers, card borders, dashed lines ── */
:root[data-theme="dark"] .pdp-pricechart-stat,
:root[data-theme="dark"] .pdp-pricechart-chart {
  background: var(--paper);
  border-color: rgba(245,241,232,0.10);
}
:root[data-theme="dark"] .pdp-pricechart-svg line[stroke*="20,24,43"] {
  stroke: rgba(245,241,232,0.10) !important;
}
:root[data-theme="dark"] .pdp-pricechart-svg text {
  fill: rgba(245,241,232,0.65) !important;
}

/* ── Sparkline area fill — slightly stronger on dark for visibility ── */
:root[data-theme="dark"] .pcard-sparkline path[fill*="255,107,53"] {
  fill: rgba(255,107,53,0.20) !important;
}

/* ── Calendar page month cards ── */
:root[data-theme="dark"] .cal-card {
  background: var(--paper);
  border-color: rgba(245,241,232,0.10);
}
:root[data-theme="dark"] .cal-card-featured {
  background: rgba(255,107,53,0.10);
  border-color: rgba(255,107,53,0.28);
}
:root[data-theme="dark"] .cal-card-featured-img {
  background: var(--cream);
  border-color: rgba(245,241,232,0.10);
}

/* ── Holiday section banners — keep their themed backgrounds; lighten card body ── */
:root[data-theme="dark"] .holiday-card-body { color: var(--ink); }
:root[data-theme="dark"] .holiday-card-pitch { color: var(--ink-soft); }
:root[data-theme="dark"] .holiday-card-foot {
  border-top-color: rgba(245,241,232,0.18);
}

/* ── Was/List badge contrast tune ── */
:root[data-theme="dark"] .pcard-was,
:root[data-theme="dark"] .pdp-price-was {
  color: rgba(245,241,232,0.65);
}

/* ─── Seamless theme transition ──────────────────────────────────────
   When the user toggles light↔dark, every element with a themed color,
   background, border, fill, or shadow fades smoothly over 320ms. We
   ONLY animate color-family properties — never opacity, transform,
   filter, font-size, etc. — so:
     • Fonts don't reflow or jitter
     • Images don't fade or distort (they stay sharp)
     • Layout doesn't shift
     • Charts don't redraw their geometry
   The result is a smooth crossfade of every surface in the UI while
   text and product photography stay exactly as they were.
   ───────────────────────────────────────────────────────────────── */
*:not(html):not(body) {
  transition:
    background-color 0.32s ease,
    color            0.32s ease,
    border-color     0.32s ease,
    fill             0.32s ease,
    stroke           0.32s ease,
    box-shadow       0.32s ease,
    outline-color    0.32s ease;
}
/* Belt-and-suspenders: explicitly disable any transition on raster
   media. Even though we don't transition image-affecting props, this
   guarantees zero animation of <img>, <video>, <picture>, <canvas>
   if a future style accidentally targets them. */
img, video, picture, canvas {
  transition: none !important;
}
/* During the initial page paint we want INSTANT theme application —
   no fade from light→dark on first load. theme.js adds + removes
   this class around its initial setAttribute call. */
:root.no-theme-transition,
:root.no-theme-transition * {
  transition: none !important;
}
