/* =====================================================================
   Our Caring Hands - Design System
   Mobile-first, component-based, accessible (WCAG AA), no build step.
   ===================================================================== */

:root {
  /* Color tokens - Deep Blue (trust/security), Green (hope/growth), Gold
     (achievement/call-to-action) - the palette used across the site.
     Every color below passes WCAG AA contrast (4.5:1+) against white when
     used as a button/text background with white text; verified with a
     luminance-contrast check before shipping, not just eyeballed. */
  --color-primary-900: #0f2a4a;
  --color-primary-700: #1b3f72;
  --color-primary-600: #2a4f8f;
  --color-primary-500: #3e68ad;
  --color-primary-100: #e7eef7;
  --color-secondary-900: #0e4a2e;
  --color-secondary-700: #157a46;
  --color-secondary-600: #1c9455;
  --color-secondary-500: #28ae68;
  --color-secondary-100: #e7f5ec;
  --color-accent-600: #7a5406;
  --color-accent-500: #9c6b08;
  --color-accent-100: #fbf0dc;
  --color-accent-bright: #e0b93d; /* for gold text/badges on dark backgrounds - accent-500 alone is too muted there */
  --color-ink-900: #1a2421;
  --color-ink-700: #3d4b47;
  --color-ink-500: #6b7876;
  --color-ink-300: #b7c0be;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f9f8;
  --color-border: #e3e9e7;
  --color-success: #1a7f4e;
  --color-warning: #b7791f;
  --color-danger: #c0392b;

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.1rem + 0.25vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.3rem + 0.5vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.55rem + 1vw, 2.4rem);
  --step-4: clamp(2.1rem, 1.8rem + 1.6vw, 3.2rem);

  /* Spacing scale */
  --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: 4.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(20, 30, 27, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 30, 27, 0.12);
  --shadow-lg: 0 20px 45px rgba(15, 42, 74, 0.16);
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1180px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--color-ink-900);
  background: var(--color-surface);
}
img, picture, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 var(--space-3); color: var(--color-primary-900); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-primary-700); text-decoration-thickness: 1.5px; }
a:hover { color: var(--color-accent-600); }
ul, ol { padding-left: 1.25em; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* Visible, high-contrast focus ring everywhere (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--color-accent-500);
  outline-offset: 2px;
}

/* Skip-to-content link for keyboard/screen-reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary-900);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

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

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.section { padding-block: var(--space-7); }
.section-alt { background: var(--color-surface-alt); }
.stack > * + * { margin-top: var(--space-4); }
.text-center { text-align: center; }
.max-prose { max-width: 68ch; margin-inline: auto; }

/* Admin-configurable content width (Pages/Causes/Projects/Events/News body
   text). .max-prose above is the "Default" option; these three are the
   additional choices. Only ever applied to the body/description text
   wrapper, never to an entity's image, so picking a wider option here never
   changes how the featured image displays. */
.content-full { max-width: 100%; }
.content-half { max-width: 50%; margin-inline: auto; }
.content-three-quarter { max-width: 75%; margin-inline: auto; }
@media (max-width: 780px) {
  .content-half, .content-three-quarter { max-width: 100%; }
}

/* ---- Header / Nav (mobile-first, touch-friendly) ---- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(20, 30, 27, 0.03);
}
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Logo: fluid size that scales smoothly with viewport width, capped so it
   never overwhelms small screens or gets lost on large ones. Wrapped in a
   fixed-height flex box so text-brand fallback and image-brand stay aligned
   and the surrounding layout never jumps as the image loads. */
.brand {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-heading); font-weight: 700;
  color: var(--color-primary-900); text-decoration: none;
  flex-shrink: 0; min-width: 0;
  height: clamp(40px, 6vw, 60px);
}
.brand-logo {
  display: block; width: auto; height: auto;
  max-height: clamp(40px, 6vw, 60px);
  max-width: clamp(140px, 22vw, 260px);
  object-fit: contain;
}
.brand-logo-default { max-width: clamp(36px, 4vw, 48px); }
.brand-name {
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.15;
  white-space: nowrap;
}

.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--color-border);
  cursor: pointer; flex-shrink: 0;
}
.nav-toggle svg { width: 22px; height: 22px; }

