/* ============================================================
   Phoenix Family Law — "Evergreen" Legal Design System theme
   Second, switchable theme layered over the Sanctuary base.
   Non-invasive: this file (a) remaps style.css's existing CSS
   variable names to the Evergreen token values so every existing
   component recolours automatically, and (b) adds the structural
   overrides the Evergreen look needs. Loaded AFTER style.css /
   search.css / overlay.css and scoped under [data-theme="evergreen"].
   Toggle Sanctuary <-> Evergreen removes this scope entirely.
   ============================================================ */

/* ---------- self-hosted fonts (Montserrat + Lora, no Google requests) ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/montserrat-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/montserrat-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/montserrat-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/montserrat-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/montserrat-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/montserrat-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/montserrat-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/montserrat-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/lora-400-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/lora-400-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lora";font-style:italic;font-weight:500;font-display:swap;src:url("../assets/fonts/lora-500-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lora";font-style:italic;font-weight:500;font-display:swap;src:url("../assets/fonts/lora-500-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/lora-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/lora-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/lora-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/lora-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/lora-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/lora-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   1. VARIABLE REMAP — Evergreen token values onto Sanctuary names
   Every component in style.css/search.css/overlay.css reads these,
   so this block alone recolours the whole site.
   ============================================================ */
:root[data-theme="evergreen"] {
  --paper: #FBFAF7;        /* page */
  --paper-deep: #EFF3F1;   /* mist panels */
  --card: #FFFFFF;
  --ink: #0A2B25;          /* teal-900 (headings/ink) */
  --ink-soft: #33463F;     /* body */
  --teal: #24594E;         /* teal-600 */
  --teal-deep: #0A2B25;    /* teal-900 (dark surfaces) */
  --sage: #316B5E;         /* teal-500 */
  --sage-deep: #1A473E;    /* teal-700 */
  --sage-tint: #EDF3F0;    /* teal-50 */
  --apricot: #C2953C;      /* gold-500 */
  --apricot-deep: #A97E2C; /* gold-600 (kickers on light) */
  --apricot-tint: #FAF4E3; /* gold-50 */
  --gold: #C2953C;         /* gold-500 */
  --gold-tint: #F5E8CC;    /* gold-100 */
  --coral: #B5473A;        /* action-exit warm red */
  --line: #DFE5E1;
  --shadow: 0 1px 2px rgba(10,43,37,.05), 0 4px 14px rgba(10,43,37,.06);
  --radius: 16px;
  --measure: 62ch;
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;

  /* Evergreen-only helper tokens used by the structural overrides below */
  --eg-teal-950: #06201B;
  --eg-teal-900: #0A2B25;
  --eg-teal-800: #113831;
  --eg-teal-700: #1A473E;
  --eg-gold-700: #8F6A1E;
  --eg-gold-600: #A97E2C;
  /* kicker/label ink on light surfaces: a darkened gold that clears WCAG AA
     (>=4.5:1) at 13px on paper/mist/cream/warm-white — DS gold-600 (#A97E2C)
     is only ~3.5:1 there. Mirrors the Sanctuary theme's AA colour nudges. */
  --eg-kicker-on-light: #856419;
  --eg-gold-500: #C2953C;
  --eg-gold-400: #DBAE50;
  --eg-gold-100: #F5E8CC;
  --eg-gold-50:  #FAF4E3;
  --eg-on-dark: #F2F1EA;
  --eg-muted-on-dark: #A9BDB5;
  --eg-exit-hover: #C9594B;
}

/* ============================================================
   2. STRUCTURAL OVERRIDES  (all scoped to [data-theme="evergreen"])
   ============================================================ */

/* ---------- body: Lora 17/1.7, no paper grain ---------- */
[data-theme="evergreen"] body {
  font-size: 17px;
  line-height: 1.7;
  background: var(--paper);
}
[data-theme="evergreen"] body::before { display: none; }

/* ---------- kickers / eyebrows: Montserrat caps, gold ---------- */
[data-theme="evergreen"] .eyebrow,
[data-theme="evergreen"] .section-head .kicker,
[data-theme="evergreen"] .flow-card .qtype,
[data-theme="evergreen"] .cta-band .cta-kicker,
[data-theme="evergreen"] .timeline-detail .meta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eg-kicker-on-light);   /* AA-safe darkened gold on light surfaces */
}
[data-theme="evergreen"] .hero .eyebrow::before { background: var(--eg-gold-500); }

/* ---------- quick exit: warm action-exit red (remapped --coral) ---------- */
[data-theme="evergreen"] .quick-exit:hover { background: var(--eg-exit-hover); }

