/* =====================================================================
   ACO — shared PUBLIC stylesheet  (canonical design system)
   ---------------------------------------------------------------------
   Single source of truth for design tokens, type, and core components
   across the public marketing/giving pages. The portal keeps app/assets/app.css.

   USAGE: link this in a page's <head> BEFORE the page's own <style>, so the
   page's inline rules still win any conflict (adding the link is zero-visual-change).
   Neutralize the one known leak per page: if a page sets .lead without a font,
   add `.lead{font-family:var(--font-sans);letter-spacing:normal}` (site.css's base
   .lead is serif on purpose — for content intros — and will otherwise leak in).

   CANONICAL VALUES (align bespoke pages to these — see docs/design-consistency.md):
     • Buttons  .btn        min-height:48px · padding:0 22px · var(--fs-body) 17px · 800 · radius:999px
                            (a page may pin a smaller size locally for tight cards/rows)
     • Eyebrow  .eyebrow    12px · letter-spacing:2.2px · red · margin-bottom:16px
                            .eyebrow.gold = sanctioned variant for dark/image heroes
     • Titles   .section-title  clamp(32px,4vw,44px) · -1.1px · 900
     • Rhythm   .section    58px 0   (landing pages may hug with an intentional exception)
     • Cards    radius 28px (content) / 20px (media) · --shadow-md
     • Container --container:1460px · --gutter:48px (.container/.wrap/.shell share one rule)

   HEROES: .page-hero = canonical content hero (light). .hero-image = reusable
   full-bleed IMAGE hero (see its block below). Homepage/donation keep bespoke heroes
   but draw from these same tokens. USE .hero-image SELECTIVELY — only where a strong
   photo supports the message (mission / outreach / story / project pages). Functional
   pages (donation, forms, manuals, notices, registration, financial tables) should
   stay clearer and task-focused, NOT full-bleed image heroes.

   COVERAGE: ~35 public pages link this sheet. Some pages are intentionally SELF-STYLED
   (functional/task pages and a few bespoke templates) — see docs/design-consistency.md
   for the full page-by-page matrix and the reasons. Do not force those onto site.css.
   ===================================================================== */

/* ---- 0. Layout-stability: reserve the JS-injected header's height so the page
   doesn't jump ("shake") on load when site-header.js fills #site-header. 78px = the
   nav-container height defined in site-header.js. ------------------------------- */
#site-header{min-height:78px}

/* ---- 1. Design tokens ------------------------------------------------ */
:root{
  /* brand (canonical, prefixed — matches the portal's app.css) */
  --aco-red:#9B3128; --aco-red-dark:#74231D; --aco-orange:#EE9A37; --aco-gold:#F2BF4D; --aco-ink:#171412;

  /* legacy aliases — the bare names most public pages use today. Keeping these
     lets existing pages drop their own :root block without a rename. */
  --red:var(--aco-red); --red-deep:var(--aco-red-dark); --orange:var(--aco-orange);
  --gold:var(--aco-gold); --ink:var(--aco-ink);

  /* neutrals */
  --bg:#FCF8F2; --bg-soft:#F6EFE6; --surface:#FFFFFF; --surface-2:#FFFDF9;
  --text:#4F5B67; --muted:#7C8792; --line:#E8DDD0;
  --accent:linear-gradient(135deg,var(--gold),var(--orange));

  /* elevation & shape */
  --shadow-md:0 10px 28px rgba(24,22,20,.05);
  --shadow-lg:0 20px 55px rgba(24,22,20,.07);
  --radius-md:20px; --radius-lg:28px; --radius-xl:28px;
  --container:1460px;
  --gutter:48px;
  /* type scale — 6 effective tiers, ratio 1.333 (perfect fourth), hero broken for impact.
     9 legacy names kept so existing classes don't break: h1→display, h4→h3, eyebrow→small.
     desktop ladder: 17 →21 →28 →37 →(break) 66. see docs/design-consistency.md */
  --fs-display:clamp(40px,5.4vw,66px); --fs-h1:clamp(40px,5.4vw,66px); --fs-h2:clamp(28px,3vw,37px);
  --fs-h3:clamp(22px,2vw,28px); --fs-h4:clamp(22px,2vw,28px); --fs-lead:clamp(19px,1.4vw,21px);
  --fs-body:17px; --fs-small:14px; --fs-eyebrow:12px;
  --fs-stat:30px;

  /* type */
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-serif:Georgia,"Times New Roman",serif;

  /* status */
  --ok:#1E8E5A; --warn:#B7791F; --bad:#B42318; --info:#2563EB;
}

