/* ============================================================
   ACCESSIBILITY BY DESIGN — STYLESHEET
   ------------------------------------------------------------
   HOW THIS FILE IS ORGANIZED (scroll to the section you want):
     1. Design tokens (colors, fonts, spacing) — edit these first!
     2. Base / reset styles
     3. Accessibility helpers (skip link, focus states, etc.)
     4. Header + navigation
     5. Hero section
     6. Stats strip
     7. About section
     8. Programs (cards)
     9. Testimonial
    10. Get involved (cards)
    10.b Founders
    11. Newsletter form
    12. Footer
    13. High-contrast mode
    14. Responsive (mobile) rules
   ============================================================ */


/* ------------------------------------------------------------
   1. DESIGN TOKENS
   Change a color or font here and it updates EVERYWHERE on the
   site automatically. This is the easiest way to reskin the page.
   ------------------------------------------------------------ */
   :root {
    /* --- Color palette ---
       Canvas  = background
       Ink     = main text color
       Harbor  = primary brand color (deep teal-blue)
       Meadow  = secondary accent (sage green)
       Sunrise = warm accent for calls-to-action (honey gold)
       Mist    = subtle borders / card backgrounds
    */
    --color-canvas: #7db88161;       /* warm linen background — soft, easy on eyes */
  --color-canvas-alt: #E7E2D2;   /* slightly deeper linen for alternating sections */
  --color-ink: #2C3830;          /* deep forest-charcoal for body text */
  --color-ink-soft: #5B6B5C;     /* muted sage-gray for secondary text */
  --color-harbor: #4F7A55;       /* primary sage green — links, brand color */
  --color-harbor-dark: #35573B;  /* deeper sage — headlines, hover states */
  --color-meadow: #000000;       /* light sage — secondary accents, shapes */
  --color-sunrise: #D3A24A;      /* honeyed gold — the one warm contrast, for CTAs */
  --color-sunrise-dark: #B4822F; /* darker gold for button hover */
  --color-mist: #DAD5C4;         /* warm neutral for borders/dividers */
  --color-white: #FFFFFF;        /* card backgrounds */
  
    /* --- Fonts ---
       Display = headlines (a serif with personality)
       Body    = paragraphs, buttons, nav (a very readable sans-serif)
    */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  
    /* --- Spacing scale (used for padding/margins throughout) --- */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.75rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
  
    /* --- Shape --- */
    --radius: 16px;
    --radius-sm: 10px;
  
    /* --- Base text size: JS increases/decreases this for the
       accessibility toolbar. Keep the "px" out of this variable. --- */
    --base-font-size: 16;
  }
  
  /* ------------------------------------------------------------
     2. BASE / RESET STYLES
     ------------------------------------------------------------ */
  *, *::before, *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    /* This is the size the accessibility "A+/A-" buttons adjust */
    font-size: calc(var(--base-font-size) * 1px);
  }
  
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    * {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
    }
  }
  
  body {
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  
  h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--color-harbor-dark);
    line-height: 1.15;
    margin: 0 0 var(--space-sm);
  }
  
  h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 500; }
  h2 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); font-weight: 500; }
  h3 { font-size: 1.25rem; font-weight: 600; color: var(--color-ink); }
  
  p { margin: 0 0 var(--space-sm); color: var(--color-ink-soft); }
  
  a {
    color: var(--color-harbor);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  
  img, svg { max-width: 100%; }
  
  .section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
  }
  
  .eyebrow {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: var(--color-meadow);
    margin-bottom: var(--space-xs);
  }
  
  /* --- Buttons --- */
  .btn {
    display: inline-block;
    padding: 0.85em 1.6em;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:hover { transform: translateY(-2px); }
  
  .btn-primary {
    background: var(--color-sunrise);
    color: var(--color-harbor-dark);
  }
  .btn-primary:hover { background: var(--color-sunrise-dark); }
  
  .btn-secondary {
    background: transparent;
    border-color: var(--color-harbor);
    color: var(--color-harbor-dark);
  }
  .btn-secondary:hover { background: var(--color-harbor); color: var(--color-white); }
  
  
  /* ------------------------------------------------------------
     3. ACCESSIBILITY HELPERS
     ------------------------------------------------------------ */
  
  /* Hides content visually but keeps it available to screen readers */
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  /* The "Skip to main content" link: invisible until a keyboard
     user tabs to it, then it jumps into view. Never remove this. */
  .skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-sm);
    background: var(--color-harbor-dark);
    color: var(--color-white);
    padding: 0.75em 1.25em;
    border-radius: var(--radius-sm);
    z-index: 1000;
    transition: top 0.2s ease;
  }
  .skip-link:focus {
    top: var(--space-sm);
  }
  
  /* A clearly visible focus ring for every interactive element.
     Do not remove -- keyboard users rely on this to see where they are. */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible {
    outline: 3px solid var(--color-sunrise-dark);
    outline-offset: 3px;
    border-radius: 4px;
  }
  
  
  /* ------------------------------------------------------------
     4. HEADER + NAVIGATION
     ------------------------------------------------------------ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(245, 246, 243, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-mist);
  }
  
  .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }
  
  /* The site title, top-left, doubles as the logo for now */
  .site-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-harbor-dark);
    text-decoration: none;
    white-space: nowrap;
  }
  .site-title-accent {
    color: var(--color-sunrise-dark);
    font-style: italic;
    margin-left: 0.3em;
  }
  
  .main-nav { flex: 1; display: flex; justify-content: center; }
  
  .nav-list {
    list-style: none;
    display: flex;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
  }
  .nav-list a {
    color: var(--color-ink);
    font-weight: 500;
    text-decoration: none;
  }
  .nav-list a:hover { color: var(--color-harbor); }
  
  /* Hamburger button — hidden on desktop, shown on mobile (see media query) */
  .nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  .nav-toggle-bar {
    width: 22px;
    height: 2px;
    background: var(--color-ink);
  }
  
  /* Accessibility toolbar buttons (A-, A+, contrast toggle) */
  .a11y-toolbar { display: flex; gap: 0.4rem; }
  .a11y-btn {
    background: var(--color-white);
    border: 1px solid var(--color-mist);
    color: var(--color-harbor-dark);
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 0.4em 0.65em;
    cursor: pointer;
    font-size: 0.9rem;
  }
  .a11y-btn:hover { border-color: var(--color-harbor); }
  .a11y-btn[aria-pressed="true"] {
    background: var(--color-harbor-dark);
    color: var(--color-white);
  }
  
  
  /* ------------------------------------------------------------
     5. HERO SECTION
     ------------------------------------------------------------ */
  .hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-lg);
    align-items: center;
  }
  
  .hero-lede { font-size: 1.1rem; max-width: 46ch; }
  
  .hero-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
  }
  
  /* Decorative SVG art in the hero */
  .hero-art svg { width: 100%; height: auto; }
  .art-ring { fill: none; stroke: var(--color-mist); stroke-width: 2; }
  .art-fill-accent { fill: var(--color-sunrise); opacity: 0.85; }
  .art-fill-secondary { fill: var(--color-meadow); opacity: 0.85; }
  .art-path { fill: none; stroke: var(--color-harbor); stroke-width: 4; stroke-linecap: round; }
  
  
  /* ------------------------------------------------------------
     6. STATS STRIP
     ------------------------------------------------------------ */
  .stats { background: var(--color-harbor-dark); }
  .stats-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    text-align: center;
  }
  .stat-number {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--color-sunrise);
    margin: 0;
  }
  .stat-label {
    color: var(--color-canvas);
    opacity: 0.85;
    font-size: 0.9rem;
    margin: 0;
  }
  
  
  /* ------------------------------------------------------------
     7. ABOUT SECTION
     ------------------------------------------------------------ */
  .about-inner { max-width: 800px; }
  
  
  /* ------------------------------------------------------------
     8. PROGRAMS (CARD GRID)
     ------------------------------------------------------------ */
  .program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
  }
  
  .program-card {
    background: var(--color-white);
    border: 1px solid var(--color-mist);
    border-radius: var(--radius);
    padding: var(--space-md);
  }
  
  .program-icon svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: var(--color-harbor);
    stroke-width: 2.5;
    margin-bottom: var(--space-sm);
  }
  
  
  /* ------------------------------------------------------------
     9. TESTIMONIAL
     ------------------------------------------------------------ */
  .testimonial { background: var(--color-canvas-alt); }
  .testimonial-inner { max-width: 750px; text-align: center; }
  .testimonial blockquote { margin: 0; }
  .testimonial p {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-ink);
    font-style: italic;
  }
  .testimonial footer {
    margin-top: var(--space-sm);
    font-size: 0.95rem;
    color: var(--color-ink-soft);
  }
  
  
  /* ------------------------------------------------------------
     10. GET INVOLVED (CARD GRID)
     ------------------------------------------------------------ */
  .involved-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
  }
  .involved-card {
    background: var(--color-white);
    border-radius: var(--radius);
    padding: var(--space-md);
    border-top: 4px solid var(--color-meadow);
  }
  /* ------------------------------------------------------------
     10b. FOUNDERS / TEAM PAGE
     Used on founders.html (and the "Team" section if you add one
     to index.html). ".is-hidden" is the on/off switch for
     sub-position cards -- see the comment in founders.html for how
     to show/hide a card.
  
     CLICK-TO-EXPAND BIOS: every ".founder-card" starts with its bio
     clipped to a few lines. Clicking (or pressing Enter/Space on) a
     card does a quick spin, then expands to show the full bio. This
     works via event delegation in script.js, so it automatically
     applies to any new founder/position card you add later -- no
     script.js edits needed as long as the new card keeps the
     "founder-card" class, tabindex="0", role="button", and a
     ".bio-hint" paragraph (see the copy instructions in founders.html).
     ------------------------------------------------------------ */
  .team-intro { padding-bottom: 0; }
  
  .founder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
  }
  
  .founder-card {
    background: var(--color-white);
    border: 1px solid var(--color-mist);
    border-radius: var(--radius);
    padding: var(--space-md);
    text-align: center;
    cursor: pointer;
    transition: transform 0.55s ease, box-shadow 0.55s ease;
  }
  .founder-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  }

  /* While a card is open, it leaves its spot in the grid (position:
     fixed) and floats centered over everything else, enlarged. The
     rotateY(360deg) here is what makes it spin around the vertical
     axis on its way there -- script.js handles the "fly from its
     original spot" part, this just defines where it ends up. */
  .founder-card.is-open {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(90vw, 420px);
    max-height: 85vh;
    overflow-y: auto;
    transform: translate(-50%, -50%) scale(1.35) rotateY(360deg);
    z-index: 200;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    cursor: default;
  }

  /* An invisible stand-in left behind in the grid while a card is
     floating, so the other cards don't jump sideways to fill the gap. */
  .founder-card-placeholder {
    visibility: hidden;
  }

  /* Dimmed backdrop behind an open card. script.js creates this
     element automatically -- no HTML edits needed. */
  .card-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 20, 0.55);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .card-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .founder-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto var(--space-sm);
    display: block;
    border: 3px solid var(--color-meadow);
  }
  
  .founder-name { margin-bottom: 0.2em; }
  
  .founder-subtitle {
    color: var(--color-harbor);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
  }
  
  /* Collapsed by default: clipped to ~4 lines with a fade-out edge.
     ".is-open" (added by script.js on click) lifts the clip so the
     full bio shows. */
  .founder-bio {
    font-size: 0.95rem;
    max-height: 5.7em;
    overflow: hidden;
    transition: max-height 0.4s ease;
    -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  }
  .founder-card.is-open .founder-bio {
    max-height: 600px;
    -webkit-mask-image: none;
            mask-image: none;
  }
  
  /* Small hint under the bio, only visible while collapsed */
  .bio-hint {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-sunrise-dark);
    margin: 0.4em 0 0;
  }
  .founder-card.is-open .bio-hint { display: none; }
  
  .team-positions { background: var(--color-canvas-alt); }
  
  /* The hide switch: any card (or section) with this class is
     completely removed from the page (and from screen readers / tab
     order) until you delete "is-hidden" from its class attribute. */
  .is-hidden { display: none; }
  
  
  /* ------------------------------------------------------------
     10c. DONATE WARNING DROPDOWN
     Clicking "Donate now" doesn't redirect right away -- it opens a
     red warning box directly under the button explaining the
     donation isn't tax-deductible yet. The visitor has to click
     "Continue to donate" inside that box to actually go to Donorbox.
     ------------------------------------------------------------ */
  .donate-wrap {
    display: inline-block;
    text-align: left;
  }
  
  .donate-warning {
    margin-top: var(--space-sm);
    max-width: 320px;
    background: #FDECEA;
    border: 2px solid #D92D20;
    color: #7A271A;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
  }
  .donate-warning p {
    color: #7A271A;
    font-size: 0.9rem;
    margin: 0 0 var(--space-sm);
  }
  .donate-warning[hidden] { display: none; }
  
  .donate-continue {
    padding: 0.6em 1.2em;
    font-size: 0.9rem;
  }
  
  /* ------------------------------------------------------------
     11. NEWSLETTER FORM
     ------------------------------------------------------------ */
  .newsletter { background: var(--color-harbor); }
  .newsletter-inner { max-width: 650px; text-align: center; }
  .newsletter h2 { color: var(--color-white); }
  .newsletter p { color: rgba(255,255,255,0.85); }
  
  .newsletter-form {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-md);
  }
  .newsletter-form input[type="email"] {
    padding: 0.85em 1.1em;
    border-radius: 999px;
    border: none;
    min-width: 260px;
    font-size: 1rem;
    font-family: var(--font-body);
  }
  
  
  /* ------------------------------------------------------------
     12. FOOTER
     ------------------------------------------------------------ */
  .site-footer {
    background: var(--color-ink);
    color: var(--color-canvas);
  }
  .footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
  }
  .footer-title { color: var(--color-white); margin-bottom: var(--space-xs); }
  .footer-address { color: rgba(245,246,243,0.75); margin: 0.2em 0; }
  .footer-address a { color: var(--color-sunrise); }
  
  .footer-social { display: flex; gap: var(--space-md); align-items: flex-start; }
  .footer-social a { color: var(--color-canvas); text-decoration: none; }
  .footer-social a:hover { color: var(--color-sunrise); }
  
  .footer-legal {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-sm) var(--space-md) var(--space-lg);
    font-size: 0.85rem;
    color: rgba(245,246,243,0.6);
  }
  
  
  /* ------------------------------------------------------------
     13. HIGH-CONTRAST MODE
     Toggled by the "◐" button in the header (see script.js).
     This swaps the palette for a higher-contrast black/white/yellow
     theme for visitors who need stronger contrast to read comfortably.
     ------------------------------------------------------------ */
  body.high-contrast {
    --color-canvas: #12180F;       /* near-black forest */
    --color-canvas-alt: #1C2418;   /* slightly lifted for alternating sections */
    --color-ink: #F5F7F0;          /* near-white, warm-tinted text */
    --color-ink-soft: #E3E8DA;     /* still very light, for secondary text */
    --color-harbor: #C8E85A;       /* bright lime — links, brand accent */
    --color-harbor-dark: #C8E85A;  /* same, so headlines stay bright too */
    --color-meadow: #8FD65E;       /* secondary bright green accent */
    --color-sunrise: #F2C94C;      /* bright gold — CTAs */
    --color-sunrise-dark: #D9A82E; /* gold hover state */
    --color-mist: #55603F;         /* lightened so borders stay visible on dark bg */
    --color-white: #1C2418;        /* "card" background — dark, not white */
  }
  body.high-contrast .program-card,
  body.high-contrast .involved-card {
    border: 1px solid var(--color-mist);
  }
  body.high-contrast .btn-primary { color: #12180F; }
  
  /* Fixes the header, which has a hardcoded light background that
     otherwise never switches to dark — this is what was making the
     nav text and logo invisible in high-contrast mode. */
  body.high-contrast .site-header {
    background: rgba(18, 24, 15, 0.95);
  }
    body.high-contrast .btn-primary { color: #000000; }
  
  /* ------------------------------------------------------------
     14. RESPONSIVE / MOBILE RULES
     ------------------------------------------------------------ */
  @media (max-width: 860px) {
    .hero-inner {
      grid-template-columns: 1fr;
      text-align: left;
    }
    .hero-art { order: -1; max-width: 260px; margin: 0 auto; }
  
    .stats-inner { grid-template-columns: repeat(2, 1fr); }
  }
  
  @media (max-width: 720px) {
    .nav-toggle { display: flex; }
  
    .main-nav { position: relative; }
  
    .nav-list {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      left: auto;
      background: var(--color-white);
      border: 1px solid var(--color-mist);
      border-radius: var(--radius-sm);
      flex-direction: column;
      padding: var(--space-sm);
      min-width: 180px;
    }
    .nav-list.is-open { display: flex; }
  
    .a11y-toolbar { order: 3; }
    .header-inner { flex-wrap: wrap; }
  }
  
  @media (max-width: 480px) {
    .stats-inner { grid-template-columns: 1fr 1fr; }
    .newsletter-form { flex-direction: column; align-items: stretch; }
  }