.primary-nav {
  position: fixed; inset: 0 0 0 auto; width: min(85vw, 340px);
  background: var(--color-surface);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5);
  overflow-y: auto;
  z-index: 200;
}
.primary-nav.is-open { transform: translateX(0); }
.nav-scrim {
  position: fixed; inset: 0; background: rgba(10, 20, 18, 0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 150;
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list li { border-bottom: 1px solid var(--color-border); }
.nav-list a {
  display: block; padding: var(--space-4) var(--space-2);
  color: var(--color-ink-900); text-decoration: none; font-weight: 600;
  min-height: 44px;
}
.nav-list a[aria-current="page"] { color: var(--color-primary-700); }

.nav-cta { margin-top: var(--space-5); }

/* Dropdown submenus (Admin > Menus: add an item with a "Parent Item" set).
   Mobile-first: an accordion under the parent link; desktop turns this into
   a hover flyout (see the breakpoint below). */
.nav-parent { display: flex; align-items: center; justify-content: space-between; }
.nav-parent a { flex: 1; }
.dropdown-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-right: var(--space-2);
  background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--color-ink-700); flex-shrink: 0;
}
.dropdown-toggle svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.has-dropdown.is-open .dropdown-toggle svg { transform: rotate(180deg); }
.dropdown-menu {
  list-style: none; margin: 0; padding: 0 0 0 var(--space-4);
  max-height: 0; overflow: hidden; transition: max-height 0.2s ease;
}
.has-dropdown.is-open .dropdown-menu { max-height: 60vh; }
.dropdown-menu li { border-bottom: none; }
.dropdown-menu a { padding-block: var(--space-2); font-weight: 500; }

/* Persistent header Donate button (visible at every screen size) is styled
   under .btn-donate in the Buttons section below. The copy inside the
   off-canvas mobile menu (.nav-cta) reinforces it once the menu is open;
   it's hidden on desktop where the header-actions one is already visible. */
.btn-donate-header .btn-donate-label { display: none; }

@media (min-width: 420px) {
  .btn-donate-header .btn-donate-label { display: inline; }
}

/* Below this width: hamburger + off-canvas menu, with a compact persistent
   Donate button always visible in the header bar. Chosen wider than a
   typical 768/900px cutoff so a full 8-item nav plus a properly-sized logo
   and Donate button never wrap or crowd together on tablets/small laptops. */
@media (min-width: 1160px) {
  .nav-toggle, .nav-scrim { display: none; }
  .header-actions .nav-toggle { display: none; }
  .primary-nav {
    position: static; width: auto; transform: none; box-shadow: none;
    padding: 0; display: flex; align-items: center; gap: clamp(var(--space-4), 2vw, var(--space-6));
    flex: 1 1 auto; min-width: 0; justify-content: flex-end;
    /* The mobile rule above sets overflow-y: auto for the off-canvas panel;
       left unset here, browsers force overflow-x to auto too (per spec,
       an axis can't stay "visible" while the other scrolls), which turned
       this into a scrolling box - clipping the dropdown flyout and showing
       scrollbar arrows in the middle of the nav. Reset to plain visible
       now that this is a static inline row, not a scrollable panel. */
    overflow: visible;
  }
  .primary-nav .nav-cta { display: none; }
  .nav-list { display: flex; align-items: center; gap: clamp(var(--space-4), 2vw, var(--space-5)); flex-wrap: nowrap; }
  .nav-list li { border: none; }
  .nav-list a { padding: var(--space-2) 0; min-height: auto; position: relative; white-space: nowrap; }
  .nav-list a[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--color-accent-500);
  }

  .has-dropdown { position: relative; }
  .nav-parent a { flex: initial; }
  .dropdown-toggle { width: 20px; height: 20px; margin-right: 0; margin-left: 2px; border: none; }
  .dropdown-menu {
    position: absolute; top: 100%; left: 0; margin-top: var(--space-2);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); padding: var(--space-2); min-width: 200px;
    max-height: none; overflow: visible;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown.is-open .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .dropdown-menu a { padding: var(--space-2); border-radius: var(--radius-sm); }
  .dropdown-menu a:hover { background: var(--color-surface-alt); }
}

/* Tighten spacing slightly in the narrower part of the desktop nav range so
   items never feel cramped right at the breakpoint. */
