/* ==========================================================================
   Helping Aid Foundation — Design System & Stylesheet
   --------------------------------------------------------------------------
   Palette : corporate blue primary + red accent on a warm off-white ground,
             matched to the aghosh.us colour scheme. It also sits closer to
             the Foundation's own logo than the previous green/gold did —
             the logo already contains a blue globe and a red cross.
   Type    : Poppins, on a fluid clamp() scale — no jarring breakpoint jumps.
   Layout  : one shared vertical rhythm token drives every section's padding.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Brand: blue scale. --blue-700 is the reference primary. ---- */
  --blue-900: #00335c;
  --blue-800: #004a86;
  --blue-700: #0060ae;   /* primary */
  --blue-600: #0d74c9;
  --blue-100: #e0edf7;
  --blue-50:  #f1f7fc;

  /* ---- Brand: red accent scale ----
     --red-500 is the reference accent. --red-600 fills buttons that carry
     white text (5.0:1) and --red-ink is for small red text on light
     surfaces — --red-500 itself lands at 4.4:1, just under the AA floor. */
  --red-500: #ec1f27;
  --red-600: #cf171e;   /* button fills carrying white text (5.5:1) */
  --red-ink: #b3141a;   /* small red text on light surfaces (6.9:1) */
  --red-300: #ff7a80;   /* red text on DARK surfaces — #ec1f27 only reaches
                           4.0:1 on near-black, this reaches 6.9:1 */
  --red-100: #fdeced;

  /* ---- Neutrals (from the reference scheme) ---- */
  --ink-900: #000000;   /* headings */
  --ink-700: #4b4b4b;   /* body copy */
  --ink-500: #6f6f6f;   /* muted copy */
  --dark-900: #1a1a1a;  /* darkest bands */
  --dark-800: #323232;  /* dark bands */
  --surface: #ffffff;
  --surface-alt: #fcfaf8;
  --border: rgba(0, 96, 174, 0.14);
  --border-strong: rgba(0, 96, 174, 0.26);

  /* ---- Legacy aliases ----
     The server-rendered checkout/success pages reference these names, so they
     must keep resolving. Do not remove without updating server/server.js. */
  --color-primary: var(--blue-700);
  --color-primary-dark: var(--blue-900);
  --color-gold: var(--red-500);
  --color-gold-dark: var(--red-600);
  --color-bg: var(--surface-alt);
  --color-white: var(--surface);
  --color-text: var(--ink-700);
  --color-text-muted: var(--ink-500);

  /* ---- Compatibility aliases ----
     The rest of this file (and the page templates) still refer to the
     original green/gold token names. Mapping them here re-skins the whole
     site from one place instead of renaming hundreds of usages. ---- */
  --green-900: var(--dark-900);
  --green-800: var(--blue-900);
  --green-700: var(--blue-700);
  --green-600: var(--blue-600);
  --green-100: var(--blue-100);
  --green-50:  var(--blue-50);
  --gold-500: var(--red-500);
  --gold-600: var(--red-600);
  --gold-ink: var(--red-ink);
  --gold-100: var(--red-100);

  /* ---- Typography (fluid) ---- */
  --font-main: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-hero: clamp(2.15rem, 1.35rem + 3.4vw, 3.9rem);
  --fs-h2:   clamp(1.6rem, 1.15rem + 1.8vw, 2.45rem);
  --fs-h3:   clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.28vw, 1.14rem);
  --fs-sm:   0.92rem;
  --fs-xs:   0.8rem;

  /* ---- Spacing ---- */
  --space-section: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 50px;

  /* ---- Elevation: layered, low-opacity shadows tinted with the brand blue
     rather than pure black, so cards sit on the warm background naturally. */
  --shadow-sm: 0 1px 2px rgba(0, 51, 92, 0.05), 0 2px 8px rgba(0, 51, 92, 0.05);
  --shadow-md: 0 2px 4px rgba(0, 51, 92, 0.05), 0 8px 24px rgba(0, 51, 92, 0.08);
  --shadow-lg: 0 4px 8px rgba(0, 51, 92, 0.06), 0 16px 40px rgba(0, 51, 92, 0.12);
  --shadow-card: var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg);

  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--ink-700);
  background-color: var(--surface-alt);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  font-weight: 700;
  line-height: 1.25;
  color: var(--green-800);
  letter-spacing: -0.01em;
}

