/* ============================================================
   assets/css/style.css
   Mafaza Nonprofit CMS — public stylesheet

   NAMING METHODOLOGY
   Component-oriented BEM, applied consistently:

     section-name                  section root — unique per section
     section-name__element         a part of that section
     section-name__element--variant
     is-state                      state (is-active, is-open, is-closed)
     js-behaviour                  JavaScript hook, never styled

   Every section on every page has its OWN root class. There is no
   shared .page-section, because inspecting one in DevTools has to tell
   you which section you are looking at without counting siblings.

   Shared vertical rhythm is applied by listing the section roots
   explicitly (see "Section rhythm" below) rather than by adding a
   generic class to all of them.

   COLOUR
   Brand colours come from the theme engine (includes/theme.php), which
   emits --brand-* per site. Everything else derives from those.
   ============================================================ */

/* ---------- Design tokens ------------------------------------ */
:root {
  --brand-primary:      #14663f;
  --brand-primary-deep: #0a3a24;
  --brand-primary-mid:  #105232;
  --brand-primary-tint: #eaf2ee;

  /* Marks anything verified or officially registered. The only
     decorative colour on the site, used sparingly. */
  --verification-mark: #a07a1f;
  --verification-tint: #faf5e8;

  --ink-strong: #14211d;
  --ink-body:   #3d4a45;
  --ink-quiet:  #6b7873;

  --surface-page:   #ffffff;
  --surface-sunken: #f4f8f6;
  --surface-deep:   #0a3a24;
  --surface-deep-2: #0f4e30;

  /* v85: text and marks on the deep (secondary-colour) surfaces, and the
     accent highlight. All re-derived by includes/theme.php from the
     owner's three colours; these are the green preset's values. */
  --on-deep-soft:   #d8dfdc;
  --on-deep-muted:  #b6c4bd;
  --accent-on-deep: #d3b350;
  --brand-highlight:       #c9a227;
  --brand-highlight-hover: #cfad41;
  --on-highlight:          #14211d;

  --rule-line:        #e5eeea;
  --rule-line-strong: #cbddd5;

  /* Cairo for headings — its Arabic counters stay even at display
     sizes, where Readex Pro started to look loose. */
  --type-display: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
  --type-body:    "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;

  --page-max-width: 1200px;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);

  --radius-soft:  6px;

  /* ONE shape for every uploaded cover photo — news, programs,
     courses, events — in every place it appears: card, rail tile,
     mega-menu panel and detail plate. The same photo used to be
     cropped 16:10 on a card, 5:2 on the detail page and 4:3 on a
     phone, so a face near the top survived on the homepage and was
     cut off on the detail page, with nothing in the admin to warn
     the editor. 16:9 is also what a photographer delivers by
     default, so "ارفع صورة ٨٠٠ × ٤٥٠" is now one rule the
     association can actually follow. */
  --media-ratio: 16 / 9;

  /* Page-heading bands. One top value for every page so a list page, a
     news article and a program detail all start at the same height.
     Detail pages need the deeper bottom: the media plate overlaps up
     into the band. */
  --page-head-top:    clamp(1.75rem, 3.5vw, 2.5rem);
  --page-head-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
  --detail-head-bottom: clamp(5.5rem, 9vw, 7rem);
  --radius-panel: 14px;

  /* Overridden inline per site. The fallback matters: without it a
     site that never set a scrim renders an unreadable headline over a
     bright photograph. */
  --hero-scrim-opacity: .72;

  /* Overridden per site from the "ارتفاع الشعار" setting. */
  --brand-logo-height: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--type-body);
  line-height: 1.85;
  color: var(--ink-body);
  background: var(--surface-page);
}

h1, h2, h3, h4 {
  font-family: var(--type-display);
  color: var(--ink-strong);
  line-height: 1.4;
  font-weight: 600;
  margin: 0;
}

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

/* Layout width utility. Named for exactly what it does. */
.page-width { width: min(var(--page-max-width), 100% - (var(--page-gutter) * 2)); margin-inline: auto; }

/* ---------- Section rhythm ------------------------------------
   Listed explicitly so every section keeps its own identifiable root
   class. Adding a section means adding it here — one line, and the
   trade is that DevTools always names the section you clicked.
   ------------------------------------------------------------- */
.about-section,
.statistics-section,
.programs-section,
.reports-section,
.news-section,
.board-section,
.objectives-section,
.structure-section,
.documents-section,
.complaints-section,
.principles-section,
.values-section,
.governance-link-section,
.programs-index-section,
.program-detail-section,
.impact-ledger-section,
.donation-channels-section,
.volunteer-mechanism-section,
.volunteer-opportunities-section,
.news-list-section,
.news-post-section,
.contact-section,
.location-map-section,
.legal-content-section,
.not-found-section,
.elections-list-section,
.election-detail-section,
.empty-governance-section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* Background variants. Inner pages pin the tint to their own sections;
   the homepage uses .is-tinted, handed out in render order by
   npo_home_surface(), so alternation survives a hidden section. */
.values-section,
.documents-section,
.objectives-section,
.volunteer-mechanism-section,
.location-map-section,
.is-tinted { background: var(--surface-sunken); }

.statistics-section { background: var(--surface-deep); color: var(--on-deep-soft); }
.statistics-section .section-header__title { color: #fff; }
.statistics-section .section-header__note { color: var(--on-deep-muted); }
.statistics-section .section-header__link { color: #fff; }

/* ---------- Accessibility floor ------------------------------ */
.skip-to-content {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
  background: var(--brand-primary); color: #fff;
  padding: .8rem 1.4rem; border-end-end-radius: var(--radius-panel);
}
.skip-to-content:focus { inset-inline-start: 0; }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--verification-mark);
  outline-offset: 3px;
}

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

/* ---------- Action button (component) ------------------------- */
.action-button {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.9rem; border-radius: 100px;
  font-family: var(--type-body); font-size: 1rem; font-weight: 500;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
}
.action-button--primary { background: var(--brand-primary); color: #fff; }
.action-button--primary:hover { background: var(--brand-primary-deep); color: #fff; }
.action-button--on-dark { background: var(--brand-highlight); color: var(--on-highlight); }
.action-button--on-dark:hover { background: var(--brand-highlight-hover); color: var(--on-highlight); }
.action-button--outline-light { border-color: rgb(255 255 255 / .5); color: #fff; }
.action-button--outline-light:hover { border-color: #fff; background: rgb(255 255 255 / .1); }
.action-button--outline { border-color: var(--rule-line-strong); color: var(--ink-strong); }
.action-button--outline:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
/* Microsoft Teams purple — online-attendance link on training pages.
   White on #5B5FC7 is 5.4:1 (AA). */
.action-button--teams { background: #5b5fc7; border-color: #5b5fc7; color: #fff; }
.action-button--teams:hover { background: #4b4fb0; border-color: #4b4fb0; color: #fff; }
.action-button--full-width { display: flex; justify-content: center; width: 100%; }

/* ---------- Section header (component) ------------------------ */
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-block-end: 2.25rem;
}
.section-header__text { min-width: 0; }
.section-header__title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 500; }
.section-header__note { font-size: .95rem; color: var(--ink-quiet); margin: .4rem 0 0; max-width: 54ch; }
.section-header__link { font-size: .95rem; text-decoration: none; font-weight: 500; white-space: nowrap; }
.section-header__link:hover { text-decoration: underline; }

/* ---------- Shared text blocks -------------------------------- */
.readable-prose { max-width: 68ch; }
.readable-prose p { margin: 0 0 1.15rem; }
.readable-prose h2, .readable-prose h3 { margin-block: 1.8em .6em; }
.readable-prose ul, .readable-prose ol { padding-inline-start: 1.4rem; }

.empty-state {
  border: 1px dashed var(--rule-line-strong); border-radius: var(--radius-panel);
  padding: 2.5rem 1.5rem; text-align: center;
  color: var(--ink-quiet); background: var(--surface-sunken);
}

.section-footer-link { margin-block-start: 1.75rem; }
.section-footer-link a { font-weight: 500; text-decoration: none; }
.section-footer-link a:hover { text-decoration: underline; }

.status-badge {
  display: inline-block; padding: .18rem .7rem; border-radius: 100px;
  font-size: .78rem; background: var(--surface-sunken); color: var(--ink-quiet);
}

/* ---------- Site header --------------------------------------- */
.site-header {
  background: var(--surface-page);
  border-block-end: 1px solid var(--rule-line);
  position: sticky; top: 0; z-index: 60;
}
/* Tall enough that a 56px logo is not touching the rule underneath. */
.site-header__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: calc(var(--brand-logo-height, 56px) + 38px);
}

/* min-width:0 so a long association name shrinks instead of pushing the
   menu button onto its own row on a phone. */
/* flex: 0 1 auto — take the width of the name and no more. It used to
   be 1 1 auto, so the brand GREW to fill every spare pixel and shoved
   the nav against the far end of the bar; with a short menu that left a
   wide gap after the logo and the links stranded on the left. The
   growing is what pushed them, not the nav's own margins. min-width:0
   is kept so a long name still shrinks on a phone instead of forcing
   the menu button onto its own row. */
.site-brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit; flex: 0 1 auto; min-width: 0; }
/* Height-constrained, width free.
   The logo used to be locked in a 46x46 square with object-fit:contain,
   which is why a wide or detailed mark shrank to a stamp beside a much
   larger association name — the box, not the position, was the problem.
   The height is a setting (الشعار -> ارتفاع الشعار) because logo shapes
   differ so much between associations that no single value is right. */
.site-brand__logo {
  height: var(--brand-logo-height, 56px);
  width: auto; max-width: 320px; object-fit: contain;
}
.site-brand__emblem {
  width: var(--brand-logo-height, 56px); height: var(--brand-logo-height, 56px);
  border-radius: 50%;
  background: var(--brand-primary); color: #fff;
  display: grid; place-items: center;
  font-family: var(--type-display); font-size: 1.2rem; font-weight: 600;
}
.site-brand__name {
  font-family: var(--type-display); font-size: 1.1rem; font-weight: 500;
  color: var(--ink-strong); line-height: 1.35;
  /* Shrinkable: with the default min-width:auto the name refuses to go
     below its content width, so on a phone it pushed the menu button
     onto a row of its own. */
  min-width: 0;
}
.site-brand__descriptor {
  display: block; font-family: var(--type-body);
  font-size: .74rem; color: var(--ink-quiet); font-weight: 400;
}

/* The links begin right after the association name and any spare width
   collects at the END of the bar (the left, in Arabic). It used to be
   margin-inline-start:auto, which pinned the whole group to that far
   end — invisible with a full menu because the items filled the bar,
   but as soon as the owner switched a few sections off the remaining
   links stayed stranded at the left with a gap after the logo.
   The تبرع button travels with the links rather than staying pinned. */
/* The nav fills the rest of the bar so the spare width lives INSIDE
   the list, where the tail items can push against it. */
.site-navigation { margin-inline-start: clamp(1rem, 3vw, 2.5rem); flex: 1 1 auto; min-width: 0; }
.site-navigation__list { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; width: 100%; }

/* Links sit next to the association name; the language toggle and the
   تبرع button stay where they have always been, at the far end of the
   bar. The auto margin goes on the FIRST tail item and is cancelled on
   any that follow, so the pair stays together whether English is on or
   off, and whether or not the donation module is enabled. */
.site-navigation__tail { margin-inline-start: auto; }
.site-navigation__tail + .site-navigation__tail { margin-inline-start: 0; }
.site-navigation__item { position: relative; }
.site-navigation__link {
  /* nowrap: without it a two-word label breaks across two lines INSIDE
     its own link as soon as the bar is tight, which is what made the
     header look ragged once the nav grew past six items. Let the row
     run out of room instead — the breakpoint below then switches to
     the menu button. */
  white-space: nowrap;
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem .85rem; font-size: .96rem;
  text-decoration: none; color: var(--ink-body);
  border-radius: var(--radius-soft);
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.site-navigation__link:hover { background: var(--surface-sunken); color: var(--ink-strong); }
.site-navigation__link.is-current { color: var(--brand-primary); font-weight: 500; }
.site-navigation__link--donate { background: var(--brand-primary); color: #fff; padding-inline: 1.3rem; border-radius: 100px; }
.site-navigation__link--donate:hover { background: var(--brand-primary-deep); color: #fff; }
.site-navigation__disclosure-arrow { font-size: .65rem; transition: transform .18s ease; }
.site-navigation__link[aria-expanded="true"] .site-navigation__disclosure-arrow { transform: rotate(180deg); }

.site-navigation__toggle {
  display: none; margin-inline-start: auto; flex: 0 0 auto;
  background: none; border: 1px solid var(--rule-line-strong);
  border-radius: var(--radius-soft); padding: .55rem .7rem; cursor: pointer;
}
.site-navigation__toggle-bar { display: block; width: 20px; height: 2px; background: var(--ink-strong); margin: 4px 0; }

/* ---------- HERO SECTION -------------------------------------- */
.hero-section {
  position: relative;
  background: linear-gradient(160deg, var(--surface-deep) 0%, var(--surface-deep-2) 100%);
  color: #fff; overflow: hidden;
  padding-block: clamp(1.5rem, 2.5vw, 2.25rem);
  /* Fill what is left of the first screen after the sticky header, so
     the credentials strip lands above the fold instead of below it.
     dvh (not vh) so mobile browser chrome does not push it off. */
  min-height: calc(100dvh - 7rem);
  /* border-box, or the padding above is ADDED to min-height and the
     credentials strip lands below the fold again. */
  box-sizing: border-box;
  display: flex; align-items: stretch;
}

/* The decorative pattern layer over the hero background. The tile,
   colour, size, repeat and opacity all come from نقشة الواجهة in
   الألوان والمظهر, handed over as inline custom properties by
   hero_pattern_config(). There is deliberately NO hardcoded pattern
   here: one used to be pinned to pattern mode, which meant the admin's
   own choice in the theme screen changed nothing on screen. */
.hero-section__pattern {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--pattern-image);
  background-size: var(--pattern-size);
  background-repeat: var(--pattern-repeat);
  opacity: var(--pattern-opacity);
}

.hero-section__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-section__media-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease-in-out; }
.hero-section__media-frame.is-active { opacity: 1; }
.hero-section__media-frame > img,
.hero-section__media > video { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-section__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(160deg,
    rgb(10 58 36 / var(--hero-scrim-opacity)) 0%,
    rgb(16 82 50 / calc(var(--hero-scrim-opacity) * .92)) 55%,
    rgb(20 102 63 / calc(var(--hero-scrim-opacity) * .82)) 100%);
}

/* NOTE: no width here. This element also carries .page-width, and a
   width:100% declared later in the file silently cancelled it — which
   is why the headline and the credentials strip ran to the browser
   edge while the header above them stayed inside the grid. */
.hero-section__content {
  position: relative; z-index: 2;
  /* Stretch to the hero's full height so the credentials strip can be
     pushed to the bottom edge with margin-auto, while the headline and
     portrait stay optically centred above it. */
  display: flex; flex-direction: column; justify-content: center;
}
.hero-section__layout {
  margin-block: auto;
  margin-block-end: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 6vw, 5rem);
  /* Option B: the portrait column stretches to the height of the text
     column, so its top edge lines up with the eyebrow pill and its
     bottom edge with the action buttons. */
  align-items: stretch;
}
/* With background media the arch portrait is redundant. */
.hero-section:not([data-media-mode="pattern"]) .hero-section__layout { grid-template-columns: minmax(0, 1fr); }
.hero-section:not([data-media-mode="pattern"]) .hero-section__portrait { display: none; }
.hero-section:not([data-media-mode="pattern"]) .hero-section__headline { max-width: 20ch; }

.hero-section__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .87rem; color: var(--accent-on-deep);
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 100px; padding: .35rem .95rem; margin-block-end: 1.5rem;
}
.hero-section__headline {
  color: #fff; font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-weight: 700; line-height: 1.3;
  margin-block-end: 1.1rem; max-width: 18ch;
}
.hero-section__summary {
  font-size: clamp(1.02rem, 1.9vw, 1.2rem);
  color: var(--on-deep-soft); max-width: 46ch; margin: 0 0 1.75rem;
}
.hero-section__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero-section__portrait {
  /* No frame: no arch, no border, no crop. The image shows at its own
     proportions on the hero background. */
  position: relative; width: 100%; min-height: 0;
  margin: 0; display: flex;
}
.hero-section__portrait-image {
  width: 100%; height: 100%;
  /* cover, not contain: matching both edges of the text column means
     the crop has to give somewhere. */
  object-fit: cover; object-position: center top;
  border-radius: var(--radius-panel);
  box-shadow: 0 20px 48px rgb(0 0 0 / .24);
}

.hero-section__credentials {
  position: relative; z-index: 2;
  border-block-start: 1px solid rgb(255 255 255 / .18);
  margin-block-start: auto;
  padding-block-start: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .6rem 2.5rem;
  font-size: .9rem; color: var(--on-deep-muted);
}
.hero-section__credential { display: inline-flex; align-items: center; gap: .5rem; }
.hero-section__credential-value { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Hero slider (component) --------------------------- */
.hero-slider-controls {
  position: absolute; inset-block-end: 1.5rem; inset-inline-start: 50%;
  transform: translateX(50%);
  display: flex; align-items: center; gap: .55rem; z-index: 3;
}
.hero-slider-controls__dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .75); background: transparent; cursor: pointer;
}
.hero-slider-controls__dot.is-current { background: #fff; }
.hero-slider-controls__playback {
  margin-inline-start: .5rem; background: rgb(0 0 0 / .3);
  border: 1px solid rgb(255 255 255 / .4); color: #fff;
  border-radius: 100px; font: inherit; font-size: .78rem;
  padding: .2rem .7rem; cursor: pointer;
}

/* ---------- ABOUT SECTION (homepage) -------------------------- */
.about-section__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.about-section__figure { position: relative; margin: 0; }
.about-section__image { width: 100%; border-radius: var(--radius-panel); aspect-ratio: 4 / 3; object-fit: cover; }
.about-section__text { font-size: 1.03rem; }

.founding-badge {
  position: absolute; inset-block-start: 1.5rem; inset-inline-start: 1.5rem;
  background: var(--brand-primary); color: #fff;
  border-radius: var(--radius-panel); padding: 1rem 1.4rem;
  text-align: center; line-height: 1.4;
}
.founding-badge__label { display: block; font-size: .85rem; opacity: .85; }
.founding-badge__value {
  display: block; font-family: var(--type-display);
  font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

.quick-link-list { list-style: none; margin: 1.75rem 0 2rem; padding: 0; display: grid; gap: .1rem; }
.quick-link-list__link {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem .25rem; text-decoration: none;
  color: var(--brand-primary); font-weight: 500; font-size: .97rem;
  border-block-end: 1px solid var(--rule-line);
}
.quick-link-list__link:hover { color: var(--brand-primary-deep); }
.quick-link-list__link:hover .quick-link-list__icon { background: var(--brand-primary); color: #fff; }
.quick-link-list__icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  background: var(--brand-primary-tint); color: var(--brand-primary);
  display: grid; place-items: center;
}
.quick-link-list__icon svg { width: 18px; height: 18px; }

/* ---------- STATISTICS SECTION -------------------------------- */
.statistics-section__list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1px; background: rgb(255 255 255 / .13);
  border: 1px solid rgb(255 255 255 / .13);
  border-radius: var(--radius-panel); overflow: hidden;
}
.statistics-card {
  background: var(--surface-deep);
  padding: clamp(1.5rem, 3.5vw, 2.4rem) 1.25rem;
  text-align: center; display: grid; gap: .4rem; justify-items: center;
}
.statistics-card__figure {
  font-family: var(--type-display);
  font-size: clamp(2.1rem, 5vw, 3rem);
  font-weight: 600; color: var(--accent-on-deep); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.statistics-card__icon { font-size: 1.5rem; color: var(--accent-on-deep); margin-block-end: .2rem; }
.statistics-card__label { font-size: .95rem; color: var(--on-deep-soft); }

/* ---------- PROGRAM CARD (component) -------------------------- */
.program-card-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.5rem;
}
.program-card {
  display: grid; text-decoration: none; color: inherit;
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); overflow: hidden; height: 100%;
}
.program-card:hover { border-color: var(--brand-primary); }
.program-card__image { width: 100%; aspect-ratio: var(--media-ratio); object-fit: cover; }
.program-card__body { padding: 1.25rem 1.35rem 1.6rem; display: grid; gap: .55rem; align-content: start; }
.program-card__status {
  justify-self: start; font-size: .76rem; padding: .2rem .75rem;
  border-radius: 100px; background: var(--brand-primary-tint); color: var(--brand-primary-deep);
}
/* The brass mark reads at 3.6:1 on its own tint — fine for a border or
   an icon, under the floor for 12px text. Darkened for this badge only. */
