/*
Theme Name: BREFON — Bread for the Needy
Theme URI: https://bread4theneedy.org
Author: Bread for the Needy (BREFON)
Author URI: https://bread4theneedy.org
Description: Custom humanitarian WordPress theme for Bread for the Needy (BREFON), Gulu City, Northern Uganda. Built around the organisation's navy, green and wheat-gold identity, with a donation-forward structure, accessible colour contrast, and images optimised for low-bandwidth mobile networks. Motto: Restoring Hope, Rebuilding Lives.
Version: 4.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brefon
Tags: nonprofit, charity, ngo, humanitarian, accessibility-ready, custom-colors, custom-menu, responsive-layout, translation-ready
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Palette sampled directly from LOGO.png:
   navy ring #002448 · olive/leaf green #486C18 · bread crust #A86C3C · cream #FCF0D8
   All text pairs below were contrast-checked against WCAG 2.1 AA (4.5:1 body).
   ========================================================================== */

:root {
  /* --- Brand: Navy (authority, the logo ring and BREFON wordmark) --- */
  --navy-900: #06172E;
  --navy-800: #0A2544;
  --navy-700: #0E3159; /* primary — 13.1:1 on white */
  --navy-600: #14406F;
  --navy-500: #1D5490;
  --navy-100: #E7EDF5;

  /* --- Brand: Green (growth, the leaf and outer arc) --- */
  --green-800: #24571C;
  --green-700: #2E6B23; /* AA text on white — 5.9:1 */
  --green-600: #3C8A2C;
  --green-500: #57A63F;
  --green-100: #E8F2E3;

  /* --- Brand: Wheat gold (the bread — reserved for donation CTAs) --- */
  --gold-700: #8A5A2B;
  --gold-600: #B07A2E;
  --gold-500: #D9A441; /* CTA fill — always pairs with navy-900 text */
  --gold-400: #E8BE6E;
  --cream:    #FCF3DE;

  /* --- Neutrals --- */
  --ink:        #16202E;
  --ink-muted:  #4A5A6E; /* 7.0:1 on white */
  --border:     #DCE3EC;
  --border-soft:#EDF1F6;
  --surface:    #FFFFFF;
  --surface-soft:#F6F8FB;

  /* --- Semantic roles (use these in components, never raw hex) --- */
  --color-primary:        var(--navy-700);
  --color-on-primary:     #FFFFFF;
  --color-secondary:      var(--green-700);
  --color-on-secondary:   #FFFFFF;
  --color-accent:         var(--gold-500);
  --color-on-accent:      var(--navy-900);
  --color-background:     var(--surface);
  --color-foreground:     var(--ink);
  --color-muted-foreground: var(--ink-muted);
  --color-border:         var(--border);
  --color-ring:           var(--gold-500);
  --color-danger:         #B3261E;

  /* --- Typography --- */
  /* Brandon Text throughout. It is a licensed face, so it is only present once
     the webfont files are added to assets/fonts/ — until then the browser
     falls through to Jost, a free geometric sans on the same skeleton, which
     functions.php loads from Google Fonts. Two tokens are kept rather than
     collapsed into one, so headings can be given their own face again without
     touching a single template. */
  --font-heading: 'Brandon Text', 'Jost', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Brandon Text', 'Jost', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.8125rem; /* 13px — labels only, never body */
  --text-sm:   0.9375rem; /* 15px */
  --text-base: 1.0625rem; /* 17px — body copy; 16px is the floor, not the target */
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  2.875rem;
  --text-5xl:  3.75rem;

  /* Measured against the spacing large humanitarian sites use: display
     headings sit near 1.05, sub-headings near 1.3, body copy near 1.35-1.45.
     Body stays at 1.5 rather than going lower — that is the WCAG text-spacing
     baseline, and this site carries long programme descriptions read on
     phones, where tighter lines cost real comprehension. */
  --leading-tight:   1.1;   /* h1, h2, display type */
  --leading-heading: 1.25;  /* h3 and below */
  --leading-snug:    1.35;  /* standfirsts */
  --leading-body:    1.5;

  /* --- Spacing (4/8px rhythm) --- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 2.5rem;  --space-8: 3rem;
  --space-9: 4rem;    --space-10: 5rem;   --space-11: 6rem;   --space-12: 8rem;

  /* --- Radius, shadow, motion --- */
  /* Square corners throughout — an editorial, newsprint-like feel that suits
     humanitarian reporting and matches the reference site. The token names are
     kept so a single edit here can reintroduce rounding if it is ever wanted. */
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-pill: 0;

  --shadow-sm: 0 1px 2px rgba(6, 23, 46, 0.06), 0 1px 3px rgba(6, 23, 46, 0.08);
  --shadow-md: 0 4px 10px rgba(6, 23, 46, 0.07), 0 2px 4px rgba(6, 23, 46, 0.06);
  --shadow-lg: 0 14px 34px rgba(6, 23, 46, 0.12), 0 4px 10px rgba(6, 23, 46, 0.07);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --dur-fast: 140ms;   /* press feedback */
  --dur-base: 220ms;   /* hover, small state change */
  --dur-slow: 380ms;   /* panel / drawer travel */

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 1.25rem;
  --header-h: 68px;

  /* --- Z-index scale --- */
  --z-base: 1; --z-sticky: 40; --z-header: 60; --z-drawer: 80; --z-overlay: 90; --z-toast: 100;
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; --header-h: 84px; }
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep anchor targets clear of the sticky header */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Long URLs, Acholi place names and pasted IDs reflow instead of overflowing */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: -0.017em;
  color: var(--navy-800);
  margin: 0 0 var(--space-4);
}

/* Display sizes close up; at 60px a 1.25 line leaves a visible gap between
   the lines of a single headline. Small headings keep the looser value. */
h1, h2 { line-height: var(--leading-tight); }

h1 { font-size: clamp(2.125rem, 1.35rem + 3.3vw, var(--text-5xl)); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, var(--text-4xl)); }
h3 { font-size: clamp(1.3125rem, 1.08rem + 1vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5, h6 { font-size: var(--text-lg); }

/* Short headings wrap evenly; long-form prose keeps natural wrapping. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--navy-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--green-700); }

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background-color: var(--surface-soft); } /* avoids white flash while decoding */

ul, ol { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
li + li { margin-top: var(--space-2); }

blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--gold-500);
  background: var(--cream);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--navy-800);
}
blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--ink-muted);
}

hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }
th { font-weight: 600; color: var(--navy-800); }
/* Figures and amounts line up column to column */
td.is-numeric, .tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   3. ACCESSIBILITY PRIMITIVES
   ========================================================================== */

/* A single visible focus style, never removed. */
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
/* On gold surfaces the gold ring would disappear — switch to navy. */
.btn--donate:focus-visible,
.is-on-gold :focus-visible { outline-color: var(--navy-900); }

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--navy-800);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 0; color: #fff; }

