/* ============================================================================
   body.theme-mockup — Send.co mockup re-skin (BLUE-accented, Fraunces + Inter).
   STACKS ON TOP of body.theme-light: inherits all light-theme STRUCTURE
   (inner-hero re-grounding, nav treatment, alignment) and overrides only
   COLOUR TOKEN VALUES + Fraunces/Inter + the handful of cream/gold !important
   stragglers theme-light hardcoded. Loaded AFTER upgrades.css so equal-specificity
   rules win by source order. Param-gated (?theme=mockup) — no param, no class,
   default render byte-identical (Rule 1). Contrast-corrected (all AA, Rule 3/9).
   ============================================================================ */

/* ---- BASE: light grounds, ink text, BLUE accent, Fraunces/Inter ---- */
body.theme-mockup{
  /* grounds: white dominant, blue-50 tint sections */
  --bg:#ffffff;
  --bg2:#eaf4fb;
  --bg3:#d6eaf6;
  --navy:#0e2a44;
  /* text: ink is the reading colour, navy for emphasis */
  --white:#1c2b3a;
  --fg:#1c2b3a;
  --muted:#4d6070;          /* ink-soft, contrast-fixed: 6.52 on white / 5.84 on tint */
  --muted2:#5c6c7c;
  --border:#e2ecf3;         /* line */
  --border2:#d6eaf6;
  /* accent: BLUE replaces gold. --gold used as TEXT in many components -> blue-700 (AA). */
  --gold:#155d95;           /* blue-700, AA text on white/tint */
  --gold2:#1f78bd;          /* blue-600, fills */
  --gold-bright:#1f78bd;
  --gold-ink:#155d95;       /* catches var(--gold-ink,#7A5F2C) fallbacks */
  --gold-pale:rgba(31,120,189,.07);
  --gold-glow:rgba(31,120,189,.18);
  --accent:#1f78bd;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* second token system (.section-light band + global button tokens) */
  --cream:#ffffff;
  --cream-alt:#eaf4fb;
  --ink:#0e2a44;
  --ink-soft:rgba(28,43,58,.82);
  --ink-mute:rgba(28,43,58,.70);
  --btn-bg:#1f78bd;         /* blue-600 primary button fill */
  --btn-fg:#ffffff;
  --btn-bg-hover:#155d95;   /* blue-700 hover */
}
/* Fraunces reads best a touch lighter than Playfair's 700 at display sizes. */
body.theme-mockup h1, body.theme-mockup h2, body.theme-mockup h3,
body.theme-mockup .sp-word, body.theme-mockup .hero-h1{ font-optical-sizing:auto; font-weight:600; }

/* ---- DRAMA SECTIONS: navy ground, light text, light-blue accent ---- */
/* Same section list theme-light re-points; here navy+blue instead of slate+gold.
   NOTE: .sp-open (homepage hero) is DELIBERATELY NOT here — D Downs 2026-07-21 chose
   to LIGHTEN the homepage hero to match the mockup; its rules are in the block below. */
body.theme-mockup .post-hero,
body.theme-mockup #main-nav,
body.theme-mockup footer,
body.theme-mockup .footer,
body.theme-mockup .cta-banner,
body.theme-mockup .sp-cta,
body.theme-mockup .sp-programs,
body.theme-mockup .sp-testi,
body.theme-mockup .press-strip,
body.theme-mockup .financing-strip{
  --bg:#0e2a44; --bg2:#14263e; --bg3:#1b3350;
  --white:#ffffff; --fg:#eaf4fb;
  --muted:rgba(234,244,251,.80);
  --muted2:rgba(234,244,251,.62);
  --border:rgba(255,255,255,.14);
  --border2:rgba(255,255,255,.26);
  --gold:#8fc0e8;            /* light blue accent, AA on navy */
  --gold2:#2f8fd6;
  --gold-ink:#8fc0e8;
  --gold-pale:rgba(143,192,232,.10);
  /* buttons on navy drama grounds: bright blue fill, white text */
  --btn-bg:#2f8fd6;
  --btn-fg:#ffffff;
  --btn-bg-hover:#1f78bd;
  color:var(--white);
}
body.theme-mockup .post-hero *,
body.theme-mockup footer *,
body.theme-mockup .footer *,
body.theme-mockup .cta-banner *,
body.theme-mockup .sp-cta *,
body.theme-mockup .sp-programs *,
body.theme-mockup .sp-testi *{
  border-color:currentColor;
}
body.theme-mockup{background:var(--bg);color:var(--white)}

/* ---- STRAGGLER OVERRIDES: theme-light hardcoded cream/gold -> white/blue ---- */
/* Inner-hero wash: cream -> white/blue-25/blue-50 (was rgba(246,242,234,..)). */
body.theme-mockup .hero-bg-img::after{
  background:linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(246,250,253,.85) 44%,rgba(234,244,251,.5) 100%)!important;
}
/* Nav (pre-scroll) on now-white grounds: navy marks, blue sub + cta hover.
   ALL pages incl. HOME — the homepage hero is now light too (was home-exempt in
   theme-light because its hero stayed dark). Reversed white logo -> dark. */
body.theme-mockup #main-nav:not(.nav-scrolled) .nav-brand-mark img{filter:brightness(0)}
body.theme-mockup #main-nav:not(.nav-scrolled) .nav-brand-name{color:#0e2a44}
/* !important: theme-light's :not(.home) rule (spec 1,5,0) out-specifies ours on inner
   pages and would keep the gold sub-line. */