.program-card__status--planned { background: var(--verification-tint); color: #6d5314; }
.program-card__status--completed { background: #eceff1; color: #55606b; }
.program-card__status--upcoming { background: var(--verification-tint); color: #6d5314; }

/* Finished programmes read as archive rather than as current work: the
   photograph goes grey and the text steps back a little. Colour comes
   back on hover, so the card still feels clickable and the visitor can
   see the photograph properly when they reach for it. The badge keeps
   its own colour — the state must stay readable, not just implied. */
.program-card--completed .program-card__image {
  filter: grayscale(1);
  opacity: .78;
  transition: filter .35s ease, opacity .35s ease;
}
.program-card--completed:hover .program-card__image,
.program-card--completed:focus-visible .program-card__image {
  filter: grayscale(0);
  opacity: 1;
}
.program-card--completed .program-card__title { color: var(--ink-body); }
.program-card--completed:hover .program-card__title { color: var(--brand-primary); }
@media (prefers-reduced-motion: reduce) {
  .program-card--completed .program-card__image { transition: none; }
}
.program-card__status--closed { background: #eceff1; color: #55606b; }
.program-card__title { font-size: 1.15rem; font-weight: 500; }
.program-card:hover .program-card__title { color: var(--brand-primary); }
.program-card__summary { margin: 0; font-size: .95rem; }
.program-card__facts { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; font-size: .85rem; color: var(--ink-quiet); margin: 0; }

/* ---------- NEWS CARD (component) ----------------------------- */
.news-card-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.75rem;
}
.news-card { text-decoration: none; color: inherit; display: grid; gap: .7rem; }
.news-card__image { border-radius: var(--radius-panel); aspect-ratio: var(--media-ratio); object-fit: cover; width: 100%; }
.news-card__date { font-size: .84rem; color: var(--ink-quiet); font-variant-numeric: tabular-nums; }
.news-card__title { font-size: 1.1rem; font-weight: 500; }
.news-card:hover .news-card__title { color: var(--brand-primary); }
.news-card__summary { margin: 0; font-size: .94rem; }

/* ---------- DOCUMENT CARD (component) ------------------------- */
.document-card-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: .75rem;
}
.document-card {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem;
  border: 1px solid var(--rule-line); border-radius: var(--radius-panel);
  text-decoration: none; color: inherit; background: var(--surface-page);
}
.document-card:hover { border-color: var(--brand-primary); }
.document-card__format-tag {
  flex: 0 0 auto; font-size: .68rem; font-weight: 700;
  color: var(--brand-primary); background: var(--brand-primary-tint);
  border-radius: var(--radius-soft); padding: .4rem .55rem;
}
.document-card__text { display: grid; gap: .15rem; min-width: 0; }
.document-card__title { font-weight: 600; color: var(--ink-strong); font-size: .95rem; }
.document-card__description { font-size: .88rem; color: var(--ink-body); }
.document-card__meta { font-size: .81rem; color: var(--ink-quiet); }

.document-group { margin-block-end: 2.25rem; }
.document-group__heading {
  font-family: var(--type-body); font-size: .95rem; font-weight: 600;
  color: var(--ink-quiet); margin-block-end: .75rem; font-variant-numeric: tabular-nums;
}

/* ---------- YEAR FILTER (governance documents, v79) ---------- */
/* «كل السنوات · 2026 · 2025 · 2024 · أقدم» — plain links, one active. */
.year-filter { margin-block-end: 1.75rem; }
.year-filter__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.year-filter__chip {
  display: inline-block; padding: .45rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--rule-line); background: var(--surface-page);
  color: var(--ink-strong); text-decoration: none; font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
.year-filter__chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.year-filter__chip:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
.year-filter__chip.is-active,
.year-filter__chip.is-active:hover {
  background: var(--brand-primary); border-color: var(--brand-primary); color: #fff;
}

/* ---------- YEAR FOLDERS (governance documents, v76) ---------- */
/* Yearly sections (financial statements, annual reports, minutes):
   one <details> per year, newest open, older years in one archive. */
.year-folder-list { display: grid; gap: .6rem; }
.year-folder {
  border: 1px solid var(--rule-line); border-radius: var(--radius-panel);
  background: var(--surface-page);
}
.year-folder__summary {
  display: flex; align-items: center; gap: .65rem;
  padding: .9rem 1.1rem; cursor: pointer; list-style: none;
  font-variant-numeric: tabular-nums;
}
.year-folder__summary::-webkit-details-marker { display: none; }
.year-folder__summary:hover .year-folder__year { color: var(--brand-primary); }
.year-folder__summary:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; border-radius: var(--radius-panel); }
.year-folder__icon { font-size: 1.15rem; color: var(--ink-quiet); flex: 0 0 auto; }
.year-folder__icon--open { display: none; }
.year-folder[open] > .year-folder__summary .year-folder__icon--open { display: inline-block; color: var(--brand-primary); }
.year-folder[open] > .year-folder__summary .year-folder__icon--closed { display: none; }
.year-folder__year { font-weight: 600; color: var(--ink-strong); }
.year-folder__range,
.year-folder__count { font-size: .88rem; color: var(--ink-quiet); }
.year-folder__chevron { margin-inline-start: auto; font-size: .8rem; color: var(--ink-quiet); transition: transform .2s ease; }
.year-folder[open] > .year-folder__summary .year-folder__chevron { transform: rotate(180deg); }
.year-folder[open] > .year-folder__summary { border-block-end: 1px solid var(--rule-line); }
.year-folder__body { padding: 1rem 1.1rem 1.1rem; }
.year-folder--archive { border-style: dashed; background: transparent; }
.year-folder__subheading,
.document-group__subheading {
  font-family: var(--type-body); font-size: .9rem; font-weight: 600;
  color: var(--ink-quiet); margin: 1.25rem 0 .6rem; font-variant-numeric: tabular-nums;
}
.year-folder__body > .year-folder__subheading:first-child { margin-block-start: 0; }
@media (prefers-reduced-motion: reduce) { .year-folder__chevron { transition: none; } }

/* ---------- PAGE HEADER (inner pages) ------------------------- */
/* Inner pages get a header, not a hero. It states where you are. */
.page-header {
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  background: var(--surface-sunken);
  border-block-end: 1px solid var(--rule-line);
}
.page-header__title { font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 500; margin-block-end: .75rem; }
.page-header__summary { font-size: 1.05rem; max-width: 62ch; margin: 0; }
.page-header__meta { font-size: .9rem; color: var(--ink-quiet); margin: 0 0 .5rem; font-variant-numeric: tabular-nums; }

/* In-page contents. On a long governance page this is the difference
   between findable and buried. */
.page-header__jump-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1.75rem; padding: 0; list-style: none; }
.page-header__jump-link {
  display: inline-block; padding: .4rem .95rem;
  border: 1px solid var(--rule-line-strong); border-radius: 100px;
  background: var(--surface-page); font-size: .88rem;
  text-decoration: none; color: var(--ink-body);
}
.page-header__jump-link:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* ---------- FILTER PILLS (component) -------------------------- */
.filter-pill-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 2rem; padding: 0; list-style: none; }
.filter-pill-list__link {
  display: inline-block; padding: .4rem 1.1rem;
  border: 1px solid var(--rule-line-strong); border-radius: 100px;
  text-decoration: none; font-size: .92rem; color: var(--ink-body);
}
.filter-pill-list__link:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.filter-pill-list__link.is-current { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* ---------- PRINCIPLES SECTION -------------------------------- */
.principle-card-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem;
}
.principle-card {
  padding: 2rem 1.75rem; background: var(--surface-page);
  border: 1px solid var(--rule-line); border-radius: var(--radius-panel);
  border-block-start: 3px solid var(--brand-primary);
}
.principle-card__title { font-size: 1.15rem; color: var(--brand-primary); margin: 0 0 .6rem; }
.principle-card__text { margin: 0; }
.principle-card__text { margin: 0; font-size: .97rem; }