@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;
  }
  /* Reveal animations must render their final state, not stay hidden. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

/* 40px on phones, 48px from tablet up. Was 48/64; the reference sites this was
   measured against sit between 40 and 70, with 48 by far the commonest. */
.section { padding-block: var(--space-7); }
@media (min-width: 768px) { .section { padding-block: var(--space-8); } }
.section--tight { padding-block: var(--space-6); }
.section--soft { background: var(--surface-soft); }
.section--cream { background: var(--cream); }
.section--navy {
  background: var(--navy-800);
  color: #E9EEF6;
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy a { color: var(--gold-400); }
.section--navy a:hover { color: var(--gold-500); }

.section__head { max-width: 62ch; margin-bottom: var(--space-5); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--gold-500);
  flex: none;
}
.section--navy .eyebrow { color: var(--gold-400); }

.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
  max-width: 62ch;
}
.section--navy .lead { color: #C9D6E6; }

/* Responsive grid used by programme cards, stories, team, etc. */
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); }
                             .grid--3 { grid-template-columns: repeat(2, 1fr); }
                             .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(4, 1fr); }
                             .grid { gap: var(--space-6); } }

.split { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .split--media-first > *:first-child { order: -1; }

  /* A photograph in a split fills the height of its column, so the top AND
     bottom edges line up with the text beside it. Fixing a 4:3 ratio here
     left a void under the picture whenever the text ran longer, which is
     most of the time. Capped so a very long column cannot crop a wide scene
     into a sliver. */
  .split > .ratio-4-3 {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 360px;
    max-height: 680px;
  }
  /* <picture> is inline by default, so the image inside it has no height to
     resolve 100% against until this makes it a block. */
  .split > .ratio-4-3 picture { display: block; height: 100%; }
}

/* --- Paired photographs in a split column ----------------------------
   Two smaller frames instead of one oversized one. They still fill the
   column, so the block stays aligned top and bottom with the text.
   -------------------------------------------------------------------- */

.split-media__inner { display: grid; gap: var(--space-4); }

