/* ─────────────────────────────────────────────────────────────────────
   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 CTA button (text-only "SHOP ON AMAZON ↗") ──────────────
   We replaced the official "Available at Amazon" badge PNG with a custom
   text button. This is Trademark-safe — no Amazon logo or marks at all,
   just the word "Amazon" in plain text (allowed under nominative use).
   Identical link href + sponsored rel attrs as before; only the visual
   treatment changed. Matches the style of other CTAs on the site
   (.cal-page-cta-btn, .fb-submit etc.) — ember bg, cream text, mono. */
.amazon-badge-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 18px;
  background: var(--ember, #FF6B35);
  color: var(--cream, #F5F1E8);
  border: 1.5px solid var(--ember, #FF6B35);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), 0 3px 8px rgba(255, 107, 53, 0.22);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.18s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.amazon-badge-link:hover {
  background: var(--ember-deep, #D9421A);
  border-color: var(--ember-deep, #D9421A);
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12), 0 8px 18px rgba(255, 107, 53, 0.32);
}
.amazon-badge-link:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), 0 2px 5px rgba(255, 107, 53, 0.20);
}
.amazon-badge-link .amazon-cta-arrow {
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  display: inline-block;
  transition: transform 0.18s ease;
  margin-left: -2px;
}
.amazon-badge-link:hover .amazon-cta-arrow { transform: translate(2px, -2px); }

/* Legacy .amazon-badge img class — kept as hidden so any stale cached
   HTML doesn't show a broken image while service workers update. */
.amazon-badge { display: none !important; }

/* 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;
  align-self: center;
  margin-right: auto;
}
.footer-amazon { margin-top: 18px; }

/* Phone breakpoint: restructure the navbar into a 5-column grid so every
   action button (watchlist + cart + hamburger) sits paired on row 1 next
   to the search bar, and the Amazon CTA gets its own clean row 2 spanning
   full width. Before this layout the icons were forced into the badge
   cell via a separate rule and ended up overlapping the Amazon CTA — UI
   read as "buttons scattered everywhere." Now:
       ┌──────┬───────┬───┬───┬───┐
       │ logo │search │ ♥ │ 🛒│ ☰ │   row 1: brand + search + actions
       ├──────┴───────┴───┴───┴───┤
       │      Shop on Amazon ↗    │   row 2: full-width CTA
       └──────────────────────────┘ */
@media (max-width: 720px) {
  nav,
  header.navbar .nav-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo   search    watch   cart   profile hamburger"
      "badge  badge     badge   badge  badge   badge";
    align-items: center;
    column-gap: 6px;
    row-gap: 8px;
  }
  nav > .logo,
  header.navbar .logo            { grid-area: logo;      justify-self: start; }
  nav > .nav-search,
  header.navbar .nav-search       { grid-area: search;    justify-self: stretch; }
  nav .nav-icon-watchlist         { grid-area: watch;     justify-self: end; }
  nav .nav-icon-cart              { grid-area: cart;      justify-self: end; }
  nav .nav-icon-profile           { grid-area: profile;   justify-self: end; }
  nav > .hamburger,
  header.navbar .hamburger        { grid-area: hamburger; justify-self: end; }
  .header-amazon                  { grid-area: badge;     justify-self: stretch; }

  /* Amazon CTA fills the bottom row. Lose the desktop margin-left and
     left-divider, center the text so it reads as a clear full-width
     button-card under the action row. */
  .header-amazon {
    margin: 0 !important;
    border-left: 0 !important;
    padding: 8px 14px !important;
    text-align: center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .header-amazon .amazon-badge { width: 100%; }
}
@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. Keep the button-card frame on the badge. */
@media (max-width: 380px) {
  .header-amazon {
    margin-left: 0;
    border-left: 0;
    padding: 6px 10px !important;
  }
  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. Two markup variants ship
   across the site: index.html nests the wordmark in `.footer-brand .logo`
   (inheriting `color: var(--cream)`), most other pages put the text
   directly inside `.footer-brand` as text nodes. In dark mode --cream
   inverts to dark navy, which made the "Buy" and "season" halves
   invisible against the locked dark footer background — only the ember
   ".off" half stayed visible. Lock the wordmark to full-opacity cream
   here for both layouts. */
:root[data-theme="dark"] .footer-brand,
:root[data-theme="dark"] .footer-brand .logo,
: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;
}
/* Footer paragraph + small caption text — still readable, just softer */
: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;
}

/* ── 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;
}