@media (min-width: 1160px) and (max-width: 1320px) {
  .nav-list a { font-size: var(--step--1); }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.75rem 1.4rem; border-radius: 999px; font-weight: 700;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  min-height: 44px; font-size: var(--step-0); line-height: 1;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
/* The icon() helper outputs raw <svg viewBox="0 0 24 24"> markup with no
   width/height attributes. Without an explicit size, browsers fall back to
   a large default replaced-element size (and on a full-width button like
   .btn-block, nothing constrains it from growing to fill almost the whole
   button) - blowing the icon up to fill the button and pushing/covering the
   actual clickable hit area so clicks land outside it. Pin every icon
   inside a button/link to a sane, text-relative size so this can't recur
   on any current or future .btn + icon() combination. */
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-primary { background: var(--color-accent-500); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); color: #fff; }
.btn-secondary { background: var(--color-secondary-600); color: #fff; }
.btn-secondary:hover { background: var(--color-secondary-700); color: #fff; }
.btn-outline { background: transparent; border-color: var(--color-primary-700); color: var(--color-primary-700); }
.btn-outline:hover { background: var(--color-primary-100); color: var(--color-primary-900); }
/* Ghost: text link with an arrow that slides right on hover, no lift (it's
   meant to feel lighter-weight than the filled buttons). */
.btn-ghost {
  background: transparent; color: var(--color-primary-900); padding-inline: 0.4rem;
  gap: var(--space-1); box-shadow: none;
}
.btn-ghost:hover { background: transparent; transform: none; box-shadow: none; color: var(--color-primary-700); }
.btn-ghost .btn-arrow { transition: transform var(--transition-base); display: inline-flex; }
.btn-ghost:hover .btn-arrow { transform: translateX(4px); }
.btn-sm { padding: 0.5rem 1rem; min-height: 36px; font-size: var(--step--1); }
.btn-block { width: 100%; }

/* Donate CTA: the site's single most important button. Distinct from the
   generic .btn-primary so it always reads as "the" action - gradient +
   glow instead of a flat fill, a little lift on hover, and a compact
   variant for the persistent header slot on small screens. */
.btn-donate {
  background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));
  color: #fff; border: none;
  box-shadow: 0 4px 14px rgba(156, 107, 8, 0.35);
  font-weight: 800; letter-spacing: 0.01em;
}
.btn-donate:hover {
  background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-500));
  box-shadow: 0 8px 24px rgba(156, 107, 8, 0.45);
  color: #fff; transform: translateY(-3px);
}
.btn-donate-header { padding: 0.6rem 1.1rem; min-height: 40px; font-size: var(--step--1); }
@media (min-width: 1160px) {
  .btn-donate-header { padding: 0.75rem 1.5rem; min-height: 44px; font-size: var(--step-0); }
}
/* ---- Hero ---- */
.hero { background: linear-gradient(160deg, var(--color-primary-900), var(--color-primary-700)); color: #fff; padding-block: var(--space-8); }
.hero h1 { color: #fff; margin-bottom: var(--space-3); }
.hero p { color: rgba(255,255,255,0.9); max-width: 60ch; font-size: var(--step-1); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--color-accent-bright); font-size: var(--step--1); }

/* ---- Cards ---- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card:hover .card-media img { transform: scale(1.05); }
.card-media img { transition: transform 0.4s ease; }
.card-media { aspect-ratio: 16 / 10; background: var(--color-surface-alt); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.card-body h3 { font-size: var(--step-1); margin-bottom: 0; }
.card-meta { color: var(--color-ink-500); font-size: var(--step--1); }
.card-footer { margin-top: auto; padding-top: var(--space-3); }
/* Opt-in modifier for the "cards" section type (Admin > Pages) - centers
   the card's content and, if an admin sets an emoji/icon per card in the
   page builder, displays it large above the title. Scoped to .card-centered
   specifically so it doesn't affect other .card usages elsewhere (featured
   campaigns, causes/projects listing cards, etc.) that intentionally stay
   left-aligned. */
.card-centered .card-body { align-items: center; text-align: center; }
.card-icon { font-size: 2.5rem; line-height: 1; margin-bottom: var(--space-2); }

/* Keeps a card's title/summary occupying the same height no matter how long
   that particular record's text happens to be, so whatever comes after it
   (the progress bar, on Causes/Projects listing cards) lines up at the same
   vertical position across every card in a row - a long title or summary
   wraps up to the line limit then clips with an ellipsis, rather than
   pushing that one card's content further down than its neighbors. min-height
   reserves the same space even when the text is short enough not to need
   all the lines, so short and long text both end up the same height. */
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.4em;
}
.line-clamp-3 {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 4.95em;
}

