/* =====================================================================================
   Light / dark theme.

   The site was designed dark-banded: header, heroes, "Who it's for", the mobile section,
   stats, closing CTA, visit, newsletter band and footer sit on navy (--ink*) with cream
   text. LIGHT is now the default; DARK is that original look, unchanged.

   How: <html data-theme="light|dark"> is set before first paint by the inline script in
   App.razor (localStorage "mela-theme", default light). Under light, the dark bands get
   cream backgrounds and their colour TOKENS are re-pointed — every rule inside a band
   already reads --cream-text / --cream-text-soft / --brass-bright / --line-on-dark, so
   re-pointing the tokens on the band re-skins it without touching the page stylesheets.

   Product mockups (hero card + chip, product-tour device, phone, chat card, map) are
   pictures of the app and stay dark in both themes: their tokens are reset below.

   Loaded LAST (after each page's own stylesheet) from App.razor, so equal-specificity
   rules here win.
   ===================================================================================== */

:root{
  /* Light band surfaces — between --paper-2 and --paper-3 so a band still reads as a band
     next to the --paper / --paper-2 sections around it. */
  --band-bg:#EAE1CD;
  --band-bg-2:#E4D8BF;   /* footer, map strip */
  --band-bg-3:#DFD1B4;   /* newsletter band */
  /* Accent for text on light bands. --brass-deep (#8A6A30) is only ~4.1:1 on these
     creams, under WCAG AA for the 11-12px kickers and footer headings; this is >= 5:1. */
  --brass-ink:#6E5120;
}

/* ---------- Light: re-point the tokens inside every dark band ---------- */
html[data-theme="light"] :is(header, .hero, .page-hero, .audience, .showcase, .mobile-section,
                             .stats, .final-cta, .visit, .newsletter-band, footer){
  --cream-text: var(--ink-text);
  --cream-text-soft: var(--ink-text-soft);
  --brass-bright: var(--brass-ink);
  --line-on-dark: var(--line-on-light);
}

/* ...but keep the app mockups dark (restores the :root values from site.css/home.css). */
html[data-theme="light"] :is(.hero-card, .hero-float-chip, .device, .phone, .chatcard, .map-card){
  --cream-text:#ECE6D6;
  --cream-text-soft:#A9AEC0;
  --brass-bright:#DDBB78;
  --line-on-dark:rgba(198,161,90,0.28);
}

/* ---------- Light: band backgrounds ---------- */
html[data-theme="light"] header.scrolled,
html[data-theme="light"] header.solid{
  background:rgba(246,241,230,0.94);
  box-shadow:0 8px 24px -18px rgba(27,31,42,0.35);
}
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero{
  background:
    radial-gradient(ellipse 900px 500px at 78% -10%, rgba(198,161,90,0.22), transparent 60%),
    radial-gradient(ellipse 800px 600px at 4% 108%, rgba(62,124,194,0.14), transparent 60%),
    var(--paper-2);
}
html[data-theme="light"] :is(.audience, .mobile-section, .stats, .stat, .final-cta, .visit){
  background:var(--band-bg);
}
html[data-theme="light"] .showcase{
  background:linear-gradient(160deg, #DCE8EF, #C6DAE6 75%);
}
html[data-theme="light"] .showcase::before{
  background-image:repeating-linear-gradient(90deg, rgba(11,76,115,0.07) 0 1px, transparent 1px 140px);
}
html[data-theme="light"] footer,
html[data-theme="light"] .map-directions{
  background:var(--band-bg-2);
}
html[data-theme="light"] .newsletter-band{background:var(--band-bg-3);}

/* ---------- Light: details that hard-code a dark-background colour ---------- */
html[data-theme="light"] .btn-brass:hover{background:#DDBB78;}
html[data-theme="light"] .dev-dot{background:rgba(27,31,42,0.22);}
html[data-theme="light"] .newsletter-form input{background:rgba(255,255,255,0.75);}
html[data-theme="light"] .brand-logo{filter:none;}

/* ---------- The switch ---------- */
.theme-toggle{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-on-dark);color:var(--cream-text);
  cursor:pointer;transition:border-color 0.3s ease, color 0.3s ease;padding:0;flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--brass-bright);color:var(--brass-bright);}
.theme-toggle:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
.theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
/* Show the theme you would switch TO: a moon in light, a sun in dark. */
.theme-toggle .icon-sun{display:none;}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

/* The switch adds ~58px to the nav row. Never let a nav item wrap onto two lines, and
   tighten spacing (not widen it) so the row still fits the 1240px container. */
nav.wrap{gap:24px;}
.nav-links{gap:26px;}
.nav-links a, .nav-cta .btn{white-space:nowrap;}
.nav-cta{gap:14px;}
.nav-cta .btn{padding:12px 18px;}
@media (max-width:1280px){ .nav-links{gap:18px;} .nav-links a{font-size:12.5px;} }

/* Partners strip: its section follows the page surface in dark mode too. */
html[data-theme="dark"] .partners{background:var(--ink-2);border-bottom-color:var(--line-on-dark);}
html[data-theme="dark"] .partners-head p{color:var(--cream-text-soft);}
html[data-theme="dark"] .partners .kicker.on-light{color:var(--brass-bright);}