/* ==========================================================================
   AnchorSOS — styles
   1. Tokens  2. Base  3. Layout  4. Components  5. Sections
   6. Motion  7. Dark mode  8. Accessibility modes  9. Print
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  --navy:#0F2A44; --navy-2:#16365A; --navy-3:#21486F;
  --teal:#0E7C7B; --teal-soft:#E3F2F1;
  --amber:#FFB547; --amber-hi:#FFC46B; --amber-ink:#5A3600;
  --red:#B42318; --red-soft:#FEF0EE; --red-line:#F4C7C1;
  --ink:#14202B; --muted:#4A5866; --line:#D9E1E8;
  --bg:#F5F8FB; --card:#FFFFFF; --card-2:#F9FBFD;
  --on-dark:#FFFFFF; --on-dark-muted:#C9D7E4;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,42,68,.06),0 2px 8px rgba(15,42,68,.05);
  --sh-2:0 2px 4px rgba(15,42,68,.06),0 12px 28px rgba(15,42,68,.10);
  --sh-3:0 18px 50px rgba(5,18,32,.35);

  --gutter:16px; --max:1120px; --header-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1); --t:180ms;
  --fs-body:1.125rem; /* 18px */
}

/* 2. BASE ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0;min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:18px;font-size:var(--fs-body);line-height:1.55;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  overflow-wrap:break-word;
}
h1,h2,h3{line-height:1.15;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}

/* 3. LAYOUT ---------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);padding-inline:max(var(--gutter),env(safe-area-inset-left))}
section{padding-block:56px}
@media(min-width:760px){:root{--gutter:24px} section{padding-block:72px}}

/* 4. COMPONENTS ------------------------------------------------------------ */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--navy);padding:12px 16px;font-weight:800;z-index:100;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
:focus{outline:none}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:54px;padding:0 22px;border:2px solid transparent;border-radius:var(--r);
  font-weight:800;font-size:1.0625rem;text-decoration:none;line-height:1.1;text-align:center;
  transition:background-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
  -webkit-user-select:none;user-select:none;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--amber);color:var(--navy);box-shadow:0 6px 16px rgba(255,181,71,.35)}
.btn-primary:hover{background:var(--amber-hi);box-shadow:0 8px 22px rgba(255,181,71,.45)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-3)}
.btn-ghost{background:var(--teal-soft);color:var(--teal);font-size:1rem;padding:0 16px;white-space:nowrap}
.btn-ghost:hover{border-color:var(--teal)}
.btn-ghost[aria-busy="true"] svg{animation:spin 1s linear infinite}

/* Eyebrow + section headings */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.eyebrow::before{content:"";width:18px;height:3px;border-radius:3px;background:currentColor}
h2{font-size:1.75rem;font-size:clamp(1.625rem,3.6vw,2.25rem);letter-spacing:-.015em;color:var(--navy);margin-bottom:10px}
.sub{color:var(--muted);max-width:640px;margin-bottom:28px}

/* 5. SECTIONS -------------------------------------------------------------- */