/* ---------- BOARD SECTION ------------------------------------- */
/* A roster, not a photo gallery: seat, name, term. Photos are optional
   and the layout must not look broken when a board supplies none. */
.board-section__term-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: .9rem 1.15rem; background: var(--verification-tint);
  border: 1px solid rgb(160 122 31 / .3); border-radius: var(--radius-panel);
  margin-block-end: 1.75rem; font-size: .93rem;
}
.board-section__term-label { font-weight: 600; color: var(--ink-strong); }
.board-section__roster { list-style: none; margin: 0; padding: 0; display: grid; }

.board-member {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 12rem);
  gap: clamp(1rem, 3vw, 2rem); align-items: center;
  padding-block: 1.25rem; border-block-end: 1px solid var(--rule-line);
}
.board-member:first-child { border-block-start: 1px solid var(--rule-line); }
.board-member__portrait { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; background: var(--brand-primary-tint); }
.board-member__portrait--placeholder {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--brand-primary-tint); color: var(--brand-primary-deep);
  display: grid; place-items: center;
  font-family: var(--type-display); font-size: 1.4rem;
}
.board-member__identity { display: grid; gap: .2rem; }
.board-member__name { font-size: 1.1rem; font-weight: 500; }
.board-member__seat { color: var(--brand-primary); font-size: .93rem; font-weight: 500; }
.board-member__biography { margin: .35rem 0 0; font-size: .9rem; color: var(--ink-quiet); max-width: 62ch; }
.board-member__term { font-size: .87rem; color: var(--ink-quiet); font-variant-numeric: tabular-nums; }

.committee-group { margin-block-start: 2.5rem; }
.committee-group__name { font-size: 1.05rem; margin-block-end: .6rem; }
.committee-group__member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .95rem; }
.committee-group__member { padding-block: .4rem; border-block-end: 1px dashed var(--rule-line); }
.committee-group__seat { color: var(--ink-quiet); }

/* ---------- OBJECTIVES SECTION -------------------------------- */
/* Numbered because an operational plan genuinely is an enumerated
   list — not because numbering looks tidy. */
.objective-list { list-style: none; margin: 0; padding: 0; counter-reset: objective; display: grid; }
.objective-list__item {
  counter-increment: objective; display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem;
  align-items: baseline; padding-block: 1rem; border-block-end: 1px solid var(--rule-line);
}
.objective-list__item::before {
  content: counter(objective, arabic-indic);
  font-family: var(--type-display); font-size: 1.3rem;
  color: var(--verification-mark); font-variant-numeric: tabular-nums;
}

/* ---------- STRUCTURE SECTION --------------------------------- */
.organizational-chart { margin: 0; }
.organizational-chart__image {
  width: 100%; border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); background: var(--surface-page);
}
.organizational-chart__caption { font-size: .87rem; color: var(--ink-quiet); margin-block-start: .75rem; }

/* ---------- IMPACT LEDGER SECTION -----------------------------
   An achievements board: equal plaques, three per row, each with a
   brand-coloured top edge. Figure and unit lead; the label names the
   البيان; the source document, where the admin attached one, is a
   quiet link at the foot of the plaque. */
.impact-ledger {
  display: grid; gap: clamp(.7rem, 1.6vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.impact-ledger__row {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .35rem;
  background: var(--brand-primary-tint);
  border-block-start: 3px solid var(--brand-primary);
  border-radius: var(--radius-soft);
  padding: clamp(1.35rem, 3vw, 1.9rem) 1.1rem clamp(1.1rem, 2.4vw, 1.5rem);
}
.impact-ledger__icon { font-size: 1.6rem; color: var(--brand-primary); margin-block-end: .35rem; }
.impact-ledger__figure {
  font-family: var(--type-display); font-size: clamp(2.1rem, 4.8vw, 3rem);
  font-weight: 500; color: var(--brand-primary-deep); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.impact-ledger__unit {
  display: block; font-family: var(--type-body); font-size: .82rem;
  font-weight: 400; color: var(--brand-primary); margin-block-start: .4rem;
}
.impact-ledger__description { margin: 0; }
.impact-ledger__label { font-weight: 600; color: var(--ink-strong); display: block; }
.impact-ledger__citation {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem;
  color: var(--ink-quiet); text-decoration: none;
  border: 1px solid var(--rule-line); border-radius: 100px;
  padding: .3rem .75rem; margin-block-start: .5rem;
  background: var(--surface-page);
  max-width: 100%;
}
.impact-ledger__citation:hover { border-color: var(--verification-mark); color: var(--verification-mark); background: var(--verification-tint); }

/* ---------- PROGRAM DETAIL SECTION ---------------------------- */
.detail-hero-image { width: 100%; max-height: 460px; object-fit: cover; }
.program-detail-section__layout,
.news-post-section__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); }

.detail-sidebar {
  align-self: start; padding: 1.75rem;
  background: var(--surface-sunken); border-radius: var(--radius-panel);
}
.detail-sidebar__heading { font-size: 1.02rem; margin: 0 0 1rem; }
.detail-sidebar__fact-list { margin: 0; display: grid; gap: .3rem; }
.detail-sidebar__fact-label { font-size: .82rem; color: var(--ink-quiet); }
.detail-sidebar__fact-value { margin: 0 0 .8rem; font-weight: 600; color: var(--ink-strong); }

/* ---------- DONATION SECTION ---------------------------------- */
.donation-card-list {
  list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.5rem;
}
.donation-card {
  padding: 1.75rem 1.5rem; background: var(--surface-page);
  border: 1px solid var(--rule-line); border-radius: var(--radius-panel); text-align: center;
}
.donation-card__title { margin: 0 0 .75rem; font-size: 1.15rem; }
.donation-card__note { color: var(--ink-quiet); font-size: .93rem; }
.donation-card__qr-image { max-width: 210px; margin-inline: auto; }
.donation-card__bank-details { margin-block-start: 1rem; }
.donation-card__bank-name { font-weight: 600; margin: 0 0 .5rem; }
.donation-card__iban-row { display: flex; gap: .5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
/* An IBAN read right-to-left displays wrong and someone transfers money
   to the wrong account. Always isolate it. */
.donation-card__iban {
  direction: ltr; unicode-bidi: isolate;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .9rem; padding: .4rem .6rem;
  background: var(--surface-sunken); border-radius: var(--radius-soft);
}
.copy-button {
  font: inherit; font-size: .85rem; cursor: pointer;
  background: var(--surface-page); border: 1px solid var(--rule-line-strong);
  border-radius: 100px; padding: .3rem .9rem;
}
.donation-channels-section__safety-note {
  padding: 1.25rem 1.5rem; background: var(--verification-tint);
  border-inline-start: 4px solid var(--verification-mark);
  border-radius: var(--radius-panel); line-height: 1.85;
}

/* ---------- VOLUNTEER SECTION --------------------------------- */
.volunteer-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.volunteer-card {
  padding: 1.75rem; background: var(--surface-page);
  border: 1px solid var(--rule-line); border-radius: var(--radius-panel);
}
.volunteer-card.is-closed { opacity: .72; }
.volunteer-card__header { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.volunteer-card__title { margin: 0; font-size: 1.15rem; }
.volunteer-card__description { color: var(--ink-body); }
.volunteer-card__facts { display: flex; flex-wrap: wrap; gap: .35rem 2rem; margin: 1rem 0; }
.volunteer-card__fact-label { font-size: .82rem; color: var(--ink-quiet); }
.volunteer-card__fact-value { margin: 0 0 0 .5rem; font-weight: 600; }
.volunteer-card__requirements summary { cursor: pointer; font-weight: 600; padding-block: .5rem; }
.volunteer-card__actions { margin-block-start: 1.25rem; }

/* ---------- CONTACT SECTION ----------------------------------- */
.contact-section__layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 3.5rem); }
.contact-section__sidebar { background: var(--surface-sunken); padding: 1.75rem; border-radius: var(--radius-panel); align-self: start; }
.contact-section__detail-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .85rem; }
.contact-section__detail-label { display: block; font-size: .8rem; color: var(--ink-quiet); }
.location-map-section__embed { width: 100%; min-height: 380px; border: 0; border-radius: var(--radius-panel); }