.split-media__frame {
  margin: 0;
  overflow: hidden;
  /* On a stacked mobile layout each frame keeps a normal landscape crop. */
  aspect-ratio: 3 / 2;
  background: var(--surface-soft);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.split-media__frame picture { display: block; height: 100%; }
.split-media__frame img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  /* The frames are taken out of flow so this column contributes no height of
     its own. That lets the grid row be sized by the text beside it, and
     align-self:stretch then gives this column exactly that height — the two
     frames divide it. Left in normal flow the column sized itself to its own
     images, grew the row, and stretch had nothing left to stretch into. */
  .split-media {
    position: relative;
    align-self: stretch;
    min-height: 340px;
  }
  .split-media__inner {
    position: absolute;
    inset: 0;
    grid-template-rows: 1fr 1fr;
  }
  .split-media__frame {
    aspect-ratio: auto;
    /* Grid children default to min-height:auto and refuse to shrink below
       their content; without this the frames overflow the column. */
    min-height: 0;
  }
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* min-height keeps every button a comfortable touch target */
  min-height: 48px;
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation; /* removes the 300ms tap delay */
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
/* Press feedback that does not move neighbouring content */
.btn:active { transform: scale(0.975); }

.btn--primary { background: var(--navy-700); color: #fff; }
.btn--primary:hover { background: var(--navy-600); color: #fff; box-shadow: var(--shadow-md); }

.btn--secondary { background: var(--green-700); color: #fff; }
.btn--secondary:hover { background: var(--green-800); color: #fff; box-shadow: var(--shadow-md); }

/* The donation CTA — wheat gold from the bread in the logo, navy text (8:1). */
.btn--donate { background: var(--gold-500); color: var(--navy-900); }
.btn--donate:hover { background: var(--gold-400); color: var(--navy-900); box-shadow: var(--shadow-md); }

.btn--outline {
  background: transparent;
  color: var(--navy-700);
  border-color: var(--navy-700);
}
.btn--outline:hover { background: var(--navy-700); color: #fff; }

.btn--on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--on-dark:hover { background: #fff; color: var(--navy-800); border-color: #fff; }

/* Still 44px tall: a smaller button is a smaller target, not a smaller tap area. */
.btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg { min-height: 56px; padding: var(--space-4) var(--space-7); font-size: var(--text-lg); }
.btn--block { width: 100%; }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn .btn__icon { flex: none; width: 20px; height: 20px; }

/* Inline text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
  color: var(--green-700);
  text-decoration: none;
}
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover { color: var(--navy-700); }
.link-arrow:hover svg { transform: translateX(3px); }
.section--navy .link-arrow { color: var(--gold-400); }

/* ==========================================================================
   6. SITE HEADER & NAVIGATION
   ========================================================================== */

/* Top utility strip: contact + language, mirrors the brochure letterhead */
.topbar {
  display: none;
  background: var(--navy-900);
  color: #C9D6E6;
  font-size: var(--text-xs);
}
@media (min-width: 1024px) { .topbar { display: block; } }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 38px;
}
.topbar a { color: #C9D6E6; text-decoration: none; }
.topbar a:hover { color: var(--gold-400); }
.topbar__list { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.topbar__list li { margin: 0; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar__item svg { width: 14px; height: 14px; flex: none; opacity: 0.8; }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--surface);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--navy-800);
  flex: none;
}
.site-brand__mark { width: 44px; height: 44px; flex: none; }
@media (min-width: 768px) { .site-brand__mark { width: 56px; height: 56px; } }
.site-brand__text { display: none; line-height: 1.15; }
@media (min-width: 520px) { .site-brand__text { display: block; } }
.site-brand__name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--navy-800);
}
.site-brand__motto {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-700);
}

/* --- Desktop navigation --- */
.primary-nav { display: none; }
@media (min-width: 1024px) { .primary-nav { display: block; margin-left: auto; } }

.primary-nav ul { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.primary-nav li { position: relative; margin: 0; }

.primary-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  /* Set in capitals. Capitals read denser than mixed case, so the size comes
     down a step and letter-spacing opens up to keep them legible. */
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--navy-800);
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav a:hover { background: var(--navy-100); color: var(--navy-700); }

/* Capitals are wider than mixed case, and 1024px is exactly where the desktop
   nav first appears — the tightest it ever gets. Pull the padding and tracking
   in between there and 1200px so the header cannot overflow into a sideways
   page scroll. */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* 1024px is where the desktop nav first appears and so the tightest the
     header ever gets. A geometric sans in capitals is wide: measured untouched
     here, the header had 3px to spare — one longer menu label away from a
     horizontal page scroll. Pulling the size, padding and tracking in takes
     that to roughly 70px, which is about eight extra characters of room, and
     the labels are editable so that margin is the point. */
  .primary-nav a {
    padding-inline: var(--space-2);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
  }
  .site-header__inner { gap: var(--space-2); }
  .site-brand__motto { font-size: 0.6875rem; letter-spacing: 0.04em; }
}

/* Current page is marked with weight + an underline bar, not colour alone */
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a {
  color: var(--green-700);
}
.primary-nav .current-menu-item > a::after,
.primary-nav .current_page_item > a::after,
.primary-nav .current-menu-ancestor > a::after {
  content: "";
  position: absolute;
  left: var(--space-4); right: var(--space-4);
  bottom: 2px; height: 3px;
  background: var(--gold-500);
  border-radius: var(--radius-pill);
}

/* Submenus open on hover and on keyboard focus */
.primary-nav .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 280px;
  padding: var(--space-2);
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav .sub-menu a {
  display: flex; width: 100%;
  white-space: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.primary-nav .sub-menu .current-menu-item > a::after { content: none; }

.header__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.header__donate { display: none; }
@media (min-width: 640px) { .header__donate { display: inline-flex; } }

/* --- Mobile menu toggle --- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--navy-800);
  cursor: pointer;
  touch-action: manipulation;
}
.nav-toggle:hover { background: var(--navy-100); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* --- Mobile drawer --- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
}
.mobile-nav[data-open="true"] { visibility: visible; }

.mobile-nav__scrim {
  position: absolute;
  inset: 0;
  /* Measured against photography, not a flat colour — keeps the panel readable */
  background: rgba(6, 23, 46, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  border: 0; padding: 0; cursor: pointer;
}
.mobile-nav[data-open="true"] .mobile-nav__scrim { opacity: 1; }

.mobile-nav__panel {
  position: relative;
  width: min(380px, 88vw);
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  /* Respect the notch, status bar and gesture bar */
  padding: max(var(--space-5), env(safe-area-inset-top)) var(--space-5)
           max(var(--space-8), env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.mobile-nav[data-open="true"] .mobile-nav__panel { transform: translateX(0); }

.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--border-soft); }
.mobile-nav a {
  display: block;
  padding: var(--space-4) var(--space-1);
  min-height: 48px;
  /* A step down from the mixed-case size: capitals at 18px read as shouting. */
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--navy-800);
  text-decoration: none;
}
.mobile-nav a:hover { color: var(--green-700); }
.mobile-nav .current-menu-item > a { color: var(--green-700); }
.mobile-nav .sub-menu a {
  padding-left: var(--space-5);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink-muted);
}
.mobile-nav__cta { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.mobile-nav__contact {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.mobile-nav__contact a { display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-2); }

body.has-drawer-open { overflow: hidden; }

/* ==========================================================================
   7. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(76svh, 640px);
  background: var(--navy-900);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) { .hero { min-height: min(84svh, 760px); align-items: center; } }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }

/* Two-stop scrim: keeps headline text legible over a busy photograph.
   No z-index here on purpose — .hero__media already forms its own stacking
   context, so a negative value would push the scrim behind the photo. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 23, 46, 0.30) 0%, rgba(6, 23, 46, 0.62) 55%, rgba(6, 23, 46, 0.90) 100%),
    linear-gradient(90deg, rgba(6, 23, 46, 0.72) 0%, rgba(6, 23, 46, 0.18) 68%);
}

.hero__inner {
  position: relative;
  padding-block: var(--space-9) var(--space-8);
  max-width: 44rem;
  color: #fff;
}
@media (min-width: 768px) { .hero__inner { padding-block: var(--space-11); } }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(6px);
}
.hero__eyebrow svg { width: 15px; height: 15px; }

.hero h1 { color: #fff; margin-bottom: var(--space-5); }

.hero__motto {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  color: var(--gold-400);
  margin-bottom: var(--space-4);
}

.hero__text {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: #DCE6F2;
  max-width: 40rem;
  margin-bottom: var(--space-7);
}

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

/* Page banner for interior pages */
.page-hero {
  position: relative;
  background: var(--navy-800);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; opacity: 0.32; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(6,23,46,0.92) 0%, rgba(10,37,68,0.72) 100%);
}
.page-hero__inner { padding-block: var(--space-8) var(--space-8); max-width: 48rem; }
@media (min-width: 768px) { .page-hero__inner { padding-block: var(--space-10); } }
.page-hero h1 { color: #fff; margin-bottom: var(--space-4); }
.page-hero p { color: #C9D6E6; font-size: var(--text-lg); max-width: 60ch; margin-bottom: 0; }

/* Breadcrumbs — orientation on deeper pages */
.breadcrumbs {
  font-size: var(--text-sm);
  color: #A9BCD2;
  margin-bottom: var(--space-4);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumbs li + li::before { content: "/"; opacity: 0.5; }
.breadcrumbs a { color: #D6E2F0; text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold-400); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: #fff; font-weight: 600; }

/* ==========================================================================
   8. CARDS
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--green-500); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card:focus-within { border-color: var(--green-600); box-shadow: var(--shadow-lg); }

.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.04); }

.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.card__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.card__title a { color: inherit; text-decoration: none; }
/* The whole card is clickable, but the accessible name stays on the real link */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__tagline {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--green-700);
  margin-bottom: var(--space-3);
}
.card__text { color: var(--ink-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.card__foot { margin-top: auto; }
.card__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  font-size: var(--text-xs); color: var(--ink-muted);
  margin-bottom: var(--space-3);
}

/* Programme card — icon-led, used on Home and What We Do */
.programme-card .card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin-bottom: var(--space-4);
  background: var(--green-100);
  color: var(--green-800);
  border-radius: var(--radius-md);
}
.programme-card .card__icon svg { width: 28px; height: 28px; }
.programme-card:hover .card__icon { background: var(--green-600); color: #fff; }
.programme-card .card__icon { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }

/* Gold top rule reinforces the brand without relying on colour for meaning */
.card--accent::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green-600), var(--gold-500));
}

/* ==========================================================================
   9. STAT BAND
   ========================================================================== */

/* Solid tiles on a light band: each figure is a block of its own rather than
   text floating in space, which reads as deliberate at a glance. Padding is
   kept tight on purpose — the tiles should feel compact, not airy. */
.stats { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

.stat {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--navy-700);
  color: #fff;
}
.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums; /* no width jump while counting up */
  color: #fff;
}
.stat__label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.35;
  color: #C9D6E6;
}
/* The "to be confirmed" dash should not shout as loudly as a real figure. */
.stat__value[aria-hidden="true"] { color: rgba(255, 255, 255, 0.55); }

/* ==========================================================================
   10. CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 55%, var(--green-800) 100%);
  color: #fff;
  overflow: hidden;
}
.cta-band__inner {
  position: relative;
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-9);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.4fr 1fr; padding-block: var(--space-10); gap: var(--space-9); }
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #D3DEEC; font-size: var(--text-lg); margin-bottom: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 900px) { .cta-band__actions { justify-content: flex-end; } }

/* ==========================================================================
   11. DONATION / GIVING
   ========================================================================== */