/* Urgent strip */
.urgent{background:var(--red);color:#fff;font-size:.9375rem;position:relative;z-index:31}
.urgent .wrap{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;justify-content:center;padding-block:8px;text-align:center}
.urgent a{color:#fff;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;padding:4px 2px;white-space:nowrap}
.urgent a:hover{text-decoration-color:var(--amber)}

/* Header */
header.site{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
@supports((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  header.site{background:rgba(15,42,68,.88);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px)}
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:900;font-size:1.375rem;letter-spacing:-.02em}
.brand .mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--amber);
  background:linear-gradient(145deg,var(--navy-3),var(--navy));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.brand b{color:var(--amber)}
nav.main{display:none;gap:4px}
nav.main a{color:var(--on-dark-muted);text-decoration:none;font-size:1rem;font-weight:700;padding:8px 12px;border-radius:var(--r-sm);transition:background-color var(--t),color var(--t)}
nav.main a:hover{color:#fff;background:rgba(255,255,255,.08)}
@media(min-width:900px){nav.main{display:flex}}
.lang{display:flex;flex:none;padding:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.lang button{border:0;background:transparent;padding:7px 14px;min-width:44px;min-height:36px;border-radius:var(--r-pill);font-size:.9375rem;font-weight:800;color:var(--on-dark-muted);transition:background-color var(--t),color var(--t)}
.lang button[aria-pressed="true"]{background:var(--amber);color:var(--navy)}

/* Hero */
.hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;padding-block:44px 96px;
  background-color:var(--navy);
  background-image:
    radial-gradient(900px 420px at 88% -10%,rgba(255,181,71,.20),transparent 60%),
    radial-gradient(800px 520px at -10% 110%,rgba(14,124,123,.45),transparent 60%),
    linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
}
.hero::before{ /* subtle dot texture */
  content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
}
.hero .watermark{position:absolute;z-index:-1;right:-60px;top:20px;width:420px;height:420px;color:#fff;opacity:.05;display:none;pointer-events:none}
@media(min-width:1000px){.hero .watermark{display:block}}
.hero .wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:56px;color:var(--bg);pointer-events:none}
.hero h1{font-size:2.25rem;font-size:clamp(2.125rem,6.2vw,3.5rem);letter-spacing:-.025em;margin-bottom:14px;max-width:16ch}
.hero h1 span{color:var(--amber);background:linear-gradient(90deg,var(--amber),#FFD48A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lead{font-size:1.1875rem;font-size:clamp(1.125rem,2.4vw,1.375rem);color:var(--on-dark-muted);max-width:600px;margin-bottom:22px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.pills li{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);padding:5px 12px 5px 9px;font-size:.9375rem;font-weight:600}
.pills svg{color:var(--amber);flex:none}

/* Search card */
.search{
  position:relative;display:grid;gap:14px;max-width:940px;
  background:var(--card);color:var(--ink);border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.6);
}
.search label{display:block;font-size:.9375rem;font-weight:800;color:var(--muted);margin-bottom:6px}
.field{position:relative}
.field svg.lead-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input[type="search"],.search input[type="text"]{
  width:100%;min-height:56px;padding:14px 14px 14px 44px;font-size:1.125rem;
  border:2px solid var(--line);border-radius:var(--r);background:var(--card-2);color:var(--ink);
  -webkit-appearance:none;appearance:none;transition:border-color var(--t),box-shadow var(--t),background-color var(--t);
}
.search input::placeholder{color:#7A8794;opacity:1}
.search input:focus{border-color:var(--teal);background:var(--card);box-shadow:0 0 0 4px rgba(14,124,123,.18);outline:none}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.near-row{display:flex;flex-wrap:wrap;gap:8px}
.near-row .field{flex:1 1 180px;min-width:0}
.near-row .btn-ghost{flex:1 1 auto}
.search .btn-primary{font-size:1.1875rem;width:100%}
.loc-note{display:flex;align-items:center;gap:6px;font-size:.875rem;color:var(--muted)}
.loc-note svg{color:var(--teal);flex:none}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick button{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;
  border:2px solid var(--line);background:var(--card);color:var(--navy);border-radius:var(--r-pill);
  font-size:1rem;font-weight:800;transition:border-color var(--t),color var(--t),background-color var(--t),transform var(--t)
}
.quick button:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}
.quick button:active{transform:scale(.97)}
.quick .dot{width:8px;height:8px;border-radius:50%;background:#12A150;box-shadow:0 0 0 3px rgba(18,161,80,.2)}
.notice{display:none;align-items:flex-start;gap:10px;background:var(--teal-soft);border:1px solid rgba(14,124,123,.25);border-left:5px solid var(--teal);border-radius:var(--r-sm);padding:12px 14px;font-size:1rem}
.notice.show{display:flex;animation:pop .25s var(--ease)}
.notice a{font-weight:900;color:var(--teal)}
@media(min-width:960px){
  .search{grid-template-columns:1fr 1.5fr auto;align-items:end;padding:22px}
  .search .btn-primary{width:auto;padding:0 28px}
  .near-row{flex-wrap:nowrap}.near-row .btn-ghost{flex:none}
  .search .quick,.search .loc-note,.search .notice{grid-column:1/-1}
}

/* Categories */
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:640px){.cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(min-width:960px){.cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.cat{
  --c:var(--teal); --c-soft:var(--teal-soft);
  position:relative;display:flex;align-items:center;gap:14px;width:100%;height:100%;min-height:84px;
  padding:16px;text-align:left;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t);
}
@supports(background:color-mix(in srgb,red 10%,white)){
  .cat{--c-soft:color-mix(in srgb,var(--c) 13%,var(--card))}
}
.cat::after{content:"";position:absolute;inset:auto 16px 0 16px;height:3px;border-radius:3px 3px 0 0;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease)}
.cat:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.cat:hover::after{transform:scaleX(1)}
.cat:active{transform:translateY(-1px) scale(.99)}
.cat .ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:var(--c-soft);transition:background-color var(--t),color var(--t)}
.cat:hover .ic{background:var(--c);color:#fff}
.cat .txt{min-width:0}
.cat .t{display:block;font-weight:800;font-size:1.0625rem;line-height:1.2;color:var(--navy)}
.cat .d{display:block;font-size:.875rem;color:var(--muted);margin-top:3px;line-height:1.35}
@media(max-width:519px){.cat{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}}
/* per-category hues (all pass 3:1 against their soft tint for icons) */
.c-shelter{--c:#1F5FA8}.c-food{--c:#C25E00}.c-hyg{--c:#0B7FA6}.c-med{--c:#B42318}
.c-mh{--c:#7A3EB1}.c-rec{--c:#2E7D32}.c-phone{--c:#0E7C7B}.c-id{--c:#475467}
.c-jobs{--c:#8A5A00}.c-legal{--c:#3949AB}.c-trans{--c:#1565C0}.c-cloth{--c:#B0306A}

/* Help now */
.help{background:var(--card);border-block:1px solid var(--line)}
.lines{display:grid;gap:14px}
@media(min-width:700px){.lines{grid-template-columns:repeat(2,minmax(0,1fr))}}
.line{display:flex;gap:16px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--card-2);transition:box-shadow var(--t),border-color var(--t)}
.line:hover{box-shadow:var(--sh-1);border-color:#C5D0DA}
.line.red{border-color:var(--red-line);background:var(--red-soft)}
.line .num{flex:none;min-width:76px;height:60px;padding:0 10px;border-radius:var(--r);display:grid;place-items:center;font-weight:900;font-size:1.5rem;letter-spacing:.02em;color:#fff;background:linear-gradient(160deg,var(--navy-3),var(--navy))}
.line.red .num{background:linear-gradient(160deg,#D63A2C,var(--red))}
.line .num.sm{font-size:1rem}
.line .body{min-width:0}
.line h3{font-size:1.125rem;color:var(--navy);margin-bottom:3px}
.line.red h3{color:#7A1A12}
.line p{font-size:1rem;color:var(--muted);margin-bottom:10px}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.acts a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:var(--r-sm);background:var(--card);border:2px solid var(--line);color:var(--navy);font-size:1rem;font-weight:800;text-decoration:none;transition:border-color var(--t),background-color var(--t)}
.acts a:hover{border-color:var(--navy)}
.line.red .acts a{border-color:var(--red-line)}
.line.red .acts a:hover{border-color:var(--red)}

/* How it works */
.steps{display:grid;gap:14px;counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.steps li{position:relative;counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh-1)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:12px;background:var(--amber);color:var(--navy);font-weight:900;font-size:1.125rem;box-shadow:0 0 0 6px rgba(255,181,71,.22)}
@media(min-width:760px){
  .steps li:not(:last-child)::after{content:"";position:absolute;top:44px;right:-18px;width:18px;border-top:2px dashed #C5D0DA}
}
.steps h3{font-size:1.1875rem;color:var(--navy);margin-bottom:6px}
.steps p{font-size:1rem;color:var(--muted)}
.promise{display:grid;gap:10px;margin-top:22px}
@media(min-width:600px){.promise{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.promise{grid-template-columns:repeat(4,minmax(0,1fr))}}
.promise li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--teal-soft);font-weight:800;font-size:1rem;color:var(--navy)}
.promise svg{flex:none;color:var(--teal)}

/* Donate + providers */
.duo{display:grid;gap:16px}
@media(min-width:760px){.duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panel{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);padding:28px}
.panel h2{margin-bottom:8px}
.panel p{margin-bottom:18px}
.panel.give{color:#fff;background:linear-gradient(150deg,var(--navy-3) 0%,var(--navy) 70%)}
.panel.give::after{content:"";position:absolute;z-index:-1;right:-80px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,181,71,.35),transparent 70%)}
.panel.give h2{color:#fff}
.panel.give p{color:var(--on-dark-muted)}
.panel.prov{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1)}
.panel.prov p{color:var(--muted)}

/* Footer */
footer{background:var(--navy);color:var(--on-dark-muted);font-size:.9375rem;padding-block:40px;padding-bottom:calc(40px + env(safe-area-inset-bottom))}
footer .cols{display:grid;gap:26px}
@media(min-width:760px){footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
footer h3{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:10px}
footer ul{display:grid;gap:6px}
footer a{color:#E3ECF4;text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
footer .tag{margin-top:8px;max-width:34ch}
footer .base{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:.875rem}

/* Mobile action bar */
.mbar{display:none}
@media(max-width:759px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .mbar{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;z-index:40;left:0;right:0;bottom:0;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(15,42,68,.10)
  }
  .mbar .btn{min-height:52px;font-size:1rem;padding:0 10px}
}

/* 6. MOTION ---------------------------------------------------------------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js .reveal{opacity:0}
.js .reveal.in{animation:rise .5s var(--ease) both}
.hero .wrap>*{animation:rise .55s var(--ease) both}
.hero .wrap>*:nth-child(2){animation-delay:.05s}
.hero .wrap>*:nth-child(3){animation-delay:.1s}
.hero .wrap>*:nth-child(4){animation-delay:.15s}

/* 7. DARK MODE ------------------------------------------------------------- */
@media(prefers-color-scheme:dark){
  :root{
    --ink:#E6EDF3; --muted:#A9B7C4; --line:#2A3B4D;
    --bg:#0B1724; --card:#112233; --card-2:#0E1D2C;
    --teal:#3CC3C1; --teal-soft:rgba(60,195,193,.12);
    --red-soft:rgba(180,35,24,.16); --red-line:rgba(244,199,193,.28);
    --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 12px 28px rgba(0,0,0,.45);
  }
  h2,.cat .t,.steps h3,.line h3,.promise li{color:#F2F6FA}
  .line.red h3{color:#FFC9C2}
  .search{border-color:rgba(255,255,255,.08)}
  .search input::placeholder{color:#7F8E9C}
  .quick button,.acts a{color:#E6EDF3}
  .cat:hover .ic{color:#0B1724}
  .mbar{background:rgba(11,23,36,.96)}
  .hero .wave{color:var(--bg)}
}

/* 8. ACCESSIBILITY MODES --------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1}
}
@media(forced-colors:active){
  .btn,.cat,.line,.quick button,.acts a,.search input,.lang button{border:2px solid CanvasText}
  .lang button[aria-pressed="true"]{outline:3px solid Highlight}
  .hero h1 span{-webkit-text-fill-color:currentColor;background:none}
}
@media(prefers-contrast:more){
  :root{--muted:#2E3A46;--line:#8796A5}
}

/* 9. PRINT — prints a clean one-page help sheet ---------------------------- */
@media print{
  @page{margin:14mm}
  *{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important;animation:none!important}
  .js .reveal{opacity:1!important}
  body{font-size:12pt;padding:0}
  .skip,header.site nav,.lang,.search,.mbar,.wave,.watermark,.duo,footer .cols>div:not(:first-child),.hero::before{display:none!important}
  .hero{padding:0 0 10pt}
  section{padding:10pt 0}
  .cat,.line,.steps li{border:1px solid #999!important;break-inside:avoid}
  a[href^="tel:"]::after{content:" (" attr(href) ")";font-weight:400}
  .acts a[href^="tel:"]::after,.urgent a::after{content:""}
}

.pt-0{padding-top:0}