/* ==========================================================================
   RECA Justice — brand stylesheet for live spoke pages
   Self-contained: tokens + base + page utility classes. Link this one file.
   Fonts: brand font is Avenir LT Pro (licensed); Nunito Sans is the free
          stand-in, with Avenir listed first for devices that have it.
          Nunito Sans is SELF-HOSTED (assets/fonts/) so it always renders even
          when Google Fonts is unreachable and the device has no Avenir.
   ========================================================================== */
@import url('assets/fonts/nunito-sans.css');

:root {
  /* Navy (primary) */
  --navy-900:#10233F; --navy-800:#1A3052; --navy-700:#25405F; --navy-600:#345070;
  --navy-500:#51678A; --navy-300:#9AA8BF; --navy-100:#D7DEE8; --navy-050:#EBEFF4;
  /* Gold (accent only) */
  --gold-700:#8A6E2A; --gold-600:#A8842F; --gold-500:#C8A24B; --gold-400:#D6B670;
  --gold-200:#E9DBB6; --gold-100:#F4ECD7;
  /* Action blue (primary CTA) — sampled from the live site button */
  --blue-500:#216B91; --blue-600:#1B5B7B; --blue-700:#164A66; --blue-100:#DCEAF1;
  --action:var(--blue-500); --action-hover:var(--blue-600);
  /* Warm neutrals */
  --white:#FFFFFF; --paper:#F7F5EF; --paper-2:#EFEBE1;
  --ink-900:#10233F; --ink-700:#38445C; --ink-500:#5C6678;
  --line:#E0DACD; --line-2:#D2CBBA;
  /* Status */
  --success-700:#2E6B4F; --warning-700:#8A5A14; --warning-100:#F5E9D4; --danger-700:#97302E;
  /* Semantic */
  --text-body:var(--ink-900); --text-secondary:var(--ink-700); --text-muted:var(--ink-500);
  --accent:var(--gold-500); --accent-strong:var(--gold-600); --border:var(--line);
  /* Type — Nunito Sans (the font the design was drafted in) is primary so the
     site matches the mockups on every device. 'Avenir Next'/'Avenir' are NOT
     the true brand face (Avenir LT Pro) and rendered inconsistently across
     Macs vs everyone else, so they're dropped from the front. If you license
     Avenir LT Pro as a webfont, add its @font-face and put it first here. */
  --font-sans:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-serif:var(--font-sans); /* brand is all-sans; legacy alias */
  /* Radii / shadow */
  --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(16,35,63,.08),0 1px 2px rgba(16,35,63,.04);
  --shadow-md:0 4px 12px rgba(16,35,63,.08),0 2px 4px rgba(16,35,63,.05);
  --shadow-lg:0 14px 36px rgba(16,35,63,.12),0 4px 10px rgba(16,35,63,.06);
  --container:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-sans);font-size:18px;line-height:1.6;
  color:var(--text-body);background:var(--paper);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-sans);color:var(--navy-900);font-weight:700;line-height:1.2;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:-.01em}
h2{font-size:clamp(28px,3.4vw,38px)}
h3{font-size:24px}
h4{font-size:20px}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--navy-700);text-underline-offset:2px}
a:hover{color:var(--navy-900)}
img{max-width:100%;display:block}

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding-left:24px;padding-right:24px}
.section{padding:clamp(56px,8vw,96px) 0}
.section--paper{background:var(--paper)}
.section--white{background:var(--white);border-top:1px solid var(--border)}
.section--navy{background:var(--navy-900);color:#fff}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}

/* White cards inside a navy section must NOT inherit the navy-section
   white-text overrides (otherwise content goes white-on-white). Reset them. */
.section--navy .card{color:var(--text-body)}
.section--navy .card h1,.section--navy .card h2,.section--navy .card h3,.section--navy .card h4{color:var(--navy-900)}
.section--navy .card .check-list li{color:var(--text-body)}
.section--navy .card .check-list li::before{background-color:var(--navy-900)}
.section--navy .card .lead{color:var(--text-secondary)}

/* Eyebrow / overline */
.eyebrow{font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-strong);margin:0 0 14px}
.eyebrow--on-navy{color:var(--gold-400)}
.lead{font-size:20px;line-height:1.6;color:var(--text-secondary);max-width:64ch}
.section--navy .lead{color:rgba(255,255,255,.82)}
.fineprint{font-size:14px;color:var(--text-muted);line-height:1.55}
.rule-accent{width:56px;height:3px;background:var(--accent);border:0;border-radius:999px;margin:18px 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-sans);font-weight:600;font-size:20px;line-height:1.1;
  text-decoration:none;border-radius:var(--radius-md);cursor:pointer;
  padding:16px 28px;min-height:52px;border:1px solid transparent;
  transition:background-color .15s ease,border-color .15s ease,transform .05s ease}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--action);color:#fff;border-color:var(--action);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--action-hover);color:#fff}
