/* ==========================================================================
   REBRAND LAYER — light "trust blue" theme (July 2026)
   Loaded AFTER styles.css; consumes tokens from tokens.css.
   Reversible: remove the two <link>s (tokens.css + rebrand.css) to restore
   the original navy/amber theme. Nothing in styles.css was deleted.

   Structure of the page in this theme:
     dark nav + hero (the one dramatic band)  ->  trust-blue ticker
     ->  warm-white body (stats, plan, bio, contrast, quote)
     ->  light CTA with trust-blue actions  ->  dark footer (bookend)
   Plan-section rules are prefixed with #platform to win over the page's
   inline <style> block regardless of source order.
   ========================================================================== */

/* ---------- Ground ---------- */
body {
  background: var(--surface);
  color: var(--text);
}

/* ---------- Headlines -> statesman serif, sentence/title case ---------- */
.s-title,
.s-title-navy,
.bio-heading,
.cta-title,
.quote-text,
#platform .plan-statement .plan-kicker,
#platform .plan-statement .plan-closer,
#platform .plan-part-head,
#platform .plan-acc summary,
.pillar-title,
.vol-card-title,
.hero-tagline {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: var(--track-display);
}
.s-title,
.bio-heading,
.cta-title { font-weight: 600; }

/* ---------- Global focus ring -> gold ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible { outline-color: var(--focus-ring); }
.btn-amber:focus-visible,
.nav-donate-pill:focus-visible,
.nav-menu-donate:focus-visible { outline-color: var(--accent); }

/* ---------- Buttons ---------- */
.btn-amber { background: var(--primary); color: var(--on-primary); }
.btn-amber:hover { background: var(--primary-hover); }
.btn-navy-solid { background: var(--primary); color: var(--on-primary); }
.btn-navy-solid:hover { background: var(--primary-hover); }
.btn-navy-outline { border-color: var(--primary); color: var(--primary); }
.btn-navy-outline:hover { background: var(--primary); color: var(--on-primary); }
/* ghost lives on the dark hero only */
.btn-ghost { border-color: rgba(212, 160, 23, 0.5); color: var(--text-inverse); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Nav (kept dark, retuned to deep blue + gold + primary) ---------- */
nav {
  background: rgba(13, 53, 71, 0.97);
  border-bottom-color: rgba(212, 160, 23, 0.22);
}
.nav-desktop a { color: rgba(252, 250, 245, 0.72); }
.nav-desktop a:hover { color: var(--accent); }
.nav-desktop .nav-cta,
.nav-donate-pill,
.nav-menu a.nav-menu-donate,
.nav-drawer .drawer-donate { background: var(--primary); color: var(--on-primary); }
.nav-desktop .nav-cta:hover,
.nav-donate-pill:hover,
.nav-menu a.nav-menu-donate:hover,
.nav-drawer .drawer-donate:hover { background: var(--primary-hover); color: var(--on-primary); }
.nav-burger { border-color: rgba(212, 160, 23, 0.4); }
.nav-burger span,
.hamburger span { background: var(--text-inverse); }
.nav-menu { background: rgba(13, 53, 71, 0.98); border-bottom-color: var(--primary); }
.nav-menu a { color: var(--text-inverse); border-bottom-color: rgba(212, 160, 23, 0.14); }
.nav-menu a:hover { color: var(--accent); }
.nav-drawer { background: var(--surface-invert); border-top-color: rgba(212, 160, 23, 0.12); }
.nav-drawer a { color: var(--text-inverse); border-bottom-color: rgba(212, 160, 23, 0.1); }
.nav-drawer a:active { color: var(--accent); }

/* Language controls (nav = dark, bar = deep band) */
.lang-picker-trigger { border-color: rgba(212, 160, 23, 0.4); color: var(--text-inverse); }
.lang-picker-trigger:hover,
.lang-picker.open .lang-picker-trigger { border-color: var(--accent); color: var(--accent); }
.lang-picker.open .lang-picker-trigger { background: rgba(212, 160, 23, 0.1); }
.lang-picker-panel { background: var(--surface-invert); border-color: rgba(212, 160, 23, 0.3); }
.lang-picker-item { color: var(--text-inverse); }
.lang-picker-item:hover { background: rgba(212, 160, 23, 0.1); color: var(--accent); }
.lang-picker-item.active { background: var(--primary); color: var(--on-primary); }
.lang-picker-divider { background: rgba(212, 160, 23, 0.15); }
.lang-bar { background: var(--surface-invert); color: var(--text-inverse); border-bottom-color: rgba(212, 160, 23, 0.2); }
.lang-bar-label, .lang-bar-icon { color: var(--text-inverse); }
.lang-pill, .lang-bar-select { color: var(--text-inverse); border-color: rgba(252, 250, 245, 0.28); }
.lang-pill:hover { background: rgba(252, 250, 245, 0.1); border-color: var(--text-inverse); }
.lang-pill.active { background: var(--text-inverse); color: var(--surface-invert); border-color: var(--text-inverse); }

/* ---------- Hero (the one dark band) ---------- */
.hero { background: var(--surface-invert); }
/* Pull back the crop so more of the golden background shows and balances the frame */
.hero-bg img {
  width: 88%;
  object-position: center 20%;
  -webkit-mask-image: radial-gradient(ellipse 84% 84% at 50% 46%, #000 66%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 84% 84% at 50% 46%, #000 66%, rgba(0, 0, 0, 0) 100%);
}
@media (min-width: 768px) {
  .hero-bg img {
    width: 84%;
    height: 84%;
    object-position: center 16%;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 48%, #000 62%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 48%, #000 62%, rgba(0, 0, 0, 0) 100%);
  }
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(13, 53, 71, 0) 64%, rgba(13, 53, 71, 0.5) 100%);
  }
}
/* Clear the center so the photo is 100% opaque in the central oval;
   keep darkening only at the bottom edge where the hero text overlaps. */