/* Headings on dark/green surfaces (paired with Bootstrap's .text-white)
   must beat the dark-green default above. */
.text-white.section-title,
.text-white .section-title {
  color: var(--surface) !important;
}

a {
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition);
}

img {
  max-width: 100%;
}

/* Offset anchor jumps so the fixed header never covers a section heading.
   The top bar collapses on scroll, so only the navbar height matters here. */
section[id], header[id] {
  scroll-margin-top: 96px;
}

/* ---- Accessibility: a single, consistent focus ring everywhere.
   Previously nothing had a visible focus state, making the site unusable by
   keyboard. The element selectors are needed because Bootstrap ships
   `.btn:focus-visible { outline: 0 }`, which outranks a bare :focus-visible
   rule and silently removes the ring. ---- */
:focus-visible,
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.accordion-button:focus-visible,
.navbar-toggler:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: 4px;
}

/* A red ring is invisible on the red/blue buttons — flip those to near-black */
.btn-donate:focus-visible,
.btn-donate-gold:focus-visible,
.btn-amount.active:focus-visible,
.btn-quick-amount:focus-visible {
  outline-color: var(--green-900);
}

/* Keyboard-only shortcut past the nav straight to the content */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--green-800);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ---- Respect users who ask for less motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* AOS adds inline transforms; neutralise them so nothing stays hidden */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   3. SECTION SHELL & SHARED TYPE
   ========================================================================== */
.about-section,
.counters-section,
.projects-section,
.future-projects-section,
.gallery-section,
.quick-donate-section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

/* Surfaces alternate down the page so each section reads as its own band:
   hero(dark) > impact(blue) > about(alt) > vision(dark) > projects(white)
   > future(alt) > gallery(white) > donate(alt) > team(white) > footer(dark) */
.about-section,
.future-projects-section,
.quick-donate-section {
  background-color: var(--surface-alt);
}

.projects-section,
.gallery-section,
.team-section {
  background-color: var(--surface);
}

/* Section headings.
   There used to be a coloured pill above every one of these ("WHO WE ARE",
   "OUR ROADMAP", "WHAT WE DO"). Repeating that device on every single section
   is the clearest signal a site came out of a template, so it is gone. Where a
   label genuinely helps, .section-eyebrow is a quiet piece of text instead. */
.section-head {
  margin-bottom: 40px;
  max-width: 62ch;
}

/* Heading left, supporting line right — breaks up the run of centred stacks */
@media (min-width: 992px) {
  .section-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 56px;
    align-items: end;
    max-width: none;
  }
  .section-head--split .section-title { margin-bottom: 0; }
  .section-head--split .section-text { margin-bottom: 4px; }
}

.section-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  margin-bottom: 10px;
}

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: 16px;
}

.section-text {
  color: var(--ink-500);
  max-width: 62ch;
  font-size: var(--fs-lead);
}

/* Centred section intros get their paragraph centred too */
.text-center > .section-text {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
/* White on --blue-700 gives 6.2:1. --blue-600 only reaches 4.5:1 with white,
   too close to the AA floor for a button carrying this much traffic. */
.btn-donate,
.btn-donate-gold {
  background-color: var(--blue-700);
  border: none;
  color: var(--surface);
  font-weight: 600;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

.btn-donate {
  padding: 10px 26px;
}

.btn-donate-gold {
  padding: 13px 34px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 96, 174, 0.3);
}

.btn-donate:hover,
.btn-donate:focus-visible,
.btn-donate-gold:hover,
.btn-donate-gold:focus-visible {
  background-color: var(--blue-900);
  color: var(--surface);
  transform: translateY(-2px);
}

.btn-donate:active,
.btn-donate-gold:active {
  transform: translateY(0);
}

/* The quick-donate box and the closing CTA are filled with the SAME blue as
   the button (blue-700 → blue-900 gradient), so a blue button would vanish
   into them. Those two invert: white fill, blue label, 6.2:1 either way. */
.quick-donate-box .btn-donate-gold,
.project-cta .btn-donate-gold,
.quick-donate-box .btn-donate,
.project-cta .btn-donate {
  background-color: var(--surface);
  color: var(--blue-700);
  box-shadow: 0 8px 24px rgba(0, 20, 40, 0.35);
}

.quick-donate-box .btn-donate-gold:hover,
.quick-donate-box .btn-donate-gold:focus-visible,
.project-cta .btn-donate-gold:hover,
.project-cta .btn-donate-gold:focus-visible,
.quick-donate-box .btn-donate:hover,
.quick-donate-box .btn-donate:focus-visible,
.project-cta .btn-donate:hover,
.project-cta .btn-donate:focus-visible {
  background-color: var(--blue-100);
  color: var(--blue-900);
}

/* The hero and the mission band are photographs under a near-black navy
   wash. The button stays blue there, but a hairline white ring defines its
   edge — the fill alone is only ~2.3:1 against that wash. */
.hero-section .btn-donate,
.mission-section .btn-donate-gold {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55),
              0 8px 24px rgba(0, 20, 40, 0.45);
}