/* ---------- FORM (component) ---------------------------------- */
.form-field__label { display: block; margin-block-end: 1rem; font-weight: 600; font-size: .93rem; }
.form-field__input, .form-field__textarea, .form-field__select {
  width: 100%; padding: .7rem .85rem; font: inherit; font-weight: 400;
  border: 1px solid var(--rule-line-strong); border-radius: var(--radius-soft);
  background: var(--surface-page);
}
.form-field__textarea { resize: vertical; }
.form-field__hint { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-quiet); }
.form-field__required-marker { color: #b3261e; }
.form-field-pair { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.form-consent { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .93rem; }
.form-consent__checkbox { width: auto; margin-block-start: .4rem; }
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.form-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-actions { margin-block-start: 1.5rem; }

.notification { padding: 1rem 1.25rem; border-radius: var(--radius-panel); margin-block-end: 1.25rem; }
.notification--error { background: #fdecea; color: #8d1d16; }
.notification--success { background: var(--brand-primary-tint); color: var(--brand-primary-deep); }
.notification--warning { background: var(--verification-tint); color: #7a5600; }
.notification--info { background: #eaf1fb; color: #1c4587; }

/* ---------- NOT FOUND SECTION --------------------------------- */
.not-found-section { text-align: center; }
.not-found-section__summary { margin-inline: auto; }

/* ---------- SITE FOOTER --------------------------------------- */
/* Footer follows الألوان والمظهر: the theme's deep brand tone (the same
   one the page headers use). Text is white at set strengths so it
   reads on any theme colour, not only on green. */
.site-footer { background: var(--surface-deep); color: rgb(255 255 255 / .86); padding-block: clamp(2.5rem, 5vw, 3.5rem) 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3rem); padding-block-end: 2.5rem;
}
.site-footer__heading { font-family: var(--type-body); font-size: .84rem; font-weight: 600; color: #fff; margin: 0 0 .9rem; }
.site-footer__about-text { font-size: .93rem; max-width: 44ch; margin: 0 0 1rem; }
.site-footer__link-list, .site-footer__contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.site-footer__social-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; font-size: .9rem; }
.site-footer__registration {
  font-size: .84rem; color: rgb(255 255 255 / .78);
  border: 1px solid rgb(255 255 255 / .2); border-radius: var(--radius-soft);
  padding: .6rem .85rem; display: inline-block; font-variant-numeric: tabular-nums;
}
.site-footer__baseline {
  border-block-start: 1px solid rgb(255 255 255 / .14);
  padding-block: 1.25rem; display: flex; flex-wrap: wrap;
  gap: .5rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: .85rem; color: rgb(255 255 255 / .78);
}

/* ---------- Responsive ---------------------------------------- */
@media (max-width: 980px) {
  .hero-section__layout { grid-template-columns: 1fr; }
  .hero-section__portrait { max-height: 240px; order: -1; max-width: 100%; }
  .hero-section__portrait-image { max-height: 240px; }
  .hero-section { min-height: 0; }
  .about-section__layout,
  .program-detail-section__layout,
  .news-post-section__layout,
  .contact-section__layout { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .board-member { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .board-member__portrait,
  .board-member__portrait--placeholder { width: 3.5rem; height: 3.5rem; font-size: 1.1rem; }
  .board-member__term { grid-column: 2; font-size: .84rem; }
}

/* Menu button at 1100px, not 820px. 820 was right for a six-item nav;
   the bar now carries up to nine items plus the تبرع button, beside an
   association name that may have a tagline under it. Between 820 and
   1100 there was no longer room, and the desktop layout was still in
   force. */
@media (max-width: 1100px) {
  .site-navigation__toggle { display: block; }
  .site-navigation { display: none; width: 100%; padding-block-end: 1rem; margin-inline: 0; }
  .site-navigation.is-open { display: block; }
  .site-header__inner { flex-wrap: wrap; padding-block: .75rem; min-height: 0; gap: .75rem; }
  /* Brand and menu button share the first row; the nav wraps below. */
  .site-brand { max-width: calc(100% - 4rem); }
  .site-navigation__list { flex-direction: column; align-items: stretch; gap: 0; }
  /* In the dropped-down menu everything is a full-width row; an auto
     side margin there would indent the language toggle. */
  .site-navigation__tail { margin-inline-start: 0; }
  .site-navigation__link { padding-block: .8rem; border-block-end: 1px solid var(--rule-line); width: 100%; justify-content: space-between; }
  .site-navigation__link--donate { margin-block-start: .85rem; justify-content: center; }
}

@media (max-width: 620px) {
}

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

@media print {
  .site-header, .site-footer, .site-navigation__toggle,
  .filter-pill-list, .hero-slider-controls { display: none; }
  .hero-section { min-height: 0; background: none; color: #000; }
  .document-card { border: 1px solid #999; }
}

/* ---------- Remaining structural pieces ----------------------- */
/* Named wrappers that carry no visual style of their own but must
   exist so the markup is self-describing in DevTools. */
.site-main { display: block; }
.hero-section__statement { min-width: 0; }
.contact-section__form { min-width: 0; }
.site-footer__column { min-width: 0; }

/* Article wrappers. The section inside them carries the padding. */
.program-detail { display: block; }
.news-post { display: block; }

/* Language class on <body>, for locale-specific overrides. */
.lang-en { --type-display: "Readex Pro", "Segoe UI", system-ui, sans-serif; }

/* ==============================================================
   v5 ADDITIONS
   Mega menu, inner-page heroes, the "من نحن" section pages, the
   redesigned breadcrumb and news block, and the three pieces of
   site furniture (announcement bar, consent notice, WhatsApp).

   Naming follows CSS-NAMING.md: every section owns a root class,
   `is-` marks state, `js-` is never styled.

   ARABIC TYPE RULE: no letter-spacing anywhere in this file. Arabic
   letters join, and spacing them apart breaks the joins — which shows
   up first on narrow screens where the browser is already tight for
   room. If you add a rule below and reach for letter-spacing, use
   font-size or font-weight instead.
   ============================================================== */

/* ---------- ANNOUNCEMENT BAR ---------------------------------- */
.announcement-bar {
  background: var(--brand-primary-deep); color: #fff;
  font-size: .92rem;
}
.announcement-bar--accent { background: var(--verification-mark); }
.announcement-bar--neutral { background: var(--ink-strong); }
.announcement-bar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem 1.25rem; flex-wrap: wrap; padding-block: .7rem; text-align: center;
}
.announcement-bar__text { margin: 0; line-height: 1.6; }
.announcement-bar__action {
  color: #fff; text-decoration: underline; text-underline-offset: .25em;
  font-weight: 600; white-space: nowrap;
}

/* ---------- MEGA MENU ----------------------------------------- */
/* A picture panel plus a column of real destinations. Anchored to the
   header rather than the trigger, so a wide panel cannot push itself
   off the side of a narrow window. */
.site-header { position: sticky; top: 0; z-index: 60; }
.site-navigation__item { position: static; }

.site-navigation__disclosure-arrow { display: inline-flex; width: 14px; height: 14px; }
.site-navigation__disclosure-arrow svg { width: 100%; height: 100%; }
.site-navigation__link[aria-expanded="true"] .site-navigation__disclosure-arrow { transform: rotate(180deg); }
.site-navigation__link--language { border: 1px solid var(--rule-line-strong); }

.mega-menu {
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--surface-page);
  border-block-start: 1px solid var(--rule-line);
  box-shadow: 0 24px 48px rgb(10 58 36 / .13);
  display: none; z-index: 70;
}
.mega-menu.is-open { display: block; }
.mega-menu__inner {
  display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
}

.mega-menu__feature {
  border-radius: var(--radius-panel); overflow: hidden;
  background: var(--surface-sunken); border: 1px solid var(--rule-line);
}
.mega-menu__feature-image { width: 100%; aspect-ratio: var(--media-ratio); object-fit: cover; }
.mega-menu__feature-body { padding: 1rem 1.15rem 1.25rem; }
.mega-menu__feature-title {
  font-family: var(--type-display); font-weight: 600;
  color: var(--ink-strong); margin: 0 0 .35rem; font-size: 1rem;
}
.mega-menu__feature-text { margin: 0 0 .75rem; font-size: .88rem; color: var(--ink-quiet); line-height: 1.7; }
.mega-menu__feature-link { font-size: .9rem; font-weight: 600; color: var(--brand-primary); text-decoration: none; }
.mega-menu__feature-link:hover { text-decoration: underline; }

.mega-menu__list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: .35rem;
}
.mega-menu__list--wide { grid-column: 1 / -1; }
.mega-menu__link {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .8rem .9rem; border-radius: var(--radius-panel);
  text-decoration: none; color: var(--ink-strong);
  border: 1px solid transparent;
}
.mega-menu__link:hover,
.mega-menu__link:focus-visible { background: var(--brand-primary-tint); border-color: var(--brand-primary); }
.mega-menu__link.is-current { background: var(--brand-primary-tint); }
.mega-menu__link-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  background: var(--surface-sunken); color: var(--brand-primary);
  display: grid; place-items: center;
}
.mega-menu__link:hover .mega-menu__link-icon { background: var(--brand-primary); color: #fff; }
.mega-menu__link-icon svg { width: 20px; height: 20px; }
.mega-menu__link-text { display: grid; gap: .15rem; min-width: 0; }
.mega-menu__link-label { font-weight: 600; font-size: .96rem; }
.mega-menu__link-note { font-size: .82rem; color: var(--ink-quiet); line-height: 1.6; }

/* ---------- BREADCRUMB TRAIL ---------------------------------- */
/* Its own quiet band under the header. The old markup referenced class
   names that were never in this file, so it rendered as bare text. */
.breadcrumb-trail {
  background: var(--surface-sunken);
  border-block-end: 1px solid var(--rule-line);
  font-size: .87rem;
}
.breadcrumb-trail__inner { padding-block: .7rem; }
.breadcrumb-trail__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem;
}
.breadcrumb-trail__item { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.breadcrumb-trail__separator { width: 14px; height: 14px; color: var(--rule-line-strong); flex: 0 0 auto; }
[dir="ltr"] .breadcrumb-trail__separator { transform: rotate(180deg); }
.breadcrumb-trail__link {
  display: inline-flex; align-items: center; gap: .35rem;
  /* --ink-quiet on the sunken surface measures 4.1:1, under the 4.5:1
     floor. Body ink clears it and still reads as secondary next to the
     bold current-page label. */
  color: var(--ink-body); text-decoration: none;
  padding: .2rem .1rem; border-radius: var(--radius-soft);
}
.breadcrumb-trail__link:hover { color: var(--brand-primary); }
.breadcrumb-trail__home-icon { width: 15px; height: 15px; }
.breadcrumb-trail__current {
  color: var(--ink-strong); font-weight: 600;
  /* Full title on wide screens; wraps if it is very long. */
}

/* ---------- PAGE HERO (inner pages) --------------------------- */
.page-hero { position: relative; overflow: hidden; }
.page-hero--plain {
  background: var(--surface-deep); color: #fff;
}
/* Same pattern as the hero, from the same setting. */
.page-hero--plain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--pattern-image);
  background-size: var(--pattern-size);
  background-repeat: var(--pattern-repeat);
  opacity: var(--pattern-opacity);
}
.page-hero--photo { color: #fff; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgb(10 58 36 / .88) 0%, rgb(16 82 50 / .78) 100%);
}
.page-hero__inner {
  position: relative; z-index: 2;
  padding-block: var(--page-head-top) var(--page-head-bottom);
}
.page-hero__eyebrow {
  margin: 0 0 .75rem; font-size: .85rem; color: var(--accent-on-deep);
  display: inline-flex; align-items: center; gap: .5rem;
}
.page-hero__eyebrow::after { content: ""; width: 2rem; height: 1px; background: currentColor; }
.page-hero__title {
  color: #fff; margin: 0;
  font-size: clamp(1.7rem, 3.6vw, 2.45rem); font-weight: 700; line-height: 1.3;
}
.page-hero__lead {
  margin: .75rem 0 0; color: var(--on-deep-soft);
  font-size: clamp(.98rem, 1.5vw, 1.05rem); max-width: 58ch; line-height: 1.8;
}
.page-hero__jump-list {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.75rem 0 0; padding: 0; list-style: none;
}
.page-hero__jump-link {
  display: inline-block; padding: .4rem 1rem; border-radius: 100px;
  border: 1px solid rgb(255 255 255 / .4); color: #fff;
  text-decoration: none; font-size: .88rem;
}
.page-hero__jump-link:hover { background: rgb(255 255 255 / .14); }

/* ---------- ABOUT INTRO SECTION ------------------------------- */
.about-intro-section { padding-block: clamp(3rem, 7vw, 5rem); }
.about-intro-section__layout {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.about-intro-section__layout--text-only { grid-template-columns: minmax(0, 1fr); }
.about-intro-section__layout--text-only .about-intro-section__text { max-width: 72ch; margin-inline: auto; }
.about-intro-section__text .readable-prose { max-width: none; }
.about-intro-section__text .section-header__title { margin-block: 0 1rem; }
.about-intro-section__figure { margin: 0; }
.about-intro-section__image {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 200px 200px var(--radius-panel) var(--radius-panel);
}

/* ---------- VALUE CARDS --------------------------------------- */
.value-card-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem;
}
.value-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem .9rem; align-items: center; padding: 1.4rem 1.35rem;
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel);
}
.value-card__index {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand-primary-tint); color: var(--brand-primary-deep);
  display: grid; place-items: center; font-weight: 700;
  font-family: var(--type-display); font-size: .95rem;
}
.value-card__text { font-size: .98rem; }
.value-card__text p { margin: 0; }

.principle-card__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--brand-primary-tint);
  color: var(--brand-primary); margin-block-end: 1rem;
}
.principle-card__icon svg { width: 22px; height: 22px; }

/* ---------- OBJECTIVES GRID ----------------------------------- */
.objectives-grid-section { padding-block: clamp(3rem, 7vw, 5rem); background: var(--surface-sunken); }
.objectives-grid {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem;
  counter-reset: objective;
}
.objective-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem;
  align-items: start; padding: 1.6rem 1.5rem;
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel);
  border-block-start: 3px solid var(--brand-primary);
}
.objective-card__number {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--brand-primary); color: #fff;
  display: grid; place-items: center;
  font-family: var(--type-display); font-weight: 700; font-size: 1.05rem;
}
.objective-card__text { font-size: 1rem; line-height: 1.85; color: var(--ink-body); }
.objective-card__text p { margin: 0; }

/* Hover: a soft brand-tinted spotlight follows the cursor, the edge
   lights up near it, the card tilts toward the pointer, the number
   badge pops, and a large outline numeral drifts in behind the text.
   --mx/--my/--rx/--ry are set by main.js (js-spotlight-card). Without
   JS it falls back to a centred glow; touch and reduced-motion get
   colour only, no movement. */
