/* ==========================================================================
   The Accessible Legion Fund
   Shared design system and accessibility foundation
   --------------------------------------------------------------------------
   Contents
   1.  Design tokens (:root custom properties)
   2.  Modern reset and base elements
   3.  Accessibility utilities (skip link, visually-hidden, focus, motion)
   4.  Layout primitives (container, section, grid, dividers)
   5.  Header and primary navigation (desktop + accessible mobile menu)
   6.  Buttons and calls to action
   7.  Hero
   8.  Cards
   9.  Trust strip
   10. Testimonials
   11. Media placeholders (used while final image assets are pending)
   12. Board grid
   13. Forms
   14. Accordion (disclosure)
   15. Notice / status blocks
   16. CTA band
   17. Footer
   18. Utilities
   19. Responsive adjustments
   20. Print

   NOTE ON PLACEHOLDERS: no final image library exists yet. Meaningful images
   are represented with labeled CSS placeholders (.placeholder) that name the
   intended file. Decorative surfaces use CSS gradients only. See
   assets/images/PLACEHOLDERS.md for the full missing-asset manifest.
   ========================================================================== */

/* 1. DESIGN TOKENS ======================================================== */
:root {
  /* Brand palette */
  --navy-900: #0A1B2E;
  --navy-800: #12263A;
  --navy-700: #1B3A5C;
  --navy-600: #24507E;
  --red-600:  #B22234; /* white text on this = ~6.6:1, passes AA */
  --red-700:  #8E1B2A;
  --charcoal: #1F2933;
  --gray-700: #3B4652; /* muted text, ~9.6:1 on white, still AA */
  --gray-500: #64748B;
  --gray-400: #94A3B8; /* borders / decorative only, never body text */
  --gray-300: #CBD5E1;
  --gray-200: #E2E8F0;
  --gray-100: #F1F5F9;
  --gray-50:  #F8FAFC;
  --white:    #FFFFFF;
  --gold:     #FFC72C; /* focus halo on dark surfaces only */

  /* Semantic colors */
  --color-bg: var(--white);
  --color-surface: var(--white);
  --color-surface-alt: var(--gray-100);
  --color-text: var(--charcoal);
  --color-text-muted: var(--gray-700);
  --color-heading: var(--navy-900);
  --color-brand: var(--navy-900);
  --color-on-brand: var(--white);
  --color-accent: var(--red-600);
  --color-accent-hover: var(--red-700);
  --color-on-accent: var(--white);
  --color-border: var(--gray-200);
  --color-link: #1B4B82;
  --color-link-hover: #0A1B2E;
  --color-focus: #1B4B82;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  --fs-h1: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem);
  --fs-h2: clamp(1.55rem, 1.2rem + 1.4vw, 2rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem);
  --fs-h4: 1.1rem;
  --fs-body: 1.0625rem;   /* ~17px */
  --fs-small: 0.9375rem;  /* ~15px, never smaller in visible chrome */
  --lh-body: 1.65;
  --lh-heading: 1.2;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius, borders, shadows */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --border: 1px solid var(--color-border);
  --shadow-sm: 0 1px 2px rgba(10, 27, 46, 0.06), 0 1px 3px rgba(10, 27, 46, 0.08);
  --shadow-md: 0 6px 18px rgba(10, 27, 46, 0.10), 0 2px 6px rgba(10, 27, 46, 0.06);

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 800px;
  --header-h: 76px;
}

/* 2. RESET AND BASE ======================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-heading);
  color: var(--color-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { max-width: 68ch; }
p, ul, ol { font-size: var(--fs-body); }

a { color: var(--color-link); text-underline-offset: 3px; }
a:hover { color: var(--color-link-hover); }

img, svg, picture { max-width: 100%; display: block; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: var(--space-2); }

strong { color: var(--color-heading); }

:target { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }

/* 3. ACCESSIBILITY UTILITIES ============================================== */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: 1000;
  background: var(--navy-900);
  color: var(--white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: var(--space-3);
  color: var(--white);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Visible, high-contrast focus on any background.
   Default ring reads on light surfaces; dark surfaces add a gold halo. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 3px;
}
.site-header :focus-visible,
.site-footer :focus-visible,
.section--navy :focus-visible,
.hero :focus-visible,
.cta-band :focus-visible {
  outline-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(10, 27, 46, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. LAYOUT PRIMITIVES ==================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(var(--space-7), 5vw, var(--space-9)); }
.section--tint { background: var(--color-surface-alt); }
.section--navy {
  background: var(--navy-900);
  color: #E8EEF5;
  background-image:
    radial-gradient(60% 120% at 85% -10%, rgba(36, 80, 126, 0.55), transparent 60%),
    radial-gradient(50% 100% at 0% 110%, rgba(178, 34, 52, 0.18), transparent 60%);
}
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--white); }

