/* ============================================
   HANS - Help Autism Now Society
   Design: Warm Community (Option A)
   Palette: Coral + Teal + Sage on Cream
   Typography: Lora (headings) + Inter (body)
   ============================================ */

/* === CSS Custom Properties === */
:root {
  --coral: #E8654A;
  --coral-dark: #D4533A;
  --teal: #1A5C5E;
  --teal-light: #2A7A7D;
  --sage: #B8D4C8;
  --sage-light: #D8EBE2;
  --cream: #FAF7F2;
  --warm-white: #FEFCF9;
  --text-dark: #2C2C2C;
  --text-medium: #555555;
  --text-light: #777777;
  --border: #E8E0D8;
}

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

/* === Base === */
html { scrollbar-gutter: stable; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.7;
  font-size: 16px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--coral); }

/* === HEADER === */
.header {
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--teal);
  flex-shrink: 0;
}
.logo-img {
  height: 62px;
  width: auto;
  object-fit: contain;
}

/* Desktop nav */
.nav-desktop { display: flex; align-items: center; gap: 28px; }
.nav-desktop a {
  text-decoration: none;
  color: var(--text-medium);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-desktop a:hover,
.nav-desktop a[aria-current="page"] { color: var(--teal); }

/* Search toggle */
.search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-medium);
  padding: 8px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.search-toggle:hover { color: var(--teal); }
.search-toggle svg { width: 20px; height: 20px; }

/* Search modal */
.search-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
}
.search-modal.is-open { display: flex; }
.search-modal-inner {
  background: var(--warm-white);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.15);
  overflow: hidden;
  margin: 0 24px;
}
.search-modal input {
  width: 100%;
  padding: 18px 24px;
  border: none;
  outline: none;
  font-size: 18px;
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
}
.search-modal input::placeholder { color: var(--text-light); }
.search-results {
  max-height: 360px;
  overflow-y: auto;
}
.search-result-item {
  display: block;
  padding: 14px 24px;
  text-decoration: none;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.search-result-item:hover { background: var(--sage-light); }
.search-result-title {
  font-weight: 600;
  font-size: 15px;
}
.search-no-results {
  padding: 24px;
  text-align: center;
  color: var(--text-light);
  font-size: 15px;
}

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-left: 5px;
  vertical-align: middle;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 110;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
}
.nav-dropdown-menu a:hover { background: var(--sage-light); }