.objective-card {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  position: relative; isolation: isolate; overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .3s ease;
}
.objective-card::before,
.objective-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .35s ease;
}
.objective-card::before {
  z-index: -1;
  background: radial-gradient(20rem circle at var(--mx) var(--my), var(--brand-primary-tint), transparent 65%);
}
.objective-card::after {
  padding: 1.5px;
  background: radial-gradient(12rem circle at var(--mx) var(--my), var(--brand-primary), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.objective-card__ghost {
  position: absolute; z-index: -1; inset-block-end: -1.4rem; inset-inline-end: .6rem;
  font-family: var(--type-display); font-weight: 800; font-size: 7.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--brand-primary);
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none; user-select: none;
}
.objective-card__number {
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background-color .3s ease, box-shadow .3s ease;
}
.objective-card:hover {
  box-shadow: 0 22px 44px rgb(10 58 36 / .14);
}
.objective-card:hover::before,
.objective-card:hover::after { opacity: 1; }
.objective-card:hover .objective-card__ghost { opacity: .13; transform: translateY(0); }
.objective-card:hover .objective-card__number {
  transform: rotate(-8deg) scale(1.1);
  background: var(--brand-primary-deep);
  box-shadow: 0 8px 18px rgb(10 58 36 / .28);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .objective-card { transform: none; transition: box-shadow .3s ease; }
  .objective-card__ghost { transform: none; transition: opacity .3s ease; }
  .objective-card:hover .objective-card__number { transform: none; }
}

/* ---------- BOARD PAGE ---------------------------------------- */
.board-roster-section { padding-block: clamp(3rem, 7vw, 5rem); }
.board-roster-section__preamble { margin-block-end: 2.5rem; }
.board-roster-section__note {
  margin-block-start: 2rem; font-size: .9rem; color: var(--ink-quiet);
  border-inline-start: 3px solid var(--rule-line-strong); padding-inline-start: 1rem;
}

.term-chip {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.25rem;
  background: var(--verification-tint); color: var(--verification-mark);
  border: 1px solid currentColor; border-radius: 100px;
  padding: .35rem 1rem; font-size: .88rem;
}
.term-chip__value { font-weight: 700; font-variant-numeric: tabular-nums; }

.board-lead {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--surface-deep); color: #fff;
  border-radius: var(--radius-panel); margin-block-end: 2rem;
}
.board-lead__portrait {
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgb(255 255 255 / .3);
}
.board-lead__portrait--placeholder {
  display: grid; place-items: center; background: rgb(255 255 255 / .12);
  font-family: var(--type-display); font-size: 3rem; font-weight: 700; color: #fff;
}
.board-lead__seat { margin: 0 0 .35rem; color: var(--accent-on-deep); font-size: .95rem; }
.board-lead__name { margin: 0; color: #fff; font-size: clamp(1.35rem, 3vw, 1.85rem); }
.board-lead__biography { margin: .85rem 0 0; color: var(--on-deep-soft); font-size: .97rem; max-width: 60ch; }

.board-member-grid {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem;
}
.board-member-card {
  display: grid; justify-items: center; text-align: center; gap: .4rem;
  padding: 1.75rem 1.35rem;
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel);
}
.board-member-card__portrait {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  margin-block-end: .5rem;
}
.board-member-card__portrait--placeholder {
  display: grid; place-items: center;
  background: var(--brand-primary-tint); color: var(--brand-primary);
  font-family: var(--type-display); font-size: 2rem; font-weight: 700;
}
.board-member-card__name { margin: 0; font-size: 1.05rem; }
.board-member-card__seat { margin: 0; font-size: .9rem; color: var(--brand-primary); font-weight: 500; }
.board-member-card__biography { margin: .4rem 0 0; font-size: .88rem; color: var(--ink-quiet); }

/* ---------- EXECUTIVE PAGE ------------------------------------ */
/* Wide rows, not a card grid: a different page listing people should
   not be mistaken for the board page at a glance. */
.executive-team-section { padding-block: clamp(3rem, 7vw, 5rem); }
.executive-team-section__intro { margin-block-end: 2.5rem; }
.executive-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.executive-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem); align-items: center;
  padding: 1.5rem; background: var(--surface-page);
  border: 1px solid var(--rule-line); border-radius: var(--radius-panel);
}
.executive-row:hover { border-color: var(--brand-primary); }
.executive-row__portrait {
  width: 104px; height: 104px; border-radius: var(--radius-panel); object-fit: cover;
}
.executive-row__portrait--placeholder {
  display: grid; place-items: center;
  background: var(--brand-primary-tint); color: var(--brand-primary);
  font-family: var(--type-display); font-size: 2.2rem; font-weight: 700;
}
.executive-row__name { margin: 0 0 .2rem; font-size: 1.15rem; }
.executive-row__seat { margin: 0; color: var(--brand-primary); font-weight: 500; font-size: .95rem; }
.executive-row__biography { margin: .6rem 0 0; font-size: .95rem; color: var(--ink-body); max-width: 70ch; }

/* ---------- COMMITTEES PAGE ----------------------------------- */
.committees-section { padding-block: clamp(3rem, 7vw, 5rem); background: var(--surface-sunken); }
.committees-section__intro { margin-block-end: 2rem; }

.committee-index { margin-block-end: 2rem; }
.committee-index__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.committee-index__link {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1rem; border-radius: 100px;
  background: var(--surface-page); border: 1px solid var(--rule-line-strong);
  text-decoration: none; color: var(--ink-strong); font-size: .92rem;
}
.committee-index__link:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.committee-index__count {
  min-width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--brand-primary-tint); color: var(--brand-primary-deep);
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}

.committee-panel-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: 1.25rem;
}
.committee-panel {
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); overflow: hidden;
  scroll-margin-top: 6rem;
}
.committee-panel__header {
  display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
  padding: 1.15rem 1.35rem;
  background: var(--brand-primary-tint);
  border-block-end: 1px solid var(--rule-line);
}
.committee-panel__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: var(--brand-primary); color: #fff; display: grid; place-items: center;
}
.committee-panel__icon svg { width: 20px; height: 20px; }
.committee-panel__name { margin: 0; font-size: 1.08rem; flex: 1 1 auto; min-width: 0; }
.committee-panel__count { font-size: .82rem; color: var(--brand-primary-deep); white-space: nowrap; }
.committee-panel__summary {
  margin: 0; padding: .9rem 1.35rem 0;
  font-size: .92rem; line-height: 1.8; color: var(--ink-body);
}
.committee-panel__member-list { list-style: none; margin: 0; padding: .5rem .75rem 1rem; display: grid; }

.committee-member {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .6rem; border-block-end: 1px solid var(--rule-line);
}
.committee-member:last-child { border-block-end: 0; }
.committee-member__portrait { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.committee-member__portrait--placeholder {
  display: grid; place-items: center;
  background: var(--surface-sunken); color: var(--brand-primary);
  font-family: var(--type-display); font-weight: 700;
}
.committee-member__identity { display: grid; gap: .1rem; min-width: 0; }
.committee-member__name { font-weight: 600; color: var(--ink-strong); font-size: .96rem; }
.committee-member__seat { font-size: .85rem; color: var(--ink-quiet); }

/* ---------- ORG CHART PAGE ------------------------------------ */
.org-chart-section { padding-block: clamp(3rem, 7vw, 5rem); }
.org-chart { margin: 0; }
.org-chart__frame {
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); padding: clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
}
.org-chart__image { width: 100%; min-width: 34rem; height: auto; margin-inline: auto; }
.org-chart__caption {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; margin-block-start: 1.25rem;
}
.org-chart__note { font-size: .92rem; color: var(--ink-quiet); max-width: 60ch; }
.org-chart__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- SECTION SIBLINGS ---------------------------------- */
.section-siblings {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--surface-deep); color: var(--on-deep-soft);
}
.section-siblings__heading {
  color: #fff; font-size: 1.05rem; margin: 0 0 1.25rem; font-weight: 600;
}
.section-siblings__list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .6rem;
}
.section-siblings__link {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1rem; border-radius: var(--radius-panel);
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12);
  color: #fff; text-decoration: none; font-size: .95rem;
}
.section-siblings__link:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .35); }
.section-siblings__icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent-on-deep); }
.section-siblings__icon svg { width: 100%; height: 100%; }
.section-siblings__label { flex: 1 1 auto; min-width: 0; }
.section-siblings__arrow { color: var(--accent-on-deep); }

/* ---------- HOMEPAGE ABOUT (photo column) --------------------- */
.about-section__placeholder {
  aspect-ratio: 4 / 3; border-radius: var(--radius-panel);
  background:
    linear-gradient(160deg, var(--surface-deep), var(--surface-deep-2));
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.about-section__placeholder::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--pattern-image);
  background-size: var(--pattern-size);
  background-repeat: var(--pattern-repeat);
  /* A touch stronger than the bands: this stands in for a photograph. */
  opacity: calc(var(--pattern-opacity) * 1.7);
}
.about-section__placeholder-mark {
  position: relative; font-family: var(--type-display);
  font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; color: rgb(255 255 255 / .85);
}
.quick-link-list__label { flex: 1 1 auto; min-width: 0; }
.quick-link-list__arrow { color: var(--brand-primary); }

/* ---------- HOMEPAGE NEWS BLOCK ------------------------------- */
/* A lead story plus a dated digest. Three equal cards gave a monthly
   publisher the visual rhythm of a newsroom it does not have. */
.news-section__layout {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem); align-items: stretch;
}
.news-section__layout--single { grid-template-columns: minmax(0, 1fr); }

.news-lead { margin: 0; }
.news-lead__link {
  display: grid; text-decoration: none; color: inherit;
  border-radius: var(--radius-panel); overflow: hidden;
  background: var(--surface-page); border: 1px solid var(--rule-line);
  height: 100%;
}
.news-lead__link:hover { border-color: var(--brand-primary); }
/* Photo row takes any extra height (when the digest beside it runs
   taller), so the card never shows a blank strip under the title. */
.news-lead__link:has(.news-lead__media) { grid-template-rows: 1fr auto; }
.news-lead__media { display: block; position: relative; min-height: 0; }
.news-lead__image { width: 100%; height: 100%; min-height: 100%; aspect-ratio: var(--media-ratio); object-fit: cover; }
.news-lead__body { display: grid; gap: .55rem; padding: 1.4rem 1.5rem 1.75rem; align-content: start; }
.news-lead__date { font-size: .85rem; color: var(--ink-quiet); }
.news-lead__title {
  font-family: var(--type-display); font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 600; color: var(--ink-strong); line-height: 1.5;
}
.news-lead__link:hover .news-lead__title { color: var(--brand-primary); }

/* Up to six stories, each with a 16:9 thumbnail. The list stretches to
   the lead story's height and the rows share that height equally, so
   the two columns end on the same line. */
