/* Ranges Counselling — shared site chrome.
   Navigation, mobile drawer, footer, crisis-support strip, skip link, and the
   canonical colour palette for the whole site. Loaded on every page. */
/* ── Canonical palette ────────────────────────────────────────────────────────
   One definition for the whole site. Every page loads this file, so these are
   the only colour values that exist; site.css and the page-level stylesheets
   alias these rather than restating them.

   Contrast ratios noted below are measured against the surface each token is
   meant to sit on. Every token used for text clears WCAG AA (4.5:1).
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* Forest — the spine of the brand */
  --rc-fd:#0E1810;          /* deepest: nav bar, footer, page hero          */
  --rc-f:#1C3620;           /* forest: dark sections; body ink on cream 11.5:1 */
  --rc-f2:#243D27;          /* raised: cards sitting on a dark section      */
  --rc-stone:#3D4F3F;       /* secondary text on cream               7.7:1  */
  --rc-mist:#5A695D;        /* meta text on cream                    5.1:1  */
  --rc-sage:#486D3F;        /* sage accent                           5.2:1  */

  /* Gold */
  --rc-g:#C4892A;           /* fills, rules, large display type             */
  --rc-g-ink:#855D1D;       /* gold as text on cream                 5.1:1  */
  --rc-gl:#E8B96A;          /* gold as text on forest                7.0:1  */
  --rc-g-deep:#A6731F;      /* pressed / hover state on a gold fill         */

  /* Terracotta */
  --rc-t:#9B4A35;           /* CTA fills (#fff on it 6.1:1); text on cream 5.4:1 */
  --rc-t2:#7D3B2C;          /* deep: hover, text on cream            7.3:1  */
  --rc-tl:#D29387;          /* terracotta as text on forest          5.2:1  */

  /* Cream */
  --rc-li:#F5EFE6;          /* page background                              */
  --rc-ld:#EDE4D2;          /* alternating band                             */
  --rc-lb:#E2D8C4;          /* edge / divider on cream                      */
  --rc-border:#CCC5B5;      /* border on cream                              */

  /* Text on dark — four steps. All clear 4.5:1 on #0E1810, #1C3620 and #243D27,
     which is why the lowest step is .56 and not the .2-.5 it replaced. */
  --rc-on-1:rgba(255,255,255,.93);   /* primary   */
  --rc-on-2:rgba(255,255,255,.78);   /* secondary */
  --rc-on-3:rgba(255,255,255,.66);   /* tertiary  */
  --rc-on-4:rgba(255,255,255,.56);   /* labels, meta — lowest legible step */

  /* Rules and fills on dark (never text). Four line steps: line-0 for
     boundaries that carry meaning (link underlines, rings on a saturated
     surface), then progressively quieter dividers. */
  --rc-line-0:rgba(255,255,255,.50);
  --rc-line-1:rgba(255,255,255,.22); /* visible rule    */
  --rc-line-2:rgba(255,255,255,.12); /* hairline        */
  --rc-line-3:rgba(255,255,255,.07); /* faintest divide */
  --rc-fill-1:rgba(255,255,255,.08); /* raised surface  */
  --rc-fill-2:rgba(255,255,255,.05); /* faintest surface*/
  --rc-ghost:rgba(255,255,255,.05);  /* oversized decorative glyphs */

  /* Rules and fills on cream */
  --rc-line-d1:rgba(28,54,32,.22);
  --rc-line-d2:rgba(28,54,32,.10);
  --rc-fill-d1:rgba(28,54,32,.06);

  /* Tinted accents */
  --rc-g-fill:rgba(196,137,42,.18);
  --rc-g-line:rgba(196,137,42,.35);
  --rc-t-fill:rgba(155,74,53,.18);
  --rc-t-fill-2:rgba(155,74,53,.10);
  --rc-t-line:rgba(155,74,53,.38);

  /* Hero background washes */
  --rc-wash-f:rgba(36,61,39,.66);
  --rc-wash-t:rgba(125,59,44,.18);

  /* Elevation — forest-tinted rather than neutral black */
  --rc-shade-1:rgba(14,24,16,.12);
  --rc-shade-2:rgba(14,24,16,.22);
  --rc-shade-3:rgba(14,24,16,.40);
  --rc-scrim:rgba(14,24,16,.55);    /* drawer overlay */
  /* Near-opaque surfaces: sticky bars and pills that let a little of the page
     show through. One value each, rather than one per page. */
  --rc-veil-li:rgba(245,239,230,.97);
  --rc-veil-fd:rgba(14,24,16,.98);

  /* Emotion-wheel diagram hues. The wheel needs six distinguishable segments;
     four come from the palette, these two carry the remaining quadrants. */
  --rc-wheel-plum:#8A5A6B;
  --rc-wheel-slate:#3E5C74;

  /* Surface-aware gold text. #C4892A clears 4.5:1 on neither cream nor forest,
     so gold text resolves through this token: cream surfaces inherit the deep
     gold, dark surfaces re-declare it below and inherit the light gold. */
  --rc-g-text:var(--rc-g-ink);

  --rc-serif:'Lora',Georgia,serif;
  --rc-sans:'Inter',system-ui,sans-serif;
}