.hero-bg::after {
  background: linear-gradient(
    180deg,
    rgba(13, 53, 71, 0) 0%,
    rgba(13, 53, 71, 0) 55%,
    rgba(13, 53, 71, 0.55) 80%,
    rgba(13, 53, 71, 0.95) 100%
  );
}
.hero-eyebrow { color: var(--accent); }
.hero-rule { background: linear-gradient(90deg, var(--accent), var(--gold-400), transparent); }
.hero-tagline { color: rgba(252, 250, 245, 0.85); font-style: italic; font-weight: 400; }
.hero-date-pip { background: var(--accent); }
.hero-date-text { color: var(--gold-400); }

/* ---------- Ticker (trust-blue bridge band) ---------- */
.ticker { background: var(--primary); }
.ticker-item { color: var(--on-primary); }
.ticker-sep { color: rgba(252, 250, 245, 0.4); }

/* ---------- Section helpers ---------- */
.s-label { color: var(--accent-strong); }
.s-label-blue { color: var(--primary); }
.s-title { color: var(--text); }
.s-title-navy { color: var(--text); }

/* ---------- Stats (light cards) ---------- */
.stats-section { border-top-color: var(--border-hairline); }
.stat-card {
  background: var(--surface-raised);
  border-top: 3px solid transparent;
  box-shadow: 0 1px 3px rgba(20, 32, 43, 0.06);
}
.stat-card:hover { border-top-color: var(--primary); }
.stat-value { color: var(--primary); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.stat-label { color: var(--text-muted); }
/* Desktop: the four credentials span the row end to end instead of bunching left */
@media (min-width: 768px) {
  .stats-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    padding-left: 0;
    padding-right: 0;
  }
  .stat-card { flex: none; width: auto; }
}

/* ---------- Plan section (#platform) — flipped to light ---------- */
#platform .plan-statement p { color: var(--ink-600); }
#platform .plan-statement p strong { color: var(--text); }
#platform .plan-statement .plan-kicker { color: var(--text); }
#platform .plan-statement .plan-closer { color: var(--text); border-top-color: var(--border-hairline); }
#platform .plan-statement .plan-closer .accent { color: var(--accent-strong); }

#platform .plan-acc details,
#platform .plan-acc details:first-of-type { border-color: var(--border-hairline); }
#platform .plan-acc summary { color: var(--text); font-weight: 500; font-size: 1.25rem; }
#platform .plan-acc summary:hover { color: var(--primary); }
#platform .plan-acc summary .tgl { color: var(--accent-strong); }
#platform .plan-acc .acc-body p { color: var(--ink-600); }
#platform .plan-acc .acc-body .cite { color: var(--ink-400); }
#platform .plan-acc .acc-body pre {
  color: var(--text-inverse);
  background: var(--surface-invert);
  border-color: rgba(212, 160, 23, 0.25);
}
#platform .plan-acc .acc-body pre .amber { color: var(--accent); }

#platform .plan-hit-dead {
  background: rgba(214, 69, 69, 0.07);
  border: 1px solid rgba(214, 69, 69, 0.4);
  border-left: 3px solid var(--red-500);
}
#platform .plan-hit-work {
  background: rgba(0, 168, 107, 0.07);
  border: 1px solid rgba(0, 168, 107, 0.4);
  border-left: 3px solid var(--success);
}
#platform .plan-hit-dead .ph-label { color: var(--red-700); }
#platform .plan-hit-work .ph-label { color: var(--success-text); }
#platform .plan-hit .ph-lead { color: var(--ink-600); }
#platform .plan-hit .ph-line { color: var(--text); font-family: var(--font-body); font-weight: 600; }
#platform .plan-hit-dead .ph-line::before { color: var(--red-500); }
#platform .plan-hit-work .ph-line::before { color: var(--success); }

#platform .plan-battle {
  background: var(--surface-sunk);
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--accent);
}
#platform .plan-battle .pb-label { color: var(--accent-strong); }
#platform .plan-battle p { color: var(--ink-600); }