.btn-outline-light:hover {
  color: var(--green-800);
}

/* ==========================================================================
   5. NAVBAR
   ========================================================================== */
/* The top bar and the navbar travel together as one fixed header. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* ---- Top bar: Hijri date + next prayer time ---- */
.topbar {
  background: var(--green-900);
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  max-height: 80px;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}

/* Collapses away on scroll so the header stays compact */
.site-header.scrolled .topbar {
  max-height: 0;
  opacity: 0;
}

.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 36px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.topbar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.35;
}

.topbar-item > i {
  font-size: 1.25rem;
  color: var(--gold-500);
  flex-shrink: 0;
}

.topbar-label {
  display: block;
  color: rgba(255, 255, 255, 0.62);
}

.topbar-label strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.topbar-value {
  display: block;
  font-weight: 600;
  color: var(--surface);
}

@media (max-width: 575.98px) {
  .topbar-inner {
    gap: 4px 20px;
    justify-content: space-between;
  }
  .topbar-item {
    gap: 7px;
    font-size: 0.7rem;
  }
  .topbar-item > i {
    font-size: 1rem;
  }
}

/* ---- Navbar ---- */
#mainNavbar {
  background-color: transparent;
  padding: 16px 0;
  transition: background-color 0.35s ease, padding 0.35s ease,
              box-shadow 0.35s ease;
}

/* Solid state: applied on scroll, or permanently on inner pages that have no
   dark hero behind the bar (.site-header--solid). */
#mainNavbar.scrolled,
.site-header--solid #mainNavbar {
  background-color: var(--surface);
  padding: 8px 0;
  box-shadow: 0 2px 20px rgba(0, 51, 92, 0.1);
}

/* ---- Brand lockup: emblem + two-line name + tagline ---- */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 0;
  padding-bottom: 0;
  white-space: normal;
}

.brand-logo {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.brand-name {
  font-weight: 700;
  font-size: clamp(0.92rem, 0.8rem + 0.42vw, 1.12rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--surface);
  transition: color 0.3s ease;
}

.brand-tagline {
  font-size: clamp(0.58rem, 0.52rem + 0.16vw, 0.7rem);
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.4;
  margin-top: 3px;
  white-space: nowrap;
  color: var(--red-300);   /* sits on the dark hero scrim */
  transition: color 0.3s ease;
}

/* Once the bar turns white, the lockup switches to the ink palette */
#mainNavbar.scrolled .brand-name,
.site-header--solid #mainNavbar .brand-name {
  color: var(--green-800);
}

#mainNavbar.scrolled .brand-tagline,
.site-header--solid #mainNavbar .brand-tagline {
  color: var(--gold-ink);
}

/* Footer lockup always sits on dark green, so it keeps the light treatment */
.footer-brand {
  display: inline-flex;
}

.footer-brand .brand-name {
  color: var(--surface);
}

.footer-brand .brand-tagline {
  color: var(--red-300);
}

.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  margin: 0 8px;
  position: relative;
}

#mainNavbar.scrolled .nav-link,
.site-header--solid #mainNavbar .nav-link {
  color: var(--ink-700);
}

