/* =========================================================================
   HEADWATERS — Design System
   Youth AOD support, Northern Rivers NSW
   Dark-first, calm-tech meets street. Token-driven so the whole site
   re-themes from the :root block below.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Surfaces */
  --bg-base:     #0B0F14;
  --bg-surface:  #141A22;
  --bg-surface-2:#1B232D;
  --border:      #25303B;

  /* Text */
  --text-primary:#F2F5F7;
  --text-muted:  #8A97A6;

  /* Accents */
  --accent:      #5EEAD4;   /* river aqua-mint */
  --accent-2:    #A78BFA;   /* soft violet */
  --accent-ink:  #04201C;   /* text that sits on accent */

  /* Reserved — emergency UI ONLY */
  --emergency:   #FF5A5F;
  --emergency-ink:#2A0709;

  --success:     #86EFAC;

  /* Type */
  --font-display:"Clash Display","General Sans",system-ui,sans-serif;
  --font-body:   "Inter",system-ui,-apple-system,sans-serif;
  --font-mono:   "Space Grotesk","Inter",monospace;

  /* Shape & motion */
  --radius:   16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --shadow:   0 10px 40px rgba(0,0,0,.45);
  --glow:     0 0 0 1px rgba(94,234,212,.18), 0 8px 30px rgba(94,234,212,.10);
  --maxw:     1100px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

/* Light mode */
[data-theme="light"] {
  --bg-base:     #F6F8FA;
  --bg-surface:  #FFFFFF;
  --bg-surface-2:#EEF2F6;
  --border:      #DCE3EA;
  --text-primary:#0B0F14;
  --text-muted:  #5A6675;
  --accent-ink:  #04201C;
  --shadow:      0 10px 30px rgba(13,30,45,.10);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  background:var(--bg-base);
  color:var(--text-primary);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul { list-style:none; }

/* Subtle film grain for the "expensive" feel.
   No mix-blend-mode: a blended fixed layer forces a full-screen re-composite
   on every scroll frame (= jank). A plain low-opacity layer is near-free. */
body::after {
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; will-change:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }
.section { padding-block:clamp(48px,9vw,110px); position:relative; z-index:2; }
.stack { display:flex; flex-direction:column; gap:16px; }
.eyebrow {
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); font-weight:600;
}
.muted { color:var(--text-muted); }
.center { text-align:center; }

/* ---------- Type ---------- */
h1,h2,h3 { font-family:var(--font-display); font-weight:700; line-height:1.05; letter-spacing:-.02em; }
h1 { font-size:clamp(2.2rem,6vw,4.2rem); }
h2 { font-size:clamp(1.7rem,4vw,2.8rem); }
h3 { font-size:clamp(1.15rem,2.2vw,1.5rem); }
.lead { font-size:clamp(1.05rem,2vw,1.3rem); color:var(--text-muted); max-width:60ch; }
.grad-text {
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 1.4em; border-radius:999px; font-weight:600;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
  white-space:nowrap;
}
.btn:hover { transform:translateY(-2px); }
.btn:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.btn-primary { background:var(--accent); color:var(--accent-ink); box-shadow:var(--glow); }
.btn-ghost  { border:1px solid var(--border); background:var(--bg-surface); }
.btn-sm { padding:.55em 1em; font-size:.9rem; }

/* ---------- Site header ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg-base) 78%, transparent);
  border-bottom:1px solid var(--border);
}
.nav { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.brand { display:flex; align-items:center; gap:.55em; font-family:var(--font-display); font-weight:700; font-size:1.2rem; }
.brand .dot { width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:var(--glow); }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a {
  padding:.5em .85em; border-radius:999px; font-size:.95rem; color:var(--text-muted);
  transition:color .2s, background .2s;
}
.nav-links a:hover { color:var(--text-primary); background:var(--bg-surface); }
.nav-links a.active { color:var(--text-primary); background:var(--bg-surface); }
.nav-tools { display:flex; align-items:center; gap:8px; }
.icon-btn {
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--border); background:var(--bg-surface);
  transition:transform .2s, border-color .2s;
}
.icon-btn:hover { transform:translateY(-2px); border-color:var(--accent); }

/* Quick Exit — deliberately plain + high contrast, not decorative */
.quick-exit {
  background:var(--emergency); color:#fff; font-weight:700;
  padding:.55em 1.1em; border-radius:999px; display:inline-flex; align-items:center; gap:.4em;
  box-shadow:0 4px 18px rgba(255,90,95,.35);
}
.quick-exit:hover { transform:translateY(-2px); }

.nav-toggle { display:none; }