/* Dark surfaces in the shared chrome flip gold text to the light gold.
   Page-level stylesheets add their own dark containers to this list. */
nav.n.dark,.ndrawer,.skip-link,footer,.rc-crisis{--rc-g-text:var(--rc-gl)}
nav.n{position:fixed;top:0;left:0;right:0;z-index:900;font-family:var(--rc-sans)}
.nb{height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;background:var(--rc-veil-li);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--rc-line-d2);transition:all .3s}
nav.n.dark .nb{background:var(--rc-veil-fd);border-color:var(--rc-line-3)}
.nl{font-family:var(--rc-serif);font-size:17px;font-weight:700;color:var(--rc-f);
  letter-spacing:-.01em;transition:color .3s;display:flex;flex-direction:column;gap:1px}
.nl-tag{font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rc-mist);transition:color .3s}
nav.n.dark .nl{color:#fff}
nav.n.dark .nl-tag{color:var(--rc-on-4)}
.nlinks{display:none;align-items:center;gap:0;list-style:none}
.ndd{position:relative}
.na{font-size:13px;color:var(--rc-stone);padding:0 13px;height:64px;
  display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap;
  transition:color .2s;background:none;border:none;font-family:var(--rc-sans)}
.na:hover,.ndd:hover>.na{color:var(--rc-f)}
.na-lead{color:var(--rc-f);font-weight:500}
nav.n.dark .na-lead{color:var(--rc-on-2)}
nav.n.dark .na{color:var(--rc-on-4)}
nav.n.dark .ndd:hover>.na,nav.n.dark .na:hover{color:#fff}
.nc{display:inline-block;width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:4px solid currentColor;
  opacity:.4;transition:transform .2s;margin-top:1px}
.ndd:hover>.na .nc{transform:rotate(180deg);opacity:.9}
.np{display:none;position:absolute;top:100%;left:0;min-width:220px;
  background:#fff;border:1px solid var(--rc-line-d2);border-top:3px solid var(--rc-g);
  box-shadow:0 12px 44px var(--rc-shade-1);z-index:200;padding:4px 0}
.ndd:hover>.np{display:block}
nav.n.dark .np{background:var(--rc-f);border-color:var(--rc-line-3)}
.npi{display:flex;flex-direction:column;padding:10px 18px;
  border-bottom:1px solid var(--rc-line-d2);transition:background .15s}
.npi:last-child{border-bottom:none}
.npi:hover{background:var(--rc-li)}
nav.n.dark .npi:hover{background:var(--rc-fill-2)}
nav.n.dark .npi{border-color:var(--rc-line-3)}
.npl{font-size:8.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rc-t);margin-bottom:2px}
nav.n.dark .npl{color:var(--rc-g-text)}
.npt{font-size:13.5px;color:var(--rc-f)}
.npi:hover .npt{color:var(--rc-f)}
nav.n.dark .npt{color:var(--rc-on-2)}
nav.n.dark .npi:hover .npt{color:#fff}
.nbook{font-size:12px;font-weight:600;letter-spacing:.05em;padding:10px 22px;
  background:var(--rc-t);color:#fff!important;border:1.5px solid var(--rc-t);
  margin-left:8px;transition:all .22s;min-height:44px;display:flex;align-items:center}
.nbook:hover{background:transparent;color:var(--rc-t)!important}
nav.n.dark .nbook{background:var(--rc-g);border-color:var(--rc-g)}
nav.n.dark .nbook:hover{background:transparent;color:var(--rc-g-text)!important}
.nham{display:flex;flex-direction:column;gap:5px;padding:8px;
  min-width:44px;min-height:44px;justify-content:center;align-items:center}
.nham span{display:block;width:22px;height:1.5px;background:var(--rc-stone);transition:all .28s}
nav.n.dark .nham span{background:var(--rc-on-4)}
.nham.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}
.nham.open span:nth-child(2){opacity:0}
.nham.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}
.ndrawer{position:fixed;inset:0;z-index:890;background:var(--rc-fd);
  transform:translateX(100%);transition:transform .36s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;padding:0 0 32px;overflow-y:auto}
.ndrawer.open{transform:translateX(0)}
.nd-head{height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;border-bottom:1px solid var(--rc-line-3);flex-shrink:0}
.nd-logo{font-family:var(--rc-serif);font-size:16px;font-weight:700;color:#fff}
.nd-x{width:36px;height:36px;background:var(--rc-fill-1);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;cursor:pointer}
.nd-body{padding:8px 0;flex:1}
.nd-section{margin-bottom:2px}
.nd-sl{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rc-on-4);padding:14px 24px 6px;display:block;
  border-bottom:1px solid var(--rc-line-3);margin-bottom:4px}
.nd-link{display:flex;align-items:center;font-family:var(--rc-serif);font-size:22px;
  font-weight:400;color:var(--rc-on-3);padding:11px 24px;
  border-bottom:1px solid var(--rc-line-3);transition:color .2s;min-height:50px}
