/* ═══════════════════════════════════════════════════════════════
   SHARED STYLES — every page (index.html, survey/index.html, …)
   links this file. Chart-specific styles live in each page's own
   <style> block; the shared look of the site lives here.

   BRAND TOKENS — edit these to finish matching your exact branding.
   Everything on every page derives from this block. Replace the two
   accent values with the hex codes from the Gainesville Thrives
   logo and the whole site updates.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#FFFFFF;               /* site background (Wix white) */
  --bg-alt:#F6F6F4;           /* alternating section band */
  --text:#2F2F2F;             /* body text, Wix-style charcoal */
  --text-soft:#6B6B6B;        /* secondary text */
  --accent:#3A6FB0;           /* ← PRIMARY BRAND COLOR (replace with logo hex) */
  --accent-2:#E8A33D;         /* ← SECONDARY BRAND COLOR (replace with logo hex) */
  --line:#E6E6E3;
  --radius:10px;
  --btn-radius:999px;         /* Wix-style pill buttons */
  /* data-viz palette for book spines & charts (kept colorful on purpose) */
  --viz-1:#3A6FB0; --viz-2:#E8A33D; --viz-3:#C9553D; --viz-4:#4B9B6E; --viz-5:#7B5AA6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  /* Matches the site's clean sans-serif type (Wix Avenir/Helvetica family) */
  font-family:'Avenir Next','Avenir','Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:inherit;font-weight:700;letter-spacing:.01em}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
section.band{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
a{color:var(--accent)}

/* ---- site navigation ---- */
.site-nav{
  position:relative;z-index:20;height:76px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.site-nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;
}
.site-brand{
  display:block;flex:none;width:72px;line-height:0;
}
.site-brand img{display:block;width:100%;height:auto}
.site-menu{
  display:flex;align-items:stretch;align-self:stretch;gap:32px;
  list-style:none;
}
.site-menu a{
  position:relative;display:flex;align-items:center;height:100%;
  color:var(--text);text-decoration:none;font-size:13.5px;font-weight:600;
  letter-spacing:.025em;
}
.site-menu a::after{
  content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:center;
  transition:transform .15s ease;
}
.site-menu a:hover,.site-menu a[aria-current="page"]{color:var(--accent)}
.site-menu a:hover::after,.site-menu a[aria-current="page"]::after{transform:scaleX(1)}

/* ---- Wix-style pill button ---- */
.btn{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-weight:600;font-size:15px;padding:12px 34px;border-radius:var(--btn-radius);
  transition:opacity .15s ease;
}
.btn:hover{opacity:.85}
/* secondary pill — outlined, for non-donation actions so the give
   button stays the one solid call-to-action on screen */
.btn.ghost{
  background:transparent;color:var(--accent);
  box-shadow:inset 0 0 0 2px var(--accent);
}
.btn.ghost:hover{opacity:1;background:var(--accent);color:#fff}

/* ---- hero ---- */
.hero{padding:80px 0 64px;text-align:center;background:var(--bg)}
.hero h1{
  font-size:clamp(32px,4.6vw,48px);line-height:1.15;
  max-width:20ch;margin:0 auto;
}
.hero h1 .mail{color:var(--accent)}
.hero p.lede{max-width:62ch;margin:20px auto 0;color:var(--text-soft);font-size:17.5px}
/* small breadcrumb link above a subpage's headline */
.hero .crumb{margin-bottom:18px;font-size:14px}
.hero .crumb a{text-decoration:none;font-weight:600}
.hero .crumb a:hover{text-decoration:underline}

.counters{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;text-align:left;
}
.counter{
  --c:var(--accent);
  background:color-mix(in srgb, var(--c) 5%, #fff);
  border:1px solid color-mix(in srgb, var(--c) 18%, var(--line));
  border-radius:var(--radius);
  padding:26px 22px;position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 24px -14px rgba(0,0,0,.14);
}
.counter:nth-child(1){--c:var(--accent)}
.counter:nth-child(2){--c:var(--accent-2)}
.counter:nth-child(3){--c:var(--viz-4)}
.counter:nth-child(4){--c:var(--viz-3)}
.counter .num{
  font-weight:700;font-size:clamp(30px,3.6vw,40px);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.05;color:var(--text);
}
/* .lbl matches the hero lede's 17.5px so the tiles read as part of the
   same opening paragraph, not as fine print under it. */
.counter .lbl{color:var(--text-soft);font-size:17.5px;line-height:1.45;margin-top:8px}
.counter .src{margin-top:10px}
@media (prefers-reduced-motion:no-preference){
  .counter{transition:transform .18s ease, box-shadow .18s ease}
  .counter:hover{
    transform:translateY(-3px);
    box-shadow:0 2px 4px rgba(0,0,0,.05), 0 18px 34px -16px rgba(0,0,0,.20);
  }
}

/* ---- section headers (centered, like the site's) ---- */
.sec-head{max-width:66ch;margin:0 auto 38px;text-align:center}
.sec-head h2{font-size:clamp(24px,3vw,32px);line-height:1.25}
.sec-head p{margin-top:12px;color:var(--text-soft)}

/* ---- cards & charts ---- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.chart-title{font-weight:700;font-size:19px;margin-bottom:4px}
.chart-sub{color:var(--text-soft);font-size:14px;margin-bottom:20px}
.chart-note{color:var(--text-soft);font-size:13px;margin-top:14px}
svg text{font-family:'Avenir Next','Avenir','Segoe UI',Helvetica,Arial,sans-serif}

/* instant chart tooltip — native title bubbles wait ~1s and never
   fire on touch, so [data-tip] elements get this one instead */
.chart-tip{
  position:fixed;z-index:50;pointer-events:none;max-width:280px;
  background:var(--text);color:#fff;font-size:12.5px;line-height:1.45;
  padding:7px 11px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:0;transition:opacity .12s ease;
}
.chart-tip.on{opacity:1}

/* ---- mini stat row ---- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mini-stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.mini-stat .n{font-weight:700;font-size:26px;color:var(--accent)}
.mini-stat .l{color:var(--text-soft);font-size:13px;margin-top:4px}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:36px 0 60px;color:var(--text-soft);font-size:13.5px;background:var(--bg-alt)}
footer .wrap{max-width:820px}
footer h3{font-size:15px;margin-bottom:8px;color:var(--text)}
.footer-train{
  display:block;width:min(100%,440px);height:auto;
  margin:30px auto -34px;overflow:visible;
}
.footer-legal{
  margin-top:52px;text-align:center;font-size:12px;line-height:1.6;
  color:color-mix(in srgb,var(--text-soft) 80%,var(--bg-alt));
}
.footer-legal a{color:inherit}

.reveal{opacity:0;translate:0 18px;transition:opacity .6s ease, translate .6s ease}
.reveal.in{opacity:1;translate:0 0}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;translate:0 0}
}
/* printed copies (funder decks!) must show everything, even sections
   that were never scrolled into view */
@media print{
  .site-nav{display:none}
  .reveal{opacity:1;translate:0 0}
}
@media (max-width:860px){
  .counters{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .site-nav{height:68px}
  .site-nav .wrap{padding:0 18px}
  .site-brand{width:60px}
  .site-menu{gap:18px}
  .site-menu a{font-size:12.5px}
  .counters{grid-template-columns:1fr}
  .card{min-width:0}
}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px}