.btn--navy{background:var(--navy-900);color:#fff;border-color:var(--navy-900);box-shadow:var(--shadow-sm)}
.btn--navy:hover{background:var(--navy-700);color:#fff}
.btn--secondary{background:#fff;color:var(--navy-900);border-color:var(--line-2)}
.btn--secondary:hover{background:var(--paper);color:var(--navy-900)}
.btn--onnavy{background:var(--action);color:#fff;border-color:var(--action)}
.btn--onnavy:hover{background:var(--action-hover);color:#fff}
.btn--ghostnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghostnavy:hover{background:rgba(255,255,255,.08);color:#fff}
.btn--md{font-size:18px;padding:12px 20px;min-height:44px}

/* Card */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:32px}
.card--accent{border-top:3px solid var(--accent)}
.card--flat{box-shadow:none}

/* Badge / chip */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-family:var(--font-sans);
  font-size:15px;font-weight:600;line-height:1.2;border-radius:var(--radius-pill);white-space:nowrap}
.badge--navy{background:var(--navy-900);color:#fff}
.badge--outline{background:#fff;color:var(--navy-900);border:1px solid var(--gold-500)}
.badge--gold{background:var(--gold-100);color:var(--navy-900);border:1px solid var(--gold-200)}
.badge--neutral{background:var(--paper-2);color:var(--text-secondary);border:1px solid var(--border)}

/* Check list */
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.check-list li{display:flex;align-items:flex-start;gap:12px;font-size:18px;line-height:1.55;color:var(--text-body)}
.section--navy .check-list li{color:rgba(255,255,255,.9)}
.check-list li::before{content:"";flex:0 0 auto;width:26px;height:26px;margin-top:1px;border-radius:50%;
  background:var(--navy-900);
  background-image:linear-gradient(45deg,transparent 42%,var(--gold-500) 42%,var(--gold-500) 50%,transparent 50%),
                   linear-gradient(-45deg,transparent 42%,var(--gold-500) 42%,var(--gold-500) 50%,transparent 50%);
  background-position:7px 9px,13px 9px;background-size:8px 8px,8px 8px;background-repeat:no-repeat}
.section--navy .check-list li::before{background-color:rgba(255,255,255,.12)}

/* Numbered seal (steps / pillars) */
.seal{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;background:var(--navy-900);border:2px solid var(--accent);color:var(--accent);
  font-family:var(--font-serif);font-weight:700;font-size:22px;flex:0 0 auto}

/* Notice / compliance callout */
.notice{display:flex;flex-direction:column;gap:4px;padding:20px 24px;border-radius:var(--radius-md);
  background:var(--gold-100);border-left:4px solid var(--accent)}
.notice--caution{background:var(--warning-100);border-left-color:var(--warning-700)}
.notice--info{background:var(--navy-050);border-left-color:var(--navy-600)}
.notice b{font-weight:700;color:var(--navy-900)}
.notice p{margin:0;color:var(--text-secondary);font-size:18px;line-height:1.55}

/* Stat */
.stat{display:flex;flex-direction:column;gap:6px;padding:24px;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.stat .num{font-family:var(--font-serif);font-size:40px;font-weight:700;line-height:1;color:var(--navy-900)}
.stat .lab{font-size:17px;color:var(--text-secondary);line-height:1.5}

/* Grids */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* Site header */
.site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border)}
.announce{background:#C0271D;color:#fff;font-size:15px}
.announce .container{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:9px;padding-bottom:9px;text-align:center;line-height:1.4}
.announce .dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:0 0 auto}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px}
/* Real logo lockup (image) */
.site-logo{display:inline-flex;align-items:center;text-decoration:none}
.site-logo img{height:40px;width:auto;display:block}
.site-footer .site-logo img{height:44px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a:not(.btn){font-weight:600;font-size:18px;color:var(--navy-900);text-decoration:none}
.brand-lockup{display:inline-flex;align-items:center;gap:13px;text-decoration:none}
.brand-lockup img{height:42px;width:auto}
.brand-lockup .wm{font-family:var(--font-sans);font-size:26px;line-height:1;color:var(--navy-900);white-space:nowrap}
.brand-lockup .wm b{font-weight:700}
.brand-lockup .wm span{font-weight:400}

/* Mobile nav toggle (hamburger) — injected by eligibility.js, hidden on desktop */
.nav-toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;
  margin:-4px -8px -4px 0;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;
  color:var(--navy-900);cursor:pointer;flex:0 0 auto}
.nav-toggle:hover{background:var(--paper)}
.nav-toggle svg{width:24px;height:24px;display:block;stroke:currentColor}

/* Site footer */
.site-footer{background:var(--navy-900);color:#fff}
.site-footer h4{color:#fff;font-family:var(--font-sans);font-size:18px;margin:0 0 12px}
.site-footer .muted{color:rgba(255,255,255,.8);line-height:1.65}
.site-footer .brand-lockup .wm{color:#fff}
.disclaimer-box{background:rgba(255,255,255,.06);border:1px solid var(--navy-700);border-radius:var(--radius-md);
  padding:14px 18px;font-size:15px;color:rgba(255,255,255,.8);line-height:1.55}
.disclaimer-box b{color:#fff}

@media (max-width:860px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  /* collapsed by default; opened via .open from the toggle */
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;z-index:39;
    background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);
    padding:8px 0}
  .nav-links.open a:not(.btn){padding:15px 24px;font-size:19px;border-bottom:1px solid var(--paper-2)}
  .nav-links.open a:not(.btn):last-of-type{border-bottom:0}
  .nav-links.open .btn{margin:12px 24px 6px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================================
   Eligibility modal (vanilla — opened by eligibility.js from any #check CTA)
   ========================================================================== */
.elig-overlay{position:fixed;inset:0;z-index:100;background:rgba(16,35,63,.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.elig-overlay[hidden]{display:none}
.elig-modal{width:min(640px,100%);max-height:90vh;overflow:auto;background:#fff;
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border-top:4px solid var(--accent)}
.elig-head{padding:20px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.elig-title{font-weight:700;color:var(--navy-900);font-size:18px}
.elig-close{width:40px;height:40px;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;
  cursor:pointer;font-size:22px;line-height:1;color:var(--ink-500)}
.elig-close:hover{background:var(--paper)}
.elig-dots{display:flex;gap:8px;padding:16px 28px 0}
.elig-dots span{height:6px;flex:1;border-radius:999px;background:var(--line-2)}
.elig-dots span.on{background:var(--accent)}
.elig-body{padding:22px 28px}
.elig-body h3{font-size:24px;margin:0 0 18px}
.elig-foot{padding:16px 28px 24px;display:flex;justify-content:space-between;gap:12px}
.elig-radios{display:flex;flex-direction:column;gap:12px}
.elig-radio{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:16px 18px;
  border:1px solid var(--line-2);border-radius:var(--radius-md);background:#fff;cursor:pointer;
  font-family:var(--font-sans);transition:border-color .15s ease,background-color .15s ease}
.elig-radio:hover{border-color:var(--navy-300);background:var(--paper)}
.elig-radio.sel{border-color:var(--accent);background:var(--gold-100);box-shadow:inset 0 0 0 1px var(--accent)}
.elig-radio__dot{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);margin-top:1px}
.elig-radio.sel .elig-radio__dot{border-color:var(--accent);background:radial-gradient(circle at center,var(--accent) 0 5px,transparent 6px)}
.elig-radio__label{display:block;font-size:18px;font-weight:600;color:var(--navy-900)}
.elig-radio__desc{display:block;font-size:15px;color:var(--text-secondary);margin-top:2px}
.elig-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.elig-fields label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--navy-900)}
.elig-fields input,.elig-fields select{font-family:var(--font-sans);font-size:16px;padding:12px 14px;
  border:1px solid var(--line-2);border-radius:var(--radius-md);background:#fff;min-height:48px;color:var(--ink-900)}
.elig-fields input:focus,.elig-fields select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--gold-200)}
.elig-seal{width:64px;height:64px;border-radius:50%;background:var(--navy-900);border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
@media (max-width:520px){.elig-fields{grid-template-columns:1fr}.elig-head,.elig-dots,.elig-body,.elig-foot{padding-left:20px;padding-right:20px}}