/* ============================================================
   Changing Humanity — Shared Stylesheet
   Derived from design-system.html (v1.0). Source of truth for
   brand tokens, typography, buttons, components, header & footer.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand blues */
  --blue:      #4a8fd4;
  --blue-dark: #2d6aad;
  --blue-deep: #1a3f6f;
  --blue-pill: #5b9bd5;
  --blue-soft: #93c5fd;
  --blue-tint: #bcd7f2;
  /* Secondary accent */
  --green:     #6fd39a;
  /* Neutrals */
  --white:     #ffffff;
  --off:       #f8f9fb;
  --text:      #1a1a2e;
  --text-mid:  #4a4a6a;
  --text-light:#8888aa;
  --border:    #e4e8ef;
  /* Layout */
  --maxw:      1120px;
  --nav-h:     72px;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--off);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Serif italic accent — emphasis words only */
.accent {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: var(--blue);
  font-weight: 600;
}

/* ── LAYOUT ── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 48px; }

section { padding: 96px 0; }
section.alt { background: var(--white); }
section.tint { background: var(--off); }

.sec-eyebrow {
  display: block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px;
}
.sec-title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--text);
  margin-bottom: 18px;
}
.sec-lead { font-size: 1.05rem; color: var(--text-mid); line-height: 1.8; max-width: 640px; }
.sec-head { max-width: 720px; margin-bottom: 44px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .sec-lead { margin-left: auto; margin-right: auto; }

p.body { font-size: 1rem; color: var(--text-mid); line-height: 1.8; max-width: 640px; margin-bottom: 16px; }

/* ── BUTTONS ── */
.btn-pill {
  display: inline-block; background: var(--blue); color: var(--white);
  font-weight: 600; font-size: 0.95rem; padding: 13px 30px;
  border-radius: 40px; text-decoration: none; transition: all 0.2s;
  cursor: pointer; border: none; font-family: inherit;
}
.btn-pill:hover { background: var(--blue-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(74,143,212,0.35); }

.btn-ghost {
  display: inline-block; background: transparent; color: var(--blue);
  font-weight: 600; font-size: 0.9rem; padding: 12px 26px;
  border-radius: 40px; text-decoration: none; border: 1.5px solid var(--blue);
  transition: all 0.2s; cursor: pointer; font-family: inherit;
}
.btn-ghost:hover { background: rgba(74,143,212,0.06); }

.btn-white {
  display: inline-block; background: var(--white); color: var(--blue-dark);
  font-weight: 700; font-size: 1rem; padding: 15px 40px;
  border-radius: 40px; text-decoration: none; transition: all 0.2s;
  cursor: pointer; border: none; font-family: inherit;
}
.btn-white:hover { background: var(--off); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.18); }

.btn-outline-w {
  display: inline-block; background: rgba(255,255,255,0.12); color: var(--white);
  font-weight: 600; font-size: 0.95rem; padding: 13px 30px;
  border-radius: 40px; text-decoration: none; border: 1.5px solid rgba(255,255,255,0.4);
  transition: all 0.2s; cursor: pointer; font-family: inherit; backdrop-filter: blur(4px);
}
.btn-outline-w:hover { background: rgba(255,255,255,0.2); }

/* ── HEADER / NAV ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: 0 48px;
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.nav-logo img { height: 38px; width: auto; }
.nav-logo span { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
  font-size: 0.9rem; font-weight: 600; color: var(--text-mid);
  text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: all 0.3s; border-radius: 2px; }

/* Donate stays available in the nav but is not the loudest thing on screen.
   Jacqueline 2026-09-09: "I would not make Donate the dominant visual action at the very top."

   MOVED HERE FROM index.html's inline <style> on 2026-09-17. It had only ever existed on the
   homepage, so program.html asked for the class and got nothing, rendering Donate as the filled
   .btn-pill — the dominant action her note rules out — on one page but not the other. Must stay
   below .btn-pill in this file: both are single-class selectors, so the later one wins. */
.nav-donate-quiet {
  background: transparent; color: var(--blue-dark);
  border: 1.5px solid var(--blue-tint); font-weight: 600;
}
.nav-donate-quiet:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); }

/* The drawer's own Donate, hidden at desktop widths. The header pill is the desktop Donate and
   this is the mobile one; the 720px block swaps which of the two is displayed, so exactly one is
   ever visible and neither is a duplicate the other has to be reconciled with. */
.nav-drawer-donate { display: none; }