/* ---- Progress bar (causes) ---- */
.progress { background: var(--color-border); border-radius: 999px; height: 10px; overflow: hidden; margin-block: var(--space-2); }
.progress-bar { background: var(--color-accent-500); height: 100%; }

/* ---- Stats / values ---- */
.stat-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); text-align: center; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-number { font-family: var(--font-heading); font-size: var(--step-3); color: var(--color-accent-600); }

/* ---- Partners strip ---- */
.partners-strip { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; justify-content: center; opacity: 0.85; }

/* ---- Forms ---- */
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; font-weight: 700; margin-bottom: var(--space-2); }
.form-control {
  width: 100%; padding: 0.75rem 0.9rem; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); background: #fff; min-height: 44px;
}
textarea.form-control { min-height: 140px; resize: vertical; }
.form-hint { color: var(--color-ink-500); font-size: var(--step--1); margin-top: var(--space-1); }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Alerts / flash messages ---- */
.alert { padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); margin-bottom: var(--space-5); border: 1px solid transparent; }
.alert-success { background: #e9f7ef; border-color: var(--color-success); color: #0f5132; }
.alert-error { background: #fdecea; border-color: var(--color-danger); color: #7a231a; }
.alert-info { background: var(--color-primary-100); border-color: var(--color-primary-500); color: var(--color-primary-900); }
.alert-warning { background: #fef3e0; border-color: var(--color-warning); color: #7a5410; }

/* ---- Announcement banner ---- */
.announcement-bar { background: var(--color-accent-500); color: #fff; text-align: center; padding: var(--space-2) var(--space-4); font-size: var(--step--1); }
.announcement-bar a { color: #fff; text-decoration: underline; }

/* ---- Footer ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-footer { background: var(--color-primary-900); color: rgba(255,255,255,0.85); padding-block: var(--space-7) var(--space-5); }
.footer-newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer-newsletter-form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.footer-newsletter-form .form-control { width: 240px; max-width: 100%; flex: 0 1 auto; }
.footer-newsletter-form button { flex-shrink: 0; }
.footer-newsletter-msg { width: 100%; margin: 0 0 var(--space-2); font-size: var(--step--1); color: var(--color-secondary-300, #7dd8a3); }
.footer-newsletter-msg-error { color: #ffb4b4; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.site-footer h4 { color: #fff; font-size: var(--step-0); }
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); margin-top: var(--space-6); padding-top: var(--space-5); font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
/* Address/phone/email is rendered as its own full-width strip below the
   4-column grid (see footer.php) instead of being squeezed into 1 of 4
   grid columns - a full email address needs more room than a narrow
   column reliably has, no matter how that column's share is tuned. Full
   container width means all three comfortably fit on one line normally,
   wrapping only if the screen itself is genuinely too narrow. Each item
   is still its own flex row internally so its icon always stays pinned to
   its text rather than wrapping away from it. */
.footer-contact-full { padding-top: var(--space-5); margin-top: var(--space-2); }
.footer-contact-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-5); margin: 0; }
.footer-contact-item { display: flex; align-items: center; gap: var(--space-2); }
.footer-contact-item + .footer-contact-item { padding-left: var(--space-5); border-left: 1px solid rgba(255,255,255,0.15); }
/* The email's only intentional break point is the invisible one inserted
   right after the @ (see footer.php) - overflow-wrap: normal means it
   won't also fall back to breaking mid-word inside "ourcaringhands.org"
   itself on the rare screen where even that doesn't quite fit; it'll just
   extend slightly rather than fracture further. */
.footer-contact-item > a, .footer-contact-item > :last-child { min-width: 0; overflow-wrap: normal; word-break: normal; }
/* Follow Us as icons instead of text labels (Admin > Contact Info > Social
   Links) - lays the links out in a row instead of the default stacked
   list, and pins each raw icon() SVG to a fixed size (same reasoning as
   the .btn svg fix: unsized SVGs default to an oversized replaced-element
   size in most browsers). */
.footer-social-icons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-social-icons li { border: none; }
.footer-social-icons a { display: flex; align-items: center; justify-content: center; width: 2.25em; height: 2.25em; padding: 0; }
.footer-social-icons a svg { width: 1.2em; height: 1.2em; }

/* ---- Breadcrumb ---- */
.breadcrumb { color: var(--color-ink-500); font-size: var(--step--1); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--color-ink-500); }

/* ---- Pagination ---- */
.pagination { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-6); }
.pagination a, .pagination span { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--color-border); text-decoration: none; }
.pagination .is-current { background: var(--color-primary-700); color: #fff; border-color: var(--color-primary-700); }

/* ---- Utility: lazy image placeholder shimmer ---- */
img[loading="lazy"] { background: var(--color-surface-alt); }

/* ---- Print ---- */
@media print { .site-header, .site-footer, .nav-toggle, .announcement-bar { display: none; } }

/* =====================================================================
   Widget library additions - icon features, animated counters,
   testimonials, FAQ accordion, timeline, project stage badges, and a
   richer hero treatment. Appended so the original design-system section
   above stays intact and diffable.
   ===================================================================== */

/* ---- Richer hero: subtle radial glow + angled divider into the next section ---- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(244, 121, 31, 0.35), transparent 65%);
  z-index: -1;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 48px;
  background: var(--color-surface);
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; padding: 0.35rem 0.9rem; border-radius: 999px;
  font-size: var(--step--1); font-weight: 700; margin-bottom: var(--space-4);
}
.hero-badge svg { width: 16px; height: 16px; }

/* ---- Icon feature grid ---- */
.icon-feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 640px) { .icon-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .icon-feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .icon-feature-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.icon-feature {
  text-align: center; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.icon-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.icon-feature-icon {
  width: 64px; height: 64px; margin: 0 auto var(--space-4);
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--color-primary-100); color: var(--color-primary-700);
}
.icon-feature-icon svg { width: 30px; height: 30px; }
.icon-feature h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.icon-feature p { margin-bottom: 0; color: var(--color-ink-700); }

/* ---- Animated stat counters ---- */
.counter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); text-align: center; margin-top: var(--space-5); }
@media (min-width: 720px) { .counter-grid { grid-template-columns: repeat(4, 1fr); } }
.counter-item .counter-number {
  font-family: var(--font-heading); font-size: var(--step-4); color: var(--color-accent-600); line-height: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
}
.counter-item .counter-label { margin-top: var(--space-2); font-weight: 600; color: var(--color-ink-700); }