.give-grid { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .give-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }

.give-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.give-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.give-card__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  background: var(--navy-100); color: var(--navy-700);
  border-radius: var(--radius-md);
}
.give-card__logo svg { width: 26px; height: 26px; }
.give-card h3 { margin-bottom: 0; font-size: var(--text-xl); }

/* Account / till number rows — monospaced so digits are easy to read aloud */
.detail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.detail-row:last-of-type { border-bottom: 0; }
.detail-row__label { font-size: var(--text-sm); color: var(--ink-muted); }
.detail-row__value {
  font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--navy-800);
  letter-spacing: 0.02em;
}

.copy-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-3);
  background: var(--surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--navy-700);
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.copy-btn:hover { background: var(--navy-100); border-color: var(--navy-500); }
.copy-btn svg { width: 16px; height: 16px; flex: none; }
.copy-btn[data-copied="true"] { background: var(--green-100); border-color: var(--green-600); color: var(--green-800); }

/* Placeholder marker for details BREFON has not supplied yet */
.pending {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: #FDF3D6;
  border: 1px dashed var(--gold-600);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold-700);
}

.impact-list { list-style: none; padding: 0; margin: 0; }
.impact-list li {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-soft);
  margin: 0;
}
.impact-list li:last-child { border-bottom: 0; }
.impact-list__amount {
  flex: none; min-width: 6.5rem;
  font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green-700);
}

/* ==========================================================================
   12. FORMS
   ========================================================================== */

.form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy-800);
}
.field .req { color: var(--color-danger); margin-left: 2px; }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="number"], .field input[type="url"], .field select, .field textarea {
  width: 100%;
  /* >=48px tall and 16px text — prevents iOS auto-zoom on focus */
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(20, 64, 111, 0.16);
}

/* Persistent helper text, not a disappearing placeholder */
.field__hint { font-size: var(--text-sm); color: var(--ink-muted); }

.field__error {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-danger);
}
.field__error svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: var(--color-danger); }

/* Error summary at the top of a failed form — focused after submit */
.form-summary {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  background: #FDECEA;
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
}
.form-summary h2 { font-size: var(--text-lg); color: var(--color-danger); margin-bottom: var(--space-2); }
.form-summary ul { margin: 0; padding-left: 1.1rem; }
.form-summary a { color: var(--color-danger); font-weight: 600; }

.form-notice {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.form-notice svg { width: 20px; height: 20px; flex: none; }
.form-notice--success { background: var(--green-100); border: 1px solid var(--green-600); color: var(--green-800); }
.form-notice--info { background: var(--navy-100); border: 1px solid var(--navy-500); color: var(--navy-800); }

.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ==========================================================================
   13. STORIES & ARTICLE CONTENT
   ========================================================================== */

.entry-content { font-size: var(--text-lg); line-height: 1.6; }
.entry-content > * { max-width: var(--container-narrow); margin-inline: auto; }
.entry-content h2 { margin-top: var(--space-8); }
.entry-content h3 { margin-top: var(--space-6); }
.entry-content figure { margin: var(--space-7) auto; }
.entry-content figure.alignwide, .entry-content .alignwide { max-width: var(--container); }
.entry-content figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-align: center;
}
.entry-content img { border-radius: var(--radius-md); }

.entry-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  font-size: var(--text-sm); color: var(--ink-muted);
  margin-bottom: var(--space-6);
}
.entry-meta__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.entry-meta svg { width: 16px; height: 16px; opacity: 0.75; }

/* Content-warning panel for trauma-related stories */
.content-note {
  display: flex; gap: var(--space-3);
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-7);
  padding: var(--space-4) var(--space-5);
  background: var(--cream);
  border: 1px solid var(--gold-600);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--navy-800);
}
.content-note svg { width: 20px; height: 20px; flex: none; color: var(--gold-700); }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--green-100);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--green-800);
}
.badge--navy { background: var(--navy-100); color: var(--navy-700); }
.badge--gold { background: var(--cream); color: var(--gold-700); }

/* Badge/chip rows wrap before labels are ever truncated */
.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ==========================================================================
   14. VALUES / TIMELINE / TEAM
   ========================================================================== */

.value-item { display: flex; gap: var(--space-4); }
.value-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  background: var(--cream); color: var(--gold-700);
  border-radius: var(--radius-md);
}
.value-item__icon svg { width: 24px; height: 24px; }
.value-item h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.value-item p { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: 0; }

.org-chart { display: grid; gap: var(--space-4); }
.org-chart__tier {
  padding: var(--space-4) var(--space-5);
  background: var(--navy-800);
  color: #fff;
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
}
.org-chart__row { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .org-chart__row { grid-template-columns: repeat(4, 1fr); } }
.org-chart__unit {
  padding: var(--space-4);
  background: var(--green-100);
  border: 1px solid var(--green-500);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--green-800);
}

.person { text-align: center; }
/* Square portraits rather than circles: they keep the sharp-edged language and
   show more of the photograph, which matters when the picture is the evidence. */
.person__photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  margin: 0 auto var(--space-4);
  overflow: hidden;
  background: var(--navy-100);
  border-bottom: 4px solid var(--gold-500);
}
.person__photo img,
.person__photo picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__name { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.person__role { font-size: var(--text-sm); font-weight: 600; color: var(--green-700); margin-bottom: var(--space-2); }
.person__quals { font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.5; }

/* ==========================================================================
   15. FOOTER
   Identity, legal text and the stewardship note sit on the left under the
   logo; the link columns run through the middle; the social accounts close
   the row on the right.

   The arrangement is borrowed; the palette and the wording are BREFON's own,
   on the same navy the header uses. The social badges are squares rather than
   circles, because the whole site uses square corners.
   ========================================================================== */

.site-footer {
  --footer-rule: rgba(255, 255, 255, 0.18);

  background: var(--navy-900);
  color: #B9C8DA;
  font-size: var(--text-sm);
  padding-top: var(--space-8);
}
/* Buttons are excluded: .site-footer a would otherwise outrank .btn--donate
   on specificity and repaint the label. */
.site-footer a:not(.btn) { color: #E4EBF4; }
.site-footer a:not(.btn):hover { color: var(--gold-400); }

.footer__main {
  display: grid;
  gap: var(--space-7) var(--space-6);
  padding-bottom: var(--space-8);
}
@media (min-width: 640px)  { .footer__main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  /* Identity is wider than the others because it carries running text; the
     three link columns share the rest evenly. */
  .footer__main { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
}

/* Two link groups stacked in one column, as in the reference. */
.footer__group + .footer__group { margin-top: var(--space-6); }

.footer__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: #fff;
  margin-bottom: var(--space-2);
}

.footer__text {
  line-height: 1.55;
  margin-bottom: var(--space-3);
  color: #B9C8DA;
}

/* Link lists. No resting underline: these read as a list of destinations, not
   as links inside a sentence, and the underline returns on hover and focus. */
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin: 0; }
.footer__list a {
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-decoration: none;
}
.footer__list a:hover,
.footer__list a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
@media (min-width: 1024px) {
  /* Pointer devices: the rows can close up. 21px of line plus 10px of padding
     still clears the 24px minimum target. */
  .footer__list a { padding-block: 5px; }
  .footer__direct a { padding-block: 3px; }
}

/* Phone and email, under the About links. */
.footer__direct { list-style: none; margin: 0; padding: 0; }
.footer__direct li { margin: 0; }
.footer__direct a {
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.footer__direct a:hover,
.footer__direct a:focus-visible { text-decoration: underline; text-underline-offset: 0.22em; }

/* --- Identity column --- */
.footer__logo { display: block; margin-bottom: var(--space-4); }

.footer__brand-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}
.footer__motto {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--gold-400);
}