.section__header { max-width: 720px; margin-bottom: var(--space-6); }
.section__header--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-600);
  margin-bottom: var(--space-2);
}
.section--navy .eyebrow { color: var(--gold); }

.section-title { margin-bottom: var(--space-3); }
.section-intro { color: var(--color-text-muted); font-size: 1.125rem; }
.section--navy .section-intro { color: #C6D4E4; }

.lead {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* Angular divider between full-bleed bands */
.divider-angular {
  height: 48px;
  background: var(--navy-900);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%);
}
.divider-angular--up {
  background: var(--navy-900);
  clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%);
}

/* Thin tech line accent */
.rule-accent {
  width: 64px; height: 4px; border: 0; border-radius: 4px;
  background: var(--red-600); margin: var(--space-4) 0;
}
.section__header--center .rule-accent { margin-inline: auto; }

/* 5. HEADER AND NAVIGATION =============================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy-900);
  color: var(--white);
  border-bottom: 3px solid var(--red-600);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--white); text-decoration: none; padding: var(--space-2) 0;
}
.brand:hover { color: var(--white); }
.brand-mark { width: 40px; height: 40px; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand-tagline { font-size: 0.75rem; color: #9DB4CE; font-weight: 600; letter-spacing: 0.02em; }

.nav-toggle {
  display: none;
  align-items: center; gap: var(--space-2);
  background: transparent; color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font: inherit; font-weight: 700; cursor: pointer;
  min-height: 44px;
}
.nav-toggle__bars { width: 20px; height: 2px; background: currentColor; position: relative; display: inline-block; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.site-nav { display: block; }
.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--space-1);
}
.nav-link {
  display: inline-flex; align-items: center;
  color: #DCE6F2; text-decoration: none; font-weight: 600;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  min-height: 44px;
  border-bottom: 3px solid transparent;
}
.nav-link:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.nav-link[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--red-600);
}
.nav-item--cta { margin-left: var(--space-2); }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-600); color: var(--white);
  text-decoration: none; font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm); min-height: 44px;
}
.nav-cta:hover { background: var(--red-700); color: var(--white); }

/* 6. BUTTONS ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font: inherit; font-weight: 700; line-height: 1.1;
  padding: var(--space-3) var(--space-5);
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--red-600); color: var(--white); border-color: var(--red-600); }
.btn--primary:hover { background: var(--red-700); border-color: var(--red-700); color: var(--white); }
.btn--secondary { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.btn--secondary:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); }
.btn--outline { background: transparent; color: var(--navy-900); border-color: var(--navy-600); }
.btn--outline:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.btn--on-dark { background: var(--white); color: var(--navy-900); border-color: var(--white); }
.btn--on-dark:hover { background: var(--gray-100); color: var(--navy-900); }
.btn--ghost-on-dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn--ghost-on-dark:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.btn--lg { padding: var(--space-4) var(--space-6); min-height: 54px; font-size: 1.075rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* 7. HERO =============================================================== */
.hero {
  position: relative;
  color: #E8EEF5;
  background: var(--navy-900);
  background-image:
    radial-gradient(75% 120% at 80% -20%, rgba(36, 80, 126, 0.75), transparent 55%),
    radial-gradient(60% 110% at -10% 120%, rgba(178, 34, 52, 0.28), transparent 55%),
    linear-gradient(180deg, #0A1B2E 0%, #0E223A 100%);
  overflow: hidden;
}
/* faint structured-grid / map suggestion, decorative only */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 80% at 70% 20%, #000 30%, transparent 75%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: var(--space-6);
  padding-block: clamp(var(--space-7), 6vw, calc(var(--space-9) + 1rem));
  align-items: center;
}
.hero--split .hero__inner { grid-template-columns: 1.1fr 0.9fr; }
.hero__eyebrow { color: var(--gold); }
.hero__title { color: var(--white); font-size: var(--fs-display); max-width: 15ch; }
.hero__text { color: #C6D4E4; font-size: 1.2rem; max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.hero--page .hero__inner { padding-block: clamp(var(--space-6), 4vw, var(--space-8)); }
.hero--page .hero__title { max-width: 22ch; }
.hero__breadcrumb { font-size: var(--fs-small); color: #9DB4CE; margin-bottom: var(--space-3); }
.hero__breadcrumb a { color: #C6D4E4; }

/* Photo hero: background photograph with a dark overlay so the headline and
   CTAs stay readable (WCAG AA). If assets/images/homepagehero.webp is not
   present, this falls back to the navy color and gradient below it. */
.hero--photo {
  background-color: var(--navy-900);
  background-image:
    linear-gradient(90deg, rgba(8,20,35,0.94) 0%, rgba(8,20,35,0.82) 42%, rgba(10,27,46,0.58) 100%),
    url("../images/homepagehero.webp");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
.hero--photo::after { display: none; } /* drop the decorative grid over a photo */
/* Taller band on the homepage photo hero (about 30% more overall height) so
   more of the photograph is visible. Scoped to the photo hero only. */
.hero--photo .hero__inner { padding-block: clamp(5rem, calc(6vw + 5rem), 11rem); }
/* Desktop: content sits on the left and is raised about 10% above center by
   trimming the top padding and moving it to the bottom (overall height kept).
   Mobile keeps the symmetric padding above. */
@media (min-width: 821px) {
  .hero--photo .hero__inner {
    padding-top: clamp(0.5rem, calc(6vw + 0.5rem), 6.5rem);
    padding-bottom: clamp(9.5rem, calc(6vw + 9.5rem), 15.5rem);
  }
}
@media (max-width: 820px) {
  .hero--photo {
    background-image:
      linear-gradient(180deg, rgba(8,20,35,0.88) 0%, rgba(8,20,35,0.80) 100%),
      url("../images/homepagehero.webp");
    background-position: center 40%;
  }
}

/* 8. CARDS ============================================================== */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-3);
  height: 100%;
}
.card--raised { box-shadow: var(--shadow-md);  justify-content: center;}
.card--accent { border-top: 4px solid var(--red-600); }
.card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-900); color: var(--white); flex: 0 0 auto;
}
.card__icon svg { width: 26px; height: 26px; }
.card__title { font-size: var(--fs-h3); }
.card__text { color: var(--color-text-muted); }
.card__link {
  margin-top: auto; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.card__link::after { content: "\2192"; }
.card--dark {
  background: var(--navy-800); border-color: var(--navy-700); color: #D6E0EC;
}
.card--dark .card__title { color: var(--white); }
.card--dark .card__text { color: #B9C7D8; }

.list-checked { list-style: none; padding-left: 0; }
.list-checked li {
  position: relative; padding-left: 2rem; color: var(--color-text);
}
.list-checked li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 12px; height: 7px; border-left: 3px solid var(--red-600);
  border-bottom: 3px solid var(--red-600); transform: rotate(-45deg);
}
.section--navy .list-checked li { color: #DCE6F2; }
.section--navy .list-checked li::before { border-color: var(--gold); }
/* Dark cards can appear inside light sections, so scope the readable
   treatment to the card itself, not only to navy sections. */
.card--dark .list-checked li { color: #DCE6F2; }
.card--dark .list-checked li::before { border-color: var(--gold); }

/* 9. TRUST STRIP ======================================================== */
.trust-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5); align-items: start;
}
.trust-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.trust-item__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center; color: var(--gold);
}
.trust-item__title { color: var(--white); font-weight: 700; margin-bottom: 2px; }
.trust-item__text { color: #B9C7D8; font-size: var(--fs-small); }

/* 10. TESTIMONIALS ====================================================== */
.testimonial {
  background: var(--color-surface); border: var(--border);
  border-radius: var(--radius-md); padding: var(--space-5);
  box-shadow: var(--shadow-sm); height: 100%;
  display: flex; flex-direction: column; gap: var(--space-4);
  border-left: 4px solid var(--red-600);
}
.testimonial__quote { margin: 0; font-size: 1.075rem; color: var(--color-text); }
.testimonial__quote p { margin: 0; }
.testimonial__quote::before { content: "\201C"; color: var(--gray-400); font-size: 2rem; line-height: 0; vertical-align: -0.3em; margin-right: 0.1em; }
.testimonial figcaption { margin-top: auto; }
.testimonial__name { font-weight: 700; color: var(--color-heading); }
.testimonial__role { font-size: var(--fs-small); color: var(--color-text-muted); }
.testimonial--pending { border-left-color: var(--gray-300); }
.testimonial--pending .testimonial__quote { color: var(--gray-500); font-style: italic; }

/* 11. MEDIA PLACEHOLDERS (final images pending) ========================= */
.placeholder {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: var(--space-2); padding: var(--space-5);
  background:
    repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 12px, var(--gray-50) 12px, var(--gray-50) 24px);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-md);
  color: var(--gray-500);
}
.placeholder__tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy-700); background: var(--white); border: 1px solid var(--gray-300);
  padding: 2px 8px; border-radius: 999px;
}
.placeholder__label { font-size: var(--fs-small); font-weight: 600; color: var(--gray-700); }
.placeholder__file { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.8rem; color: var(--gray-500); }
.placeholder--wide { aspect-ratio: 16 / 9; }
/* Fix: in a 2-col grid the stretched row height was driving the placeholder width via aspect-ratio, overflowing its column and overlapping the adjacent card. Prevent the vertical stretch so width tracks the column. */
.grid--2 > .placeholder { align-self: start; }
.placeholder--hero { aspect-ratio: 16 / 10; min-height: 240px; }
.placeholder--portrait { aspect-ratio: 4 / 5; }
.placeholder--square { aspect-ratio: 1 / 1; }
.placeholder--on-dark {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 12px, rgba(255,255,255,0.02) 12px, rgba(255,255,255,0.02) 24px);
  border-color: rgba(255,255,255,0.3); color: #B9C7D8;
}
.placeholder--on-dark .placeholder__label { color: #DCE6F2; }
.placeholder--on-dark .placeholder__file { color: #9DB4CE; }
.placeholder--on-dark .placeholder__tag { color: var(--white); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }

/* 12. BOARD GRID ======================================================== */
.board-card { text-align: center; }
.board-card .placeholder { margin-bottom: var(--space-3); }
.board-card__name { font-size: var(--fs-h3); margin-bottom: 2px; }
.board-card__role { color: var(--red-700); font-weight: 700; }
.board-card__note { font-size: var(--fs-small); color: var(--color-text-muted); }

/* 13. FORMS ============================================================= */
.form { display: grid; gap: var(--space-5); }
.form__row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__group { display: grid; gap: var(--space-2); }
.form__label { font-weight: 700; color: var(--color-heading); }
.form__req { color: var(--red-700); }
.form__hint { font-size: var(--fs-small); color: var(--color-text-muted); }
.form__control {
  font: inherit; color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  background: var(--white);
  min-height: 48px; width: 100%;
}
textarea.form__control { min-height: 140px; resize: vertical; }
.form__control:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; border-color: var(--navy-700); }
.fieldset { border: var(--border); border-radius: var(--radius-md); padding: var(--space-5); }
.legend { font-weight: 700; padding-inline: var(--space-2); color: var(--color-heading); }

/* 14. ACCORDION ========================================================= */
.accordion { border: var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--white); }
.accordion__item + .accordion__item { border-top: var(--border); }
.accordion__trigger {
  width: 100%; text-align: left; font: inherit; font-weight: 700; color: var(--color-heading);
  background: var(--white); border: 0; cursor: pointer;
  padding: var(--space-4) var(--space-5); min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.accordion__trigger:hover { background: var(--gray-50); }
.accordion__icon { flex: 0 0 auto; width: 14px; height: 14px; position: relative; }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: var(--red-600); border-radius: 2px;
}
.accordion__icon::before { top: 6px; left: 0; width: 14px; height: 2px; }
.accordion__icon::after { top: 0; left: 6px; width: 2px; height: 14px; transition: transform 0.2s ease; }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); }
.accordion__panel { padding: 0 var(--space-5) var(--space-5); }
.accordion__panel[hidden] { display: none; }