/* ---- 2. Layout & type primitives ------------------------------------ */
.container,.wrap,.shell{width:min(var(--container),calc(100% - var(--gutter)));max-width:none;margin-inline:auto;padding-inline:0}
.section{padding:58px 0}
.section-header{max-width:1120px;margin-bottom:30px}
.section-title{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-1.1px;font-weight:900;max-width:960px;margin-bottom:12px}
.section-subtitle{max-width:920px;font-size:var(--fs-body);line-height:1.78;color:var(--text)}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font-size:var(--fs-eyebrow);font-weight:900;letter-spacing:2.2px;text-transform:uppercase;color:var(--red)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--accent)}
/* sanctioned variant for dark / image heroes (e.g. annual-outreach): gold text, orange dot */
.eyebrow.gold{color:var(--gold)}
.eyebrow.gold::before{background:var(--orange)}
/* .lead = serif content-intro. Hero subheads are PAGE-SPECIFIC: pages style their own
   hero lead inline with explicit font-family+letter-spacing (site.css does not define
   .page-hero .lead — it caused specificity leaks). See docs/ui-audit.md #4. */
.lead{font-family:var(--font-serif);font-size:var(--fs-lead);line-height:1.42;letter-spacing:-.4px;max-width:820px;color:#2E3A45}
.text-link{font-size:14px;font-weight:850;color:var(--red);display:inline-flex;align-items:center;gap:8px}

/* ---- 3. Hero -------------------------------------------------------- */
.page-hero{padding:60px 0 40px;background:linear-gradient(180deg,#FFFDF9 0%,#FCF8F2 72%,#F9F3EA 100%);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-1.8px;font-weight:900;max-width:1000px;margin-bottom:16px}
/* THE THREE STANDARD HEROES — every page picks exactly one:
     1. Full-bleed photo  .hero-image                     photo behind light text. NO accent bar.
     2. Framed side photo .page-hero.has-art              text left, photo right. Keeps the bar.
     3. Text only         .page-hero                      no photo. Keeps the bar.
   The vertical gradient bar (.hero-shell::before, 6px red→gold) belongs to 2 and 3 only: over a
   full-bleed photo it competes with the image, so style 1 drops it. Geometry for style 1 lives
   here and only here — a page that re-declares align-items / hero-inner width / hero-inner
   padding breaks the alignment that .container gives every other block on the page. */
/* Full-bleed IMAGE hero (reusable, turnkey). Dark photo + legibility overlay + light text.
   WHEN TO USE: selectively — mission / outreach / story / project pages where a strong photo
   supports the message. NOT for functional/task pages (donation, forms, manuals, notices).
   To change the photo, just swap the <img src> (see docs note). Turnkey defaults: title size,
   gold eyebrow, and light-sans lead are all built in — a new image hero needs only the markup.
   Markup: <section class="hero-image"><img src=…>
             <div class="container hero-inner"><p class="eyebrow gold">…</p><h1>…</h1>
             <p class="lead">…</p><div class="hero-actions">…btn / btn-light…</div></div></section>
   Pages may add their own modifier class for title scale, image position, extra decoration.
   DO NOT rename .hero-image on a page without checking site.css — index.html has a DEAD legacy
   `.hero-image` (unused) that must not be confused with this component. */
.hero-image{position:relative;min-height:630px;display:flex;align-items:center;overflow:hidden;background:#453124}
.hero-image::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(45,28,18,.87) 0%,rgba(58,35,22,.68) 45%,rgba(58,35,22,.15) 79%)}
.hero-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* Same width/centring as .container, restated at 0-2-0 so it also wins where a page defines its
   own .container (0-1-0) — otherwise the copy runs to the viewport edge. Padding stays symmetric
   so align-items:center actually reads as centred. */
.hero-image .hero-inner{position:relative;z-index:2;width:min(var(--container),calc(100% - var(--gutter)));max-width:none;margin-inline:auto;padding:70px 0;color:#fff}
.hero-image h1{color:#fff;font-size:var(--fs-display);line-height:1.04;letter-spacing:-1.6px;font-weight:900;margin-bottom:16px;max-width:760px}
.hero-image .eyebrow{color:var(--gold)}                 /* eyebrows go gold inside image heroes (legible on dark) */
.hero-image .eyebrow::before{background:var(--orange)}
.hero-image .lead,.hero-image .subhead{color:#FFF8EF;font-family:var(--font-sans);letter-spacing:normal;font-size:var(--fs-lead);line-height:1.5;max-width:620px}
@media(max-width:860px){.hero-image{min-height:520px}.hero-image .hero-inner{padding:56px 0}.hero-image h1{font-size:clamp(32px,8vw,44px);letter-spacing:-1px}}
/* Admin opt-in (Photos → Page hero photos): let a hero's title/lead/paragraphs run full-width
   instead of the default readable cap. page-hero.js adds .hero-full when the page's flag is false.
   Covers both hero types — per-element caps (.page-hero) and the wrapper cap (.hero-inner). */
.hero-narrow h1,.hero-narrow h2{max-width:760px !important}
.hero-narrow p,.hero-narrow .lead,.hero-narrow .subhead,.hero-narrow .copy{max-width:620px !important}
.hero-full h1,.hero-full h2,.hero-full p,.hero-full .lead,.hero-full .subhead,.hero-full .copy,.hero-full .hero-inner,.hero-full .hero-shell{max-width:none !important}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}

/* Opt-in framed side photo in a .page-hero (admin-managed via data-page-hero, like Give Now).
   Add class "has-art" to the .page-hero and make its .container a .hero-grid; the photo lives in
   .hero-art > .photo-frame. page-hero.js swaps the <img>, or removes the frame for a "plain" hero. */
.page-hero.has-art .hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:48px;align-items:stretch}
.page-hero.has-art .hero-art{position:relative;min-height:300px}
.page-hero.has-art .photo-frame{position:absolute;inset:0;border-radius:150px 26px 150px 26px;overflow:hidden;background:#E8DDD0;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.page-hero.has-art .photo-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(116,35,29,.02) 20%,rgba(116,35,29,.34) 100%)}
.page-hero.has-art .photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* Optional admin-editable caption box overlaid on the photo (page-hero.js populates it). */
.page-hero.has-art .hero-art .photo-note{position:absolute;z-index:2;left:-24px;bottom:28px;max-width:250px;padding:18px 20px;color:#fff;background:var(--red-deep);border-radius:16px;box-shadow:var(--shadow-lg)}
.page-hero.has-art .hero-art .photo-note span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1.6px;font-weight:900;color:var(--gold);margin-bottom:6px}
.page-hero.has-art .hero-art .photo-note strong{font-weight:900;font-size:16px;line-height:1.4}
@media(max-width:860px){.page-hero.has-art .hero-art .photo-note{left:14px;bottom:14px;max-width:220px}}
@media(max-width:860px){
  .page-hero.has-art .hero-grid{grid-template-columns:1fr;gap:30px}
  .page-hero.has-art .hero-art{position:relative;min-height:300px;max-width:560px;width:100%;margin:0 auto}
  .page-hero.has-art .photo-frame{border-radius:90px 18px 90px 18px}
}

/* ---- 4. Buttons ----------------------------------------------------- */
.btn{min-height:48px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-body);font-weight:800;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#111;box-shadow:0 12px 24px rgba(238,154,55,.20)}
.btn-secondary{background:#fff;color:var(--red);border:1px solid rgba(155,49,40,.18)}
/* glass button for dark / image heroes (pairs with .hero-image) */
.btn-light{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(4px)}
.btn-light:hover{background:rgba(255,255,255,.17)}

/* ---- 5. Editorial components (2026-07-13) ---------------------------- *
   Promoted from aco-strategic-plan / aco-annual-mission-outreach after the
   editorial pass. These make the "borderless, alternating, numbered-flow"
   language reusable site-wide. Adding them here is zero-visual-change on
   existing pages (their inline <style> loads after this file and wins);
   pages opt in by using the class and dropping their local copy.
   See docs/design-consistency.md » "Editorial components". */

/* 5a. Alternating section background — pair with .section for white↔soft rhythm */
.section-soft{background:var(--bg-soft);border-top:1px solid rgba(232,221,208,.7);border-bottom:1px solid rgba(232,221,208,.7)}

/* 5b. Divider row-list — borderless "term | detail" rows (Who Can Join,
   Strategic-Plan initiatives). Container frames top+bottom; rows split by hairlines.
   Markup: <div class="rowlist"><div class="rowlist-row"><div><span class="rowlist-tag">01 · Medical</span><h3>Title</h3></div><p>Detail…</p></div>…</div> */
.rowlist{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rowlist-row{display:grid;grid-template-columns:minmax(200px,.82fr) 2fr;gap:40px;padding:26px 0;align-items:start}
.rowlist-row+.rowlist-row{border-top:1px solid var(--line)}
.rowlist-tag{display:block;margin-bottom:7px;color:var(--red);font-size:12px;font-weight:900;letter-spacing:1.3px;text-transform:uppercase}
.rowlist-row h3{font-size:20px;line-height:1.2;letter-spacing:-.3px;margin:0}
.rowlist-row p{margin:0;color:var(--text);font-size:14.5px;line-height:1.68}
@media(max-width:720px){.rowlist-row{grid-template-columns:1fr;gap:8px}}

/* 5c. Vertical numbered flow — "The Path" / "Patient Journey".
   Outlined circles + connector line + chevron; last step can be emphasised.
   Default = neutral (ink) outline. Add .is-gold for the warm gold variant.
   Markup: <ol class="step-flow"><li><strong>Step</strong><span>Detail…</span></li>…</ol>
   (label-only steps: <li><strong>Label</strong></li>) */
.step-flow{list-style:none;counter-reset:step;margin:0;padding:0}
.step-flow li{position:relative;padding:0 0 26px 62px;min-height:44px}
.step-flow li:last-child{padding-bottom:0}
.step-flow li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--bg-soft);border:2px solid var(--ink);color:var(--ink);font-size:17px;font-weight:900;display:flex;align-items:center;justify-content:center;z-index:1}
.step-flow li::after{content:"";position:absolute;left:11px;top:48px;bottom:2px;width:22px;background:linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23171412' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom/13px 8px no-repeat}
.step-flow li:last-child::after{display:none}
.step-flow li>strong{display:block;font-size:17px;font-weight:850;color:var(--ink);letter-spacing:-.3px;margin-bottom:5px;padding-top:9px}
.step-flow li>span{display:block;color:var(--text);font-size:14.5px;line-height:1.6}
/* warm gold variant (Strategic-Plan "The Path"): gold badges, red final step */
.step-flow.is-gold li::before{background:linear-gradient(135deg,var(--gold),var(--orange));border:0;color:#241400;box-shadow:0 2px 6px rgba(238,154,55,.4)}
.step-flow.is-gold li::after{background:linear-gradient(#D3A64B,#D3A64B) center/3px 100% no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E08A1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom/13px 8px no-repeat}
.step-flow.is-gold li:last-child::before{background:var(--red);color:#fff}

/* 5d. Two-column "intro | flow" layout (stacks on mobile) */
.flow-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media(max-width:900px){.flow-split{grid-template-columns:1fr;gap:26px}}