.news-digest {
  display: flex; flex-direction: column;
  list-style: none; margin: 0; padding: 0;
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); overflow: hidden;
}
.news-digest__item { flex: 1 1 0; display: flex; border-block-end: 1px solid var(--rule-line); }
.news-digest__item:last-child { border-block-end: 0; }
.news-digest__link {
  flex: 1 1 auto; display: flex; align-items: center; gap: .9rem; padding: .75rem 1.1rem;
  text-decoration: none; color: inherit;
  border-inline-start: 3px solid transparent;
}
.news-digest__link:hover { background: var(--brand-primary-tint); border-inline-start-color: var(--brand-primary); }
.news-digest__thumb {
  flex: 0 0 auto; width: 104px; aspect-ratio: var(--media-ratio);
  object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-sunken);
}
.news-digest__text { display: grid; gap: .25rem; min-width: 0; }
.news-digest__date { font-size: .8rem; color: var(--ink-quiet); }
.news-digest__title {
  font-size: .95rem; font-weight: 500; color: var(--ink-strong); line-height: 1.6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* ---------- WHATSAPP BUTTON ----------------------------------- */
.whatsapp-button {
  position: fixed; inset-block-end: 1.25rem; inset-inline-start: 1.25rem;
  z-index: 80; width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgb(0 0 0 / .22);
}
.whatsapp-button:hover { background: #1da851; }
.whatsapp-button__icon { width: 30px; height: 30px; }

/* ---------- CONSENT NOTICE ------------------------------------ */
.consent-notice {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 90;
  padding: 1rem; pointer-events: none;
}
.consent-notice__panel {
  pointer-events: auto;
  max-width: 40rem; margin-inline: auto;
  background: var(--surface-page); color: var(--ink-body);
  border: 1px solid var(--rule-line-strong); border-radius: var(--radius-panel);
  box-shadow: 0 18px 44px rgb(10 58 36 / .22);
  padding: 1.35rem 1.5rem;
}
.consent-notice__title { margin: 0 0 .5rem; font-size: 1.05rem; }
.consent-notice__text { margin: 0 0 1.15rem; font-size: .93rem; line-height: 1.8; }
.consent-notice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; }
.consent-notice__actions .action-button { padding: .65rem 1.6rem; font-size: .95rem; }
.consent-notice__policy-link { font-size: .9rem; color: var(--ink-quiet); }

/* ---------- v5 RESPONSIVE ------------------------------------- */
@media (max-width: 1080px) {
  .mega-menu__inner { grid-template-columns: minmax(0, 1fr); }
  .mega-menu__feature { display: none; }
}

@media (max-width: 980px) {
  .news-section__layout { grid-template-columns: minmax(0, 1fr); }
  .about-intro-section__layout { grid-template-columns: minmax(0, 1fr); }
  .about-intro-section__image { aspect-ratio: 16 / 10; border-radius: var(--radius-panel); }
  .board-lead { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .board-lead__biography { margin-inline: auto; }
}

@media (max-width: 820px) {
  /* The mega menu becomes plain inline content inside the drawer:
     an overlay panel is awkward to dismiss on touch. */
  .mega-menu {
    position: static; display: none; box-shadow: none;
    border: 0; border-block-end: 1px solid var(--rule-line);
  }
  .mega-menu.is-open { display: block; }
  .mega-menu__inner { padding-block: .5rem 1rem; gap: .5rem; }
  .mega-menu__list { grid-template-columns: minmax(0, 1fr); }
  .mega-menu__link { padding: .7rem .5rem; }

  .site-navigation { max-height: min(70vh, 32rem); overflow-y: auto; }
  .site-navigation__link--donate { margin-block-start: .85rem; }

  .executive-row { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .org-chart__caption { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  /* Scaled on the ELEMENT, not by redefining the :root token. The
     theme engine writes --brand-logo-height into an inline <style> in
     the document head, which comes after this file and therefore wins
     any :root rule here — a media query that redefines it silently
     does nothing. */
  .site-brand__logo,
  .site-brand__emblem { height: calc(var(--brand-logo-height, 56px) * .78); }
  .site-brand__emblem { width: calc(var(--brand-logo-height, 56px) * .78); }
  .site-header__inner { min-height: calc(var(--brand-logo-height, 56px) * .78 + 30px); }
  .site-brand__logo { max-width: 128px; }
  .site-brand__name { font-size: .97rem; }

  .announcement-bar__inner { padding-block: .6rem; font-size: .86rem; }
  .board-member-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
  .board-lead__portrait { width: 110px; height: 110px; }
  .org-chart__image { min-width: 22rem; }
  /* Phones: one line, cut at the width actually left in the bar. */
  .breadcrumb-trail__item:last-child { flex: 1 1 0; }
  .breadcrumb-trail__current {
    display: block; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .whatsapp-button { width: 48px; height: 48px; inset-block-end: 1rem; inset-inline-start: 1rem; }
  .whatsapp-button__icon { width: 26px; height: 26px; }
  .consent-notice { padding: .75rem; }
  .consent-notice__actions .action-button { flex: 1 1 8rem; justify-content: center; }
}

.mega-menu__feature-placeholder {
  aspect-ratio: var(--media-ratio); display: grid; place-items: center;
  background: linear-gradient(160deg, var(--surface-deep), var(--surface-deep-2));
  color: rgb(255 255 255 / .9);
  font-family: var(--type-display); font-size: 2.6rem; font-weight: 700;
}

.page-hero__lead--rich p { margin: 0 0 .75rem; }
.page-hero__lead--rich p:last-child { margin-block-end: 0; }
.page-hero__lead--rich a { color: #fff; }

.not-found-section__title { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin-block-end: .75rem; }
.not-found-section__summary { font-size: 1.05rem; max-width: 46ch; margin: 0 auto 1.5rem; }

.news-post-section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.news-post-section__body { margin-inline: auto; }
.news-post-section__body img { border-radius: var(--radius-panel); margin-block: 1.25rem; }

/* Named wrappers referenced by the new views. They carry min-width:0
   so long Arabic names shrink rather than pushing their grid column
   wider than the card — the sweep for "class used in a template but
   absent from CSS" is what surfaced them. */
.board-lead__body { min-width: 0; }
.executive-row__body { min-width: 0; }
.committee-index__name { min-width: 0; }
.site-quick-contact { display: contents; }

/* ---------- FOOTER SOCIAL + BUILDER CREDIT -------------------- */
.site-footer__social-list { gap: .5rem; }
.social-link {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .16);
  color: #fff; text-decoration: none;
}
.social-link:hover { background: var(--brand-primary); border-color: var(--brand-primary); text-decoration: none; }
.social-link--text { width: auto; border-radius: 100px; padding-inline: .9rem; font-size: .85rem; }
.social-icon { width: 17px; height: 17px; }

/* The baseline row: copyright, legal links, builder credit. The credit
   sits at the inline-start end (bottom-left in RTL) on its own. */
.site-footer__baseline { justify-content: flex-start; gap: .6rem 1.5rem; }
.site-footer__copyright { flex: 1 1 auto; }
.site-footer__legal-links { display: inline-flex; gap: 1rem; flex-wrap: wrap; }

.builder-credit {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-inline-start: auto;
  color: rgb(255 255 255 / .78); font-size: .82rem; text-decoration: none;
}
.builder-credit:hover { color: #fff; text-decoration: none; }
.builder-credit__label { opacity: .85; }
.builder-credit__divider { opacity: .45; }
.builder-credit__mark { width: 16px; height: 16px; }
.builder-credit__logo { height: 18px; width: auto; }

@media (max-width: 620px) {
  .site-footer__baseline { flex-direction: column; align-items: flex-start; }
  .builder-credit { margin-inline-start: 0; }
}

/* ---------- PAGE HERO SLIDER (news with several photographs) --- */
.page-hero__slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease-in-out;
}
.page-hero__slide.is-active { opacity: 1; }
.page-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--photo .page-hero__inner { min-height: 18rem; display: flex; flex-direction: column; justify-content: flex-end; }

.hero-gallery-controls {
  position: absolute; z-index: 3;
  inset-block-end: 1rem; inset-inline-end: var(--page-gutter);
  display: flex; align-items: center; gap: .5rem;
}
.hero-gallery-controls__arrow {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .45); color: #fff;
}
.hero-gallery-controls__arrow:hover { background: rgb(0 0 0 / .6); }
.hero-gallery-controls__arrow svg { width: 18px; height: 18px; }
.hero-gallery-controls__dots { display: flex; align-items: center; gap: .4rem; }
.hero-gallery-controls__dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgb(255 255 255 / .8); background: transparent;
}
.hero-gallery-controls__dot.is-current { background: #fff; }

@media (max-width: 620px) {
  .hero-gallery-controls { inset-inline: var(--page-gutter); justify-content: center; }
}

/* Consent checkbox on the contact form: a 13px unstyled box is a hard
   target on a phone and easy to miss on a desktop. */
.form-consent {
  display: flex; align-items: flex-start; gap: .7rem;
  margin-block: 1.25rem; font-size: .93rem; line-height: 1.8;
}
.form-consent input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin-block-start: .15rem;
  accent-color: var(--brand-primary);
}

/* ==================================================================
   BOARD ELECTIONS MODULE
   ================================================================== */

.election-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.election-card {
  display: grid; gap: .6rem; text-decoration: none; color: inherit;
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); padding: 1.5rem;
}
.election-card:hover { border-color: var(--brand-primary); }
.election-card__status {
  justify-self: start; font-size: .76rem; padding: .2rem .75rem;
  border-radius: 100px; background: var(--surface-sunken); color: var(--ink-quiet);
}
.election-card__status--open { background: var(--brand-primary-tint); color: var(--brand-primary-deep); }
.election-card__title { margin: 0; font-size: 1.2rem; }
.election-card__meta { margin: 0; color: var(--ink-quiet); font-size: .9rem; }

.election-notice {
  padding: 1.1rem 1.35rem; border-radius: var(--radius-panel);
  background: var(--surface-sunken); color: var(--ink-body); max-width: 640px;
}
.election-notice--error { background: var(--verification-tint); color: #6d5314; }

.election-success-panel {
  text-align: center; max-width: 480px; margin-inline: auto; padding: 2.5rem 1.5rem;
  display: grid; gap: 1rem; justify-items: center;
}
.election-success-panel h2 { margin: 0; }

/* Nominee cards on the browse screen — read only, no ballot. */
.nominee-display-list {
  list-style: none; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.25rem;
}
.nominee-display-card {
  flex: 1 1 240px; max-width: 320px; box-sizing: border-box;
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); padding: 1.75rem 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  box-shadow: 0 1px 2px rgba(16, 32, 24, .04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nominee-display-card:hover {
  border-color: var(--brand-primary); box-shadow: 0 8px 22px rgba(16, 32, 24, .08);
  transform: translateY(-2px);
}
.nominee-display-card__photo,
.nominee-display-card__avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--surface-sunken);
}
.nominee-display-card__avatar {
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-primary-tint); color: var(--brand-primary-deep);
  font-size: 1.6rem; font-weight: 700; line-height: 1;
}
.nominee-display-card__name { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.nominee-display-card__bio { margin: 0; color: var(--ink-quiet); font-size: .9rem; line-height: 1.7; }
.nominee-display-card__cv-link {
  margin-block-start: auto; font-size: .85rem; font-weight: 600;
  color: var(--brand-primary); text-decoration: none;
  padding: .4rem .95rem; border: 1px solid var(--rule-line-strong); border-radius: 100px;
}
.nominee-display-card__cv-link:hover { border-color: var(--brand-primary); background: var(--brand-primary-tint); }

/* Membership-number gate. */
.membership-gate {
  max-width: 520px; box-sizing: border-box;
  background: var(--surface-sunken); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); padding: clamp(1.5rem, 4vw, 2.25rem);
}
.membership-gate__title { margin: 0 0 .6rem; font-size: 1.25rem; }
.membership-gate__intro { margin: 0 0 1.5rem; color: var(--ink-quiet); font-size: .93rem; line-height: 1.8; }
.membership-gate__form { display: flex; flex-direction: column; gap: 1.25rem; }
.membership-gate__field .form-field__label { margin-block-end: .5rem; }
.membership-gate__field .form-field__help { margin: .35rem 0 0; font-size: .85rem; color: var(--ink-quiet); }
.membership-gate .form-field__input { background: var(--surface-page); }
.membership-gate__submit { align-self: flex-start; }

/* Ballot — nominee cards become checkbox-selectable rows. */
.ballot-form { display: grid; gap: 1.25rem; }
.ballot-form__instruction { margin: 0; color: var(--ink-quiet); font-weight: 600; }
.nominee-ballot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.nominee-ballot-card {
  background: var(--surface-page);
  border: 1px solid var(--rule-line); border-radius: var(--radius-panel);
  transition: border-color .12s ease, background-color .12s ease;
}
.nominee-ballot-card:has(input:checked) { border-color: var(--brand-primary); background: var(--brand-primary-tint); }
.nominee-ballot-card label {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer;
}
.nominee-ballot-card input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--brand-primary); }
.nominee-ballot-card input[type="checkbox"]:disabled { cursor: not-allowed; }
.nominee-ballot-card:has(input:disabled:not(:checked)) { opacity: .5; }
.nominee-ballot-card__photo { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.nominee-ballot-card__body { display: grid; gap: .3rem; }
.nominee-ballot-card__name { font-weight: 700; }
.nominee-ballot-card__bio { color: var(--ink-quiet); font-size: .88rem; }
.nominee-ballot-card__cv-link { font-size: .82rem; color: var(--brand-primary); justify-self: start; }


/* ===================================================================
   v11 — page media band, detail pages, about, volunteer
   Photographs are no longer scrimmed backgrounds behind a headline.
   Every detail page opens: tinted header band, then a framed plate
   that overlaps it, then the content.
   =================================================================== */

/* ---- Photograph plate ------------------------------------------ */
.page-media { position: relative; z-index: 2; margin-block-end: clamp(2rem, 5vw, 3.25rem); }
/* The news plate keeps its 800px measure, matching the news body. */
.news-post .page-media__frame { max-width: 800px; }
.page-media__frame {
  position: relative; margin: 0;
  /* Default: a clear gap under the hero. The negative pull is opt-in
     (--overlap), used only by the tall detail-header band which is
     padded at the bottom to absorb it. */
  margin-block-start: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--surface-sunken);
  box-shadow: 0 24px 60px rgb(16 32 24 / .18);
  /* One ratio for every cover photo (see --media-ratio). The WIDTH is
     set by whatever column the plate sits in: the news plate is capped
     at 800px to match the news body, and on a detail page the plate
     fills the grid's main column so it shares an edge with the fact
     rail and the prose below it. */
  aspect-ratio: var(--media-ratio);
}
.page-media--overlap .page-media__frame { margin-block-start: clamp(-4.5rem, -7vw, -2.5rem); }
.page-media__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.page-media__slide.is-active { opacity: 1; }
.page-media__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-media__frame--slider .hero-gallery-controls {
  position: absolute; inset-inline: 0; inset-block-end: 1rem;
  display: flex; align-items: center; justify-content: center; gap: .75rem; z-index: 3;
}
.page-media__frame--slider .hero-gallery-controls__arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgb(255 255 255 / .92); color: var(--brand-primary-deep);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / .2);
}
.page-media__frame--slider .hero-gallery-controls__arrow:hover { background: #fff; }
.page-media__frame--slider .hero-gallery-controls__dots { display: flex; gap: .4rem; }
.page-media__frame--slider .hero-gallery-controls__dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: rgb(255 255 255 / .55);
}
.page-media__frame--slider .hero-gallery-controls__dot.is-current { background: #fff; width: 24px; border-radius: 100px; }

@media (max-width: 720px) {
  .page-media--overlap .page-media__frame { margin-block-start: -2rem; }
}

/* ---- Detail header band ---------------------------------------- */
.detail-header {
  background: linear-gradient(160deg, var(--surface-deep) 0%, var(--surface-deep-2) 100%);
  color: #fff;
  padding-block: var(--page-head-top) var(--detail-head-bottom);
}
/* The box stays page-wide so the text starts on the page's own edge
   (breadcrumb, image, body). The reading measure goes on the children:
   capping the box itself made .page-width's auto margins centre it. */
.detail-header__inner > * { max-width: 46rem; }
/* News article: shorter top space (72px → 40px on desktop). */
.detail-header__eyebrow,
.detail-header__status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: var(--on-deep-soft);
  margin: 0 0 1rem;
}
.detail-header__status {
  padding: .35rem .95rem; border-radius: 100px;
  border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .1);
}
.detail-header__status i { font-size: .5rem; }
.detail-header__status--ongoing i { color: #7ee2a8; }
.detail-header__status--planned i { color: #ffd479; }
.detail-header__status--completed i { color: var(--on-deep-muted); }
/* Course states: same dot vocabulary as programmes. */
.detail-header__status--open i { color: #7ee2a8; }
.detail-header__status--upcoming i { color: #ffd479; }
.detail-header__status--closed i { color: var(--on-deep-muted); }
.detail-header__title {
  margin: 0 0 1rem; color: #fff;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.35;
}
.detail-header__summary { margin: 0; color: var(--on-deep-soft); font-size: 1.05rem; line-height: 1.9; }

/* ---- Fact rail -------------------------------------------------- */
.fact-rail { margin-block-end: clamp(2rem, 5vw, 3rem); }
.fact-rail__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.fact-rail__item {
  flex: 1 1 200px; box-sizing: border-box;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: .85rem; row-gap: .15rem; align-items: center;
  background: var(--surface-sunken); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); padding: 1.1rem 1.25rem;
}
.fact-rail__icon {
  grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-primary-tint); color: var(--brand-primary-deep); font-size: 1.05rem;
}
.fact-rail__label { font-size: .8rem; color: var(--ink-quiet); font-weight: 600; }
.fact-rail__value { font-size: .98rem; font-weight: 600; }

/* ---- Detail body + support panel -------------------------------- */
.detail-body-section { padding-block: 0 clamp(3rem, 7vw, 5rem); }
.detail-body-section__layout {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  /* 800px main column — the same measure as a news article, so every
     long read in the product is the same width. The side column takes
     the rest: the ONE action first, then the other programmes, which
     used to be a full-width strip at the very bottom of the page and
     left this space empty beside the text. */
  grid-template-columns: minmax(0, 800px) minmax(0, 300px);
  justify-content: start;
  align-items: start;
}
.detail-side {
  min-width: 0; display: grid; gap: clamp(1.5rem, 3vw, 2rem);
  /* The whole column follows the scroll as ONE block. Making only the
     panel sticky slid it down over the related list below it, because
     both share this grid cell — the panel's image and the "كل البرامج"
     link ended up on top of each other.
     The start offset pushes the column clear of the tinted header
     band: the photo beside it is pulled UP into that band, so a column
     starting at the grid top sat against the band's edge. */
  margin-block-start: clamp(1.5rem, 4vw, 2.75rem);
  align-self: start;
}
/* Sticky only where the column actually fits on screen; on a short
   window it would otherwise be cut off with no way to reach its end.
   6.5rem clears the sticky site header. */
@media (min-height: 800px) {
  .detail-side { position: sticky; top: 6.5rem; }
}

/* The main column carries the photo, the fact rail AND the prose, so
   all three share one start edge and one end edge. The photo used to
   sit above this grid at its own width and the fact rail ran the full
   page width underneath it — four bands, four edges, nothing lining
   up down the page. */
.detail-body-section__main { min-width: 0; }
/* The plate brings its own .page-width wrapper (it is also used
   stand-alone on news); inside this column that wrapper must not
   narrow it a second time. The negative pull into the header band
   still applies. */
.detail-body-section__main .page-media > .page-width { width: 100%; }
.detail-body-section__main .page-media { margin-block-end: clamp(1.5rem, 3.5vw, 2.25rem); }
.detail-body-section__main .fact-rail { margin-block-end: clamp(1.5rem, 3.5vw, 2.25rem); }
/* Three per row fits the narrower column better than four cramped ones. */
.detail-body-section__main .fact-rail__item { flex: 1 1 13rem; }

.detail-body-section__prose { max-width: 68ch; }

/* ---------- Side column: other programmes / courses / events ----- */
.side-related {
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); padding: 1.1rem 1.15rem 1.2rem;
}
.side-related__heading {
  margin: 0 0 .85rem; font-size: 1rem; color: var(--brand-primary-deep);
  padding-block-end: .55rem; border-block-end: 1px solid var(--rule-line);
}
.side-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.side-related__link { display: block; text-decoration: none; }
.side-related__image {
  width: 100%; aspect-ratio: var(--media-ratio); object-fit: cover;
  border-radius: var(--radius-soft); display: block; margin-block-end: .45rem;
  transition: transform .4s ease;
}
.side-related__link:hover .side-related__image { transform: scale(1.03); }
.side-related__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .92rem; font-weight: 600; line-height: 1.65; color: var(--ink-strong);
}
.side-related__link:hover .side-related__title { color: var(--brand-primary); }
.side-related__all {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-block-start: .95rem; font-size: .85rem; font-weight: 600;
  color: var(--brand-primary); text-decoration: none;
}
.side-related__all:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .side-related__image { transition: none; }
}
.support-panel {
  box-sizing: border-box;
  background: var(--brand-primary-tint); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); padding: 1.75rem 1.5rem; text-align: center;
}
.support-panel__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; margin-block-end: .85rem;
  background: var(--brand-primary); color: #fff; font-size: 1.25rem;
}
/* Course side panel: two stacked links (register + join online) and a
   note. The programme page has one button and is unaffected. */