/* Understated underline on hover instead of only a colour shift */
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus-visible::after {
  transform: scaleX(1);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
  color: var(--red-300);
}

#mainNavbar.scrolled .nav-link:hover,
.site-header--solid #mainNavbar .nav-link:hover {
  color: var(--green-700);
}

/* The default Bootstrap toggler icon is a dark SVG — invisible against the
   dark green mobile bar. Draw it in white explicitly. */
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
  padding: 6px 10px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
}

.dropdown-item {
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--green-50);
  color: var(--green-700);
}

/* Mobile: solid bar so the collapsed menu always has contrast */
@media (max-width: 991.98px) {
  /* Both states are pinned to green: the collapsed menu panel is dark, so a
     white scrolled bar would clash — and would render the white brand text
     invisible. #mainNavbar.scrolled must be restated here because it
     outranks the plain #mainNavbar selector. */
  #mainNavbar,
  #mainNavbar.scrolled,
  .site-header--solid #mainNavbar {
    background-color: var(--green-800);
  }
  #mainNavbar .brand-name,
  #mainNavbar.scrolled .brand-name,
  .site-header--solid #mainNavbar .brand-name {
    color: var(--surface);
  }
  #mainNavbar .brand-tagline,
  #mainNavbar.scrolled .brand-tagline,
  .site-header--solid #mainNavbar .brand-tagline {
    color: var(--red-300);
  }
  .brand-logo {
    width: 46px;
    height: 46px;
  }
  .navbar-collapse {
    background-color: var(--green-800);
    padding: 16px 4px 20px;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .navbar-nav .nav-link,
  #mainNavbar.scrolled .nav-link,
  .site-header--solid #mainNavbar .nav-link {
    color: rgba(255, 255, 255, 0.92);
    padding: 10px 4px;
    margin: 0;
  }
  #mainNavbar.scrolled .nav-link:hover,
  .site-header--solid #mainNavbar .nav-link:hover {
    color: var(--red-300);
  }
  .navbar-nav .nav-link::after {
    display: none;
  }
  /* Dropdown inherits the dark bar instead of flashing a white panel */
  .navbar-collapse .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.07);
    border: none;
    box-shadow: none;
    margin: 4px 0 8px;
  }
  .navbar-collapse .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
  }
  .navbar-collapse .dropdown-item:hover,
  .navbar-collapse .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--red-300);
  }
  .navbar-collapse .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.18);
  }
  /* The collapsed bar is flat --blue-900, so the blue button reads at only
     2:1 against it. Inside the mobile menu it inverts to white-on-blue. */
  #mainNavbar .btn-donate {
    display: block;
    margin-top: 10px;
    text-align: center;
    background-color: var(--surface);
    color: var(--blue-700);
  }
  #mainNavbar .btn-donate:hover,
  #mainNavbar .btn-donate:focus-visible {
    background-color: var(--blue-100);
    color: var(--blue-900);
  }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  /* svh avoids the mobile browser URL-bar jump that 100vh causes */
  min-height: 100svh;
  /* clears the fixed header: top bar (~46px) + navbar (~78px) */
  padding: 150px 0 70px;
  overflow: hidden;
}

.hero-slideshow {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

/* Two-layer scrim: a soft vertical gradient for depth plus a flat green
   wash, so headline contrast holds on every slide in the rotation. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 28, 51, 0.84) 0%, rgba(0, 28, 51, 0.64) 45%, rgba(0, 28, 51, 0.93) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(0, 28, 51, 0.15) 0%, rgba(0, 28, 51, 0.6) 100%);
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--surface);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;
}

.hero-subtext {
  max-width: 640px;
  font-size: var(--fs-lead);
  margin: 0 auto 32px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 38px;
}

.hero-buttons .btn {
  padding: 13px 32px;
  font-weight: 600;
  border-radius: var(--radius-pill);
}

/* Trust line under the CTAs */
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.95);
  font-size: var(--fs-sm);
}

.hero-trust i {
  color: var(--red-300);
  font-size: 1.05rem;
}

/* Scroll cue */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.4rem;
  animation: heroBob 2.2s ease-in-out infinite;
}

@keyframes heroBob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