/* ---------- Emergency bar ---------- */
.emergency-bar { background:var(--bg-surface); border-bottom:1px solid var(--border); position:relative; z-index:40; }
.emergency-inner { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-block:12px; }
.emergency-label { font-weight:700; display:flex; align-items:center; gap:.45em; }
.emergency-label .pulse {
  width:9px; height:9px; border-radius:50%; background:var(--emergency);
  box-shadow:0 0 0 0 rgba(255,90,95,.6); animation:pulse 2s infinite;
}
@keyframes pulse { 70%{box-shadow:0 0 0 10px rgba(255,90,95,0);} 100%{box-shadow:0 0 0 0 rgba(255,90,95,0);} }
.emergency-actions { display:flex; gap:8px; flex-wrap:wrap; }
.e-btn {
  display:inline-flex; flex-direction:column; line-height:1.15;
  padding:.5em .9em; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg-base); min-height:48px; justify-content:center;
  transition:transform .15s, border-color .15s;
}
.e-btn:hover { transform:translateY(-2px); border-color:var(--emergency); }
.e-btn strong { font-size:1rem; }
.e-btn span { font-size:.78rem; color:var(--text-muted); }
.e-btn.e-000 { background:var(--emergency); border-color:var(--emergency); color:#fff; }
.e-btn.e-000 span { color:rgba(255,255,255,.85); }
.e-note { font-size:.8rem; color:var(--text-muted); }

/* ---------- Cards ---------- */
.card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
  transition:transform .25s var(--ease), border-color .25s;
}
.card.hover:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); }
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

/* nav cards on home */
.navcard { display:flex; flex-direction:column; gap:10px; min-height:190px; }
.navcard .ic { font-size:1.8rem; }
.navcard h3 { margin-top:auto; }
.navcard .arrow { color:var(--accent); font-weight:700; }

/* ---------- Tags / filter chips ---------- */
.chip {
  display:inline-flex; align-items:center; gap:.4em; padding:.4em .8em;
  border-radius:999px; border:1px solid var(--border); background:var(--bg-surface);
  font-size:.85rem; color:var(--text-muted); transition:all .15s;
}
.chip.toggle[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.chip:hover { border-color:var(--accent); }
.tag { font-size:.75rem; padding:.25em .65em; border-radius:999px; background:var(--bg-surface-2); color:var(--text-muted); }
.tag.free { color:var(--success); }
.tag.tele { color:var(--accent); }
.tag.mob  { color:var(--accent-2); }

/* ---------- Forms ---------- */
.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:.85rem; color:var(--text-muted); font-weight:500; }
input[type=text],input[type=search],select,textarea {
  width:100%; padding:.8em 1em; border-radius:var(--radius-sm);
  background:var(--bg-surface); border:1px solid var(--border); color:var(--text-primary);
  font:inherit;
}
input:focus,select:focus,textarea:focus { outline:2px solid var(--accent); border-color:transparent; }
.search-big { font-size:1.05rem; padding:1em 1.1em 1em 2.8em; }
.search-wrap { position:relative; }
.search-wrap .si { position:absolute; left:1em; top:50%; transform:translateY(-50%); color:var(--text-muted); }

/* ---------- Stat counters ---------- */
.stat { font-family:var(--font-mono); font-size:clamp(2.4rem,7vw,4rem); font-weight:600; color:var(--accent); }
.stat-label { color:var(--text-muted); max-width:24ch; }