/* 15. NOTICE / STATUS =================================================== */
.notice {
  border: 1px solid var(--gray-300); border-left: 4px solid var(--navy-600);
  background: var(--gray-50); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5); color: var(--color-text);
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.notice__badge {
  flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--navy-900); color: var(--white); padding: 3px 9px; border-radius: 999px; margin-top: 2px;
}
.notice p { margin: 0; color: var(--color-text-muted); }
.notice--dev { border-left-color: var(--red-600); }
.notice--dev .notice__badge { background: var(--red-700); }

/* 16. CTA BAND ========================================================== */
.cta-band { background: var(--red-600); color: var(--white); }
.cta-band__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  padding-block: clamp(var(--space-6), 4vw, var(--space-8));
}
.cta-band__text { max-width: 60ch; }
.cta-band__title { color: var(--white); margin-bottom: var(--space-2); }
.cta-band__lead { color: #FBE3E6; font-size: 1.125rem; }

.cta-band__inner--stacked { flex-direction: column; align-items: stretch; }
.cta-band__donate { width: 100%; display: flex; justify-content: center; margin-top: var(--space-5); }
.cta-band__donate-link { display: inline-block; max-width: 100%; }
.cta-band__donate-img { display: block; max-width: 100%; height: auto; width: auto; }

/* 17. FOOTER ============================================================ */
.site-footer { background: var(--navy-900); color: #C6D4E4; }
.site-footer a { color: #DCE6F2; }
.site-footer a:hover { color: var(--white); }
.footer-top { padding-block: var(--space-8); }
.footer-grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
}
.footer-brand .brand { margin-bottom: var(--space-3); }
.footer-brand__text { font-size: var(--fs-small); color: #9DB4CE; max-width: 34ch; }
.footer-col__title {
  color: var(--white); font-size: 0.95rem; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-3);
}
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); font-size: var(--fs-small); }
.footer-contact li { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; }
.footer-contact .label { color: #9DB4CE; min-width: 64px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-block: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  font-size: var(--fs-small); color: #9DB4CE;
}
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom__links a { text-decoration: none; }