.footer__meta {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: #93A6BC;
}
.footer__meta + .footer__meta { margin-top: var(--space-2); }

.footer__address {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: #93A6BC;
  max-width: 34ch;
}

/* The bordered note: where a stewardship or donation-handling statement goes.
   Editable in Customizer, and the box disappears entirely if emptied. */
.footer__note {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: var(--text-xs);
  font-style: italic;
  line-height: 1.55;
  color: #D6E0EC;
  max-width: 40ch;
}
.footer__note p { margin: 0; }
.footer__note p + p { margin-top: var(--space-2); }

/* Social accounts: square badges, matching the square corners used site-wide. */
.social-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The glyph is small but the target is not. */
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.social-row a:hover { background: var(--gold-400); color: var(--navy-900); }

.footer__rule {
  border: 0;
  border-top: 1px solid var(--footer-rule);
  margin: 0;
}

/* --- Bottom bar: legal links only. Not rendered at all when none exist. --- */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__legal li { margin: 0; }
.footer__legal a {
  display: inline-block;
  padding-block: var(--space-2);
  font-size: var(--text-xs);
  text-decoration: none;
}
.footer__legal a:hover,
.footer__legal a:focus-visible { text-decoration: underline; text-underline-offset: 0.22em; }

/* Sidebar widgets used to borrow the footer heading style, which was white.
   Now that they cannot, they get their own rule. */
.widget + .widget { margin-top: var(--space-6); }
.widget__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-900);
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   16. MOBILE STICKY DONATE BAR
   ========================================================================== */

.donate-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter) max(var(--space-3), env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(6, 23, 46, 0.08);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.donate-bar[data-visible="true"] { transform: translateY(0); }
.donate-bar .btn { flex: 1; }
@media (min-width: 640px) { .donate-bar { display: none; } }
/* Reserve room so the bar never covers the end of the page */
body.has-donate-bar { padding-bottom: 84px; }
@media (min-width: 640px) { body.has-donate-bar { padding-bottom: 0; } }

/* ==========================================================================
   17. SCROLL REVEAL (progressive enhancement)
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Nothing may stay hidden because of JavaScript.
   Three separate guarantees, because on a flaky mobile connection a script
   that never arrives must not take the page's content with it:
     1. JS disabled entirely  -> .no-js
     2. main.js fails to load or throws -> .reveal-fallback, set by a timer in
        the inline head script, which runs before main.js and independently of it
     3. reduced motion -> handled in the media query above */
.no-js [data-reveal],
.reveal-fallback [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   18. PAGINATION, 404, SEARCH, UTILITIES
   ========================================================================== */

.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-8); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--navy-700);
  text-decoration: none;
}
.pagination .page-numbers:hover { background: var(--navy-100); }
.pagination .page-numbers.current { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

.search-form { display: flex; gap: var(--space-2); }
.search-form input[type="search"] {
  flex: 1; min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-body);
}

.empty-state { text-align: center; padding: var(--space-9) var(--space-4); max-width: 46ch; margin-inline: auto; }
.empty-state__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin-bottom: var(--space-5);
  background: var(--navy-100); color: var(--navy-600);
}
.empty-state__icon svg { width: 34px; height: 34px; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); }
.rounded { border-radius: var(--radius-lg); overflow: hidden; }
.shadow { box-shadow: var(--shadow-lg); }
.ratio-4-3 { aspect-ratio: 4 / 3; } .ratio-16-9 { aspect-ratio: 16 / 9; } .ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-4-3 img, .ratio-16-9 img, .ratio-1-1 img { width: 100%; height: 100%; object-fit: cover; }

.wp-caption { max-width: 100%; }
.alignleft { float: left; margin: 0 var(--space-5) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-5); }
.aligncenter { margin-inline: auto; }
.sticky { position: relative; }

/* ==========================================================================
   18b. PAGE HELPERS & SECTION COMPONENTS
   Named classes used by the page templates, kept here rather than as inline
   style attributes so the whole design stays editable from one file.
   ========================================================================== */


/* Vision and Mission, in their own full-width row under the Who We Are split.
   A rule above them separates them from the split without another 96px gap. */
.h-badge { display: flex; align-items: flex-start; gap: var(--space-3); }
.h-badge__icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-top: 4px;
  background: var(--green-100); color: var(--green-800);
  border-radius: var(--radius-md);
}