/* ---------- header: dark teal bar ---------- */
[data-theme="evergreen"] .site-header {
  background: var(--eg-teal-900);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: none;
}
[data-theme="evergreen"] .brand { color: var(--eg-on-dark); }
[data-theme="evergreen"] .brand small { color: var(--eg-muted-on-dark); }

/* brand mark: PNG logo on the dark bar for evergreen, inline SVG for sanctuary */
.brand .brand-logo { display: none; }
[data-theme="evergreen"] .brand > svg { display: none; }
[data-theme="evergreen"] .brand .brand-logo {
  display: block;
  height: 40px;
  width: auto;
  border-radius: 6px;
}

/* nav links on the dark bar (desktop inline state) */
[data-theme="evergreen"] nav.primary a,
[data-theme="evergreen"] nav.primary .navbtn {
  color: var(--eg-on-dark);
}
[data-theme="evergreen"] nav.primary a:hover,
[data-theme="evergreen"] nav.primary .navbtn:hover,
[data-theme="evergreen"] nav.primary li.open > .navbtn {
  background: rgba(255,255,255,.10);
  color: #fff;
}
[data-theme="evergreen"] nav.primary a[aria-current="page"] { color: var(--eg-gold-400); }
[data-theme="evergreen"] .navbtn::after { color: var(--eg-gold-400); }

/* dropdowns: white cards with dark text */
[data-theme="evergreen"] .dropdown { background: #fff; border-color: var(--line); }
[data-theme="evergreen"] .dropdown a { color: var(--ink); }
[data-theme="evergreen"] .dropdown a:hover { background: var(--sage-tint); color: var(--eg-teal-900); }

/* search button + menu toggle restyled for the dark bar */
[data-theme="evergreen"] .search-open {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.25);
  color: var(--eg-on-dark);
}
[data-theme="evergreen"] .search-open:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
[data-theme="evergreen"] .search-open svg { color: var(--eg-gold-400); }
[data-theme="evergreen"] .menu-toggle { color: var(--eg-on-dark); border-color: rgba(255,255,255,.3); }
[data-theme="evergreen"] .menu-toggle:hover { background: rgba(255,255,255,.08); }

/* one gold CTA: the "Fixed-fee support" header pill */
[data-theme="evergreen"] .navbtn-support {
  background: var(--eg-gold-500);
  border-color: var(--eg-gold-500);
  color: var(--eg-teal-900);
}
[data-theme="evergreen"] .navbtn-support:hover {
  background: var(--eg-gold-400);
  border-color: var(--eg-gold-400);
  color: var(--eg-teal-900);
}

/* collapsed nav panel (burger): keep it dark so links stay legible.
   Covers the <=920px (style.css), 921-1220px (search.css) and 1221-1760px
   (style.css switcher-room extension) collapsed states. */