.support-panel__second { margin-block-start: .6rem; }
.support-panel__note {
  margin: .85rem 0 0; font-size: .8rem; line-height: 1.7; color: var(--ink-quiet);
}


.program-card__meta {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-block-start: .6rem; font-size: .82rem; color: var(--ink-quiet);
}

.support-panel__title { margin: 0 0 1.1rem; font-size: 1.1rem; }

@media (max-width: 860px) {
  .detail-body-section__layout { grid-template-columns: minmax(0, 1fr); }
  /* One column: nothing sticks, and the top offset would read as a gap. */
  .detail-side { position: static; margin-block-start: 0; }
}

/* ---- Article body ----------------------------------------------- */
.article-body-section { padding-block: 0 clamp(3rem, 7vw, 5rem); }
/* Same width as the news photo (800px) so text and photo end together. */
.article-body-section__body {
  max-width: 800px;
  font-size: 1.06rem; line-height: 2.05;
}
.article-body-section__body > :first-child { margin-block-start: 0; }
.article-body-section__body img { max-width: 100%; height: auto; border-radius: var(--radius-panel); }
.article-body-section__body blockquote {
  margin-inline: 0; padding: 1rem 1.5rem;
  border-inline-start: 4px solid var(--brand-primary);
  background: var(--surface-sunken); border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
  font-size: 1.08rem;
}
.article-body-section__footer {
  max-width: 800px; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-block-start: 1.75rem; border-block-start: 1px solid var(--rule-line);
}
.article-body-section__footer .action-button { display: inline-flex; align-items: center; gap: .6rem; }

/* ---- News article layout + "آخر الأخبار" rail -------------------
   The article column is the photo's width (800px); the rail takes the
   rest. The media plate and body live inside the column, so their own
   .page-width wrappers must not narrow them a second time. */
.news-post__layout { display: grid; grid-template-columns: minmax(0, 800px); }
.news-post__layout--with-rail {
  grid-template-columns: minmax(0, 800px) minmax(16rem, 1fr);
  column-gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.news-post__main { min-width: 0; }
.news-post__main .page-media > .page-width { width: 100%; }

.latest-rail {
  position: relative; z-index: 2;
  /* Same pull into the green band as the photo beside it. */
  margin-block-start: clamp(-4.5rem, -7vw, -2.5rem);
  background: var(--surface-page, #fff);
  border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel);
  padding: 1.1rem 1.1rem 1.15rem;
  box-shadow: 0 24px 60px rgb(16 32 24 / .12);
}
/* Sticky only where the whole rail (4 tiles) fits on screen; on
   shorter screens it scrolls with the page instead of being cut off. */
@media (min-height: 1150px) {
  .latest-rail { position: sticky; top: 6rem; }
}
.latest-rail__header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-block-end: .9rem;
}
.latest-rail__heading { margin: 0; font-size: 1.05rem; color: var(--brand-primary-deep); }
.latest-rail__all { font-size: .85rem; color: var(--ink-body); text-decoration: none; }
.latest-rail__all:hover { color: var(--brand-primary); text-decoration: underline; }
.latest-rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.1rem; }

.latest-tile {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--media-ratio);
  border-radius: calc(var(--radius-panel) * .7);
  background: var(--surface-sunken);
  text-decoration: none;
}
.latest-tile__image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.latest-tile__image--placeholder {
  display: grid; place-items: center;
  background: var(--brand-primary-tint); color: var(--brand-primary);
  font-size: 1.6rem;
}
.latest-tile:hover .latest-tile__image,
.latest-tile:focus-visible .latest-tile__image { transform: scale(1.04); }
.latest-tile:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
.latest-tile__caption {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: .55rem .8rem;
  background: var(--surface-deep);
}
.latest-tile__title {
  color: #fff; font-size: .9rem; line-height: 1.55; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.latest-tile__date { flex: 0 0 auto; color: var(--on-deep-soft); font-size: .78rem; white-space: nowrap; }

/* Narrow screens: one column, rail after the article, no overlap. */
@media (max-width: 980px) {
  .news-post__layout--with-rail { grid-template-columns: minmax(0, 1fr); }
  .latest-rail { position: static; margin-block: 0 clamp(2.5rem, 6vw, 4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .latest-tile__image { transition: none; }
}

/* ---------- EVENTS AGENDA -------------------------------------- */
.events-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.agenda-month {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 .75rem; font-size: 1.05rem;
  color: var(--brand-primary-deep);
  padding-block-end: .5rem; border-block-end: 1px solid var(--rule-line);
}
.agenda-month:first-of-type { margin-block-start: clamp(1rem, 2vw, 1.5rem); }
.agenda-list { list-style: none; margin: 0; padding: 0; }
.agenda-item + .agenda-item { border-block-start: 1px solid var(--rule-line); }
.agenda-item__link {
  display: grid; align-items: center; gap: 1rem;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  padding: .95rem .25rem; text-decoration: none;
}
.agenda-item__link:hover { background: var(--brand-primary-tint); }
.agenda-item__date {
  display: grid; place-items: center; padding: .4rem 0;
  background: var(--brand-primary-tint); border-radius: var(--radius-soft);
}
.agenda-item__date strong {
  font-family: var(--type-display); font-size: 1.25rem; font-weight: 500;
  color: var(--brand-primary-deep); line-height: 1;
}
.agenda-item__date span { font-size: .7rem; color: var(--brand-primary); }
.agenda-item__body { min-width: 0; }
.agenda-item__title { display: block; font-weight: 600; color: var(--ink-strong); }
.agenda-item__link:hover .agenda-item__title { color: var(--brand-primary); }
.agenda-item__meta { display: block; margin-block-start: .2rem; font-size: .85rem; color: var(--ink-quiet); }
.agenda-item__tags { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.agenda-item__type {
  font-size: .75rem; padding: .2rem .7rem; border-radius: 100px; white-space: nowrap;
  background: var(--surface-sunken); color: var(--ink-body);
}
.agenda-item__now {
  font-size: .75rem; padding: .2rem .7rem; border-radius: 100px; white-space: nowrap;
  background: var(--brand-primary); color: #fff; font-weight: 600;
}
/* Finished events stay listed as a record, set back a little. */
.agenda-item.is-past .agenda-item__date { background: var(--surface-sunken); }
.agenda-item.is-past .agenda-item__date strong { color: var(--ink-body); }
.agenda-item.is-past .agenda-item__date span { color: var(--ink-quiet); }

/* Event states reuse the detail-header dot vocabulary. */
.detail-header__status--today i { color: #7ee2a8; }
.detail-header__status--past i { color: var(--on-deep-muted); }

@media (max-width: 640px) {
  .agenda-item__link { grid-template-columns: 3.2rem minmax(0, 1fr); row-gap: .5rem; }
  .agenda-item__tags { grid-column: 2; justify-content: flex-start; }
}

/* ---------- SITE SEARCH ---------------------------------------- */
.search-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.search-form {
  display: flex; gap: .6rem; flex-wrap: wrap;
  max-width: 40rem; margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}
.search-form__input {
  flex: 1 1 16rem; min-width: 0;
  padding: .85rem 1.1rem; font-family: inherit; font-size: 1rem; color: var(--ink-strong);
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-soft);
}
.search-form__input:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 2px; }
.search-form__submit { flex: 0 0 auto; }

.search-count { margin: 0 0 1.25rem; color: var(--ink-quiet); font-size: .95rem; }
.search-result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; max-width: 48rem; }
.search-result__link {
  display: block; padding: 1.1rem 1.25rem; text-decoration: none;
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-soft);
}
.search-result__link:hover { border-color: var(--brand-primary); }
.search-result__kind {
  display: inline-block; font-size: .75rem; margin-block-end: .4rem;
  padding: .15rem .6rem; border-radius: 100px;
  background: var(--brand-primary-tint); color: var(--brand-primary-deep);
}
.search-result__title { margin: 0 0 .35rem; font-size: 1.1rem; color: var(--ink-strong); }
.search-result__link:hover .search-result__title { color: var(--brand-primary); }
.search-result__excerpt { margin: 0; font-size: .93rem; color: var(--ink-body); }
.search-result__date { display: block; margin-block-start: .45rem; font-size: .82rem; color: var(--ink-quiet); }

/* The nav item is an icon plus label; on narrow screens the label is
   what identifies it inside the open menu, so it is not hidden. */
.site-navigation__link--search i { margin-inline-end: .35rem; font-size: .9em; }

/* ---------- FAQ + ACCESSIBILITY -------------------------------
   The FAQ uses native <details>, so the only styling needed is the
   summary row and the chevron rotation: keyboard support, in-page
   browser search and no-JS behaviour come for free. */
.faq-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.faq-list { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; display: grid; gap: .75rem; }
.faq-item {
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-soft);
}
.faq-item__question {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem; cursor: pointer;
  font-weight: 600; color: var(--ink-strong); list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item[open] .faq-item__question { color: var(--brand-primary-deep); }
.faq-item__chevron { flex: 0 0 auto; font-size: .8rem; color: var(--brand-primary); transition: transform .25s ease; }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__answer { padding: 0 1.25rem 1.2rem; }

.accessibility-contact {
  max-width: 52rem; margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  background: var(--brand-primary-tint); border-radius: var(--radius-panel);
}
.accessibility-contact__title { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--brand-primary-deep); }
.accessibility-contact__text { margin: 0 0 1rem; color: var(--ink-body); }

@media (prefers-reduced-motion: reduce) {
  .faq-item__chevron { transition: none; }
}