/* 18. UTILITIES ========================================================= */
.u-center { text-align: center; }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-maxw { max-width: 68ch; }
.u-nowrap { white-space: nowrap; }
.anchor-target { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
[hidden] { display: none !important; }

/* 19. RESPONSIVE ======================================================== */
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero--split .hero__inner { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  :root { --header-h: 68px; }
  .brand-tagline { display: none; }

  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--navy-900);
    border-bottom: 3px solid var(--red-600);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3); }
  .nav-link { min-height: 52px; border-bottom: 0; border-left: 3px solid transparent; border-radius: var(--radius-sm); }
  .nav-link[aria-current="page"] { border-left-color: var(--red-600); background: rgba(255,255,255,0.06); }
  .nav-item--cta { margin: var(--space-2) 0 0; }
  .nav-cta { width: 100%; }
}

@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  p { max-width: 100%; }
}

/* 20. PRINT ============================================================= */
@media print {
  .site-header, .nav-toggle, .cta-band, .skip-link { display: none; }
  body { color: #000; }
  .hero, .section--navy { background: #fff; color: #000; }
}

/* 21. COMPLETION-PHASE COMPONENTS ======================================= */
/* Numbered process steps (reuse .card as the container) */
.num-badge {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--red-600); color: var(--white);
  font-weight: 800; font-size: 1.05rem; flex: 0 0 auto;
}
.section--navy .num-badge { background: var(--gold); color: var(--navy-900); }
.step-card .num-badge { margin-bottom: var(--space-1); }

/* Supporting-document / requirement checklist inherits .list-checked */

/* News coverage references */
.news-list { display: grid; gap: var(--space-4); }
.news-item {
  background: var(--color-surface); border: var(--border);
  border-left: 4px solid var(--navy-700); border-radius: var(--radius-md);
  padding: var(--space-5); display: grid; gap: var(--space-2);
}
.news-item__title { font-size: var(--fs-h4); color: var(--color-heading); font-weight: 700; }
.news-item__meta { font-size: var(--fs-small); color: var(--color-text-muted); }
.tag-pending {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--navy-700); background: var(--gray-100);
  border: 1px solid var(--gray-300); padding: 2px 8px; border-radius: 999px;
}

/* Event cards (structure ready for future confirmed events) */
.event-card {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
  align-items: start; background: var(--color-surface); border: var(--border);
  border-radius: var(--radius-md); padding: var(--space-5);
}
.event-card__date {
  text-align: center; background: var(--navy-900); color: var(--white);
  border-radius: var(--radius-sm); padding: var(--space-3); min-width: 78px;
}
.event-card__mon { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); }
.event-card__day { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1; }

/* Long-form / policy document layout */
.doc-toc { background: var(--gray-50); border: var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.doc-toc__title { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.doc-toc ul { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: var(--space-6); }
.doc-section { margin-top: var(--space-7); scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.doc-section > h2 { margin-bottom: var(--space-3); }
@media (max-width: 640px) { .doc-toc ul { columns: 1; } .event-card { grid-template-columns: 1fr; } }



/* Request assistance section background image */
.section--flag-bg {
		background-image: linear-gradient(rgba(10,27,46,0.82), rgba(10,27,46,0.82)), url('../images/american-flag-background.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
}


}