#platform .plan-part-head { color: var(--text); }
#platform .plan-part-head .pn { color: var(--accent-strong); }
#platform .plan-part-sub { color: var(--ink-400); }
/* "The bill is written" callout in the plan */
.plan-bill { transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.plan-bill:hover { border-color: var(--accent) !important; transform: translateY(-2px); }

/* Pillar cards, if present */
.pillar { background: var(--surface-raised); box-shadow: 0 1px 3px rgba(20, 32, 43, 0.06); }
.pillar:hover { background: var(--surface-sunk); }
.pillar::before { background: var(--primary); }
.pillar-title { color: var(--text); }
.pillar-body { color: var(--ink-600); }
.pillar-num { color: var(--accent-strong); opacity: 0.6; }

/* ---------- Bio (light) ---------- */
.bio { border-top-color: var(--border-hairline); }
.bio .s-label { color: var(--accent-strong); } /* keep the eyebrow gold; beats .bio-body p */
.bio-heading { color: var(--text); }
.bio-heading em { color: var(--primary); }
.bio-body p { color: var(--ink-600); }
.bio-body strong { color: var(--text); }
.bio-photo-mobile::after { background: linear-gradient(transparent, var(--surface)); }

/* ---------- Contrast (light, one dark "us" column) ---------- */
.contrast { background: var(--surface-sunk); color: var(--text); }
.c-col-them { background: var(--surface-raised); }
.c-col-us { background: var(--surface-invert); color: var(--text-inverse); }
.c-col-them .c-col-label { color: var(--primary); }
.c-col-us .c-col-label { color: var(--accent); }
.c-list li { border-bottom-color: var(--border-hairline); font-family: var(--font-body); font-weight: 600; font-size: 0.96rem; line-height: 1.42; }
.c-col-us .c-list li { border-bottom-color: rgba(252, 250, 245, 0.1); }
.c-list li::before { color: var(--primary); }
.c-col-us .c-list li::before { color: var(--accent); }

/* ---------- Quote (light) ---------- */
.quote-section::before { color: rgba(31, 111, 139, 0.05); }
.quote-text { color: var(--text); }
/* .quote-attr is a <footer> inside the blockquote — strip the site-footer chrome */
.quote-attr { color: var(--accent-strong); background: none; padding: 0; border: none; }

/* ---------- CTA / Volunteer (light, trust-blue actions) ---------- */
.cta { background: var(--surface-sunk); }
.cta-title { color: var(--text); }
.cta-sub { color: var(--ink-600); }
.vol-card { background: var(--surface-raised); box-shadow: 0 2px 10px rgba(20, 32, 43, 0.06); }
.vol-card-dark { background: var(--surface-invert); color: var(--text-inverse); }
.vol-card-title { color: var(--text); }
.vol-card-dark .vol-card-title { color: var(--accent); }
.vol-card-desc { color: var(--ink-400); }
.vol-card-dark .vol-card-desc { color: rgba(252, 250, 245, 0.72); }
.vol-input { background: var(--surface); border-color: var(--border-hairline); color: var(--text); }
.vol-input:focus { border-color: var(--primary); }
.vol-input::placeholder { color: var(--ink-400); }
.vol-input-dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(252, 250, 245, 0.2); color: var(--text-inverse); }
.vol-input-dark:focus { border-color: var(--accent); }
.vol-input-dark::placeholder { color: rgba(252, 250, 245, 0.4); }
.vol-msg { color: var(--primary); }
.vol-upload-label { border-color: rgba(31, 111, 139, 0.3); color: var(--ink-600); }
.vol-upload-label:hover { border-color: var(--primary); background: rgba(31, 111, 139, 0.05); }
.vol-upload-icon { color: var(--primary); }
.vol-upload-hint { color: var(--ink-400); }
.vol-match-count { color: var(--accent-strong); }
.vol-match-item { border-bottom-color: var(--border-hairline); }
.vol-match-name { color: var(--text); font-family: var(--font-body); }
.vol-match-zip { color: var(--ink-400); }
.vol-match-text-btn { background: var(--primary); color: var(--on-primary); }
.vol-match-text-btn:hover { background: var(--primary-hover); }
.vol-match-list { scrollbar-color: var(--primary) transparent; }
.vol-privacy { color: var(--ink-400); }
.vol-no-match { color: var(--ink-600); }

/* ---------- Footer (dark bookend) ---------- */
footer { background: var(--surface-invert); border-top-color: rgba(212, 160, 23, 0.14); }
.footer-sub { color: rgba(252, 250, 245, 0.4); }
.footer-links-row a,
.more-list a { color: rgba(252, 250, 245, 0.62); }
.footer-links-row a:hover,
.more-list a:hover { color: var(--accent); }
.footer-legal { color: rgba(252, 250, 245, 0.6); }
.more-note { color: rgba(252, 250, 245, 0.4); }
.staff-access:hover { color: var(--accent); background: rgba(212, 160, 23, 0.08); }