@media (max-width: 575.98px) {
  .hero-scroll { display: none; }
  .hero-buttons .btn { width: 100%; }
}

/* ==========================================================================
   7. ABOUT
   ========================================================================== */
.about-img {
  width: 100%;
  height: clamp(260px, 40vw, 430px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.about-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
}

/* Flex so wrapped lines stay indented past the tick instead of
   sliding back under it */
.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--ink-700);
}

.about-list i {
  color: var(--green-700);
  font-size: 1.1rem;
  line-height: 1.5;
  flex-shrink: 0;
}

/* ==========================================================================
   8. IMPACT COUNTERS
   ========================================================================== */
.counters-section {
  background: linear-gradient(135deg, var(--green-700) 0%, var(--green-800) 100%);
  color: var(--surface);
}

.counter-box {
  color: var(--surface);
  padding: 10px 4px;
}

/* White, not the accent red: red on this blue band measures 1.5:1 and is
   effectively unreadable. White reaches 6.4:1. */
.counter-icon {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 10px;
  display: block;
}

.counter-number {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 800;
  color: var(--surface);
  margin-bottom: 6px;
  line-height: 1;
  font-variant-numeric: tabular-nums; /* stops the count-up from jittering */
}

.counter-label {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

/* ==========================================================================
   9. CARDS — shared behaviour
   Every card is a flex column so its footer action pins to the bottom and
   aligns across the row regardless of how long the copy is.
   ========================================================================== */
.project-card,
.future-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.project-card:hover,
.future-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* ---- Project cards ---- */
.project-card {
  overflow: hidden;
}

.project-img {
  width: 100%;
  aspect-ratio: 16 / 10;   /* reserves space, preventing layout shift */
  height: auto;
  object-fit: cover;
}

.project-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-title {
  font-size: var(--fs-h3);
  margin-bottom: 10px;
}

.project-text {
  color: var(--ink-500);
  font-size: var(--fs-sm);
  margin-bottom: 18px;
}

.project-link {
  color: var(--green-700);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-top: auto;          /* pins the link to the card foot */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-link i {
  transition: transform var(--transition);
}

.project-link:hover {
  color: var(--gold-ink);
}

.project-link:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   10. VISION / MISSION (photo band)
   ========================================================================== */
.mission-section {
  position: relative;
  padding: clamp(4.5rem, 3rem + 7vw, 8rem) 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Vignette rather than a flat wash: the centre stays light enough to read the
   photograph, while the darker edges frame the text and stop the whole band
   looking hazy. White text lands well past AA everywhere on it. */
.mission-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 25, 46, 0.78) 0%, rgba(0, 45, 82, 0.68) 48%, rgba(0, 25, 46, 0.86) 100%),
    radial-gradient(85% 70% at 50% 45%, rgba(0, 96, 174, 0.05) 0%, rgba(0, 18, 34, 0.6) 100%);
}

/* Left-aligned and held to a column rather than centred across the full band.
   The giant red quote marks, the pill label and the little red divider rule
   that used to sit here were three separate decorations doing the same job —
   the statement carries itself. */
.mission-inner {
  max-width: 46ch;
}

.mission-quote {
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.1rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--surface);
  margin: 0 0 22px;
}

.mission-text {
  font-size: var(--fs-lead);
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.mission-cta {
  margin-top: 30px;
}

/* ==========================================================================
   11b. OUR TEAM
   ========================================================================== */
.team-section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  background-color: var(--surface);
}

/* Flexbox rather than grid: with an odd number of members the final row has
   fewer cards, and only flex centres that leftover row instead of pinning it
   to the left column. Works for any team size. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* flex-grow is 0 deliberately. If the cards were allowed to grow, a final row
   holding fewer cards would stretch them wider than the row above, so the
   rows would no longer match. A fixed basis keeps every card identical and
   lets justify-content centre whatever is left over. */
.team-card {
  flex: 0 1 218px;
  max-width: 218px;
}