/* ---- Partners logo strip ---- */
.partner-logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); margin-top: var(--space-5); }
.partner-logo { display: inline-flex; align-items: center; justify-content: center; height: 48px; filter: grayscale(100%); opacity: 0.7; transition: opacity var(--transition-base, 0.15s), filter var(--transition-base, 0.15s); }
.partner-logo:hover { filter: grayscale(0%); opacity: 1; }
.partner-logo img { max-height: 48px; max-width: 140px; object-fit: contain; }
.partner-badge { font-size: var(--step--1); font-weight: 600; color: var(--color-ink-500); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }

/* ---- Testimonials ---- */
.testimonial-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-5); }
@media (min-width: 720px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .testimonial-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-5); position: relative;
}
.testimonial-quote-icon { color: var(--color-accent-500); opacity: 0.35; width: 34px; height: 34px; margin-bottom: var(--space-2); }
.testimonial-card blockquote { margin: 0 0 var(--space-4); font-style: italic; color: var(--color-ink-700); }
.testimonial-person { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 999px; background: var(--color-primary-700); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.testimonial-avatar-photo { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.testimonial-name { font-weight: 700; }
.testimonial-role { color: var(--color-ink-500); font-size: var(--step--1); }

/* ---- FAQ accordion (native <details>, no JS required, fully accessible) ---- */
.faq-list { max-width: 68ch; margin: var(--space-5) auto 0; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: var(--space-4) 0; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.4em; color: var(--color-accent-600); transition: transform 0.2s ease; flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: var(--space-4); color: var(--color-ink-700); }

/* ---- Timeline ---- */
.timeline { position: relative; max-width: 68ch; margin: var(--space-5) auto 0; padding-left: var(--space-6); }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); }
.timeline-item { position: relative; padding-bottom: var(--space-6); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-6) + 2px); top: 4px;
  width: 14px; height: 14px; border-radius: 999px; background: var(--color-accent-500); border: 3px solid var(--color-surface); box-shadow: 0 0 0 2px var(--color-accent-500);
}
.timeline-date { font-weight: 700; color: var(--color-accent-600); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.04em; }
.timeline-item h3 { margin: var(--space-1) 0 var(--space-2); font-size: var(--step-1); }
.timeline-item p { margin-bottom: 0; color: var(--color-ink-700); }
/* Adaptive click-to-enlarge photo grid, used for Progress Update photos
   (and reusable anywhere else via the same markup). Layout adapts to how
   many photos there are instead of always using the same tiny thumbnails. */