.t-sm { font-size: var(--text-sm); color: var(--ink-muted); }
.lead--center { margin-inline: auto; }
.eyebrow--center { justify-content: center; }
.on-navy { color: #C9D6E6; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-10 { margin-bottom: var(--space-10); }
.mt-10 { margin-top: var(--space-10); }
.card__tagline--lg { font-size: var(--text-lg); margin-bottom: var(--space-5); }
.entry-content--flush > * { margin-inline: 0; }
.split--top { align-items: start; }
.section--tall { padding-block: var(--space-11); }
.form-notice--wide { max-width: none; }
.badge-row--center { justify-content: center; }
.empty-state__icon--success { background: var(--green-100); color: var(--green-800); }
.team-grid--wide { max-width: none; }

.card__icon--navy { background: var(--navy-100); color: var(--navy-700); }
.card__icon--gold { background: var(--cream); color: var(--gold-700); }
.value-item__icon--on-dark { background: rgba(255, 255, 255, 0.12); color: var(--gold-400); }

.badge--link { text-decoration: none; min-height: 44px; padding-inline: var(--space-4); }
.badge--on-navy { background: rgba(255, 255, 255, 0.1); color: #EFE2C4; padding: var(--space-2) var(--space-4); }
.badge--closed { background: #FDECEA; color: #8A1C15; }

/* --- Numbered lists: objectives and step-by-step --- */
.objectives { list-style: none; padding: 0; }
.objectives li {
  display: flex; gap: var(--space-4);
  margin: 0; padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-soft);
}
.objectives__num {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--green-100); color: var(--green-800);
  font-weight: 700; font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.objectives--steps li { align-items: flex-start; }
.objectives--on-navy li { border-bottom-color: rgba(255, 255, 255, 0.14); color: #C9D6E6; }
.objectives--on-navy strong { color: #fff; }
.objectives--on-navy .objectives__num { background: rgba(255, 255, 255, 0.12); color: var(--gold-400); }

/* --- Tick lists --- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex; gap: var(--space-3);
  margin: 0; padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.check-list li:last-child { border-bottom: 0; }
.check-list svg { flex: none; margin-top: 3px; color: var(--green-600); }
.section--navy .check-list li { border-bottom-color: rgba(255, 255, 255, 0.14); }
.section--navy .check-list svg { color: var(--gold-400); }

/* --- Org chart --- */
.org-chart__unit--navy { background: var(--navy-100); border-color: var(--navy-500); color: var(--navy-800); }
.org-chart__row--2 { grid-template-columns: repeat(2, 1fr); }
.org-chart__label { font-weight: 600; color: var(--navy-800); }

/* --- Mission and vision --- */
.mission-grid { align-items: stretch; }
.mission-card {
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--green-600);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.mission-card--vision { border-top-color: var(--navy-600); }
.mission-card--mission { border-top-color: var(--gold-500); }
.mission-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--navy-100); color: var(--navy-700);
}
.mission-card--mission .mission-card__icon { background: var(--cream); color: var(--gold-700); }
.mission-card__text {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: 1.45;
  color: var(--navy-800);
  margin-bottom: 0;
}

/* --- Contact details list. Was a run of inline styles on the contact page;
       these are the same rules, named, so a rebrand reaches them. --- */
.contact-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.contact-list__item {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-soft);
}
.contact-list__item--last { border-bottom: 0; }
.contact-list__icon { flex: none; color: var(--green-700); }
.contact-list__label { display: block; color: var(--navy-800); }

/* Embedded map: an iframe carries a browser default border, so it is cleared
   here rather than on the element. */
.ratio-16-11 { aspect-ratio: 16 / 11; }
.map-frame { border: 0; display: block; }

/* Text and badge rows that centre themselves under a heading. */
.stack-narrow { max-width: 520px; margin: 0 auto var(--space-8); }
.stack-xs { max-width: 420px; margin-inline: auto; }
.badge-row--narrow { max-width: var(--container-narrow); margin: var(--space-7) auto 0; }
.badge--link { text-decoration: none; }

/* --- Team --- */
.team-grid { max-width: 820px; margin-inline: auto; }
.person--card {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Full-bleed photograph across the top of the card, edge to edge. */
.person--card .person__photo {
  width: calc(100% + (var(--space-6) * 2));
  max-width: none;
  aspect-ratio: 4 / 3;
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
}
.person__initials {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--navy-700); color: #fff;
  font-family: var(--font-heading);
  font-size: 2.25rem; font-weight: 600;
  letter-spacing: 0.02em;
}
.person__bio { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--space-3); }

/* --- Partners --- */
.partner-card__logo {
  display: flex; align-items: center; justify-content: center;
  min-height: 128px; padding: var(--space-5);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--color-border);
  color: var(--navy-600);
}
.partner-card__logo img { max-height: 84px; width: auto; object-fit: contain; }
.partner-card .card__title a { display: inline-flex; align-items: center; gap: var(--space-2); }

/* --- Vacancies --- */
.job-card--closed { opacity: 0.72; }
.job-card--closed .card__title a { color: var(--ink-muted); }
.apply-box {
  max-width: var(--container-narrow);
  margin: var(--space-8) auto 0;
  padding: var(--space-7);
  background: var(--cream);
  border: 1px solid var(--gold-600);
  border-radius: var(--radius-lg);
}
.apply-box h2 { margin-bottom: var(--space-4); }

/* --- Impact results --- */
.result-card {
  display: flex; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--green-600);
  border-radius: var(--radius-md);
}
.result-card__icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: var(--green-100); color: var(--green-800);
  border-radius: var(--radius-md);
}
.result-card__area {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: var(--space-2);
}
.result-card__metric {
  font-family: var(--font-heading);
  font-size: var(--text-3xl); font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--navy-800);
  margin-bottom: var(--space-1);
}
.result-card__metric--pending { font-size: var(--text-base); }
.result-card__label { font-weight: 600; color: var(--navy-800); margin-bottom: var(--space-2); }
.result-card__note { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: 0; }

/* --- Where we work --- */
.fact-row { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.fact__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-3xl); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--green-700);
}
.fact__label { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--ink-muted); }
.region-card .card__foot { margin-top: var(--space-4); }
.map-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4);
  aspect-ratio: 16 / 11;
  padding: var(--space-7);
  text-align: center;
  background: var(--surface-soft);
  border: 2px dashed var(--color-border);
  color: var(--ink-muted);
}
.map-placeholder svg { color: var(--navy-500); }

/* --- Contact list --- */
.contact-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.contact-list li {
  display: flex; gap: var(--space-4);
  padding: var(--space-4) 0; margin: 0;
  border-bottom: 1px solid var(--border-soft);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list__icon { flex: none; color: var(--green-700); }
.contact-list strong { display: block; color: var(--navy-800); }

.map-embed { aspect-ratio: 16 / 11; }
.map-embed iframe { border: 0; display: block; }

/* --- Giving detail rows --- */
.detail-row__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.give-card__sub { font-size: var(--text-base); margin-top: var(--space-5); margin-bottom: var(--space-2); }
.give-card__sub:first-of-type { margin-top: var(--space-4); }

/* --- Gallery --- */
.gallery-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.gallery-item {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--color-border);
}
.gallery-item picture { display: block; }
.gallery-item img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.gallery-item figcaption {
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-muted);
  text-align: left;
}

/* --- Misc --- */
.content-note--warning { background: #FDECEA; border-color: var(--color-danger); }
.content-note--warning svg { color: var(--color-danger); }
.entry-meta--on-dark { color: #C9D6E6; margin-bottom: 0; }
.entry-meta--on-dark svg { color: var(--gold-400); opacity: 1; }

/* --- Dropdown affordance: a parent item with children gets a chevron --- */
.primary-nav .menu-item-has-children > a::before {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  pointer-events: none;
}
.primary-nav .menu-item-has-children > a { padding-right: var(--space-6); }
.primary-nav .menu-item-has-children:hover > a::before,
.primary-nav .menu-item-has-children:focus-within > a::before { opacity: 1; }

/* Mobile drawer: sub-items sit visually under their parent */
.mobile-nav .sub-menu { border-left: 2px solid var(--green-100); margin-left: var(--space-2); }

/* ==========================================================================
   18d. IMAGE-LED COMPONENTS
   The reference site leads with photography rather than icons. These carry
   that through: action cards with a photograph, programme cards with a
   photograph, and a linear horizontal photo strip.
   ========================================================================== */

/* --- Action card: photograph with the icon sitting over its lower edge --- */
.action-card { position: relative; }

.action-card .card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-soft);
}
.action-card .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.action-card:hover .card__media img { transform: scale(1.04); }