/* Six members divide evenly by three, but a fixed basis does not know that: at
   218-240px the container fits four cards from 992px and five from 1440px,
   stranding the remainder on a half-empty final row. Pinning the basis to a
   third of the row keeps both rows full at every width above 992px.

   max-width does two jobs here. It stops the thirds inflating into 426px
   square portraits, which would be larger than the 414x259 programme images
   and so put staff photographs above the programmes in the page's visual
   order. It also leaves the grid narrower than the container, and with no
   auto margin the block stays on the container's left edge, in line with the
   heading above it - every other grid on the page starts within 12px of its
   own heading, and centring this one pushed the first card 198px right.

   justify-content stays inherited (center) rather than flex-start: it has no
   effect while the rows divide evenly, but a seventh member would leave a
   short final row, and centring that is better than stranding it left. */
@media (min-width: 992px) {
  .team-grid {
    max-width: 900px;
  }

  .team-card {
    flex-basis: calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
  }
}

@media (max-width: 575.98px) {
  .team-card {
    flex-basis: 100%;
    max-width: 340px;
  }
}

/* No `height: 100%` here on purpose: a flex item with a definite height opts
   out of `align-items: stretch`, which is what left the cards ragged. With
   height auto they all stretch to the tallest card in the row. */
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* Square crop biased towards the top of the frame: these are seated and
   standing portraits, so a plain centre crop cuts through the face. */
.team-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  background: var(--blue-50);
}

.team-body {
  padding: 20px 18px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.team-name {
  font-size: 1.05rem;
  margin-bottom: 5px;
}

.team-role {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--red-ink);
  margin-bottom: 12px;
}

.team-bio {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  margin: 0;
}

/* ==========================================================================
   13. FUTURE DEVELOPMENT PROJECTS
   ========================================================================== */
.future-card {
  padding: 28px 26px;
}

.future-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--green-50);
  color: var(--green-700);
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.future-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 10px;
  text-wrap: balance;
}

.future-card p {
  font-size: var(--fs-sm);
  color: var(--ink-500);
  margin-bottom: 18px;
}

/* mt-auto pushes the cost table + button down so they line up across the row */
.future-cost {
  list-style: none;
  padding: 0;
  margin: auto 0 20px;
  border-top: 1px solid var(--border);
}

.future-cost li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
}

.future-cost li span {
  color: var(--ink-500);
}

.future-cost li strong {
  color: var(--gold-ink);       /* was bright gold — failed contrast */
  white-space: nowrap;
  font-size: var(--fs-sm);
}

.btn-sponsor {
  width: 100%;
  background-color: transparent;
  border: 2px solid var(--green-700);
  color: var(--green-700);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition), color var(--transition);
}

.btn-sponsor:hover,
.btn-sponsor:focus-visible {
  background-color: var(--green-700);
  color: var(--surface);
}

/* ==========================================================================
   15. IMPACT GALLERY
   ========================================================================== */
.gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.gallery-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.06);
}

/* ==========================================================================
   16. QUICK DONATE
   ========================================================================== */
.quick-donate-section {
  background-color: var(--surface);
}

.quick-donate-box {
  background: linear-gradient(135deg, var(--green-700) 0%, var(--green-900) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.25rem, 0.5rem + 3vw, 3rem);
  color: var(--surface);
}

.quick-donate-box .section-text {
  color: rgba(255, 255, 255, 0.82);
}

.quick-amounts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.btn-quick-amount {
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: var(--surface);
  font-weight: 600;
  padding: 11px 24px;
  border-radius: var(--radius-pill);
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition);
}

.btn-quick-amount:hover,
.btn-quick-amount:focus-visible,
.btn-quick-amount.active {
  background: var(--red-600);
  border-color: var(--red-600);
  color: var(--surface);
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--green-900);
  color: rgba(255, 255, 255, 0.82);
}

.footer-text {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--surface);
  transition: background-color var(--transition), color var(--transition),
              transform var(--transition);
}

.footer-socials a:hover {
  background: var(--red-600);
  color: var(--surface);
  transform: translateY(-3px);
}

.footer-heading {
  color: var(--surface);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 11px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm);
  display: inline-block;
  /* transform, not padding — padding on hover shifts surrounding layout */
  transition: color var(--transition), transform var(--transition);
}

.footer-links a:hover {
  color: var(--red-300);
  transform: translateX(4px);
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
}

.footer-contact li {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.72);
}