.photo-grid { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.photo-grid[data-count="1"] { grid-template-columns: 1fr; }
.photo-grid[data-count="1"] .photo-grid-item { aspect-ratio: 16 / 9; }
.photo-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.photo-grid[data-count="2"] .photo-grid-item { aspect-ratio: 4 / 3; }
.photo-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.photo-grid[data-count="3"] .photo-grid-item { aspect-ratio: 1 / 1; }
.photo-grid[data-count="4"] { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.photo-grid[data-count="4"] .photo-grid-item { aspect-ratio: 1 / 1; }

.photo-grid-item {
  position: relative; display: block; padding: 0; margin: 0; border: none;
  background: var(--color-surface-alt); border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; width: 100%;
}
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.photo-grid-item:hover img, .photo-grid-item:focus-visible img { transform: scale(1.06); }
.photo-grid-item::after {
  content: ""; position: absolute; inset: 0; background: rgba(11, 61, 58, 0); transition: background 0.15s ease;
}
.photo-grid-item:hover::after, .photo-grid-item:focus-visible::after { background: rgba(11, 61, 58, 0.18); }
.photo-grid-zoom-icon {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--color-primary-900);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s ease;
}
.photo-grid-item:hover .photo-grid-zoom-icon, .photo-grid-item:focus-visible .photo-grid-zoom-icon { opacity: 1; }

/* Full-screen lightbox viewer: one shared instance per page (see the public
   layout), driven entirely by data-lightbox-group/data-full/data-caption
   attributes on any .photo-grid-item (or similar) button. */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(10, 20, 18, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6) var(--space-5);
}
.lightbox[hidden] { display: none; }
.lightbox-image { max-width: min(92vw, 1100px); max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox-close { top: var(--space-4); right: var(--space-4); width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.9rem; }
.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }
.lightbox-prev[hidden], .lightbox-next[hidden] { display: none; }
.lightbox-caption {
  position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-4);
  text-align: center; color: #fff; font-size: var(--step--1); margin: 0;
}
.lightbox-caption[hidden] { display: none; }
.lightbox-counter { position: absolute; top: var(--space-4); left: var(--space-4); color: rgba(255, 255, 255, 0.75); font-size: var(--step--1); }
@media (max-width: 640px) {
  .lightbox-prev, .lightbox-next { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox-prev { left: var(--space-2); }
  .lightbox-next { right: var(--space-2); }
  .lightbox-close { top: var(--space-2); right: var(--space-2); }
  .lightbox-caption { left: var(--space-3); right: var(--space-3); }
}

/* ---- Project stage badges (used on Projects cards/detail) ---- */
.stage-badge {
  display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: 999px;
  font-size: var(--step--1); font-weight: 700; text-transform: capitalize;
}
.stage-planning { background: #fef3e0; color: #7a5410; }
.stage-ongoing { background: var(--color-primary-100); color: var(--color-primary-700); }
.stage-completed { background: #e9f7ef; color: #0f5132; }
.card-media { position: relative; }
.card-media .stage-badge { position: absolute; top: var(--space-3); left: var(--space-3); box-shadow: var(--shadow-sm); }

/* ---- Card + image polish ----
   (hover elevation + image zoom now live on the base .card rule above) */

/* ---- Section eyebrow + divider utility ---- */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--color-accent-600); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--step--1); margin-bottom: var(--space-2);
}
.section-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--color-accent-500); display: inline-block; }

/* ---- Partner strip polish: subtle grayscale-to-color on hover ---- */
.partners-strip img { filter: grayscale(1); opacity: 0.7; transition: filter 0.2s ease, opacity 0.2s ease; }
.partners-strip img:hover { filter: grayscale(0); opacity: 1; }