/* ---- Section rhythm helpers ------------------------------------- */
.section--tinted { background: var(--surface-sunken); }
.section-header--centred { text-align: center; justify-content: center; }
.section-header--centred .section-header__text { margin-inline: auto; }
.section-header__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; margin-block-end: .9rem;
  background: var(--brand-primary-tint); color: var(--brand-primary-deep); font-size: 1.2rem;
}
.readable-prose--centred { max-width: 70ch; margin-inline: auto; }

/* ---- About: editorial rail --------------------------------------- */
/* A fixed-width aside carries the heading; the prose runs beside it in
   one wide measure. Because the two are separate grid columns, neither
   a two-sentence intro nor twelve paragraphs changes the shape. The
   aside sticks while the prose scrolls past it. */
.about-intro-section { padding-block: clamp(3rem, 7vw, 5rem); }
.editorial-rail {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
}
.editorial-rail__aside {
  position: sticky; top: 6rem;
  border-inline-start: 2px solid var(--brand-primary);
  padding-inline-start: 1.25rem;
}
.editorial-rail__stamp {
  margin: 0 0 .5rem; font-size: .8rem; font-weight: 600;
  color: var(--brand-primary); letter-spacing: 0;
}
.editorial-rail__heading {
  margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.45; font-weight: 700;
}
.editorial-rail__note {
  margin: .75rem 0 0; font-size: .88rem; line-height: 1.85;
  color: var(--ink-quiet);
}
.editorial-rail__body {
  max-width: 72ch;
  font-size: 1.04rem;
}
.editorial-rail__body > :first-child { margin-block-start: 0; }
.editorial-rail__body p { margin-block: 0 1.4rem; line-height: 2.05; }
.editorial-rail__body p:last-child { margin-block-end: 0; }
/* The opening paragraph carries slightly more weight, which gives a
   short intro presence and a long one an entry point. */
.editorial-rail__body > p:first-of-type {
  font-size: 1.14rem; line-height: 1.95; color: var(--ink-strong);
}

@media (max-width: 860px) {
  .editorial-rail { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .editorial-rail__aside { position: static; }
  .editorial-rail__body > p:first-of-type { font-size: 1.06rem; }
}

/* ---- About: rail content blocks ---------------------------------- */
/* Every section on the about page uses the same editorial rail: a
   fixed aside carrying the heading, content beside it. These are the
   two content shapes that sit in the body column. */

/* Vision / mission entries. */
.rail-entry + .rail-entry {
  margin-block-start: clamp(1.5rem, 3.5vw, 2.25rem);
  padding-block-start: clamp(1.5rem, 3.5vw, 2.25rem);
  border-block-start: 1px solid var(--rule-line);
}
.rail-entry__title {
  margin: 0 0 .65rem; font-size: 1.1rem;
  display: flex; align-items: center; gap: .6rem;
}
.rail-entry__title i { color: var(--brand-primary); font-size: .95rem; }
.rail-entry__text {
  margin: 0; font-size: 1.05rem; line-height: 2; color: var(--ink-quiet);
}

/* Values, as a numbered list in the same body column. */
.rail-value-list { list-style: none; margin: 0; padding: 0; }
.rail-value {
  display: flex; align-items: baseline; gap: 1rem;
  padding-block: .95rem;
}
.rail-value + .rail-value { border-block-start: 1px solid var(--rule-line); }
.rail-value__serial {
  flex: 0 0 auto; font-size: .85rem; font-weight: 700;
  color: var(--brand-primary); min-width: 1.5rem;
}
.rail-value__label { font-size: 1.05rem; font-weight: 600; line-height: 1.75; }
.rail-value__label p { margin: 0; }

/* A tinted section still needs the rail's own surfaces to read. */
.about-intro-section.section--tinted { background: var(--surface-sunken); }
.about-intro-section.section--tinted .rail-entry + .rail-entry,
.about-intro-section.section--tinted .rail-value + .rail-value {
  border-block-start-color: var(--rule-line-strong);
}

/* ---- Volunteer -------------------------------------------------- */
.volunteer-mechanism-section { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.mechanism-panel {
  display: flex; gap: 1.5rem; align-items: flex-start;
  background: var(--surface-sunken); border: 1px solid var(--rule-line);
  border-inline-start: 4px solid var(--brand-primary);
  border-radius: var(--radius-panel); padding: clamp(1.5rem, 4vw, 2.25rem);
}
.mechanism-panel__icon {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-primary); color: #fff; font-size: 1.35rem;
}
.mechanism-panel__title { margin: 0 0 .75rem; font-size: 1.2rem; }
.mechanism-panel__body { min-width: 0; }

.volunteer-opportunities-section { padding-block: clamp(3rem, 7vw, 5rem); }
.volunteer-card-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.25rem;
}
.volunteer-card {
  flex: 1 1 320px; max-width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; gap: .85rem;
  background: var(--surface-page); border: 1px solid var(--rule-line);
  border-radius: var(--radius-panel); padding: 1.75rem 1.6rem;
  box-shadow: 0 1px 2px rgb(16 32 24 / .04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.volunteer-card:hover { border-color: var(--brand-primary); box-shadow: 0 10px 28px rgb(16 32 24 / .08); transform: translateY(-2px); }
.volunteer-card.is-closed { opacity: .72; }
.volunteer-card.is-closed:hover { transform: none; }
.volunteer-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.volunteer-card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-primary-tint); color: var(--brand-primary-deep); font-size: 1.15rem;
}
.volunteer-card__state {
  font-size: .78rem; font-weight: 700; padding: .3rem .8rem; border-radius: 100px;
}
.volunteer-card__state--open { background: var(--brand-primary-tint); color: var(--brand-primary-deep); }
.volunteer-card__state--closed { background: #f1f1f1; color: #6b6b6b; }
.volunteer-card__title { margin: 0; font-size: 1.15rem; line-height: 1.55; }
.volunteer-card__description { margin: 0; color: var(--ink-quiet); line-height: 1.9; font-size: .95rem; }
.volunteer-card__facts {
  list-style: none; margin: 0; padding: .85rem 0 0;
  border-block-start: 1px dashed var(--rule-line);
  display: flex; flex-direction: column; gap: .55rem;
}
.volunteer-card__facts li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--ink-quiet); }
.volunteer-card__facts i { color: var(--brand-primary); width: 1.1em; text-align: center; }
.volunteer-card__requirements summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--brand-primary-deep); }
.volunteer-card__requirements p { margin: .65rem 0 0; font-size: .9rem; line-height: 1.9; color: var(--ink-quiet); }
.volunteer-card__actions { margin-block-start: auto; padding-block-start: .35rem; }
.volunteer-card__actions .action-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; }

.empty-panel {
  text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: var(--surface-sunken); border: 1px dashed var(--rule-line-strong);
  border-radius: var(--radius-panel);
}
.empty-panel__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; margin-block-end: 1rem;
  background: var(--surface-page); color: var(--ink-quiet); font-size: 1.35rem;
}
.empty-panel__text { margin: 0; color: var(--ink-quiet); }
.section-header__subtitle { margin: .5rem 0 0; color: var(--ink-quiet); font-size: .95rem; }

/* ==================================================================
   READING OPTIONS (v73) — templates/a11y-widget.php
   Button + panel, then the effect of each option (classes on <html>).
   ================================================================== */
.a11y-widget { display: contents; }
.a11y-widget__toggle {
  position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 81;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand-primary); color: #fff; font-size: 1.6rem;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgb(0 0 0 / .22);
}
.a11y-widget__toggle:hover { background: var(--brand-primary-deep); }
.a11y-widget__toggle:focus-visible,
.a11y-panel button:focus-visible,
.a11y-panel a:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

.a11y-panel {
  position: fixed; inset-block-end: 5.25rem; inset-inline-end: 1.25rem; z-index: 82;
  width: min(300px, calc(100vw - 2.5rem)); max-height: calc(100vh - 7rem); overflow-y: auto;
  background: var(--surface-page); color: var(--ink-strong);
  border: 1px solid var(--rule-line); border-radius: var(--radius-card, 14px);
  box-shadow: 0 20px 48px rgb(0 0 0 / .2); padding: 1rem 1.1rem;
  font-size: 16px; line-height: 1.5; /* fixed px: the panel must not grow with the text-size option */
}
.a11y-panel[hidden] { display: none; }
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: .35rem; }
.a11y-panel__title { margin: 0; font-size: 17px; font-weight: 700; }
.a11y-panel__close {
  width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-quiet); font-size: 18px; cursor: pointer;
}
.a11y-panel__close:hover { background: var(--surface-sunken); color: var(--ink-strong); }
.a11y-panel__row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 10px 0; border-block-start: 1px solid var(--rule-line); font-size: 15px;
}
.a11y-size { display: flex; gap: 4px; }
.a11y-size__btn {
  min-width: 38px; height: 34px; padding: 0 8px; cursor: pointer; font: inherit; font-weight: 700;
  border: 1px solid var(--rule-line-strong); border-radius: 8px; background: var(--surface-page); color: var(--ink-strong);
}
.a11y-size__btn[aria-pressed="true"] { background: var(--brand-primary-tint); border-color: var(--brand-primary); color: var(--brand-primary-deep); }
.a11y-switch {
  position: relative; flex-shrink: 0; width: 44px; height: 26px; border: 0; border-radius: 999px;
  background: var(--rule-line-strong); cursor: pointer; padding: 0;
}
.a11y-switch::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s ease;
}
.a11y-switch[aria-checked="true"] { background: var(--brand-primary); }
.a11y-switch[aria-checked="true"]::after { inset-inline-start: 21px; }
.a11y-panel__reset {
  width: 100%; margin-block-start: .6rem; padding: .6rem; cursor: pointer; font: inherit; font-weight: 600;
  border: 1px solid var(--rule-line-strong); border-radius: 10px; background: var(--surface-page); color: var(--ink-strong);
}
.a11y-panel__reset:hover { background: var(--surface-sunken); }
.a11y-panel__statement { display: block; margin-block-start: .6rem; text-align: center; font-size: 13px; color: var(--brand-primary); }

@media (max-width: 600px) {
  .a11y-widget__toggle { width: 48px; height: 48px; inset-block-end: 1rem; inset-inline-end: 1rem; font-size: 1.4rem; }
  .a11y-panel { inset-inline: .75rem; width: auto; inset-block-end: 4.5rem; }
}

/* --- 1. Text size (the site is rem-based, so this scales everything) */
html.a11y-size-down { font-size: 90%; }
html.a11y-size-up   { font-size: 120%; }

/* --- 2. High contrast: black / white / yellow. Brute force on purpose —
   it must win over every component colour, including the theme's. */
html.a11y-contrast body,
html.a11y-contrast body *:not(img):not(svg):not(svg *):not(video):not(iframe) {
  background-color: #000 !important; color: #fff !important;
  border-color: #fff !important; box-shadow: none !important; text-shadow: none !important;
}
html.a11y-contrast body a,
html.a11y-contrast body a * { color: #ffd400 !important; }
html.a11y-contrast body button,
html.a11y-contrast body .action-button { border: 2px solid #ffd400 !important; }
html.a11y-contrast .a11y-switch[aria-checked="true"] { background-color: #ffd400 !important; }
html.a11y-contrast .a11y-switch::after { background-color: #fff !important; }

/* --- 3. Highlight links */
html.a11y-links body a:not(.action-button):not(.a11y-panel__statement) {
  text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px;
}
html.a11y-links:not(.a11y-contrast) body main a:not(.action-button) {
  background-color: #fff3c4 !important; color: #3b2a00 !important; border-radius: 3px;
}

/* --- 4. Line spacing */
html.a11y-spacing body p,
html.a11y-spacing body li,
html.a11y-spacing body dd,
html.a11y-spacing body td { line-height: 2.25 !important; word-spacing: .12em; }

/* --- 5. Stop motion (JS also stops sliders and the card tilt) */
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition: none !important; scroll-behavior: auto !important;
}
html.a11y-still .objective-card { transform: none !important; }

/* --- 6. Large cursor (arrow everywhere, hand on links and buttons) */
html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l32 19-14 3-7 15z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
html.a11y-cursor a, html.a11y-cursor a *, html.a11y-cursor button, html.a11y-cursor button *, html.a11y-cursor [role="switch"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 4a3 3 0 016 0v14l2-1a3 3 0 014 2l1-1a3 3 0 014 2 3 3 0 014 2v9c0 7-5 13-12 13h-3c-5 0-8-2-11-6l-7-10a3 3 0 015-3l4 4V4z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 20 4, pointer !important;
}

/* ==================================================================
   ACCESSIBILITY DETAILS on event / course pages (v75)
   ================================================================== */
.access-box {
  margin-block-end: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--brand-primary-tint); border: 1px solid var(--rule-line);
  border-radius: var(--radius-card, 14px); padding: 1.1rem 1.25rem;
}
.access-box__title {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem;
  font-size: 1.1rem; font-weight: 600; color: var(--brand-primary-deep);
}
.access-box__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem .9rem;
}
.access-box__item { display: flex; align-items: center; gap: .6rem; font-size: .98rem; color: var(--ink-strong); }
.access-box__icon {
  flex-shrink: 0; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--surface-page); color: var(--brand-primary); font-size: 1rem;
}
.access-box__note { margin: .85rem 0 0; font-size: .95rem; color: var(--ink-body); }

/* Accessible alternative next to a document (v75) */
.document-card-list__alt {
  display: inline-flex; align-items: center; gap: .4rem; margin-block-start: .4rem;
  font-size: .9rem; font-weight: 500; color: var(--brand-primary);
}