.footer-contact i {
  color: var(--gold-500);
  margin-top: 4px;
  flex-shrink: 0;
}

.footer-contact a {
  color: inherit;
  word-break: break-word;
  transition: color var(--transition);
}

.footer-contact a:hover {
  color: var(--red-300);
}

.footer-bottom {
  background-color: rgba(0, 0, 0, 0.22);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.65);
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.65);
}

.footer-legal a:hover {
  color: var(--red-300);
}

/* ==========================================================================
   18. DONATION MODAL
   ========================================================================== */
.modal-content {
  border: none;
  border-radius: var(--radius-lg);
}

.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 24px;
}

.modal-body {
  padding: 24px;
}

.text-gold {
  color: var(--gold-600);
}

.donate-label {
  font-weight: 600;
  color: var(--green-800);
  font-size: var(--fs-sm);
}

.form-control {
  border-radius: var(--radius-sm);
  border-color: var(--border-strong);
  padding: 10px 14px;
}

.form-control:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(0, 96, 174, 0.15);
}

.currency-toggle .btn-outline-currency {
  border: 2px solid var(--green-700);
  color: var(--green-700);
  font-weight: 600;
  padding: 9px 24px;
}

.btn-check:checked + .btn-outline-currency {
  background-color: var(--green-700);
  color: var(--surface);
}

.btn-check:focus-visible + .btn-outline-currency {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
}

.amount-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-amount {
  border: 2px solid var(--border-strong);
  color: var(--green-800);
  font-weight: 600;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: border-color var(--transition), background-color var(--transition);
}

.btn-amount:hover {
  border-color: var(--green-700);
}

.btn-amount.active {
  background-color: var(--red-600);
  border-color: var(--red-600);
  color: var(--surface);
}

.summary-box {
  background: var(--green-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 30px;
}

.summary-icon {
  font-size: 2.4rem;
  color: var(--green-700);
  margin-bottom: 10px;
}

.summary-amount {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 800;
  color: var(--green-800);
  margin: 0;
}

.summary-details {
  list-style: none;
  padding: 0;
  margin-top: 16px;
  text-align: left;
  font-size: var(--fs-sm);
}

.summary-details li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink-500);
}

.summary-details li:last-child {
  border-bottom: none;
}

.summary-details li strong {
  color: var(--green-800);
}

/* ==========================================================================
   19. BACK TO TOP
   ========================================================================== */
#backToTopBtn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background-color: var(--green-700);
  color: var(--surface);
  font-size: 1.15rem;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  transition: background-color var(--transition), transform var(--transition);
}

#backToTopBtn:hover {
  background-color: var(--red-600);
  color: var(--surface);
  transform: translateY(-3px);
}

/* ==========================================================================
   20. PROJECT DETAIL PAGES
   Used by clean-water.html, food-assistance.html, flood-relief.html,
   solar-system.html and healthcare.html.
   ========================================================================== */

/* ---- Compact page header (not a full-height hero) ---- */
.page-hero {
  position: relative;
  /* 130px clears the fixed header (top bar + solid navbar) */
  padding: calc(130px + var(--space-section)) 0 var(--space-section);
  background-size: cover;
  background-position: center;
  color: var(--surface);
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 40, 72, 0.88) 0%, rgba(0, 96, 174, 0.8) 100%);
}

.page-hero .container {
  position: relative;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  color: var(--surface);
  margin-bottom: 14px;
  text-wrap: balance;
}

.page-hero p {
  max-width: 60ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* ---- Breadcrumb ---- */
.page-breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0 0 18px;
  font-size: var(--fs-sm);
}

.page-breadcrumb a {
  color: var(--red-300);   /* sits on the page-hero's dark overlay */
  font-weight: 500;
}

.page-breadcrumb a:hover {
  color: var(--surface);
  text-decoration: underline;
}

.page-breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.45);
}

.page-breadcrumb [aria-current='page'] {
  color: rgba(255, 255, 255, 0.75);
}

/* ---- Body sections ----
   Tighter than the homepage rhythm: these pages have more, shorter sections,
   so a full --space-section top *and* bottom stacked up into ~230px of dead
   space between every block. */
.project-section {
  padding-top: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  padding-bottom: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
}