/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-dark);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile {
  display: none;
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.nav-mobile.is-open { display: block; }
.nav-mobile a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: var(--text-medium);
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover { color: var(--teal); }

/* === HERO === */
.hero {
  background: var(--warm-white);
  padding: 80px 24px;
}
.hero-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-content h1 {
  font-family: 'Lora', serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--teal);
  margin-bottom: 20px;
}
.hero-content p {
  font-size: 18px;
  color: var(--text-medium);
  margin-bottom: 32px;
  line-height: 1.8;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-image {
  border-radius: 16px;
  overflow: hidden;
  width: 340px;
  max-width: 100%;
  aspect-ratio: 340 / 427;
  position: relative;
  justify-self: center;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero-image img.active { opacity: 1; }

/* === BUTTONS === */
.btn-primary {
  display: inline-block;
  background: var(--coral);
  color: white;
  border: 2px solid transparent;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--coral-dark); color: white; }
.btn-secondary {
  display: inline-block;
  background: var(--coral);
  color: white;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid var(--coral);
  transition: all 0.2s;
}
.btn-secondary:hover { background: var(--coral-dark); border-color: var(--coral-dark); color: white; }

/* === IMPACT STATS === */
.impact {
  background: var(--teal);
  padding: 48px 24px;
}
.impact-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.impact-stat h3 {
  font-family: 'Lora', serif;
  font-size: 40px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}
.impact-stat p {
  color: var(--sage);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* === SECTION HEADINGS === */
.section-title {
  text-align: center;
  margin-bottom: 48px;
}
.section-title h2 {
  font-family: 'Lora', serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 12px;
}
.section-title p {
  font-size: 16px;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
}

/* === RESOURCES GRID === */
.resources {
  padding: 80px 24px;
}
.resources-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.resource-card {
  background: var(--warm-white);
  border-radius: 12px;
  padding: 32px;
  border: 1px solid var(--border);
  transition: box-shadow 0.2s, transform 0.2s;
}
.resource-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.resource-icon {
  width: 48px;
  height: 48px;
  background: var(--sage-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 22px;
}
.resource-card h3 {
  font-family: 'Lora', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 12px;
}
.resource-card p {
  color: var(--text-medium);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 16px;
}
.resource-link {
  color: var(--coral);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.resource-link:hover { text-decoration: underline; }

/* === AUDIENCE SPLIT === */
.audiences {
  background: var(--warm-white);
  padding: 80px 24px;
}
.audiences-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.audience-card {
  background: var(--cream);
  border-radius: 12px;
  padding: 48px 40px;
  border: 1px solid var(--border);
  text-align: center;
  display: flex;
  flex-direction: column;
}
/* The two blurbs are different lengths; without this the buttons sit at
   different heights and take their width from their own label. */
.audience-card .btn-secondary {
  margin-top: auto;
  align-self: center;
  min-width: 240px;
  text-align: center;
}
.audience-card h3 {
  font-family: 'Lora', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 16px;
}
.audience-card p {
  color: var(--text-medium);
  margin-bottom: 24px;
  font-size: 15px;
}

/* === ENDORSEMENTS === */
.endorsements {
  padding: 80px 24px;
}
.endorsements-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.endorsement-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.endorsement-card {
  background: var(--warm-white);
  border-radius: 12px;
  padding: 32px;
  border-left: 4px solid var(--sage);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.endorsement-card blockquote {
  font-family: 'Lora', serif;
  font-size: 15px;
  font-style: italic;
  color: var(--text-medium);
  line-height: 1.7;
  margin-bottom: 16px;
}
.endorsement-card cite {
  font-style: normal;
  font-size: 13px;
  color: var(--teal);
  font-weight: 600;
}
.endorsement-card cite span {
  display: block;
  font-weight: 400;
  color: var(--text-light);
  font-size: 12px;
  margin-top: 2px;
}

/* === INTERNATIONAL === */
.international {
  background: var(--teal);
  padding: 80px 24px;
}
.international-inner {
  max-width: 1140px;
  margin: 0 auto;
  text-align: center;
  color: white;
}
.international-inner h2 {
  font-family: 'Lora', serif;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
}
.international-inner > p {
  color: var(--sage);
  font-size: 16px;
  margin-bottom: 32px;
}
.language-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}
.language-tag {
  background: rgba(255,255,255,0.12);
  color: white;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
}
a.language-tag:hover {
  background: rgba(255,255,255,0.25);
  color: white;
}

/* === FOOTER === */
.footer {
  background: #1E1E1E;
  color: #999;
  padding: 60px 24px 32px;
}
.footer-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer h4 {
  color: white;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.footer p { font-size: 13px; line-height: 1.7; }
.footer a { color: #aaa; text-decoration: none; font-size: 13px; }
.footer a:hover { color: white; }
.footer ul { list-style: none; }
.footer li {
  margin-bottom: 0;
  line-height: 1.55;
}
/* An empty row, so Privacy Policy lines up with the fourth item in the
   columns beside it rather than the third. */
.footer li.footer-spacer { visibility: hidden; }

.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 16px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* === PAGE CONTENT (inner pages) === */
.page-hero {
  background: var(--warm-white);
  padding: 60px 24px;
  text-align: center;
}
.page-hero h1 {
  font-family: 'Lora', serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 16px;
}
.page-hero p {
  font-size: 18px;
  color: var(--text-medium);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}

.page-content {
  padding: 60px 24px;
}
.page-content-inner {
  max-width: 900px;
  margin: 0 auto;
}
.page-content h2 {
  font-family: 'Lora', serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--teal);
  margin: 48px 0 16px;
}
.page-content h2:first-child { margin-top: 0; }
.page-content h3 {
  font-family: 'Lora', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--teal);
  margin: 32px 0 12px;
}
.page-content p {
  color: var(--text-medium);
  margin-bottom: 16px;
  line-height: 1.8;
}
.page-content ul, .page-content ol {
  color: var(--text-medium);
  margin: 0 0 16px 24px;
  line-height: 1.8;
}
.page-content li { margin-bottom: 4px; }

/* Content cards for resource pages */
.content-card {
  background: var(--warm-white);
  border-radius: 12px;
  padding: 40px;
  border: 1px solid var(--border);
  margin-bottom: 32px;
}
/* A card holding nothing but an image: shrink the box to the image and centre
   the pair, rather than stranding the image at the left of a full-width card. */
.content-card-fit {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}
.content-card-fit img { margin: 0 auto; }

.content-card h3 {
  margin-top: 0;
}

/* Video container */
.video-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  margin: 24px 0;
}
.video-container video {
  width: 100%;
  display: block;
}

/* PDF download links */
.pdf-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sage-light);
  color: var(--teal);
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
  margin: 4px;
}
.pdf-download:hover {
  background: var(--sage);
  color: var(--teal);
}

/* === SLIDESHOW === */
.hans-slideshow {
  max-width: 100%;
  margin: 24px auto;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--border);
}
.hans-slideshow img {
  width: 100%;
  display: block;
  background: white;
}
.slideshow-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  background: var(--teal);
}
.slideshow-controls button {
  border: none;
  background: rgba(255,255,255,0.2);
  color: white;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 6px;
  transition: background 0.2s;
}
.slideshow-controls button:hover { background: rgba(255,255,255,0.3); }
.slideshow-controls button:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}
.slideshow-controls .page-info {
  color: white;
  font-size: 14px;
  min-width: 80px;
  text-align: center;
}