/* ---------- Body map (What Drugs Do) ---------- */
.bodymap-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:start; }
.substance-picker { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.substance-picker .chip.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
.bodymap { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; position:relative; }
.bodymap svg { width:100%; height:auto; max-width:360px; margin-inline:auto; }
.bodymap .silhouette { fill:var(--bg-surface-2); stroke:var(--border); stroke-width:2; }
.bodymap .limbs { fill:none; stroke:var(--border); stroke-width:2.5; stroke-linecap:round; }
.hotspot { cursor:pointer; }
.hotspot .organ { fill:var(--accent); opacity:.18; stroke:var(--accent); stroke-width:1.2; transition:opacity .2s; }
.hotspot:hover .organ, .hotspot.active .organ { opacity:.6; }
.hotspot .leader { stroke:var(--text-muted); stroke-width:1; opacity:.45; }
.hotspot .dot { fill:var(--accent); opacity:.5; transition:opacity .2s; }
.hotspot:hover .dot, .hotspot.active .dot { opacity:1; }
.hotspot.active .dot { stroke:var(--bg-base); stroke-width:2; }
.hotspot text { font-family:var(--font-mono); font-size:11px; fill:var(--text-muted); pointer-events:none; }
.hotspot.active text { fill:var(--text-primary); }
.effect-panel { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; min-height:280px; }
.effect-toggle { display:inline-flex; background:var(--bg-base); border:1px solid var(--border); border-radius:999px; padding:4px; gap:4px; margin-bottom:16px; }
.effect-toggle button { padding:.45em 1em; border-radius:999px; font-size:.85rem; color:var(--text-muted); }
.effect-toggle button.active { background:var(--accent); color:var(--accent-ink); font-weight:600; }

/* Myth vs data flip cards */
.flip { perspective:1200px; min-height:170px; }
.flip-inner { position:relative; width:100%; height:100%; min-height:170px; transition:transform .6s var(--ease); transform-style:preserve-3d; }
.flip.open .flip-inner { transform:rotateY(180deg); }
.flip-face { position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--radius); padding:22px; border:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.flip-front { background:var(--bg-surface); }
.flip-back  { background:var(--bg-surface-2); transform:rotateY(180deg); }
.flip .label { font-size:.75rem; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.flip-front .label { color:var(--emergency); }
.flip-back .label { color:var(--success); }

/* ---------- Stepper (How to Quit) ---------- */
.stepper { display:flex; flex-direction:column; gap:12px; }
.step { border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-surface); overflow:hidden; }
.step-head { display:flex; align-items:center; gap:14px; padding:18px 20px; width:100%; text-align:left; }
.step-num { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:50%; background:var(--bg-base); border:1px solid var(--border); font-family:var(--font-mono); font-weight:600; }
.step.open .step-num { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.step-title { font-family:var(--font-display); font-weight:600; font-size:1.1rem; flex:1; }
.step-chev { color:var(--text-muted); transition:transform .3s; }
.step.open .step-chev { transform:rotate(180deg); }
.step-body { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.step.open .step-body { max-height:900px; }
.step-body-inner { padding:0 20px 22px 68px; display:flex; flex-direction:column; gap:14px; color:var(--text-muted); }
.step-body-inner strong { color:var(--text-primary); }

/* Breathing widget */
.breath { display:flex; flex-direction:column; align-items:center; gap:14px; padding:18px; }
.breath-circle {
  width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle at 50% 40%,var(--accent),var(--accent-2));
  display:grid; place-items:center; color:var(--accent-ink); font-weight:700;
  box-shadow:var(--glow); transition:transform 4s ease-in-out;
}
.breath-circle.in { transform:scale(1.35); }

/* Craving timer */
.timer { font-family:var(--font-mono); font-size:3rem; font-weight:600; color:var(--accent); }

/* ---------- Service dashboard ---------- */
.dash { display:grid; grid-template-columns:260px 1fr; gap:24px; align-items:start; }
.filters { position:sticky; top:84px; display:flex; flex-direction:column; gap:18px; }
.filter-group { display:flex; flex-direction:column; gap:8px; }
.filter-group h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); font-family:var(--font-mono); }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.results-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.service-card { display:flex; flex-direction:column; gap:10px; }
.service-card .sc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.service-card h3 { font-size:1.15rem; }
.sc-tags { display:flex; flex-wrap:wrap; gap:6px; }
.sc-meta { font-size:.9rem; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:6px 16px; }
.sc-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.status { display:inline-flex; align-items:center; gap:.4em; font-size:.8rem; font-weight:600; }
.status.open  { color:var(--success); }
.status.closed{ color:var(--text-muted); }
.status .d { width:8px; height:8px; border-radius:50%; background:currentColor; }

/* ---------- Notices ---------- */
.notice {
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border));
  background:color-mix(in srgb,var(--accent) 8%,var(--bg-surface));
  border-radius:var(--radius); padding:16px 18px; font-size:.92rem;
}
.notice.warn {
  border-color:color-mix(in srgb,var(--emergency) 45%,var(--border));
  background:color-mix(in srgb,var(--emergency) 9%,var(--bg-surface));
}
.notice.verify {
  border-style:dashed;
}

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--border); background:var(--bg-surface); position:relative; z-index:2; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px; padding-block:40px; }
.footer-grid h4 { font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); margin-bottom:10px; }
.footer-grid a { color:var(--text-muted); display:block; padding:3px 0; }
.footer-grid a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid var(--border); padding-block:18px; font-size:.85rem; color:var(--text-muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- Reveal hook ----------
   Entrance animations were removed: re-running them on every page load made
   navigation feel glitchy. Content is visible immediately. */
.reveal { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); }
  .bodymap-grid { grid-template-columns:1fr; }
  .dash { grid-template-columns:1fr; }
  .filters { position:static; }
  .footer-grid { grid-template-columns:1fr; }
  .nav-links {
    position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--bg-base); border-bottom:1px solid var(--border); padding:12px 20px;
    transform:translateY(-120%); transition:transform .3s var(--ease); gap:2px;
  }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { padding:.8em 1em; }
  .nav-toggle { display:grid; }
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .emergency-inner { flex-direction:column; align-items:flex-start; }
}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .breath-circle { transition:none; }
}
.skip-link {
  position:absolute; left:-999px; top:8px; z-index:100;
  background:var(--accent); color:var(--accent-ink); padding:.6em 1em; border-radius:8px; font-weight:600;
}
.skip-link:focus { left:12px; }