/* A scrim under the icon so it stays legible whatever the photo does. */
.action-card .card__media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(6, 23, 46, 0) 0%, rgba(6, 23, 46, 0.55) 100%);
}

/* The action cards lead with the photograph alone. An icon overhanging the
   frame was clipped by the card's own overflow, so it is gone rather than
   nudged: the photograph and the heading already say what the card is. */

/* --- Card scroller: the same behaviour as the photo strip, but carrying
       cards rather than framed photographs. Chevrons at the sides, no visible
       scrollbar, snapping to card boundaries. --- */
.cardstrip__wrap {
  position: relative;
  /* Mirrors the card width below, so the chevron rail can be sized from it. */
  --cardstrip-frame: clamp(270px, 80vw, 340px);
}

/* A rail as tall as one card's photograph, so the chevrons land on the middle
   of the image rather than the middle of the whole card. */
.cardstrip__controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* The card photo is 3:2, so it is two thirds of a card's width tall. */
  height: calc(var(--cardstrip-frame) * 2 / 3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.cardstrip__controls[hidden] { display: none; }

/* Phones get no chevrons: there is no room to set them beside a card without
   covering it. Swiping carries the interaction there. */
@media (max-width: 767px) {
  .cardstrip__controls { display: none; }
}
@media (min-width: 768px) {
  .cardstrip__wrap { padding-inline: var(--space-8); }
  /* Descendant selector on purpose, to beat the base .cardstrip rule below
     regardless of source order. */
  .cardstrip__wrap .cardstrip {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

.cardstrip {
  display: block;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Bleed to the screen edges so a partly visible card signals "more". */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: var(--space-2);
  scroll-padding-inline: var(--gutter);
  /* Scrollbar hidden; the chevrons carry the affordance. */
  scrollbar-width: none;
}
.cardstrip::-webkit-scrollbar { display: none; }
.cardstrip:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 4px;
}

.cardstrip__track {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cardstrip__track li { margin: 0; }

.cardstrip__item {
  flex: 0 0 auto;
  width: var(--cardstrip-frame);
  scroll-snap-align: start;
}
/* The card fills its slot, so every card in the row is the same height. */
.cardstrip__item > .card { height: 100%; }

/* With only a name left in the body, it centres — both across and down, so a
   one-line name and a three-line name sit the same way under their photo. The
   card's usual 24px padding was sized for a title, a tagline and a link; with
   one line of text it just left a gap, so it comes in to 10px. */
.cardstrip__item .card__body {
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  text-align: center;
}
.cardstrip__item .card__title { line-height: 1.2; }

/* --- Programme card with a photograph --- */
.programme-card--media .card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-soft);
}
.programme-card--media .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.programme-card--media:hover .card__media img { transform: scale(1.04); }

/* The icon sits inline above the title rather than floating over the photo,
   so the card stays readable at the narrow widths a four-column grid creates. */
.programme-card--media .card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-3);
}
.programme-card--media .card__icon svg { width: 24px; height: 24px; }

/* --- Linear photo strip -----------------------------------------------
   A single horizontal row that scrolls sideways. Chosen over a grid because
   a sequence of field photographs reads as a sequence.
   -------------------------------------------------------------------- */

.filmstrip__wrap {
  position: relative;
  /* Mirrors the frame width below, so the arrow rail can be sized from it. */
  --filmstrip-frame: clamp(240px, 78vw, 420px);
}

/* A rail across the top of the strip, as tall as one photograph. The chevrons
   sit at its two ends, which lands them on the middle of the image rather than
   the middle of image-plus-caption. The rail itself ignores the pointer so the
   photographs underneath stay scrollable and clickable. */
.filmstrip__controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* The photo is 3:2, so it is two thirds of a frame's width tall. */
  height: calc(var(--filmstrip-frame) * 2 / 3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.filmstrip__controls[hidden] { display: none; }
.filmstrip__btn { pointer-events: auto; }

/* Phones get no chevrons: there is no room to set them beside the frames
   without covering a photograph, and a thin grey glyph over an image fails
   its contrast requirement anyway. Swiping carries the interaction there, as
   it always did. */
@media (max-width: 767px) {
  .filmstrip__controls { display: none; }
}

/* From tablet up the strip is pulled in from the section edges and the
   chevrons live in the space that opens up, standing in clear ground rather
   than on top of the photographs. */
@media (min-width: 768px) {
  .filmstrip__wrap { padding-inline: var(--space-8); }
  /* Descendant selector on purpose: the base .filmstrip rule is declared later
     in this file, so matching its specificity would lose on source order. */
  .filmstrip__wrap .filmstrip {
    /* Cancel the edge-to-edge bleed, which would otherwise push the
       photographs back out underneath the chevrons. */
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

.filmstrip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The glyph is light, the target is not: 48px square either side of it. */
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  /* 3.4:1 against the section behind it — light enough to stay quiet, dark
     enough to meet the contrast a control has to meet. */
  color: #7C8794;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
/* A hairline stroke, closer to a typographic chevron than an icon. */
.filmstrip__btn svg { stroke-width: 1.5; }
.filmstrip__btn:hover:not(:disabled) { color: var(--navy-700); }
/* No border to carry the focus ring any more, so the glyph gets its own. */
.filmstrip__btn:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
}
.filmstrip__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* The scroller itself. Focusable via tabindex in the markup, so it needs a
   focus ring of its own — a keyboard user has to be able to see what they are
   about to scroll. */
.filmstrip {
  display: block;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Bleed to the screen edges so a partially visible frame signals "more". */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: var(--space-4);
  scroll-padding-inline: var(--gutter);
}
.filmstrip:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 4px;
}

/* Scrollbar hidden: the chevrons either side carry the affordance instead.
   The strip still scrolls by swipe, trackpad and keyboard — only the bar is
   gone, not the scrolling. */
.filmstrip { scrollbar-width: none; }
.filmstrip::-webkit-scrollbar { display: none; }

.filmstrip__track {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.filmstrip__track li { margin: 0; }

.filmstrip__item {
  flex: 0 0 auto;
  width: var(--filmstrip-frame);
  scroll-snap-align: start;
}
.filmstrip__item figure { margin: 0; }
/* Captions run to one line or two; the card fills its slot so the frames stay
   level with each other either way. */
.filmstrip__item > .card { height: 100%; }

/* The frame is now the card's own border, so the media does not draw a second
   one inside it. */
.filmstrip__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-soft);
}
.filmstrip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.filmstrip__item:hover .filmstrip__media img { transform: scale(1.04); }