/* Slideshow language tabs */
.slideshow-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
/* Sits beside the language tabs without reading as another tab. */
.slideshow-tabs-more {
  margin-left: 4px;
  font-size: 14px;
  color: var(--text-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.slideshow-tabs-more:hover { color: var(--teal); }
.slideshow-tab {
  padding: 8px 20px;
  border: 2px solid var(--teal);
  border-radius: 8px;
  background: transparent;
  color: var(--teal);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.slideshow-tab.active,
.slideshow-tab:hover {
  background: var(--teal);
  color: white;
}

/* === LANGUAGE GRID (international page) === */
.language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  /* Every row the height of the tallest card in the whole grid, not just the
     tallest in its own row. Cards carry between two and four download chips
     plus an optional note, so per-row sizing left the rows visibly uneven. */
  grid-auto-rows: 1fr;
  gap: 20px;
  margin-top: 32px;
}
.language-card {
  background: var(--warm-white);
  border-radius: 12px;
  padding: 18px;
  border: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  scroll-margin-top: 88px;
  transition: box-shadow 0.3s;
}
.language-card.highlight {
  animation: pulse-glow 1.5s ease-in-out;
}
@keyframes pulse-glow {
  0%   { box-shadow: 0 0 0 0 rgba(26, 92, 94, 0); }
  30%  { box-shadow: 0 0 0 8px rgba(26, 92, 94, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(26, 92, 94, 0); }
}
/* Inside the heading, so a name that wraps keeps the flag on its first line. */
.language-card .flag {
  font-size: 20px;
  line-height: 1;
  margin-right: 8px;
}
/* Rows are all one height; content hangs from the top edge of each card. */
.language-card > div:last-child {
  width: 100%;
}
.language-card h3 {
  font-family: 'Lora', serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--teal);
  margin: 0 0 8px;
}
.language-card .downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.language-card .card-note {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.4;
  color: var(--text-medium);
}
.language-card .download-link {
  font-size: 12px;
  color: var(--coral);
  text-decoration: none;
  font-weight: 600;
  padding: 3px 8px;
  background: var(--sage-light);
  border-radius: 4px;
}
.language-card .download-link:hover {
  background: var(--sage);
}
/* Translations awaiting native-speaker review. Deliberately muted so they
   read as provisional next to the approved files. */
.language-card .download-link.is-draft {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-light);
  padding: 3px 9px;
}
.language-card .download-link.is-draft:hover {
  background: var(--warm-white);
  border-color: var(--sage);
}
/* The dashed outline is the whole signal now, so the word draft is carried
   for screen readers instead, where an outline says nothing. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.draft-legend {
  margin: -12px 0 28px;
  text-align: center;
  font-size: 14px;
  color: var(--text-medium);
}
/* Echoes .download-link.is-draft so the sample reads as the thing it points
   at, but padded to sit in a line of text rather than to stand alone. */
.draft-legend-tag {
  display: inline-block;
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11.5px;
  font-weight: 600;
  vertical-align: 1px;
  color: var(--text-light);
}
.draft-callout {
  margin: 20px 0 26px;
  padding: 18px 24px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--warm-white);
  font-size: 15px;
  color: var(--text-medium);
}
.draft-callout strong { color: var(--teal); }
/* Zeroed so the visible gap above and below the text is the padding alone,
   rather than padding plus a paragraph margin on one side only. */