.project-section-alt {
  background-color: var(--surface-alt);
}

.project-prose > p {
  color: var(--ink-500);
  font-size: var(--fs-lead);
  margin-bottom: 18px;
}

.project-prose > p:last-child {
  margin-bottom: 0;
}

/* ---- Key facts sidebar ---- */
.fact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}

.fact-card h2 {
  font-size: var(--fs-h3);
  margin-bottom: 18px;
}

.fact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

.fact-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.fact-list li:last-of-type {
  border-bottom: none;
}

.fact-list .fact-label {
  display: block;
  color: var(--ink-500);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}

.fact-list .fact-value {
  color: var(--green-800);
  font-weight: 600;
}

/* ---- Activity list ---- */
/* Fixed column counts rather than auto-fit: auto-fit produced a 4-across row
   that left 2 orphans dangling on a 6-item list. */
.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 576px) {
  .activity-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .activity-list { grid-template-columns: repeat(3, 1fr); }
}

.activity-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-700);
}

.activity-list i {
  color: var(--green-700);
  font-size: 1.05rem;
  flex-shrink: 0;
  line-height: 1.5;
}

/* ---- Cost / "what your donation funds" table ---- */
.cost-table {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.cost-table li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.cost-table li:last-child {
  border-bottom: none;
}

.cost-table .cost-name {
  font-weight: 600;
  color: var(--green-800);
  font-size: var(--fs-sm);
}

.cost-table .cost-value {
  color: var(--gold-ink);
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Project photo gallery ----
   Two fixed columns rather than auto-fit: with auto-fit, a page that only has
   one photograph stretched it across the full 1440px container and turned a
   single image into an oversized banner. */
.project-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 768px) {
  .project-gallery { grid-template-columns: repeat(2, 1fr); }
}

.project-photo {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.project-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.project-photo figcaption {
  padding: 12px 16px;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ---- Case study band ----
   A documented operation with its own photo set. Sits on the tinted surface
   so it reads as a distinct piece of evidence, not just more project copy. */
.case-study {
  background-color: var(--surface-alt);
  border-top: 1px solid var(--border);
}

.case-study-head {
  max-width: 760px;
  margin: 0 auto 44px;
}

.case-study-head .section-text + .section-text {
  margin-top: 14px;
}

/* ---- Photo wall ----
   A dense, uncaptioned grid for a long run of similar documentation frames.
   The repetition is the point: it shows how many households were reached. */
.photo-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 576px) { .photo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .photo-wall { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .photo-wall { grid-template-columns: repeat(6, 1fr); } }

.photo-wall-item {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  transition: transform var(--transition), box-shadow var(--transition);
}

.photo-wall-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.photo-wall-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.photo-wall-count {
  margin: 20px 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 18, 34, 0.94);
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition);
}

.lightbox-close:hover,
.lightbox-nav:hover { background: var(--red-600); }

.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }

.lightbox-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-xs);
}

/* A note shown where a real photograph isn't available yet */
.photo-placeholder-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--gold-100);
  border: 1px solid rgba(236, 31, 39, 0.35);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: var(--fs-sm);
  color: var(--gold-ink);
  margin-top: 20px;
}

.photo-placeholder-note i {
  flex-shrink: 0;
  line-height: 1.5;
}

/* ---- Closing donate band ---- */
.project-cta {
  background: linear-gradient(135deg, var(--green-700) 0%, var(--green-900) 100%);
  color: var(--surface);
  padding: var(--space-section) 0;
  text-align: center;
}

.project-cta h2 {
  color: var(--surface);
  font-size: var(--fs-h2);
  margin-bottom: 14px;
}

.project-cta p {
  max-width: 56ch;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-lead);
}

/* ---- Prev/next project navigation ---- */
.project-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 28px;
  margin-top: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

.project-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-700);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.project-nav a:hover {
  color: var(--gold-ink);
}

/* ==========================================================================
   21. PRINT
   ========================================================================== */
@media print {
  #mainNavbar, #backToTopBtn, .hero-scroll, .modal { display: none !important; }
  body { background: #fff; color: #000; }
  .mission-section, .counters-section, .quick-donate-box, .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
}