/* Captions sit under the frame and stay put: a horizontal row has the room,
   and hover-only captions are invisible on a phone. */
/* The caption sits in the card body, centred and tight, matching the names on
   the What We Do cards. */
.filmstrip__item figcaption {
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--ink-muted);
  text-align: center;
}

/* These cards are not links. The hover lift stays off, because a card that
   rises under the pointer promises a click that is not there — only the
   photograph's own zoom remains. */
.filmstrip__item .card:hover,
.filmstrip__item .card:focus-within {
  border-color: var(--color-border);
  box-shadow: none;
  transform: none;
}

@media (min-width: 640px) {
  .filmstrip__wrap { --filmstrip-frame: clamp(300px, 46vw, 420px); }
}

/* --- Photo band: full-width image strip with an overlaid statement --- */
.photo-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
  color: #fff;
}
.photo-band__media { position: absolute; inset: 0; z-index: -2; }
.photo-band__media img { width: 100%; height: 100%; object-fit: cover; }
.photo-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 23, 46, 0.92) 0%, rgba(6, 23, 46, 0.62) 55%, rgba(6, 23, 46, 0.35) 100%);
}
.photo-band__inner {
  position: relative;
  padding-block: var(--space-10);
  max-width: 46rem;
}
.photo-band h2 { color: #fff; }
.photo-band p { color: #D3DEEC; font-size: var(--text-lg); }
.photo-band .eyebrow { color: var(--gold-400); }

/* ==========================================================================
   18e. APPEAL BANNER, GIVING CHOOSER, FOOTER CTA
   Conventions common to large humanitarian sites, in BREFON's own colours.
   ========================================================================== */

/* --- Appeal banner ---------------------------------------------------- */

.appeal {
  background: var(--gold-500);
  color: var(--navy-900);
  font-size: var(--text-sm);
}
.appeal--urgent {
  background: #9E1B14;
  color: #fff;
}
.appeal[hidden] { display: none; }

.appeal__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-3);
}

.appeal__text {
  flex: 1 1 18rem;
  margin: 0;
  line-height: 1.45;
}

.appeal__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--space-2);
  padding: 2px var(--space-2);
  background: var(--navy-900);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.appeal--urgent .appeal__tag { background: #fff; color: #9E1B14; }

.appeal__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 700;
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}
.appeal__link:hover { color: inherit; text-decoration-thickness: 3px; }

/* Only offer a close button when JavaScript is there to honour it. */
.appeal__dismiss { display: none; }
.js .appeal__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0.75;
  transition: opacity var(--dur-base) var(--ease-out);
}
.appeal__dismiss:hover { opacity: 1; }
.appeal--urgent .appeal__dismiss:focus-visible { outline-color: #fff; }

/* --- Giving amount chooser -------------------------------------------- */

.give-amounts { border: 0; padding: 0; margin: 0 0 var(--space-6); }
.give-amounts legend {
  padding: 0;
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--navy-800);
}

.give-amounts__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 780px) {
  .give-amounts__grid { grid-template-columns: repeat(5, 1fr); }
}

/* The real radio stays in the accessibility tree and drives every state. */
.give-amounts__option { position: relative; display: flex; }
.give-amounts__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.give-amounts__option label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 76px;
  padding: var(--space-3) var(--space-3);
  background: var(--surface);
  border: 2px solid var(--color-border);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.give-amounts__amount {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy-800);
  line-height: 1.1;
}
.give-amounts__what {
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--ink-muted);
}

.give-amounts__option input:hover + label { border-color: var(--navy-500); }
.give-amounts__option input:focus-visible + label {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
}
/* Checked state carries a border AND a fill, so it never relies on colour alone. */
.give-amounts__option input:checked + label {
  background: var(--navy-700);
  border-color: var(--navy-700);
}
.give-amounts__option input:checked + label .give-amounts__amount { color: #fff; }
.give-amounts__option input:checked + label .give-amounts__what { color: #C9D6E6; }

.give-amounts__custom { margin-top: var(--space-4); max-width: 22rem; }
.give-amounts__custom[hidden] { display: none; }

.give-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
  background: var(--cream);
  border-left: 4px solid var(--gold-500);
}
.give-summary__text { flex: 1 1 16rem; margin: 0; font-size: var(--text-sm); }
.give-summary__amount {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--navy-800);
}


/* ==========================================================================
   18f. STICKY SUB-NAVIGATION
   In-page navigation for long pages such as Programs. Sticks directly beneath
   the site header, scrolls horizontally on narrow screens, and marks the
   section currently in view.
   ========================================================================== */

:root {
  /* Kept as a token because the programme sections need the same number for
     their scroll-margin — an anchor must not land underneath the bar. */
  --subnav-h: 56px;
}

.subnav {
  position: sticky;
  /* Sits directly under the site header, which is itself sticky. The extra
     pixel accounts for the header's 1px bottom border, which is not part of
     --header-h (a min-height) — without it a hairline of content shows
     through between the two bars while scrolling. */
  top: calc(var(--header-h) + 1px);
  /* Below the header (60) so the header's shadow still reads, above content. */
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(6, 23, 46, 0.04);
}

.subnav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--subnav-h);
}

.subnav__label {
  flex: none;
  display: none;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
@media (min-width: 900px) { .subnav__label { display: block; } }

.subnav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Horizontal scroll rather than wrapping: the bar must stay one row tall,
     or the sticky offset the sections rely on would change as it wraps. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list li { margin: 0; flex: none; }

.subnav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* Comfortable target without making the bar tall. */
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--navy-800);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.subnav__link:hover { background: var(--navy-100); color: var(--navy-700); }
.subnav__link svg { flex: none; opacity: 0.7; }

/* Current section. aria-current carries the meaning; weight and the gold rule
   carry it visually, so it never depends on colour alone. */
.subnav__link[aria-current="location"] {
  color: var(--green-700);
  border-bottom-color: var(--gold-500);
  background: var(--surface-soft);
}
.subnav__link[aria-current="location"] svg { opacity: 1; }

/* Anchors must clear the header and the sub-nav above them. */
.programme-section {
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + var(--space-3));
}

/* The sub-nav is navigation for a page being read on screen; on paper the
   headings do that job. */
@media print { .subnav { display: none; } }

/* ==========================================================================
   19. PRINT — grant panels and boards print these pages
   ========================================================================== */

@media print {
  .site-header, .topbar, .site-footer, .donate-bar, .mobile-nav, .appeal,
  .cta-band, .nav-toggle, .breadcrumbs { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .page-hero { min-height: auto; background: #fff; color: #000; }
  .hero__media, .page-hero__media { display: none; }
  .hero h1, .page-hero h1, .hero__text, .page-hero p { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .card, .give-card { break-inside: avoid; border: 1px solid #999; }
  .section { padding-block: 1rem; }
}