.draft-callout p { margin: 0; }

/* Resource pages centre their headings and copy. .text-left opts a block back
   out: reference prose and lists still read better ranged left. */
.page-content-centered .page-content-inner > h2,
.page-content-centered .page-content-inner > p,
.page-content-centered .content-card > h3,
.page-content-centered .content-card > p {
  text-align: center;
}

/* The closing appeal reads as one centred block, held narrow enough that the
   centred lines still scan. */
.help-translate {
  margin-top: 8px;
}

/* Opt a single block into centring on a page that otherwise ranges left. */
.page-headings-centered .page-content-inner > p.text-center,
.page-headings-centered .page-content-inner > div.text-center,
.page-content-centered .page-content-inner > div.text-center { text-align: center; }
/* The tab row belongs with the sentence above it. */
.slideshow-tabs { justify-content: center; }

/* A name and the role under it are one unit, so they sit closer than the
   heading's default spacing allows. */
.page-content h2.person-name,
.page-content h3.person-name,
.contact-info h3.person-name { margin-bottom: 2px; }
.page-content .person-role,
.contact-info .person-role {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--text-medium);
}
/* Centred only where the name above it is centred, which is Our Story. The
   contact page sets the pair beside a photo, ranged left. */
.page-headings-centered .person-role { text-align: center; }

/* Our Story: headings centred, the story itself ranged left. */
.page-headings-centered .page-content-inner > h2,
.page-headings-centered .content-card > h3 {
  text-align: center;
}

/* === SUNSET BANNER (donate page) === */
.sunset-banner {
  background: var(--sage-light);
  border-radius: 12px;
  padding: 48px;
  text-align: center;
  border: 1px solid var(--sage);
}
.sunset-banner h2 {
  color: var(--teal);
  margin-bottom: 16px;
}
.sunset-banner p {
  max-width: 600px;
  margin: 0 auto 16px;
}

/* === CONTACT === */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.contact-photo {
  border-radius: 12px;
  overflow: hidden;
}
.contact-photo img {
  width: 100%;
  object-fit: cover;
}
.contact-info h3 {
  margin-top: 0;
}
.contact-info a {
  color: var(--coral);
  text-decoration: none;
}
.contact-info a:hover { text-decoration: underline; }

/* === 404 === */
.error-page {
  text-align: center;
  padding: 120px 24px;
}
.error-page h1 {
  font-family: 'Lora', serif;
  font-size: 80px;
  color: var(--sage);
  margin-bottom: 16px;
}
.error-page h2 {
  font-family: 'Lora', serif;
  font-size: 28px;
  color: var(--teal);
  margin-bottom: 16px;
}
.error-page p {
  color: var(--text-medium);
  margin-bottom: 32px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }

  .hero { padding: 48px 24px; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-content h1 { font-size: 32px; }
  .hero-image { width: 260px; }

  .impact-inner { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .impact-stat h3 { font-size: 28px; }

  .resources { padding: 48px 24px; }
  .resources-grid { grid-template-columns: 1fr; }

  .audience-grid { grid-template-columns: 1fr; }

  .endorsement-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .page-hero { padding: 40px 24px; }
  .page-hero h1 { font-size: 28px; }

  .page-content { padding: 40px 24px; }
  .content-card { padding: 24px; }

  .contact-grid { grid-template-columns: 1fr; }

  .language-grid { grid-template-columns: 1fr; }

  .slideshow-tabs { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .resource-icon { display: none; }

  .impact-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary { text-align: center; }
}

/* Privacy policy revision date. Set apart from the body copy so it reads as a
   footnote rather than another clause. */
.policy-updated {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-medium);
  font-size: 14px;
  font-style: italic;
}