/* ── HERO (immersive dark) ── */
.hero {
  position: relative; overflow: hidden; color: var(--white);
  background: linear-gradient(150deg, var(--blue-deep) 0%, #0f2547 100%);
  padding: 120px 0 108px;
}
.hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.62; }
/* Directional overlay: heavy behind the text on the left, light on the right so the
   photograph is actually visible. The old flat 0.82 to 0.9 wash at 0.28 image opacity
   made any hero photo invisible, which is why the image looked like it wasn't loading. */
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(15,37,71,0.92) 0%, rgba(19,48,88,0.78) 38%, rgba(26,63,111,0.5) 72%, rgba(26,63,111,0.34) 100%);
}
/* Narrow screens: text spans the full width, so it needs the full wash back. */
@media (max-width: 900px) {
  .hero-overlay { background: linear-gradient(150deg, rgba(15,37,71,0.9) 0%, rgba(19,48,88,0.86) 100%); }
  .hero-img { opacity: 0.5; }
}
.hero .wrap { position: relative; z-index: 2; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(1rem, 2vw, 1.3rem); color: #cfe1f5; margin-bottom: 22px;
}
.hero-kicker::before { content: ""; height: 1px; width: 40px; background: rgba(188,215,242,0.55); }
.hero h1 {
  font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 800;
  line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 24px; max-width: 900px;
}
.hero h1 .accent { color: var(--blue-soft); }
.hero-sub { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: rgba(255,255,255,0.9); max-width: 640px; line-height: 1.6; margin-bottom: 18px; font-weight: 500; }
.hero-body { font-size: 1.05rem; color: rgba(255,255,255,0.72); max-width: 620px; line-height: 1.8; margin-bottom: 38px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* Compact hero for interior pages */
.hero.compact { padding: 96px 0 88px; }
.hero.compact h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }

/* ── STAT CARDS (dark) ── */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-card { background: var(--blue-deep); border-radius: 16px; padding: 34px 28px; }
.stat-card .num { font-size: 3rem; font-weight: 900; color: var(--blue-soft); line-height: 1; letter-spacing: -0.03em; margin-bottom: 12px; }
.stat-card p { font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.6; }
.stat-card .src { font-size: 0.68rem; color: rgba(255,255,255,0.35); font-style: italic; margin-top: 12px; }

/* Dark section wrapper (for stat blocks / immersive) */
.section-dark { background: linear-gradient(150deg, var(--blue-deep) 0%, #12305a 100%); color: var(--white); }
.section-dark .sec-eyebrow { color: var(--blue-soft); }
.section-dark .sec-title { color: var(--white); }
.section-dark .sec-lead { color: rgba(255,255,255,0.78); }
.section-dark .accent { color: var(--blue-soft); }
.section-close { margin-top: 40px; font-size: 1.25rem; font-weight: 600; color: var(--white); max-width: 720px; line-height: 1.5; }
.section-close .accent { color: var(--blue-soft); }

/* ── PILLAR CARDS ── */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pillar {
  background: var(--white); border-radius: 16px; padding: 34px 28px;
  border: 1px solid var(--border); position: relative; overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pillar:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(74,143,212,0.1); }
.pillar-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--blue-soft)); }
.pillar .ico { font-size: 1.8rem; margin-bottom: 16px; display: block; }
.pillar .num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.pillar h3 { font-size: 1.2rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: 12px; }
.pillar p { font-size: 0.92rem; color: var(--text-mid); line-height: 1.75; }
.pillar p strong { color: var(--text); font-weight: 700; }

/* ── FEATURE / SPLIT BLOCK ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split .media { border-radius: 20px; overflow: hidden; background: var(--blue-tint); aspect-ratio: 4/3; }

/* ── GENERIC CARD (Join the Movement, gains, partnership) ── */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
.icard {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  padding: 32px 28px; transition: transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column;
}
.icard:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(74,143,212,0.1); }
.icard .ico { font-size: 1.8rem; margin-bottom: 14px; }
.icard h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.icard p { font-size: 0.92rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 18px; flex-grow: 1; }
.icard a.card-link { font-size: 0.9rem; font-weight: 700; color: var(--blue); text-decoration: none; margin-top: auto; }
.icard a.card-link:hover { color: var(--blue-dark); }

/* ── LOGO BAR (sponsors / partners) ── */
.logo-bar { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; }
.logo-chip {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  height: 96px; min-width: 180px; flex: 1 1 180px; max-width: 220px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-light); font-weight: 700; font-size: 0.9rem; text-align: center;
  padding: 16px; transition: box-shadow 0.2s;
}
.logo-chip:hover { box-shadow: 0 10px 28px rgba(74,143,212,0.08); }
.placeholder-note { font-size: 0.78rem; color: var(--text-light); font-style: italic; text-align: center; margin-top: 20px; }