body.theme-mockup #main-nav:not(.nav-scrolled) .nav-brand-sub{color:#155d95!important}
/* scrolled nav is solid navy -> sub-line light blue */
body.theme-mockup #main-nav.nav-scrolled .nav-brand-sub{color:rgba(143,192,232,.9)!important}
body.theme-mockup #main-nav:not(.nav-scrolled) .nav-links a{color:rgba(14,42,68,.82)}
body.theme-mockup #main-nav:not(.nav-scrolled) .nav-links a:hover{color:#0e2a44}
body.theme-mockup #main-nav:not(.nav-scrolled) .nav-cta{border-color:rgba(14,42,68,.4)!important;color:#0e2a44!important;background:transparent!important}
body.theme-mockup #main-nav:not(.nav-scrolled) .nav-cta:hover{background:#1f78bd!important;color:#fff!important;border-color:#1f78bd!important}
body.theme-mockup #main-nav:not(.nav-scrolled) .nav-hamburger span{background:#0e2a44}

/* ---- HOMEPAGE HERO LIGHTENED (D Downs 2026-07-21) ------------------------------
   .sp-open was a full-viewport dark graded video (the old signature). Lighten to the
   mockup's aesthetic: soft blue->white ground, washed poster for texture, navy
   Fraunces wordmark, blue primary CTA. Re-skin, not rebuild: same markup/structure. */
body.theme-mockup .sp-open{
  height:auto;min-height:clamp(560px,84vh,780px);
  background:linear-gradient(180deg,#f6fafd 0%,#ffffff 100%);
}
body.theme-mockup .sp-open__media{display:none}          /* drop the dark video */
body.theme-mockup .sp-open__poster{opacity:.28}           /* keep poster as faint texture */
body.theme-mockup .sp-open__grade{
  background:linear-gradient(180deg,rgba(246,250,253,.60) 0%,rgba(234,244,251,.42) 100%)!important;
}
body.theme-mockup .sp-open__grain{opacity:.12}
body.theme-mockup .sp-word{color:#0e2a44}
body.theme-mockup .sp-open__sub{color:#4d6070}
body.theme-mockup .sp-open__scroll{color:#5c6c7c}
body.theme-mockup .sp-open__scroll span{background:linear-gradient(#1f78bd,transparent)}
body.theme-mockup .sp-open__btn{background:#1f78bd;color:#fff!important;border-color:#1f78bd}
body.theme-mockup .sp-open__btn:hover{background:#155d95;border-color:#155d95;color:#fff!important}
/* gold-ink text stragglers -> blue-700 */
body.theme-mockup .phase-label,
body.theme-mockup .testi-photo-card .testi-reviewer-meta,
body.theme-mockup .testi-card .testi-reviewer-meta{color:#155d95!important}
body.theme-mockup .hero-h1 em,body.theme-mockup .hero-pretitle{color:#155d95!important}
/* section-light neutralised to white ground (matches theme-light behaviour) */
body.theme-mockup .section-light{background:var(--bg)!important;color:var(--white)!important}
body.theme-mockup .section-light.section-alt{background:var(--bg2)!important}
/* cover-hero eyebrow gold straggler -> blue */
body.theme-mockup .wp-block-cover.page-hero .section-eyebrow{color:#155d95!important}
/* section-light card hover: gold border -> blue */
body.theme-mockup .section-light .card:hover{border-color:rgba(31,120,189,.45)!important}
/* mobile menu-open brand-sub gold straggler -> blue */
body.theme-mockup.menu-open .nav-brand-sub{color:#155d95}
/* footer credit + legal links: upgrades.css sets these GOLD (#C8A868) !important ->
   muted light on the navy footer. Covers "Built by Derick Downs" + "Website by We Treat"
   + Privacy/Terms. AA-clean on navy. */
body.theme-mockup .footer-copy a{color:rgba(207,224,238,.85)!important}
body.theme-mockup .footer-copy a:hover{color:#ffffff!important}

/* ---- REVIEW / TESTIMONIAL CARDS: kill the dark-scrim gradient on the light ground -------
   upgrades.css:62 grounds .testi-photo-card / .testi-card in a DARKENING dark-navy scrim
   (linear-gradient rgba(11,21,36,.15) -> .45), built for LIGHT text on a DARK section. On
   the mockup's LIGHT review ground with DARK italic quote text, that scrim renders as a gray
   gradient and the dark text COLLAPSES toward the bottom of every card — invisible to the
   contrast scanner (it never composited gradient backdrops) and the "impossible to read
   boxes" seen on a real phone at 390. Fix at the component level, to the mockup's own review-
   card spec: SOLID white ground, hairline border, soft shadow. Dark quote text now passes AA
   at EVERY point of the card, at every width. Applies wherever these cards render. */
body.theme-mockup .testi-photo-card,
body.theme-mockup .testi-card{
  background:#ffffff!important;
  border:1px solid #e2ecf3!important;                 /* --line */
  box-shadow:0 4px 16px rgba(14,42,68,.06)!important;  /* --shadow */
}
body.theme-mockup .testi-photo-card:hover,
body.theme-mockup .testi-card:hover{
  border-color:rgba(31,120,189,.4)!important;          /* blue-600, matches other card hovers */
}