@media (max-width: 1760px) {
  [data-theme="evergreen"] nav.primary {
    background: var(--eg-teal-900);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  [data-theme="evergreen"] nav.primary .dropdown { background: none; }
  [data-theme="evergreen"] nav.primary .dropdown a { color: var(--eg-on-dark); }
  [data-theme="evergreen"] nav.primary .dropdown a:hover { background: rgba(255,255,255,.10); color: #fff; }
}

/* ---------- accordions: teal Montserrat heading, gold + ---------- */
[data-theme="evergreen"] details.qa summary { font-family: var(--font-display); font-weight: 600; }

/* ---------- interactive flow band ---------- */
[data-theme="evergreen"] .flow { background: var(--eg-teal-900); border-radius: 24px; }
[data-theme="evergreen"] .flow::before { border-color: rgba(219,174,80,.14); }
[data-theme="evergreen"] .flow .flow-label { color: var(--eg-gold-400); }
[data-theme="evergreen"] .flow h2,
[data-theme="evergreen"] .flow > h3 { font-family: var(--font-body); color: #fff; }
[data-theme="evergreen"] .flow-intro { color: var(--eg-muted-on-dark); }

/* answered trail rows: translucent white, gold check + "Change" affordance */
[data-theme="evergreen"] .flow-trail button {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--eg-on-dark);
  font-family: var(--font-body);
}
[data-theme="evergreen"] .flow-trail button::before {
  content: "\2713\00a0";
  color: var(--eg-gold-400);
  font-weight: 700;
}
[data-theme="evergreen"] .flow-trail button::after {
  content: "\00a0\00b7 Change";
  color: var(--eg-muted-on-dark);
  font-weight: 600;
  font-size: .92em;
}
[data-theme="evergreen"] .flow-trail button b { color: var(--eg-gold-400); }
[data-theme="evergreen"] .flow-trail button:hover { background: rgba(255,255,255,.16); }

/* current question card: warm-white, teal serif question */
[data-theme="evergreen"] .flow-card { background: #FDFCF8; border-radius: 20px; }
[data-theme="evergreen"] .flow-card h3 { font-family: var(--font-body); color: var(--eg-teal-900); }

/* option pills: cream, gold border, radius 14px */
[data-theme="evergreen"] .flow-options button {
  background: var(--eg-gold-50);
  border: 1.5px solid var(--eg-gold-100);
  border-radius: 14px;
  color: var(--eg-teal-900);
  font-family: var(--font-body);
  transition: border-color .15s var(--eg-ease, ease), background .15s ease, transform .15s ease;
}
[data-theme="evergreen"] .flow-options button:hover {
  background: var(--eg-gold-100);
  border-color: var(--eg-gold-500);
  transform: translateY(-1px);
}
[data-theme="evergreen"] .flow-options button .tag {
  background: var(--eg-gold-100);
  color: var(--eg-gold-700);
}
[data-theme="evergreen"] .flow-options button.emergency {
  background: #FBEDEA;
  border-color: var(--coral);
  color: var(--coral);
}
[data-theme="evergreen"] .flow-options button.emergency:hover { background: #F6DCD7; }

/* end-card links as pills: teal-800 fill / outline ghost */
[data-theme="evergreen"] .flow-links a {
  background: var(--eg-teal-800);
  color: #fff;
  border-radius: 999px;
}
[data-theme="evergreen"] .flow-links a:hover { background: var(--eg-teal-700); color: #fff; }
[data-theme="evergreen"] .flow-links a.ghost {
  background: none;
  border: 1.5px solid var(--eg-teal-800);
  color: var(--eg-teal-800);
}
[data-theme="evergreen"] .flow-links a.ghost:hover { background: var(--sage-tint); color: var(--eg-teal-900); }

/* ---------- timeline: active stop dark, gold index ---------- */
[data-theme="evergreen"] .timeline-track button.active { background: var(--eg-teal-900); border-color: var(--eg-teal-900); }
[data-theme="evergreen"] .timeline-track button.active .idx { color: var(--eg-gold-400); }
[data-theme="evergreen"] .timeline-track button .idx { font-family: var(--font-display); }

/* ---------- search dialog: evergreen accents (search.css is variable-driven;
   these fix the few hardcoded values) ---------- */
[data-theme="evergreen"] .search-safety {
  background: #F7ECEA;
  border-left-color: var(--coral);
}
[data-theme="evergreen"] .search-title small,
[data-theme="evergreen"] .search-head small { color: var(--eg-muted-on-dark); }

/* ---------- safety overlay: evergreen hovers (overlay.css is variable-driven) ---------- */
[data-theme="evergreen"] .safety-exit:hover { background: var(--eg-exit-hover); }
[data-theme="evergreen"] .safety-close:hover { background: var(--eg-gold-400); }

/* ============================================================
   3. THEME SWITCHER — evergreen appearance (base lives in style.css)
   ============================================================ */
[data-theme="evergreen"] .theme-switch {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
}
[data-theme="evergreen"] .theme-switch .theme-opt {
  color: var(--eg-muted-on-dark);
  font-family: var(--font-display);
}
[data-theme="evergreen"] .theme-switch .theme-opt:hover { color: var(--eg-on-dark); }
[data-theme="evergreen"] .theme-switch .theme-opt[aria-pressed="true"] {
  background: var(--eg-gold-500);
  color: var(--eg-teal-900);
}
[data-theme="evergreen"] .theme-switch .theme-opt[aria-pressed="true"]:hover { color: var(--eg-teal-900); }

/* ---------- focus ring: keep visible (gold on evergreen) ---------- */
[data-theme="evergreen"] a:focus-visible,
[data-theme="evergreen"] button:focus-visible,
[data-theme="evergreen"] summary:focus-visible,
[data-theme="evergreen"] [tabindex="-1"]:focus-visible {
  outline: 2px solid var(--eg-gold-500);
  outline-offset: 2px;
}
[data-theme="evergreen"] .site-header a:focus-visible,
[data-theme="evergreen"] .site-header button:focus-visible,
[data-theme="evergreen"] .flow-trail button:focus-visible,
[data-theme="evergreen"] .flow-foot button:focus-visible,
[data-theme="evergreen"] .site-footer a:focus-visible {
  outline-color: var(--eg-gold-400);
}