/* =====================================================================
   Homepage design-system additions: scroll reveal, wave divider, floating
   hero stats, campaign cards, donation-impact tiers, story cards, and the
   combined news/updates cards. Kept in the shared stylesheet (not a
   homepage-only file) so any page can use these same building blocks.
   ===================================================================== */

/* ---- Scroll reveal ("fade up") ----
   Applied via data-reveal on any element; main.js adds .is-visible once it
   scrolls into view. Respects prefers-reduced-motion. */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Wave divider ---- */
.wave-divider { display: block; width: 100%; height: 48px; margin-block: calc(var(--space-7) * -1) 0; position: relative; z-index: 1; }
.wave-divider path { fill: var(--color-surface); }
.wave-divider.wave-alt path { fill: var(--color-surface-alt); }

/* ---- Floating hero stats ---- */
.hero-floating-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4);
  margin-top: var(--space-7); position: relative; z-index: 1;
}
@media (min-width: 720px) { .hero-floating-stats { grid-template-columns: repeat(4, 1fr); } }
.hero-floating-stat {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px); border-radius: var(--radius-md); padding: var(--space-4) var(--space-3);
  text-align: center;
}
.hero-floating-stat .stat-number { font-family: var(--font-heading); font-size: var(--step-3); font-weight: 700; color: var(--color-accent-bright); line-height: 1.1; }
.hero-floating-stat .stat-label { font-size: var(--step--1); color: rgba(255, 255, 255, 0.85); margin-top: var(--space-1); }

/* ---- Campaign cards (Featured Campaigns: urgent / featured project /
   recently funded) - progress bar, goal/raised, days remaining, donate +
   share actions. ---- */
.campaign-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 900px) { .campaign-grid { grid-template-columns: repeat(3, 1fr); } }
.campaign-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.campaign-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.campaign-card-media { aspect-ratio: 16 / 10; background: var(--color-surface-alt); overflow: hidden; position: relative; }
.campaign-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.campaign-card:hover .campaign-card-media img { transform: scale(1.05); }
.campaign-card-tag {
  position: absolute; top: var(--space-3); left: var(--space-3); box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.3rem 0.8rem; border-radius: 999px;
  font-size: var(--step--1); font-weight: 700; color: #fff;
}
.campaign-card-tag.tag-urgent { background: var(--color-danger); }
.campaign-card-tag.tag-featured { background: var(--color-primary-600); }
.campaign-card-tag.tag-funded { background: var(--color-secondary-600); }
.campaign-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.campaign-card-body h3 { font-size: var(--step-1); margin: 0; }
.campaign-card-meta { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--color-ink-500); font-weight: 600; }
.campaign-card-raised { color: var(--color-primary-700); font-weight: 800; }
.campaign-card-days { display: inline-flex; align-items: center; gap: 0.3rem; }
.campaign-card-actions { display: flex; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.campaign-card-actions .btn { flex: 1; }
.btn-share {
  background: var(--color-surface-alt); border: 1px solid var(--color-border); color: var(--color-ink-700);
  min-height: 44px; padding-inline: var(--space-3); flex: 0 0 auto !important;
}
.btn-share:hover { background: var(--color-primary-100); color: var(--color-primary-900); }

/* ---- Why Donate: impact tiers ---- */
.impact-tier-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 640px) { .impact-tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .impact-tier-grid { grid-template-columns: repeat(4, 1fr); } }
.impact-tier {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-5); text-align: center; box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.impact-tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.impact-tier-icon {
  width: 56px; height: 56px; margin-inline: auto; border-radius: 999px; background: var(--color-accent-100);
  color: var(--color-accent-600); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3);
}
.impact-tier-icon svg { width: 26px; height: 26px; }
.impact-tier-amount { font-family: var(--font-heading); font-size: var(--step-2); font-weight: 700; color: var(--color-primary-800, var(--color-primary-700)); }
.impact-tier-text { color: var(--color-ink-700); margin-top: var(--space-2); }