/* ── TESTIMONIALS ── */
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.quote-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 34px 32px; }
.quote-card blockquote { font-size: 1.1rem; font-style: italic; color: var(--text); line-height: 1.6; margin-bottom: 18px; font-family: 'Playfair Display', Georgia, serif; }
.quote-card cite { font-size: 0.82rem; font-weight: 700; color: var(--blue); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.quote-empty { border-style: dashed; color: var(--text-light); }
.quote-empty blockquote { color: var(--text-light); font-family: 'Playfair Display', Georgia, serif; }

/* ── PULL QUOTE (immersive) ── */
.pullquote { background: var(--blue-deep); border-radius: 20px; padding: 64px 48px; text-align: center; }
.pullquote blockquote { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 300; font-style: italic; color: var(--white); line-height: 1.6; max-width: 800px; margin: 0 auto 20px; }
.pullquote blockquote .accent { color: var(--blue-soft); }
.pullquote cite { font-size: 0.8rem; color: var(--blue-soft); font-style: normal; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── CALLOUT BAND ── */
.callout { text-align: center; }
.callout h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin-bottom: 12px; color: var(--white); max-width: 760px; margin-left: auto; margin-right: auto; }
.callout p { font-size: 1.15rem; color: rgba(255,255,255,0.82); margin-bottom: 30px; }
.callout .accent { color: var(--blue-soft); }

/* ── IMPACT TIERS (dark callout) ── */
.tier-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 920px; margin: 40px auto 34px; }
.tier { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 24px 20px; text-align: left; }
.tier .amt { font-size: 1.9rem; font-weight: 900; color: var(--blue-soft); letter-spacing: -0.02em; line-height: 1; margin-bottom: 10px; }
.tier p { font-size: 0.84rem; color: rgba(255,255,255,0.72); line-height: 1.55; margin: 0; }

/* ── VOLUNTEER / EMAIL CAPTURE ── */
.capture { display: flex; gap: 12px; flex-wrap: wrap; max-width: 480px; }
.capture input {
  flex: 1 1 240px; padding: 14px 22px; border: 1.5px solid var(--border);
  border-radius: 40px; font-size: 0.95rem; outline: none; font-family: inherit; color: var(--text);
  background: var(--white); transition: border-color 0.2s;
}
.capture input:focus { border-color: var(--blue); }

/* ── FORMS ── */
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 44px; max-width: 720px; }
.form-row { margin-bottom: 22px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-row label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: 0.01em; }
.form-row .opt { color: var(--text-light); font-weight: 500; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 13px 18px; border: 1.5px solid var(--border); border-radius: 12px;
  font-size: 0.95rem; font-family: inherit; color: var(--text); background: var(--off); outline: none;
  transition: border-color 0.2s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--blue); background: var(--white); }
.form-row textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 0.82rem; color: var(--text-light); margin-top: 18px; line-height: 1.6; }

/* ── FOOTER ── */
.site-footer { background: var(--text); color: rgba(255,255,255,0.55); padding: 64px 0 40px; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 44px; }
.footer-brand img { height: 40px; margin-bottom: 16px; }
.footer-brand p { font-size: 0.9rem; line-height: 1.7; max-width: 320px; }
/* h3 not h4: the footer columns follow the page's h2 sections, and jumping
   straight to h4 skipped a level for anyone navigating by heading. */
.footer-col h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 0.9rem; color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--blue-soft); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 28px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; }
.footer-bottom a { color: var(--blue-soft); text-decoration: none; }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .stat-grid, .pillar-grid, .card-grid, .card-grid.four, .tier-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .quote-grid, .footer-top { grid-template-columns: 1fr; }
  .footer-top { gap: 32px; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 24px; }
  .nav { padding: 0 24px; }
  section { padding: 64px 0; }
  .stat-grid, .pillar-grid, .card-grid, .card-grid.four, .quote-grid, .form-row.two, .tier-grid { grid-template-columns: 1fr; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: 8px 24px 20px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--border); }
  .nav-toggle { display: block; }
  /* Donate moves into the drawer on mobile (2026-09-17, Matthew). On a phone the header was
     logo + Donate + hamburger, which crowded the only two things that matter up there and put a
     donation ask in front of a visitor who has not read a word yet. Same reasoning as her note
     about the desktop pill, only more so, because there is less room to recover from it. */
  .nav-donate { display: none; }
  .nav-drawer-donate { display: block; margin-top: 18px; }
  .nav-drawer-donate a {
    border-bottom: none;
    text-align: center;
    padding: 13px 24px;
    font-size: 0.95rem;
    border: 1.5px solid var(--blue-tint);
    border-radius: 40px;
    color: var(--blue-dark);
  }
  .form-card { padding: 28px; }
}