/*
 * CarerCompass Design System — v2.2
 * Warmer palette · stronger typography · better mobile
 * =============================================================================
 */

:root {
  --cc-dark:       #1E1408;
  --cc-dark-2:     #2A1C0C;
  --cc-dark-3:     #362410;
  --cc-dark-4:     #422C14;
  --cc-cream:      #FAF7F0;
  --cc-cream-2:    #FFFFFF;
  --cc-cream-3:    #F2EBE0;
  --cc-cream-4:    #E8DDD0;
  --cc-text-d:     #EEE8DC;
  --cc-text-d2:    rgba(238,232,220,.72);
  --cc-text-d3:    rgba(238,232,220,.40);
  --cc-text-l:     #2A1F10;
  --cc-text-l2:    #5C3D1E;
  --cc-text-l3:    #8A6040;
  --cc-text-l4:    #B8916A;
  --cc-gold:       #C8952A;
  --cc-gold-l:     rgba(200,149,42,.12);
  --cc-gold-m:     rgba(200,149,42,.30);
  --cc-gold-dark:  #A87518;
  --cc-sage:       #4E7A52;
  --cc-sage-l:     rgba(78,122,82,.12);
  --cc-sage-m:     rgba(78,122,82,.28);
  --cc-sage-dark:  #3A5E3D;
  --cc-red:        #B84040;
  --cc-red-l:      rgba(184,64,64,.12);
  --cc-red-m:      rgba(184,64,64,.28);
  --cc-border-d:   rgba(255,255,255,.09);
  --cc-border-d2:  rgba(255,255,255,.16);
  --cc-border-l:   rgba(90,50,10,.10);
  --cc-border-l2:  rgba(90,50,10,.18);
  --cc-shadow-l:   0 2px 20px rgba(90,50,10,.10);
  --cc-shadow-ls:  0 1px 8px rgba(90,50,10,.08);
  --cc-shadow-d:   0 4px 24px rgba(0,0,0,.40);
  --cc-shadow-ds:  0 2px 12px rgba(0,0,0,.24);
  --cc-radius:     14px;
  --cc-radius-sm:  9px;
  --cc-radius-pill:50px;
  --cc-display:    'Playfair Display', Georgia, serif;
  --cc-serif:      'Lora', Georgia, serif;
  --cc-sans:       'DM Sans', system-ui, sans-serif;
}

/* ── RESET ── */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--cc-sans); -webkit-font-smoothing: antialiased; }

/* ── WARM CSS VARIABLES — override cold grey on light pages ── */
body.theme-light {
  background: var(--cc-cream);
  color: var(--cc-text-l);
  --text:    #2A1F10;
  --text-2:  #5C3D1E;
  --text-3:  #8A6040;
  --text-4:  #B8916A;
  --text-mid:#5C3D1E;
  --text-light:#8A6040;
  --brown:   #2A1F10;
  --brown-2: #5C3D1E;
  --cream:   #FAF7F0;
  --warm-white:#FFFFFF;
  --warm:    #F2EBE0;
  --warm-2:  #E8DDD0;
  --border:  rgba(90,50,10,.10);
  --border-2:rgba(90,50,10,.18);
  --sage:    #4E7A52; --sage-l:rgba(78,122,82,.12); --sage-m:rgba(78,122,82,.28); --sage-dark:#3A5E3D; --sage-light:rgba(78,122,82,.08);
  --gold:    #C8952A; --gold-l:rgba(200,149,42,.12); --gold-m:rgba(200,149,42,.30); --gold-dark:#A87518; --gold-d:#A87518; --amber-l:rgba(200,149,42,.08);
  --red:     #B84040; --red-l:rgba(184,64,64,.10); --red-m:rgba(184,64,64,.22);
  --teal:    #2A7A7A; --teal-l:rgba(42,122,122,.10);
  --r:14px; --r-sm:9px;
}

body.theme-dark {
  --slate:   #1E1408; --slate-2:#2A1C0C; --slate-3:#362410;
  --cream:   #EEE8DC; --cream-2:rgba(238,232,220,.72); --cream-3:rgba(238,232,220,.40);
  --border:  rgba(255,255,255,.09); --border-2:rgba(255,255,255,.16);
  --sage:    #4E7A52; --sage-l:rgba(78,122,82,.14); --sage-m:rgba(78,122,82,.30);
  --gold:    #C8952A; --gold-l:rgba(200,149,42,.14); --gold-m:rgba(200,149,42,.32); --gold-d:#C8952A;
  --red:     #B84040; --red-l:rgba(184,64,64,.12); --red-m:rgba(184,64,64,.28);
  --r:14px; --r-sm:9px;
}