/* ---- Success story cards (before/after) ---- */
.story-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 720px) { .story-grid { grid-template-columns: repeat(3, 1fr); } }
.story-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.story-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.story-before-after { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.story-before-after figure { margin: 0; position: relative; overflow: hidden; }
.story-before-after img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-before-after figcaption {
  position: absolute; bottom: var(--space-2); left: var(--space-2); background: rgba(15, 42, 74, 0.75); color: #fff;
  font-size: var(--step--1); font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em;
}
.story-card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.story-card-body h3 { font-size: var(--step-1); margin: 0; }
.story-card-body p { color: var(--color-ink-700); }
.story-video-badge { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-primary-700); font-weight: 700; font-size: var(--step--1); }
.story-video-badge svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ---- Latest Updates (News + Progress Updates combined) ---- */
.update-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-6); }
@media (min-width: 640px) { .update-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .update-grid { grid-template-columns: repeat(3, 1fr); } }
.update-card-type {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--step--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary-600);
}

/* ---- Multi-button CTA banner ---- */
.cta-banner { background: linear-gradient(135deg, var(--color-primary-900), var(--color-secondary-900)); color: #fff; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255, 255, 255, 0.9); }
.cta-banner-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-5); }

/* ---- Donate page ---- */
.donate-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; }
.donate-toggle-option {
  padding: 0.6rem 1.4rem; cursor: pointer; font-weight: 700; color: var(--color-ink-700);
  display: inline-flex; align-items: center; gap: var(--space-2); transition: background-color var(--transition-base), color var(--transition-base);
}
.donate-toggle-option input { position: absolute; opacity: 0; pointer-events: none; }
.donate-toggle-option:has(input:checked) { background: var(--color-primary-700); color: #fff; }
.donate-amount-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 640px) { .donate-amount-grid { grid-template-columns: repeat(3, 1fr); } }
.donate-amount-option {
  border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1); cursor: pointer; text-align: center;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
}
.donate-amount-option input[type="radio"] { position: absolute; top: var(--space-2); right: var(--space-2); width: 18px; height: 18px; }
.donate-amount-option:has(input:checked) { border-color: var(--color-primary-600); box-shadow: 0 0 0 3px var(--color-primary-100); transform: translateY(-2px); }
.donate-amount-value { font-family: var(--font-heading); font-size: var(--step-2); font-weight: 700; color: var(--color-primary-700); }
.donate-amount-impact { font-size: var(--step--1); color: var(--color-ink-500); }
.donate-amount-custom .donate-amount-value { margin-bottom: var(--space-1); }
.donate-amount-custom input[type="number"] { position: static; width: 100%; opacity: 1; pointer-events: auto; margin-top: var(--space-1); }
.donate-trust { background: var(--color-surface-alt); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-5); }
.donate-trust p { display: flex; align-items: center; gap: var(--space-2); margin: 0.3rem 0; font-size: var(--step--1); color: var(--color-ink-700); }
.donate-trust svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-secondary-600); }

/* ---- Team / Board grid ---- */
.team-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-6); text-align: center; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card { display: flex; flex-direction: column; align-items: center; }
.team-card-photo { width: 120px; height: 120px; border-radius: 999px; overflow: hidden; margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); }
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card-initial {
  display: flex; align-items: center; justify-content: center; background: var(--color-primary-700);
  color: #fff; font-size: var(--step-3); font-weight: 700;
}
.team-card h3 { margin-bottom: 0.15rem; font-size: var(--step-1); }
.team-card-role { color: var(--color-primary-600); font-weight: 700; font-size: var(--step--1); margin: 0 0 var(--space-2); }
.team-card-bio { color: var(--color-ink-700); font-size: var(--step--1); }

/* ---- Financial transparency ---- */
.finance-breakdown { margin-top: var(--space-6); }
.finance-breakdown-row { margin-bottom: var(--space-4); }
.finance-breakdown-label { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: var(--space-1); }
.finance-report-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.finance-report-list a {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; color: var(--color-primary-700); font-weight: 700;
}
.finance-report-list a:hover { background: var(--color-primary-100); }
.finance-report-list svg { color: var(--color-secondary-600); width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ---- Event countdown ---- */
.event-countdown { display: flex; gap: var(--space-3); margin: var(--space-5) 0; }
.event-countdown-unit {
  background: var(--color-primary-900); color: #fff; border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2); text-align: center; min-width: 70px; flex: 1;
}
.event-countdown-value { display: block; font-family: var(--font-heading); font-size: var(--step-2); font-weight: 700; }
.event-countdown-label { display: block; font-size: var(--step--1); color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.05em; }