.nd-link:hover{color:#fff}
.nd-sub{display:flex;align-items:center;font-size:14px;color:var(--rc-on-4);
  padding:9px 24px 9px 40px;border-bottom:1px solid var(--rc-line-3);
  transition:color .2s;min-height:44px}
.nd-sub:hover{color:var(--rc-on-2)}
.nd-cta{display:flex;align-items:center;justify-content:center;
  margin:20px 24px 0;padding:16px;background:var(--rc-t);color:#fff;
  font-size:13px;font-weight:600;letter-spacing:.05em}
.nav-offset{height:64px}
.noverlay{display:none;position:fixed;inset:0;background:var(--rc-scrim);z-index:885}
.noverlay.open{display:block}
footer{background:var(--rc-fd);padding:56px 0 36px}
.fg{display:grid;gap:36px;padding-bottom:36px;margin-bottom:36px;
  border-bottom:1px solid var(--rc-line-3)}
.fb-name{font-family:var(--rc-serif);font-size:17px;color:#fff;margin-bottom:4px}
.fb-tag{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rc-on-4);margin-bottom:14px}
.fb-body{font-size:13px;color:var(--rc-on-4);line-height:1.7;
  max-width:260px;margin-bottom:16px}
.fb-ct{font-size:13px;color:var(--rc-on-4);margin-bottom:6px;
  display:flex;align-items:center;gap:6px}
.fb-ct a{color:var(--rc-on-3);transition:color .2s}
.fb-ct a:hover{color:#fff}
.fc-h{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rc-on-4);margin-bottom:12px}
.fc-links{display:flex;flex-direction:column;gap:8px}
.fc-link{font-size:13px;color:var(--rc-on-4);transition:color .2s}
.fc-link:hover,.fc-link a{color:var(--rc-on-2)}
.fc-link a:hover{color:#fff}
.fbot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.fcopy{font-size:11px;color:var(--rc-on-4)}
@media(min-width:640px){
.fg{grid-template-columns:2fr 1fr}
}
@media(min-width:960px){
.nlinks{display:flex}
.nham{display:none}
.nb{padding:0 52px}
.fg{grid-template-columns:2fr 1fr 1fr 1fr}
}

/* ---- skip link ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;padding:12px 20px;
  background:var(--rc-fd);color:#fff;font-family:var(--rc-sans);font-size:14px;
  font-weight:600;text-decoration:none;border-bottom-right-radius:4px}
.skip-link:focus{left:0}

/* ---- keyboard-operable dropdowns ----
   The panels were previously hover-only, so keyboard users could focus the
   trigger but never open it. .ndd.open is toggled by site.js on click/Enter
   and mirrors the existing :hover styles. */
.ndd>.na{position:relative}
.ndd.open>.np{opacity:1;visibility:visible;transform:translateY(0)}
.ndd.open>.na{color:var(--rc-g-text)}
nav.n.dark .ndd.open>.na{color:#fff}
.ndd.open>.na .nc{transform:rotate(180deg)}

/* visible focus for every interactive element in the chrome */
.n a:focus-visible,.n button:focus-visible,footer a:focus-visible,
.ndrawer a:focus-visible,.ndrawer button:focus-visible,
.rc-crisis a:focus-visible,.skip-link:focus-visible{
  outline:2px solid var(--rc-g);outline-offset:3px;border-radius:2px}

/* ---- crisis support strip ----
   Sits inside the footer on every page, above the copyright row. */
.rc-crisis{margin-top:40px;padding-top:26px;
  border-top:1px solid var(--rc-line-2);font-family:var(--rc-sans)}
.rc-crisis-h{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rc-g-text);margin-bottom:10px}
.rc-crisis-p{font-size:13px;line-height:1.65;margin:0 0 14px;max-width:64ch;
  color:var(--rc-on-4)}
.rc-crisis-p strong{color:var(--rc-on-2);font-weight:600}
.rc-crisis-list{list-style:none;margin:0;padding:0;display:grid;gap:8px 30px}
.rc-crisis-list li{font-size:13px;line-height:1.5;color:var(--rc-on-4)}
.rc-crisis-list a{color:#fff;font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--rc-line-1);white-space:nowrap}
.rc-crisis-list a:hover{border-bottom-color:var(--rc-gl)}
.rc-crisis-name{color:var(--rc-on-3)}
@media(min-width:640px){.rc-crisis-list{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.rc-crisis-list{grid-template-columns:repeat(3,1fr)}}

/* ---- footer legal row ---- */
.f-legal{font-size:12px;color:var(--rc-on-4);margin-top:6px}
.f-legal a{color:var(--rc-on-4);text-decoration:none;
  border-bottom:1px solid transparent}
.f-legal a:hover{color:#fff;border-bottom-color:var(--rc-line-1)}

@media(prefers-reduced-motion:reduce){
  .ndrawer,.np,.nb,.na{transition:none!important}
}
/* The full bar (lead item + two dropdowns + 3 links + CTA) needs more room than
   the old 5-item nav: keep the drawer until 1100px. */
@media(min-width:960px) and (max-width:1099px){.nlinks{display:none}.nham{display:flex}}