/* ── GLOBAL TYPOGRAPHY — bigger, warmer, clearer ── */
body.theme-light p,
body.theme-light li { color: var(--cc-text-l2); font-size: 1rem; line-height: 1.85; }
body.theme-dark p,
body.theme-dark li  { color: var(--cc-text-d2); font-size: 1rem; line-height: 1.85; }

/* Headings — richer, warmer — but NOT inside dark heroes */
body.theme-light h1:not(.hero h1):not(.hero-inner h1),
body.theme-light h2,
body.theme-light h3 {
  color: var(--cc-text-l);
  font-family: var(--cc-display);
  font-weight: 700;
  line-height: 1.15;
}

/* Dark theme headings */
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3 {
  color: var(--cc-text-d);
  font-family: var(--cc-display);
  font-weight: 700;
}

/* Hero headings — always explicit, never inherited */
.hero h1, .hero-inner h1 { color: inherit; }
body.theme-dark .hero h1,
body.theme-dark .hero-inner h1 { color: #EEE8DC !important; }

/* Lora prose elements — larger and warmer */
body.theme-light .term-def,
body.theme-light .gs-body p,
body.theme-light .prose p,
body.theme-light .ci-text,
body.theme-light .step-text,
body.theme-light .rc-text,
body.theme-light .di-text,
body.theme-light .ps-text,
body.theme-light .wi-text,
body.theme-light .sign-text,
body.theme-light .alt-text,
body.theme-light .q-sub,
body.theme-light .hero-sub,
body.theme-light .article p,
body.theme-light .pearl p,
body.theme-light .warn p,
body.theme-light .callout p,
body.theme-light .danger p,
body.theme-light .cc-notes,
body.theme-light .rh-summary,
body.theme-light .holding-text,
body.theme-light .hero-lead {
  font-family: var(--cc-serif) !important;
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: var(--cc-text-l2) !important;
}

body.theme-dark .pearl p,
body.theme-dark .warn p,
body.theme-dark .rc-text,
body.theme-dark .step-text,
body.theme-dark .letter-body,
body.theme-dark .hero-sub {
  font-family: var(--cc-serif) !important;
  font-size: .95rem !important;
  line-height: 1.85 !important;
  color: var(--cc-text-d2) !important;
}

/* ── MOBILE TYPOGRAPHY ── */
@media (max-width: 600px) {
  .hero h1, .hero-inner h1 { font-size: 1.95rem !important; line-height: 1.1 !important; }
  body.theme-light p,
  body.theme-light li,
  body.theme-light .term-def,
  body.theme-light .step-text,
  body.theme-light .rc-text,
  body.theme-light .article p { font-size: 1rem !important; line-height: 1.85 !important; }
  .sec-title, .gs-title, .phase-title, .q-title { font-size: 1.15rem !important; }
  .q-card, .country-info, .poa-box, .country-card, .right-card, .gs-item,
  .demand-item, .ci-row, .script-box, .checklist-box { padding: 1rem !important; }
  nav { height: 60px !important; padding: 0 1rem !important; }
  .logo-text { font-size: 1rem !important; }
  .logo-mark { width: 30px !important; height: 30px !important; font-size: 14px !important; }
  .nav-link-ai { display: none !important; }
}

/* ── NAV — rich chocolate ── */
nav,
body.theme-light nav,
body.theme-dark nav {
  background: rgba(20,10,2,.97) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}
.logo-text { color:#EEE8DC!important; font-family:var(--cc-display)!important; font-size:1.1rem!important; font-weight:700!important; letter-spacing:-.01em!important; }
.logo-text span { color:#8AB88E!important; }
.logo-mark { width:34px!important; height:34px!important; background:linear-gradient(135deg,#4E7A52,#3A6040)!important; border-radius:9px!important; display:flex!important; align-items:center!important; justify-content:center!important; font-size:16px!important; flex-shrink:0!important; }
.nav-link, .nav-link-ai { color:rgba(238,232,220,.58)!important; font-size:.8rem!important; }
.nav-link:hover, .nav-link-ai:hover { color:rgba(238,232,220,.92)!important; }
.btn-print, .btn-nav-print { background:rgba(255,255,255,.10)!important; color:rgba(238,232,220,.80)!important; border:1px solid rgba(255,255,255,.14)!important; border-radius:7px!important; }
.hamburger { color:rgba(238,232,220,.75)!important; }

/* ── COUNTRY TABS ── */
body.theme-light .ctab { background:var(--cc-cream)!important; border:1.5px solid rgba(90,50,10,.16)!important; color:var(--cc-text-l2)!important; }
body.theme-light .ctab.active { background:var(--cc-gold-l)!important; border-color:var(--cc-gold)!important; color:var(--cc-gold-dark)!important; }
body.theme-dark .ctab { background:rgba(255,255,255,.05)!important; border:1.5px solid rgba(255,255,255,.10)!important; color:rgba(238,232,220,.75)!important; }
body.theme-dark .ctab.active { background:var(--cc-gold-l)!important; border-color:var(--cc-gold)!important; color:var(--cc-gold)!important; }

/* ── CALLOUTS — warmer ── */
body.theme-light .pearl, body.theme-light .callout.sage { background:rgba(78,122,82,.08)!important; border-left:3px solid var(--cc-sage)!important; border-radius:0 14px 14px 0!important; }
body.theme-light .warn, body.theme-light .warn-box, body.theme-light .callout { background:rgba(200,149,42,.09)!important; border-left:3px solid var(--cc-gold)!important; border-radius:0 14px 14px 0!important; }
body.theme-light .danger { background:rgba(184,64,64,.08)!important; border-left:3px solid var(--cc-red)!important; border-radius:0 14px 14px 0!important; }
body.theme-light .pearl p, body.theme-light .warn p, body.theme-light .danger p, body.theme-light .callout p { color:var(--cc-text-l2)!important; }

/* ── CROSS-LINKS ── */
body.theme-light .cross-link { background:var(--cc-cream-2)!important; border:1px solid rgba(90,50,10,.14)!important; border-radius:12px!important; }
body.theme-light .cross-link:hover { border-color:var(--cc-gold-m)!important; background:var(--cc-gold-l)!important; }
body.theme-light .cross-link span:first-child { color:var(--cc-text-l2)!important; }

/* ── SECTION LABELS ── */
.cc-label, .sec-label, .section-label { font-family:var(--cc-sans)!important; font-size:.65rem!important; font-weight:700!important; letter-spacing:.11em!important; text-transform:uppercase!important; }
body.theme-dark .cc-label, body.theme-dark .sec-label { color:var(--cc-gold)!important; }
body.theme-light .cc-label, body.theme-light .sec-label { color:var(--cc-gold-dark)!important; }

/* ── FOOTER ── */
footer { border-top:1px solid rgba(255,255,255,.07); padding:2.25rem 2rem; text-align:center; margin-top:4rem; }
body.theme-light footer { background:#EDE4D8!important; border-top:1px solid rgba(90,50,10,.12)!important; }
body.theme-light footer a, body.theme-light footer p { color:rgba(42,31,16,.55)!important; font-size:.78rem!important; }
body.theme-dark footer { background:#120A02!important; border-top:1px solid rgba(255,255,255,.07)!important; }
body.theme-dark footer a, body.theme-dark footer p { color:rgba(238,232,220,.42)!important; }
footer a:hover { opacity:.80; }

/* ── SUPPORT STRIP ── */
.support-quiet { margin-top:3rem; padding-top:1.75rem; border-top:1px solid currentColor; text-align:center; opacity:.85; }
body.theme-dark .support-quiet { border-color:rgba(255,255,255,.07)!important; }
body.theme-light .support-quiet { border-color:rgba(90,50,10,.10)!important; }
.support-quiet p { font-family:var(--cc-serif)!important; font-size:.88rem!important; line-height:1.75!important; margin-bottom:.75rem!important; }
body.theme-dark .support-quiet p { color:rgba(238,232,220,.50)!important; }
body.theme-light .support-quiet p { color:rgba(42,31,16,.50)!important; }
.support-quiet a { display:inline-flex!important; align-items:center!important; gap:.6rem!important; background:#FFDD00!important; color:#222!important; text-decoration:none!important; padding:.58rem 1.35rem!important; border-radius:50px!important; font-size:.86rem!important; font-weight:700!important; font-family:var(--cc-sans)!important; transition:opacity .15s!important; }
.support-quiet a:hover { opacity:.82!important; }

/* ── PRINT ── */
@media print {
  nav,footer,.support-quiet,.nav-drawer,.nav-drawer-overlay,.hamburger,.btn-print,.btn-nav-print,.country-bar { display:none!important; }
  body { background:white!important; color:#1A1A1A!important; }
  p,li { font-size:11pt!important; line-height:1.7!important; }
}

/* ── DRAWER ── */
.nav-drawer { position:fixed; top:0; right:-320px; width:300px; height:100vh; overflow-y:auto; z-index:300; padding:0 0 4rem; transition:right .28s cubic-bezier(.4,0,.2,1); background:#150C02!important; border-left:1px solid rgba(255,255,255,.09)!important; }
.nav-drawer.open { right:0; }
.nav-drawer-overlay { position:fixed; inset:0; z-index:299; opacity:0; pointer-events:none; transition:opacity .28s; background:rgba(10,5,0,.72)!important; }
.nav-drawer-overlay.open { opacity:1; pointer-events:all; }
.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem; position:sticky; top:0; z-index:1; background:#150C02!important; border-bottom:1px solid rgba(255,255,255,.07)!important; }
.drawer-logo { display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.drawer-logo-mark { width:30px!important; height:30px!important; background:linear-gradient(135deg,#4E7A52,#3A6040)!important; border-radius:8px!important; display:flex!important; align-items:center!important; justify-content:center!important; font-size:14px!important; flex-shrink:0!important; }
.drawer-logo-text { color:#EEE8DC!important; font-family:var(--cc-display)!important; font-size:1.05rem!important; font-weight:700!important; text-decoration:none!important; }
.drawer-logo-text span { color:#8AB88E!important; }
.drawer-close { background:rgba(255,255,255,.07)!important; color:rgba(238,232,220,.55)!important; border:none!important; border-radius:7px!important; width:30px!important; height:30px!important; cursor:pointer!important; font-size:.85rem!important; display:flex; align-items:center; justify-content:center; }
.drawer-close:hover { background:rgba(255,255,255,.12)!important; }
.drawer-section { padding:.35rem .7rem; }
.drawer-section-label { display:block; padding:.6rem .5rem .3rem; color:rgba(238,232,220,.45)!important; font-family:var(--cc-sans)!important; font-size:.65rem!important; font-weight:700!important; letter-spacing:.12em!important; text-transform:uppercase!important; }
.drawer-link { color:rgba(238,232,220,.85)!important; font-family:var(--cc-sans)!important; font-size:.92rem!important; font-weight:500!important; border-radius:9px!important; padding:.72rem .85rem!important; text-decoration:none!important; display:flex!important; align-items:center!important; gap:.6rem!important; transition:background .15s!important; }
.drawer-link:hover { background:rgba(255,255,255,.08)!important; color:#EEE8DC!important; }
.drawer-link.crisis { color:#F09090!important; background:rgba(184,64,64,.14)!important; font-weight:600!important; }
.drawer-link.crisis:hover { background:rgba(184,64,64,.22)!important; }
.dl-icon { font-size:14px!important; width:20px!important; text-align:center!important; flex-shrink:0!important; }
.drawer-divider { background:rgba(255,255,255,.08)!important; height:1px!important; margin:.5rem 0!important; }

/* ── HAMBURGER ── */
.hamburger { display:none; position:fixed; bottom:1.25rem; right:1.25rem; z-index:199; width:52px; height:52px; border-radius:50%; background:#1E1408; border:1px solid rgba(255,255,255,.14); box-shadow:0 4px 20px rgba(0,0,0,.40); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; transition:all .2s; }
.hamburger:hover { background:#2A1C0C; }
.hamburger span { display:block; width:20px; height:1.5px; background:rgba(238,232,220,.80); border-radius:2px; transition:all .25s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4.5px,4.5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4.5px,-4.5px); }
@media (max-width:900px) { .hamburger { display:flex; } }