/*
Theme Name: AVER Tunisie
Theme URI: https://aver-tunisie.com
Author: AVER Tunisie (build by Khaled Aly)
Description: Arabic-first (RTL), trilingual (ar/fr/en) block theme for AVER Tunisie — the Voice of the Rural Child association. Design system mirrors the client's reference demo: sage / terracotta / gold on slate, with Inter + Tajawal + JetBrains Mono.
Version: 1.30.10
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: aver
Tags: block-theme, rtl-language-support, translation-ready, full-site-editing
*/

/* ============================================================= TOKENS */
:root {
  --c-base: var(--wp--preset--color--base);
  --c-surface: var(--wp--preset--color--surface);
  --c-ink: var(--wp--preset--color--ink);
  --c-muted: var(--wp--preset--color--muted);
  --c-primary: var(--wp--preset--color--primary);
  --c-primary-soft: var(--wp--preset--color--primary-soft);
  --c-primary-tint: var(--wp--preset--color--primary-tint);
  --c-donate: var(--wp--preset--color--donate);
  --c-donate-soft: var(--wp--preset--color--donate-soft);
  --c-gold: var(--wp--preset--color--gold);
  --c-slate: var(--wp--preset--color--slate);
  --c-slate-2: var(--wp--preset--color--slate-2);
  --c-sky: var(--wp--preset--color--sky);
  --c-border: var(--wp--preset--color--border);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --pill: 999px;
  --shadow-sm: 0 1px 2px rgba(25,38,43,.06), 0 1px 3px rgba(25,38,43,.05);
  --shadow: 0 6px 20px rgba(25,38,43,.08);
  --shadow-lg: 0 18px 44px rgba(25,38,43,.12);
  --container: 1440px;                        /* wider than the reference max-w-7xl (client: too much side space) */
  --gutter: clamp(1rem, 2vw, 1.5rem);         /* 16px → 24px side padding (px-4 sm:px-6) */
  --ring: 0 0 0 3px rgba(67,116,92,.35);
  --header-h: 74px;
  /* Heading sizes — theme.json's presets weren't emitting these vars on the page, so headings that
     referenced them collapsed to body size (16px). Define them here (fluid), a touch larger/bolder to
     match the reference demo's confident type scale. */
  --wp--preset--font-size--h1: clamp(2.1rem, 1.45rem + 2.9vw, 2.95rem);
  --wp--preset--font-size--h2: clamp(1.8rem, 1.4rem + 1.9vw, 2.25rem);   /* max 36px — matches the reference section H2 (text-4xl) */
  --wp--preset--font-size--h3: clamp(1.4rem, 1.2rem + .95vw, 1.65rem);
  --wp--preset--font-size--h4: 1.2rem;
}

/*
 * Official AVER palette — opt-in via the Customizer (body.aver-palette-official). Re-skins the site to
 * the association's real blue + red brand colours by overriding the preset variables the --c-* tokens
 * resolve from, so every component flips with one toggle. Contrast checked AA (blue 5.9:1 / red 5.4:1
 * with white text). Neutrals (ink, base, slate, gold) are kept.
 */
body.aver-palette-official {
  /* The consumed --c-* tokens must be overridden directly: they are declared on :root, so their
     var(--wp--preset--…) substitution already resolved (to green) at the html element and inherits as
     a concrete colour — re-pointing the preset alone would not reach them. */
  --c-primary: #2B5BA6;
  --c-primary-soft: #6E8FC4;
  --c-primary-tint: #E8EEF8;
  --c-donate: #C81E24;
  --c-donate-soft: #E2585C;
  --c-sky: #2B5BA6;
  --ring: 0 0 0 3px rgba(43,91,166,.35);
  /* …and flip the presets too, for core blocks (buttons, etc.) that read them directly. */
  --wp--preset--color--primary: #2B5BA6;
  --wp--preset--color--primary-soft: #6E8FC4;
  --wp--preset--color--primary-tint: #E8EEF8;
  --wp--preset--color--donate: #C81E24;
  --wp--preset--color--donate-soft: #E2585C;
}
body.aver-palette-official .btn-primary:hover,
body.aver-palette-official .wp-block-button__link:hover { background:#214A87; }
body.aver-palette-official .btn-donate:hover { background:#A5171C; }
/* Hero gradient stops are literal (not tokenised) — flip the green/teal field to brand navy + red. */
body.aver-palette-official .hero--brand {
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(110,143,196,.42), transparent 60%),
    radial-gradient(820px 460px at -5% 115%, rgba(244,197,66,.12), transparent 55%),
    linear-gradient(158deg, #213A5E 0%, #1D3050 52%, #18263F 100%);
}
body.aver-palette-official .hero__deco {
  background: radial-gradient(circle at 30% 30%, rgba(200,30,36,.32), transparent 62%);
}

/* ============================================================= BASE */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-base);
  color: var(--c-ink);
  font-family: "Inter", "Tajawal", system-ui, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Arabic-first: when the document is Arabic, lead with Tajawal */
html[lang^="ar"] body, [dir="rtl"] body { font-family: "Tajawal", "Inter", system-ui, sans-serif; }

img { max-width: 100%; height: auto; }
a { color: var(--c-primary); }
:where(a, button, input, select, textarea):focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm);
}
/* Cards carry their own resting box-shadow, which overrides the zero-specificity :where() ring above,
   so keyboard focus was invisible on the primary clickable element. Give cards a real outline. */
.card:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.005em; color: var(--c-ink); }
/* Large display headings read more confident with open (normal) tracking — matches the reference demo. */
.hero h1, .page-hero h1, .section-head h2 { letter-spacing: normal; line-height: 1.12; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; }

.aver-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed !important; left: 1rem; top: 1rem; width: auto; height: auto; margin: 0;
  clip: auto; clip-path: none; z-index: 1000; background: var(--c-ink); color: #fff;
  padding: .6rem 1rem; border-radius: var(--radius-sm);
}
html, body { overflow-x: clip; }

/* ============================================================= ELEMENTS */
.eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-donate); margin-bottom: .75rem;   /* terracotta accent, matching the reference section eyebrows */
}
[dir="rtl"] .eyebrow, html[lang^="ar"] .eyebrow {
  font-family: "Tajawal", sans-serif; letter-spacing: .04em; font-weight: 700; text-transform: none;
}

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1rem; line-height: 1;
  padding: .95rem 1.75rem; border-radius: var(--pill);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--c-primary); color:#fff; }
.btn-primary:hover { background:#365e4b; color:#fff; }
.btn-donate { background: var(--c-donate); color:#fff; }
.btn-donate:hover { background:#8f4329; color:#fff; }
/* Header donate button — compact (≈36px), matching the reference; other donate CTAs keep full size. */
.site-header .btn-donate { padding: .55rem 1.05rem; font-size: .875rem; }
.site-header .btn-donate .icon { width: 1rem; height: 1rem; }
.btn-outline { background: transparent; color: var(--c-ink); border-color: var(--c-border); }
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-ghost-light { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-light:hover { background:#fff; color: var(--c-ink); }

.icon { width: 1.25rem; height: 1.25rem; stroke-width: 1.9; flex: none; }
.icon-lg { width: 1.6rem; height: 1.6rem; }

/* ============================================================= SECTIONS */
/* margin-block-start:0 removes WordPress's flow block-gap (24px) between sections — that gap showed the
   parent background as an empty strip between the coloured sections. Sections abut flush; their own
   padding-block provides the internal spacing. */
.section { padding-block: clamp(3.5rem, 8vw, 7rem); margin-block-start: 0; }
.section--tint { background: var(--c-base); } /* #F7F9F6 — the reference's exact section tint */
.section--surface { background: var(--c-surface); }
.section-head { max-width: 42rem; margin: 0 auto clamp(2.5rem,5vw,3.5rem); text-align: center; } /* max-w-2xl mx-auto mb-14 */
.section-head h2 { font-size: var(--wp--preset--font-size--h2); font-weight: 800; margin:.5rem 0 1rem; } /* mt-2 mb-4 */
.section-head p { color: var(--c-muted); font-size: 1.0625rem; margin: 0; }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ============================================================= CARD */
.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  /* Smooth "float" on hover — Material standard curve over 300ms so the lift, shadow and border
     ease up and settle together (matches the reference cards), not a 250ms snap. */
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--c-primary-soft); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card__media { position: relative; height: 12rem; background: var(--c-primary-tint); overflow: hidden; }   /* h-48 fixed, like the reference program/news cards */
.card__media img { width:100%; height:100%; object-fit: cover; display:block; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.card__media--ph { display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--c-primary-soft) 0%, var(--c-primary-tint) 100%); }
.card__media--ph .icon { width:2.4rem; height:2.4rem; color: var(--c-primary); opacity:.55; }
.card:hover .card__media img { transform: scale(1.08); }
/* category badge over the card image — matches the reference demo's sky pills */
.card__tag { position:absolute; top:.8rem; inset-inline-start:.8rem; z-index:3;
  background: var(--c-sky); color:#fff; font-family:"Inter",sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.01em; padding:.28rem .72rem; border-radius: var(--pill);
  box-shadow: 0 2px 6px rgba(25,38,43,.18); text-transform:none; }
[dir="rtl"] .card__tag { font-family:"Tajawal",sans-serif; }
/* white circular icon chip over the card image (top-start) — matches the reference programme cards */
.card__iconchip { position:absolute; top:1rem; inset-inline-start:1rem; z-index:3;
  width:3rem; height:3rem; border-radius:1rem; display:grid; place-items:center;
  background: rgba(255,255,255,.95); color: var(--c-primary-soft); box-shadow: 0 8px 20px rgba(25,38,43,.18);
  backdrop-filter: saturate(120%) blur(2px); }   /* w-12 h-12 rounded-2xl bg-white/95 text-[#7A9D7E] shadow-lg */
.card__iconchip .icon { width:1.375rem; height:1.375rem; }
.card__body { padding: 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }   /* p-6 */
.card__body h3 { font-size: 1.25rem; margin: 0; }
.card__body p { color: var(--c-muted); margin: 0; font-size: .9rem; line-height: 1.55; }   /* ≈14.4px — reference card descriptions use text-sm for stronger heading/body contrast */
.card__meta { font-family:"JetBrains Mono",monospace; font-size:.75rem; color: var(--c-muted); letter-spacing:.04em; }
[dir="rtl"] .card__meta { font-family:"Tajawal",sans-serif; }
.card__link { margin-top: auto; padding-top:.4rem; color: var(--c-sky); font-weight:700; font-size:.875rem; display:inline-flex; align-items:center; gap:.35rem; transition: gap .2s ease, color .18s ease; }
.card:hover .card__link { gap:.6rem; }   /* arrow slides out on hover, like the reference "Learn More" */
.card__link .icon { width:1rem; height:1rem; }
[dir="rtl"] .card__link .icon { transform: scaleX(-1); }
/* Mirror directional arrows inside CTAs in RTL (e.g. "All news →" → "← كل الأخبار"). Other button
   icons (heart, mail) are symmetric, so flipping them is harmless. */
[dir="rtl"] .btn .icon { transform: scaleX(-1); }

/* icon chip */
.chip {
  width: 3.1rem; height: 3.1rem; border-radius: 16px; display:grid; place-items:center;
  background: var(--c-primary-tint); color: var(--c-primary); margin-bottom: .9rem;
}
.chip .icon { width:1.5rem; height:1.5rem; }

/* ============================================================= HEADER */
/* Sticky lives on the header TEMPLATE-PART WRAPPER, not on .site-header itself: the inner element's box
   is only header-height, so a sticky there unsticks as soon as you scroll past the header on inner pages.
   The wrapper's containing block is the whole page, so the bar follows scroll everywhere. Home overrides
   the inner to position:fixed (below), so the wrapper is reset to static there. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
body.home header.wp-block-template-part { position: static; }
.site-header {
  position: relative; z-index: 100;
  background: rgba(247,249,246,.82); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
/* inner pages: the sticky header gains a soft shadow once scrolled so it visibly follows like home */
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(25,38,43,.07); }
.site-header__inner { display:flex; align-items:center; gap: 1.25rem; min-height: 56px; }   /* slim bar, matches the reference */
/* Kill WordPress's top-level flow block-gap (24px) between the header, #main and the footer — it left a
   24px strip of parent background above #main (and above the footer) on every page, and a white strip
   over the hero on home where the header is transparent. The three top-level blocks now abut flush. */
.wp-site-blocks > * { margin-block-start: 0; margin-top: 0; }
/* Designed page-wide pages compose their own vertical rhythm from .page-hero / .program-banner / .section
   (each carries its own padding), so WordPress's flow block-gap (the 24px `:where(.is-layout-flow) > *`
   margin) only inserts unwanted strips between them — e.g. above .program-banner. Kill block-gap between
   the top-level children of these pages' content. Prose articles are NOT page-wide, so they keep block-gap
   for paragraph spacing. (0,2,0) beats WP's (0,1,0), so it wins regardless of stylesheet order. */
.page-template-page-wide .entry-content > * { margin-block-start: 0; margin-top: 0; }
/* The [aver_header] shortcode block also gets wpautop'd, wrapping its skip link + whitespace into empty
   <p> (margin:16px 0) — drop those so they don't add height or become stray flex children. */
.wp-site-blocks > header p { margin: 0; }
.wp-site-blocks > header p:empty { display: none; }
.site-header__inner > p { display: none; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color: var(--c-ink); }
.brand__mark-img { width: clamp(38px, 4vw, 44px); height: clamp(38px, 4vw, 44px); flex:none; object-fit:contain; }
.brand__mark { width: 40px; height: 40px; flex:none; }
.brand__text { display:flex; flex-direction:column; line-height:1.15; gap:.1rem; }
/* Localized full name (fr/ar/en) on top, constant "AVER" acronym beneath — the wordmark reads in the
   visitor's language. Arabic uses Tajawal; Latin names use the body sans. */
.brand__name { font-weight:800; font-size:1.05rem; color: var(--c-ink); white-space:nowrap; letter-spacing:-.01em; }
.brand__name--ar { font-family:"Tajawal",sans-serif; font-size:1.1rem; }
.brand__acr { font-size:.68rem; font-weight:700; letter-spacing:.16em; color: var(--c-muted); text-transform:uppercase; white-space:nowrap; }
/* Phone: let the wordmark wrap to 2 tight lines next to the logo, and allow the brand to shrink, so the
   donate button can't clip it. */
@media (max-width: 600px) {
  .site-header__inner { gap: .55rem; }
  .site-header .brand { min-width: 0; gap: .5rem; }
  .site-header .brand__text { min-width: 0; }
  .site-header .brand__name { white-space: normal; font-size: .9rem; line-height: 1.06; }
}
.nav { display:flex; align-items:center; gap: 1.25rem; margin-inline: auto; }   /* centered between logo and actions */
.nav a { color: var(--c-ink); text-decoration:none; font-weight:500; font-size:.95rem; padding:.35rem 0; position:relative; white-space:nowrap; }
.nav a:hover { color: var(--c-primary); }
.nav a[aria-current]::after, .nav a:hover::after {
  content:""; position:absolute; inset-inline:0; bottom:-2px; height:2px; background: var(--c-primary); border-radius:2px;
}
/* header "Ressources" dropdown (native <details>) */
.nav-dd { position: relative; }
.nav-dd summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.25rem;
  color: var(--c-ink); font-weight:500; font-size:.95rem; padding:.35rem 0; white-space:nowrap; }
.nav-dd summary::-webkit-details-marker { display:none; }
.nav-dd summary:hover { color: var(--c-primary); }
.nav-dd__chev { width:.9rem; height:.9rem; transition: transform .2s ease; }
.nav-dd[open] .nav-dd__chev { transform: rotate(180deg); }
.nav-dd__menu { position:absolute; top:calc(100% + .55rem); inset-inline-start:0; min-width:230px;
  background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding:.5rem; display:grid; gap:.1rem; z-index:200; }
.nav-dd__menu a { display:block; padding:.55rem .7rem; border-radius:8px; color: var(--c-ink);
  text-decoration:none; font-size:.95rem; white-space:nowrap; }
.nav-dd__menu a::after { display:none; }
.nav-dd__menu a:hover { background: var(--c-primary-tint); color: var(--c-primary); }
@media (min-width: 1321px) { body.home .site-header:not(.is-scrolled) .nav-dd summary { color:#fff; } }
@media (max-width: 1320px) {
  .nav-dd, .nav-dd__menu { position: static; }
  .nav-dd summary { padding:.7rem .25rem; border-bottom:1px solid var(--c-border); justify-content:space-between; width:100%; }
  .nav-dd__menu { box-shadow:none; border:0; background:transparent; padding:.25rem 0 .5rem 1rem; min-width:0; }
}
.header-actions { display:flex; align-items:center; gap:.75rem; }
/* Compact dropdown: collapsed shows only a globe + the current language code + chevron;
   click/tap (native <details>) reveals all three. nav.js adds close-on-outside-click/Escape. */
.lang-switch { position:relative; display:inline-block; font-family:"JetBrains Mono",monospace; font-size:.78rem; }
.lang-switch summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem;
  min-height:34px; padding:.28rem .55rem; border-radius:8px; border:1px solid var(--c-border);
  color: var(--c-ink); background: var(--c-surface); user-select:none;
  transition: border-color .15s ease, color .15s ease;
}
.lang-switch summary::-webkit-details-marker { display:none; }
.lang-switch summary:hover, .lang-switch[open] summary { border-color: var(--c-primary); color: var(--c-primary); }
.lang-switch__globe { width:16px; height:16px; }
.lang-switch__current { font-weight:600; letter-spacing:.03em; }
.lang-switch__chev { width:14px; height:14px; color: var(--c-muted); transition: transform .2s ease; }
.lang-switch[open] .lang-switch__chev { transform: rotate(180deg); color: var(--c-primary); }
.lang-switch__menu {
  position:absolute; top:calc(100% + .4rem); inset-inline-end:0; z-index:200; min-width:174px;
  display:flex; flex-direction:column; padding:.35rem;
  background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.lang-switch__menu a {
  display:flex; align-items:center; gap:.55rem; min-height:40px; padding:.45rem .6rem;
  border-radius:8px; text-decoration:none; color: var(--c-ink);
}
.lang-switch__menu a:hover { background: var(--c-primary-tint); }
.lang-switch__menu a.is-active, .lang-switch__menu a.is-active .lang-switch__code { color: var(--c-primary); }
.lang-switch__name { flex:1; font-family:"Inter","Tajawal",system-ui,sans-serif; text-transform:none; }
[dir="rtl"] .lang-switch__name { font-family:"Tajawal","Inter",system-ui,sans-serif; }
.lang-switch__code { color: var(--c-muted); font-size:.72rem; }
.lang-switch__check { width:15px; height:15px; color: var(--c-primary); margin-inline-start:auto; }

/* Inline variant (footer + mobile slide-in menu): all three shown as compact code buttons. */
.lang-switch--inline { display:flex; flex-wrap:wrap; gap:.5rem; }
.lang-switch--inline a {
  display:inline-flex; align-items:center; min-height:40px; padding:.4rem .8rem;
  border:1px solid var(--c-border); border-radius:8px; text-decoration:none; color: var(--c-ink);
}
.lang-switch--inline a:hover, .lang-switch--inline a.is-active { color: var(--c-primary); border-color: var(--c-primary); }
.lang-switch--inline .lang-switch__name, .lang-switch--inline .lang-switch__check { display:none; }
.lang-switch--inline .lang-switch__code { font-size:.82rem; color:inherit; }
/* Dark footer: light text on the buttons. */
.footer-lang .lang-switch--inline a { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.22); }
.footer-lang .lang-switch--inline a:hover { color:#fff; border-color: rgba(255,255,255,.5); }
.footer-lang .lang-switch--inline a.is-active { color:#fff; border-color: var(--c-gold); }
/* Dropup variant (footer): the menu opens UPWARD so it isn't clipped by the page bottom. */
.lang-switch--up .lang-switch__menu { top:auto; bottom:calc(100% + .4rem); }
/* The footer dropdown trigger styled for the dark background (the popup panel stays light/readable). */
.footer-lang .lang-switch summary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); color:#fff; }
.footer-lang .lang-switch summary:hover, .footer-lang .lang-switch[open] summary { border-color: var(--c-gold); color:#fff; }
.footer-lang .lang-switch__globe, .footer-lang .lang-switch__current { color:#fff; }
.footer-lang .lang-switch__chev { color: rgba(255,255,255,.75); }
.footer-lang .lang-switch[open] .lang-switch__chev { color: var(--c-gold); }
.nav-toggle { display:none; background:none; border:1px solid var(--c-border); border-radius:10px; width:44px; height:44px; align-items:center; justify-content:center; color: var(--c-ink); cursor:pointer; }

@media (max-width: 760px) {
  .site-header .header-actions .lang-switch { display:none; }   /* lang switch also lives in footer */
  .header-actions { gap:.5rem; }
  .btn-donate { padding:.7rem 1.1rem; }
  .site-header__inner { gap:.75rem; }
}
@media (max-width: 400px) {
  /* donate becomes icon-only — clip (not left:-9999px) so it never inflates scrollWidth in RTL */
  .aver-donate-label {
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .btn-donate { padding:.7rem .85rem; }
}

@media (max-width: 1320px) {
  .nav-toggle { display:inline-flex; flex:none; margin-inline-start:.15rem; position:relative; z-index:1001; }   /* clear of donate + above the drawer so it still toggles */
  .header-actions { margin-inline-start: auto; gap:.9rem; }   /* nav is a drawer here — push actions to the end + breathe */
  /* Off-canvas side drawer: slides in from the inline-end edge (RTL-aware). no-JS never adds .is-open. */
  .nav {
    position: fixed; top:0; bottom:0; inset-inline-end:0; width: min(340px, 86vw);
    flex-direction:column; align-items:stretch; gap:.15rem;
    background: var(--c-surface); box-shadow: var(--shadow-lg); border:0; margin-inline:0;
    padding: 4.75rem var(--gutter) 1.5rem; overflow-y:auto; -webkit-overflow-scrolling:touch;
    z-index:1000; transform: translateX(100%); visibility:hidden;
    transition: transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s;
  }
  [dir="rtl"] .nav { transform: translateX(-100%); }
  .nav.is-open { transform: translateX(0); visibility:visible; transition: transform .34s cubic-bezier(.4,0,.2,1), visibility 0s; }
  .nav a { padding:.75rem .25rem; border-bottom:1px solid var(--c-border); }
}
/* Dimmed backdrop behind the drawer (added by nav.js); click it to close. */
.nav-backdrop { position:fixed; inset:0; z-index:999; background:rgba(20,30,25,.45); border:0; padding:0;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.nav-backdrop.is-open { opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s; }
@media (min-width: 1321px) { .nav-backdrop { display:none; } }
html.aver-nav-lock { overflow:hidden; }
@media (prefers-reduced-motion: reduce) { .nav, .nav.is-open, .nav-backdrop { transition: none; } }

/* Language switcher inside the menu: only when the header-bar switcher is hidden (≤760px).
   Expanded styling (codes as buttons) is shared with the footer above. */
.nav__lang { display:none; }
@media (max-width: 760px) {
  .nav__lang { display:block; padding:.9rem .25rem 0; }
  .nav__lang .lang-switch__menu a { min-height:44px; }
}

/* Migrated WP page bodies (e.g. /presentation/) carry legacy inline styles + WPBakery wrappers.
   Neutralize the off-brand hard blue, drop empty headings/paragraphs, and strip the leftover
   row/column padding that otherwise leaves large empty white gaps. */
.entry-content [style*="3366ff"] { color: var(--c-primary) !important; }
.entry-content h1:empty, .entry-content h2:empty, .entry-content h3:empty,
.entry-content h4:empty, .entry-content p:empty { display: none !important; }
.entry-content .vc_row, .entry-content .vc_row-fluid, .entry-content .vc_column_container,
.entry-content .vc_column-inner, .entry-content .wpb_column, .entry-content .wpb_wrapper,
.entry-content .wpb_text_column { padding: 0 !important; margin: 0 !important; }
.entry-content .wpb_text_column + .wpb_text_column,
.entry-content .vc_row + .vc_row { margin-top: 1.25rem !important; }
.entry-content .vcex-divider, .entry-content .vc_empty_space,
.entry-content .wpb_wrapper:empty { display: none !important; }   /* decorative migrated spacers */

/* ============================================================= HERO */
.hero { position: relative; color:#fff; overflow:hidden; background: var(--c-slate);
  min-height: 100vh; min-height: 100dvh; display:flex; flex-direction:column; justify-content:center; }   /* full-viewport hero, like the reference */
.hero--brand {
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(122,157,126,.40), transparent 60%),
    radial-gradient(820px 460px at -5% 115%, rgba(244,197,66,.14), transparent 55%),
    linear-gradient(158deg, #2a4a42 0%, #243b44 52%, #1f3038 100%);
}
.hero__deco { position:absolute; inset-inline-end:-120px; top:-120px; width:460px; height:460px; z-index:0;
  background: radial-gradient(circle at 30% 30%, rgba(176,86,54,.35), transparent 62%);
  filter: blur(8px); pointer-events:none; }
/* Photo hero: a real client photo behind a dark scrim so the white headline stays AA-legible. The
   scrim is fixed slate (works under either brand palette); the --brand gradient remains as a fallback. */
.hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:0; }
/* Legibility scrim over the hero photo/gallery. Darker on the text side (inline-start) + bottom, lighter on
   the far side so the photo still reads. Strong enough (plus the text-shadow below) to keep white copy
   AA-legible even on the brightest photos in the gallery. */
/* Top strip darkening so the transparent header's white nav stays legible over bright photos. */
.hero--photo::before { content:""; position:absolute; inset:0 0 auto; height:150px; z-index:1; pointer-events:none;
  background: linear-gradient(to bottom, rgba(10,14,17,.5), rgba(10,14,17,0)); }
.hero--photo::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Grey scrim over the whole gallery — bottom → top, full height — so the hero copy/buttons stay
     readable on ANY photo. Shows above the photos because the gallery is its own z-index:0 layer
     (see .hero .hero__gallery); it sits below the text. Vertical, so no RTL variant needed. */
  background: linear-gradient(to top, rgba(18,20,23,.95) 0%, rgba(18,20,23,.8) 45%, rgba(18,20,23,.68) 100%); }
.hero--photo .hero__deco { z-index:2; }
/* Soft fade at the hero's bottom edge so it blends into the (white) section below — like the demo. */
.hero__fade { position:absolute; left:0; right:0; bottom:-1px; height: clamp(90px, 12vh, 150px); z-index:2;
  pointer-events:none; background: linear-gradient(to bottom, transparent, var(--c-surface)); }
/* .hero is a flex column, so its .aver-container flex item shrinks to content (margin-inline:auto) —
   force it full-width so the 760px text block sits at the container START (right in RTL), not centered. */
.hero > .aver-container { width: 100%; }
.hero__inner { position:relative; z-index:3; padding-block: clamp(4rem, 11vw, 8.5rem); max-width: 760px; }
/* Homepage: the header overlays the dark hero — transparent at the very top so the photo shows through,
   then gains its frosted background once you scroll. Scoped to body.home so inner pages are unchanged. */
body.home .site-header { position: fixed; left:0; right:0; background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
body.home .site-header.is-scrolled { background: rgba(247,249,246,.85); backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--c-border); }
/* Always-white over the hero (brand + hamburger sit over the photo at every width). */
body.home .site-header:not(.is-scrolled) .brand__name,
body.home .site-header:not(.is-scrolled) .nav-toggle { color: #fff; }
body.home .site-header:not(.is-scrolled) .nav-toggle { border-color: rgba(255,255,255,.5); }
body.home .site-header:not(.is-scrolled) .brand__acr { color: rgba(255,255,255,.72); }
/* White nav links ONLY where the nav is inline over the hero (≥1321px). Below that it's a solid
   dropdown panel, so links must stay ink (not white-on-white). */
@media (min-width: 1321px) {
  body.home .site-header:not(.is-scrolled) .nav a { color: #fff; }
  body.home .site-header:not(.is-scrolled) .nav a::after { background: #fff; }
  /* the resources dropdown popover has a white background, so its links must stay ink over the hero */
  body.home .site-header:not(.is-scrolled) .nav-dd__menu a { color: var(--c-ink); }
}
/* The header-actions lang switch is visible over the hero from ≥761px — make it white there. */
@media (min-width: 761px) {
  body.home .site-header:not(.is-scrolled) .lang-switch__current,
  body.home .site-header:not(.is-scrolled) .lang-switch__globe { color: #fff; }
  body.home .site-header:not(.is-scrolled) .lang-switch summary { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); color: #fff; }
  body.home .site-header:not(.is-scrolled) .lang-switch__chev { color: rgba(255,255,255,.85); }
}
.hero__badge {
  display:inline-flex; align-items:center; gap:.5rem; background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3); padding:.4rem .9rem; border-radius: var(--pill);
  font-size:.8rem; font-weight:500; margin-bottom:1.25rem;
}
.hero__badge .dot { width:.5rem; height:.5rem; border-radius:50%; background: var(--c-gold); }
.hero h1 { color:#fff; font-size: var(--wp--preset--font-size--display); font-weight: 800; margin:0 0 1rem; }
.hero p { font-size: 1.2rem; color: rgba(255,255,255,.92); max-width: 56ch; margin: 0 0 1.75rem; }
/* Halo so white copy stays legible even on the brightest gallery photo (pairs with the scrim). */
.hero--photo .hero__inner h1, .hero--photo .hero__inner p { text-shadow: 0 1px 18px rgba(8,12,15,.5), 0 1px 4px rgba(8,12,15,.42); }
.hero__cta { display:flex; gap:.85rem; flex-wrap:wrap; }

/* ============================================================= PHOTO GALLERY (varied transitions) */
.aver-gallery { position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; background:var(--c-primary-tint); }
.aver-gallery__slides { position:absolute; inset:0; margin:0; padding:0; list-style:none; }
.aver-gallery__slide { position:absolute; inset:0; opacity:0; visibility:hidden; }
.aver-gallery__slide.is-prev { opacity:1; visibility:visible; z-index:1; }   /* outgoing photo, sits under the incoming during a transition */
.aver-gallery__slide.is-active { opacity:1; visibility:visible; z-index:2; }
.aver-gallery__slide img { width:100%; height:100%; object-fit:cover; display:block; }
/* Slow Ken-Burns drift on the img, running CONTINUOUSLY on the active AND outgoing slide, so the transition
   effects hand off INTO it seamlessly — no scale "snap" after the zoom settles. The effects below animate the
   slide BOX (not the img), so they never fight this drift. */
@media (prefers-reduced-motion: no-preference) {
  .aver-gallery__slide.is-active > img, .aver-gallery__slide.is-prev > img { animation: aver-kb 8s ease-out both; }
  .aver-gallery__slide.is-active:nth-child(even) > img, .aver-gallery__slide.is-prev:nth-child(even) > img { animation-name: aver-kb-alt; }
}
@keyframes aver-kb { from { transform:scale(1.09) translate(1.4%,-1.2%); } to { transform:scale(1) translate(0,0); } }
@keyframes aver-kb-alt { from { transform:scale(1.11) translate(-1.6%,1.4%); } to { transform:scale(1) translate(0,0); } }
/* Transition effects on the INCOMING slide BOX — cycled in JS so consecutive changes differ (fade · slide ·
   zoom · tiled "boxes"), echoing the reference demo's varied animations. */
@media (prefers-reduced-motion: no-preference) {
  .aver-gallery__slide.fx-fade     { animation: fx-gfade .9s ease both; }
  .aver-gallery__slide.fx-zoom     { animation: fx-gzoom .9s cubic-bezier(.2,.6,.2,1) both; }
  .aver-gallery__slide.fx-slide-l  { animation: fx-gsl-l .85s cubic-bezier(.4,0,.2,1) both; }
  .aver-gallery__slide.fx-slide-r  { animation: fx-gsl-r .85s cubic-bezier(.4,0,.2,1) both; }
  .aver-gallery__slide.fx-slide-u  { animation: fx-gsl-u .85s cubic-bezier(.4,0,.2,1) both; }
  .aver-gallery__slide.fx-slide-d  { animation: fx-gsl-d .85s cubic-bezier(.4,0,.2,1) both; }
}
@keyframes fx-gfade { from { opacity:0; } to { opacity:1; } }
@keyframes fx-gzoom { from { opacity:0; transform:scale(1.28); } to { opacity:1; transform:scale(1); } }
@keyframes fx-gsl-l { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes fx-gsl-r { from { transform:translateX(-100%); } to { transform:translateX(0); } }
@keyframes fx-gsl-u { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes fx-gsl-d { from { transform:translateY(-100%); } to { transform:translateY(0); } }
/* Tiled "boxes" reveal: JS lays a grid of image tiles over the incoming slide; they pop in staggered. The
   tile grid inherits the same Ken-Burns drift so swapping back to the real <img> doesn't jump in scale. */
.aver-gallery__tiles { position:absolute; inset:0; display:grid; z-index:1; }
.aver-gallery__slide.fx-boxes > img { opacity:0; }
.aver-gallery__tile { position:relative; overflow:hidden; opacity:0; transform:scale(.62); }
@media (prefers-reduced-motion: no-preference) {
  .aver-gallery__tile { animation: fx-gtile .5s cubic-bezier(.2,.7,.3,1) forwards; }
  .aver-gallery__slide.fx-boxes .aver-gallery__tiles { animation: aver-kb 8s ease-out both; }
  .aver-gallery__slide.fx-boxes:nth-child(even) .aver-gallery__tiles { animation-name: aver-kb-alt; }
}
@keyframes fx-gtile { to { opacity:1; transform:scale(1); } }

/* Prev/next arrows (used by the framed figure variant; the hero variant hides them). */
.aver-gallery__nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:2.6rem; height:2.6rem;
  border:0; border-radius:50%; background:rgba(255,255,255,.9); color:var(--c-ink); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow-sm); transition:background .18s ease; }
.aver-gallery__nav:hover { background:#fff; }
.aver-gallery__nav:focus-visible { outline:none; box-shadow:var(--ring); }
.aver-gallery__nav--prev { inset-inline-start:.7rem; }
.aver-gallery__nav--next { inset-inline-end:.7rem; }
.aver-gallery__nav .icon { width:1.15rem; height:1.15rem; }
[dir="rtl"] .aver-gallery__nav .icon { transform:scaleX(-1); }

/* Control bar: page dots + a pause/play toggle (WCAG 2.2.2 for the auto-advance). */
.aver-gallery__bar { position:absolute; z-index:3; left:0; right:0; bottom:.95rem; display:flex; align-items:center;
  justify-content:center; gap:.8rem; pointer-events:none; }
.aver-gallery__bar > * { pointer-events:auto; }
.aver-gallery__dots { display:flex; align-items:center; gap:.18rem; }
.aver-gallery__dot { position:relative; overflow:hidden; box-sizing:content-box; width:.72rem; height:.72rem; padding:0;
  border:6px solid transparent; background-clip:padding-box; border-radius:999px; cursor:pointer;   /* transparent border => ~24px hit area (WCAG 2.2 target-size) while the visible dot stays small */
  background-color:rgba(255,255,255,.92); filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); transition:width .3s cubic-bezier(.4,0,.2,1), background-color .3s ease; }
.aver-gallery__dot.is-active { width:2.1rem; background-color:rgba(255,255,255,.6); }
/* Active dot fills like a progress bar over the autoplay interval; pauses when autoplay pauses. */
.aver-gallery__dot.is-active::after { content:""; position:absolute; inset:0; border-radius:inherit; background:#fff; transform:scaleX(0); transform-origin:left; }
[dir="rtl"] .aver-gallery__dot.is-active::after { transform-origin:right; }
@media (prefers-reduced-motion: no-preference) { .aver-gallery.is-playing .aver-gallery__dot.is-active::after { animation: aver-dotfill var(--aver-int,6000ms) linear both; } }
@media (prefers-reduced-motion: reduce) { .aver-gallery__dot.is-active { background:#fff; } }
@keyframes aver-dotfill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.aver-gallery__dot:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(0,0,0,.45), 0 0 0 4px #fff; }
.aver-gallery__toggle { width:1.95rem; height:1.95rem; border:0; border-radius:50%; cursor:pointer; color:#fff;
  background:rgba(20,30,35,.42); display:grid; place-items:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 1px 3px rgba(0,0,0,.32); transition:background .18s ease; }
.aver-gallery__toggle:hover { background:rgba(20,30,35,.62); }
.aver-gallery__toggle:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.75); }
.aver-gallery__toggle .icon { width:.95rem; height:.95rem; }
.aver-gallery__ic { display:inline-flex; }
.aver-gallery__ic--play { display:none; }
.aver-gallery.is-paused .aver-gallery__ic--pause { display:none; }
.aver-gallery.is-paused .aver-gallery__ic--play { display:inline-flex; }

/* HERO variant — full-bleed photo gallery behind the hero copy (text + buttons stay on top). */
.hero .hero__gallery { position:absolute; inset:0; border-radius:0; box-shadow:none; aspect-ratio:auto; background:var(--c-slate); }
/* Only the SLIDES form the stacking context (z-index:0) — so the scrim (z-index:1) shows above the
   photos, while the dots (.aver-gallery__bar, z-index:4) stay above the scrim, on the text's level. */
.hero .hero__gallery .aver-gallery__slides { z-index:0; }
.hero .hero__gallery .aver-gallery__slide img { object-position:center 30%; }
/* Lift the slide-dots ABOVE the white bottom fade (.hero__fade), else white-on-white hides them. */
.hero .hero__gallery .aver-gallery__bar { z-index:4; bottom: calc(clamp(90px, 12vh, 150px) + 1.35rem); }
@media (max-width:640px){ .hero .hero__gallery .aver-gallery__bar { display:none; } }  /* hide slide-dots on phones (they collide with the CTAs) */
@media (prefers-reduced-motion: reduce) { .aver-gallery__slide { transition:none; } }

/* ============================================================= ABOUT / MV */
.mv-grid { display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items:center; }
@media (max-width: 900px){ .mv-grid { grid-template-columns:1fr; } }
/* .mv-figure is the positioning context (NOT clipped) so the 10+ stat can overflow the photo corner,
   like the reference (absolute -bottom-6 -end-6). The rounding/clip lives on the inner __img. */
.mv-figure { position:relative; }
.mv-figure__img { border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; background: var(--c-primary-tint); }
.mv-figure img { width:100%; height:100%; object-fit:cover; display:block; }
.mv-figure--brand { display:grid; place-items:center; border-radius: var(--radius-lg); overflow:hidden;
  background: radial-gradient(120% 120% at 20% 0%, var(--c-primary-soft), var(--c-primary) 55%, var(--c-slate) 120%); }
.mv-figure__mark { color: rgba(255,255,255,.22); }
.mv-figure__mark .icon { width: 46%; height:auto; max-width:200px; stroke-width:1.2; }
/* 10+ box: overflows the photo's bottom-end corner, lighter sage #7A9D7E, soft shadow, 16px radius. */
.mv-stat {
  position:absolute; inset-inline-end:-1.5rem; bottom:-1.5rem; max-width:200px; z-index:2;
  background:#43745C; color:#fff; border-radius:16px; padding:1.15rem 1.35rem; text-align:start;   /* deeper green so white text meets WCAG AA (was #7A9D7E = 2.88:1) */
  box-shadow: 0 18px 40px rgba(25,38,43,.20);
}
.mv-stat b { display:block; font-size:1.85rem; font-weight:800; line-height:1; }
.mv-stat span { font-size:.85rem; opacity:1; }
@media (max-width:640px){ .mv-stat { inset-inline-end:.75rem; bottom:.75rem; } }   /* keep inside on small screens */
/* Mission + Vision — side-by-side tinted panels (sky / gold) with a coloured icon, matching the
   reference's compact "About" cards. */
.mv-cards { display:grid; grid-template-columns: 1fr 1fr; gap:.9rem; margin-top:1.5rem; }
@media (max-width: 560px){ .mv-cards { grid-template-columns:1fr; } }
.mv-card { border-radius: var(--radius); padding:1.2rem 1.3rem; }
.mv-card__ic { display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:12px; margin-bottom:.65rem; }
.mv-card__ic .icon { width:1.3rem; height:1.3rem; }
.mv-card h3 { font-size:1.1rem; margin:0 0 .35rem; }
.mv-card p { color: var(--c-muted); font-size:.93rem; line-height:1.5; margin:0; }
.mv-card--mission { background: rgba(47,111,148,.08); }
.mv-card--mission .mv-card__ic { background: rgba(47,111,148,.15); color: var(--c-sky); }
.mv-card--vision { background: rgba(244,197,66,.14); }
.mv-card--vision .mv-card__ic { background: rgba(244,197,66,.24); color: var(--c-donate); }

/* values — single centred heading "Our Core Values" / "قيمنا الأساسية" (reference: text-2xl extrabold) */
.values-head { text-align:center; font-size:1.5rem; font-weight:800; color:var(--c-ink); line-height:1.2; letter-spacing:normal; margin:0 0 2.5rem; }
.values { display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem; }
@media (max-width:900px){ .values { grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .values { grid-template-columns:1fr;} }
/* Bordered cell that gains a sage border + shadow on hover — matches the reference "Core Values" card
   (border border-gray-100 hover:border-[#7A9D7E]/40 hover:shadow-lg). No base bg/shadow. */
.value { text-align:center; padding:1.5rem 1.35rem; border:1px solid var(--c-border); border-radius:16px;
  transition: border-color .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1); }
.value:hover { border-color: rgba(122,157,126,.5); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce){ .value:hover { transform:none; } }
.value .chip { margin-inline:auto; width:3.5rem; height:3.5rem;
  background: linear-gradient(135deg, #7A9D7E 0%, #5BA3D0 100%); color:#fff; }
.value .chip .icon { color:#fff; }
.value h3 { font-size:1.05rem; margin:.5rem 0 .4rem; }
.value p { color: var(--c-muted); font-size:.875rem; line-height:1.55; margin:0; }

/* ============================================================= IMPACT BAND */
.impact { background: linear-gradient(150deg, var(--c-slate) 0%, #223140 100%); color:#fff; }
.impact .section-head h2 { color:#fff; }
.impact .section-head p { color: rgba(255,255,255,.75); }
.impact-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1.25rem; }
@media (max-width:900px){ .impact-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width:520px){ .impact-grid { grid-template-columns:1fr;} }
.stat { text-align:center; padding:1.5rem 1rem; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius); }
.stat .chip { background: var(--c-gold); color: var(--c-slate); margin-inline:auto; }   /* solid bright gold chip, dark glyph — matches the reference */
.stat b { display:block; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.35rem); font-weight:800; line-height:1.05; letter-spacing:-.01em; }
.stat span { color: rgba(255,255,255,.78); font-size:.95rem; }

/* ============================================================= GET INVOLVED / DONATE */
/* Ported 1:1 from the reference #contact section: white section, centred header (max-w-2xl mx-auto
   mb-14), 2-col grid (gap-10), tinted cards + tinted form (bg #F7F9F6 = --c-base). */
.involve-head { text-align:center; max-width: 42rem; margin: 0 auto clamp(2.25rem, 5vw, 3.5rem); }
.involve-head h2 { margin: .5rem 0 1rem; }
.involve-head p { margin:0; color: var(--c-muted); }
.involve-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items:stretch; }
@media (max-width: 900px){ .involve-grid { grid-template-columns:1fr; gap:2rem; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.involve-opts { display:grid; gap:1rem; margin-bottom:2rem; }
.involve-opt { display:flex; align-items:flex-start; gap:1rem; padding:1.25rem; border:1px solid var(--c-border); border-radius:1rem; background: var(--c-base); }
.involve-opt .chip { margin:0; flex:none; width:3rem; height:3rem; border-radius:.75rem; background: linear-gradient(135deg, #7A9D7E 0%, #5BA3D0 100%); color:#fff; }
.involve-opt .chip .icon { color:#fff; width:1.375rem; height:1.375rem; }
.involve-opt h3 { margin:0 0 .15rem; font-size:1rem; font-weight:700; color: var(--c-slate); }
.involve-opt p { margin:0; color: var(--c-muted); font-size:.875rem; line-height:1.5; }
.involve-contact { display:grid; gap:.75rem; }
.involve-contact__row { display:flex; align-items:center; gap:.75rem; color: var(--c-muted); text-decoration:none; }
.involve-contact__row:hover { color: var(--c-primary); }
.involve-contact__row .icon { flex:none; width:1.125rem; height:1.125rem; color: var(--c-primary-soft); }
/* Shared form card — the reusable "component" both CF7 forms carry: homepage Get-Involved (.involve-form)
   AND the institutional Contact page (.contact-form). Each container adds `.aver-formcard`, so this ONE
   block styles them together — edit here once and both forms update (there are no React components in a
   PHP theme; a shared class + a shared render fn `aver_cf7_send_button()` are how we get "1 change → all").
   Matches the reference form card (tinted #F7F9F6, rounded-3xl, p-7 sm:p-9). */
.aver-formcard { background: var(--c-base); border:1px solid var(--c-border); border-radius:1.5rem; padding: clamp(1.75rem, 3vw, 2.25rem); display:flex; flex-direction:column; height:100%; }
.aver-formcard .wpcf7 { display:flex; flex-direction:column; flex:1; }
/* The CF7 form already sits inside the .aver-formcard card — cancel the standalone .entry-content .wpcf7
   card treatment (white box + border + max-width:640 + centering) so it FILLS the card like the homepage
   form (no card-in-a-card). The higher-specificity selector beats `.entry-content .wpcf7` regardless of order. */
.aver-formcard .wpcf7,
.entry-content .aver-formcard .wpcf7 { background:transparent; border:0; box-shadow:none; padding:0; max-width:none; margin-inline:0; }
.involve-form__head h3 { margin:0 0 .35rem; font-size:1.35rem; }
.involve-form__head p { margin:0 0 1.25rem; color: var(--c-muted); font-size:.975rem; }
.aver-formcard .wpcf7-form p { margin:0 0 1rem; }
/* Inputs — the :not() chain matches the global `.wpcf7-form input` specificity (0,4,1) so the card look wins. */
.aver-formcard .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.aver-formcard .wpcf7-form textarea, .aver-formcard .wpcf7-form select {
  width:100%; font: inherit; color: var(--c-ink); background:#fff; border:1px solid #e5e7eb;
  border-radius:.75rem; padding:.75rem 1rem; text-align: start; margin-top:.35rem; }
/* RTL: align the field text + placeholders to the right and keep the Arabic font */
[dir="rtl"] .aver-formcard .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
[dir="rtl"] .aver-formcard .wpcf7-form textarea,
[dir="rtl"] .aver-formcard .wpcf7-form select { text-align: right; direction: rtl; font-family: "Tajawal", sans-serif; }
.aver-formcard .wpcf7-form textarea { min-height:120px; resize:vertical; }
.aver-formcard .wpcf7-form input:focus, .aver-formcard .wpcf7-form textarea:focus, .aver-formcard .wpcf7-form select:focus { outline:none; border-color: var(--c-primary-soft); box-shadow: 0 0 0 3px rgba(122,157,126,.2); }
/* Shared donate-pill submit with a centred paper-plane. `.aver-formcard .wpcf7-form .aver-send` (0,3,0)
   beats the global `.wpcf7-form .wpcf7-submit` (0,2,0). Button markup comes from aver_cf7_send_button(). */
.aver-formcard .wpcf7-form .aver-send { width:100%; background: var(--c-donate); color:#fff; border:0; border-radius: var(--pill);
  font-family: inherit;   /* buttons don't inherit font-family by default — use the theme/Arabic font, not the browser default */
  padding:.9rem 1.5rem; font-weight:700; font-size:1rem; cursor:pointer; transition: background .18s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem; }   /* label + paper-plane centred together, like the reference */
.aver-formcard .aver-send .icon { width:1.05rem; height:1.05rem; flex:none; }
[dir="rtl"] .aver-formcard .aver-send .icon, html[lang^="ar"] .aver-formcard .aver-send .icon { transform: scaleX(-1); }   /* mirror (not rotate-180) so the plane still points UP, toward the RTL send direction */
[dir="rtl"] .aver-formcard .aver-send, html[lang^="ar"] .aver-formcard .aver-send { font-family: "Tajawal", sans-serif; }
.aver-formcard .wpcf7-form .aver-send:hover { background:#8f4329; transform:none; }
.aver-formcard .wpcf7-acceptance { font-size:.85rem; color: var(--c-muted); }
.aver-formcard .wpcf7-list-item { margin:0; }
.involve-form__donate { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; width:100%;
  margin-top:.9rem; color: var(--c-donate); font-weight:700; text-decoration:none; }
.involve-form__donate .icon { width:1.05rem; height:1.05rem; }
.involve-form__donate:hover { text-decoration: underline; }

/* ============================================================= FORM (Contact Form 7 — themed globally) */
/* Donate page: the [aver_donate] wrapper is the card. Migrated CF7 forms (e.g. /contact/) live in
   .entry-content and get a matching card here so every form looks themed, not browser-default. */
.aver-form { display:grid; gap:1rem; background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-lg); padding: clamp(1.25rem,3vw,2rem); box-shadow: var(--shadow-sm); }
.entry-content .wpcf7 {
  background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: clamp(1.25rem,3vw,2rem); box-shadow: var(--shadow-sm);
  max-width: 640px; margin-inline: auto;
}
.aver-form label, .wpcf7-form label { font-weight:600; font-size:.9rem; display:block; }
.aver-form .req, .wpcf7-form .req { color: var(--c-donate); }
.wpcf7-form p { margin: 0 0 1rem; }
.aver-form p { margin: 0; }
.aver-form input, .aver-form textarea, .aver-form select,
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form textarea, .wpcf7-form select {
  width:100%; font: inherit; color: var(--c-ink); background:#fff; margin-top:.35rem;
  border:1px solid var(--c-border); border-radius: var(--radius-sm); padding:.7rem .85rem;
}
.aver-form input:focus, .aver-form textarea:focus, .aver-form select:focus,
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { outline:none; border-color: var(--c-primary); box-shadow: var(--ring); }
.aver-form textarea, .wpcf7-form textarea { min-height: 130px; resize: vertical; }
.wpcf7-not-valid-tip { color: var(--c-donate); font-size:.85rem; }
.wpcf7-response-output { border:1px solid var(--c-border) !important; border-radius: var(--radius-sm); padding:.75rem 1rem !important; margin:1rem 0 0 !important; }
.wpcf7-response-output:empty { display:none !important; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--c-primary) !important; color: var(--c-primary); }
.aver-form input[type="submit"], .aver-form .wpcf7-submit,
.wpcf7-form input[type="submit"], .wpcf7-form .wpcf7-submit {
  background: var(--c-donate); color:#fff; border:0; border-radius: var(--pill);
  padding:.9rem 1.6rem; font-weight:600; font-size:1rem; cursor:pointer;
  transition: background .18s ease, transform .18s ease;
}
.aver-form .wpcf7-submit, .aver-form input[type="submit"] { width:100%; }
.aver-form input[type="submit"]:hover, .aver-form .wpcf7-submit:hover,
.wpcf7-form input[type="submit"]:hover, .wpcf7-form .wpcf7-submit:hover { background:#8f4329; transform:translateY(-2px); }
.wpcf7-spinner { margin-inline-start:.5rem; }

/* ============================================================= POST/PAGE CONTENT */
.entry { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.entry-head { max-width: 760px; margin: 0 auto 2rem; }
.entry-head h1 { font-size: var(--wp--preset--font-size--h1); margin:.5rem 0; }
.entry-meta { font-family:"JetBrains Mono",monospace; font-size:.8rem; color: var(--c-muted); }
[dir="rtl"] .entry-meta { font-family:"Tajawal",sans-serif; }
.prose { max-width: 760px; margin-inline:auto; font-size: 1.0625rem; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: var(--wp--preset--font-size--h3); margin-top: 2rem; }
.prose h3 { font-size: var(--wp--preset--font-size--h4); margin-top: 1.5rem; }
.prose a { color: var(--c-sky); text-decoration: underline; }
.prose img { border-radius: var(--radius); }
.prose iframe { width:100%; max-width:100%; border:1px solid var(--c-border); border-radius: var(--radius); min-height: 520px; }
.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose blockquote { border-inline-start: 3px solid var(--c-primary); padding-inline-start:1rem; color: var(--c-muted); font-style: italic; }

/* archive list */
.page-hero { background: var(--c-primary-tint); padding-block: clamp(2.5rem,6vw,4rem); border-bottom:1px solid var(--c-border); }
.page-hero h1 { font-size: var(--wp--preset--font-size--h1); font-weight: 800; margin:.25rem 0 .5rem; }
.page-hero p { color: var(--c-muted); margin:0; max-width: 60ch; }
/* Centred variant (category/tag archives — no eyebrow, title centred). */
.page-hero--center { text-align: center; }
.page-hero--center p { margin-inline: auto; }

/* ============================================================= FOOTER */
.site-footer { background: var(--c-slate); color: rgba(255,255,255,.82); padding-block: clamp(3rem,6vw,4.5rem) 1.5rem; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(1.5rem,3.5vw,2.75rem); }   /* brand · Découvrir · S'impliquer · Contact (Ressources moved to the header dropdown) */
@media (max-width:1040px){ .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width:720px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:480px){ .footer-grid { grid-template-columns: 1fr; } .footer-grid > :first-child { grid-column: auto; } }
.site-footer h2, .site-footer h4 { color:#fff; font-size:.95rem; letter-spacing:.04em; margin:0 0 1rem; text-transform:uppercase; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration:none; }
.site-footer a:hover { color:#fff; text-decoration:underline; }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.footer-brand .brand__name { color:#fff; }
.footer-brand .brand__acr { color: rgba(255,255,255,.6); }
.footer-about { margin:1rem 0 0; font-size:.95rem; color: rgba(255,255,255,.72); max-width: 36ch; }
/* Front-end "edit" pencil — only rendered for logged-in editors (aver_edit_pencil), jumps to the admin
   screen that manages that region. Subtle until hovered; never shown to visitors. */
.aver-edit-pencil { display:inline-flex; align-items:center; justify-content:center; width:1.85rem; height:1.85rem; margin-inline-start:.45rem; border-radius:999px; color:var(--c-primary); background:rgba(67,116,92,.10); border:1px solid rgba(67,116,92,.24); vertical-align:middle; opacity:.5; text-decoration:none; transition:opacity .15s ease, background .15s ease; }
.aver-edit-pencil:hover, .aver-edit-pencil:focus-visible { opacity:1; background:rgba(67,116,92,.18); }
.aver-edit-pencil .icon { width:1rem; height:1rem; }

/* Cloudflare Turnstile widget inside the shared forms — sits just above the submit button. */
.aver-turnstile { margin:.25rem 0 1.1rem; display:flex; justify-content:center; }

.footer-social { display:flex; gap:.6rem; margin-top:1.15rem; }
.footer-social__link { display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:999px; color:#fff; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.footer-social__link:hover, .footer-social__link:focus-visible { background: var(--c-gold); border-color: var(--c-gold); color:#1c2b22; transform: translateY(-2px); }
.footer-social__link .icon { width:1.15rem; height:1.15rem; }
.footer-contact { display:grid; gap:.55rem; font-size:.92rem; margin-top:.5rem; }
.footer-contact .row { display:flex; gap:.6rem; align-items:flex-start; }
.footer-contact .icon { color: var(--c-gold); margin-top:2px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.14); margin-top:2.5rem; padding-top:1.25rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.85rem; color: rgba(255,255,255,.6); }

/* ============================================================= UTIL / A11Y */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .btn:hover { transform: none; }
}
.text-center { text-align:center; }
.mt-cta { margin-top: 2rem; text-align:center; }

/* ============================================================= QUERY LOOP (listings) */
.aver-loop .wp-block-post-template { gap: clamp(1rem,2.5vw,1.75rem); margin:0; padding:0; list-style:none; }
.aver-loop .wp-block-post {
  background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-sm); display:flex; flex-direction:column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.aver-loop .wp-block-post:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.aver-loop .wp-block-post-featured-image { margin:0; }
.aver-loop .wp-block-post-featured-image img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.aver-loop .aver-fi-ph { aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; background: var(--c-primary-tint); }
.aver-loop .aver-fi-ph .icon { width:2.4rem; height:2.4rem; color: var(--c-primary); opacity:.45; }
.aver-loop .wp-block-post > :not(.wp-block-post-featured-image) { padding-inline:1.35rem; }
.aver-loop .wp-block-post-date { padding-top:1.1rem; font-family:"JetBrains Mono",monospace; font-size:.75rem; color:var(--c-muted); }
[dir="rtl"] .aver-loop .wp-block-post-date { font-family:"Tajawal",sans-serif; }
.aver-loop .wp-block-post-title { margin:.4rem 0 .5rem; font-size:1.2rem; line-height:1.3; }
.aver-loop .wp-block-post-title a { color:var(--c-ink); text-decoration:none; }
.aver-loop .wp-block-post-title a:hover { color:var(--c-primary); }
.aver-loop .wp-block-post-excerpt { color:var(--c-muted); font-size:.95rem; padding-bottom:1.5rem; }
.aver-loop .wp-block-post-excerpt p { margin:0; }
.aver-loop .wp-block-post-excerpt__more-text { display:none; }
/* Content-image GALLERY lightbox (nav.js): stage (image + arrows + counter + caption) over a thumbnail strip */
.aver-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; flex-direction: column;
  background: rgba(20,30,36,.9); backdrop-filter: blur(3px); padding: clamp(.75rem, 3vw, 2rem); gap: .75rem; }
.aver-lightbox.is-open { display: flex; }
.aver-lightbox__stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .6rem; }
.aver-lightbox__img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); background: #fff; }

/* round controls (close + prev/next), token focus ring, WCAG-legible on the dark overlay */
.aver-lightbox__close, .aver-lightbox__nav { position: absolute; z-index: 2; border: 0; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.16); display: grid; place-items: center; border-radius: 50%;
  transition: background .18s ease, transform .18s ease; }
.aver-lightbox__close:hover, .aver-lightbox__nav:hover { background: rgba(255,255,255,.32); }
.aver-lightbox__close:focus-visible, .aver-lightbox__nav:focus-visible, .aver-lightbox__thumb:focus-visible {
  outline: 3px solid var(--c-primary); outline-offset: 2px; }
.aver-lightbox__close { top: .35rem; inset-inline-end: .35rem; width: 2.75rem; height: 2.75rem; }
.aver-lightbox__close svg { width: 1.35rem; height: 1.35rem; }
.aver-lightbox__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.aver-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.aver-lightbox__nav svg { width: 1.6rem; height: 1.6rem; }
.aver-lightbox__prev { inset-inline-start: .25rem; }
.aver-lightbox__next { inset-inline-end: .25rem; }
[dir="rtl"] .aver-lightbox__nav svg { transform: scaleX(-1); }   /* mirror chevrons in Arabic */
.aver-lightbox.is-single .aver-lightbox__nav,
.aver-lightbox.is-single .aver-lightbox__counter,
.aver-lightbox.is-single .aver-lightbox__thumbs { display: none; }

.aver-lightbox__counter { position: absolute; top: .5rem; inset-inline-start: .75rem; z-index: 2;
  font: 600 .8rem/1 ui-monospace, "JetBrains Mono", monospace; color: #fff; background: rgba(0,0,0,.45);
  padding: .35rem .6rem; border-radius: 999px; letter-spacing: .02em; }
.aver-lightbox__caption { flex: 0 0 auto; margin: 0; max-width: 62ch; text-align: center; color: #fff;
  font-size: .9rem; line-height: 1.5; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* thumbnail strip */
.aver-lightbox__thumbs { flex: 0 0 auto; display: flex; gap: .5rem; overflow-x: auto; padding: .25rem;
  max-width: 100%; justify-content: safe center; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.4) transparent; }
.aver-lightbox__thumbs::-webkit-scrollbar { height: 6px; }
.aver-lightbox__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 999px; }
.aver-lightbox__thumb { flex: 0 0 auto; width: 64px; height: 48px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius-sm); overflow: hidden; background: none; opacity: .5;
  transition: opacity .18s ease, box-shadow .18s ease; }
.aver-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aver-lightbox__thumb:hover { opacity: .85; }
.aver-lightbox__thumb.is-active { opacity: 1; box-shadow: 0 0 0 3px var(--c-primary); }

html.aver-lb-lock { overflow: hidden; }
@media (max-width: 640px) {
  .aver-lightbox__nav { width: 2.5rem; height: 2.5rem; }
  .aver-lightbox__nav svg { width: 1.3rem; height: 1.3rem; }
  .aver-lightbox__thumb { width: 54px; height: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .aver-lightbox.is-open .aver-lightbox__img { animation: aver-lb-in .2s cubic-bezier(.16,1,.3,1); }
  @keyframes aver-lb-in { from { transform: scale(.96); opacity: 0; } }
}
/* single post/media featured image at the top of the content */
.aver-single-fi { margin: 0 0 1.75rem; }
/* Show the WHOLE image (contain, not cover — was cropping the top); letterbox on the brand tint.
   cursor:zoom-in signals it opens in the lightbox (nav.js scopes .aver-single-fi). */
.aver-single-fi img { width: 100%; max-height: 60vh; object-fit: contain !important; border-radius: var(--radius-lg);
  display: block; background: var(--c-primary-tint); cursor: zoom-in; }   /* !important beats core's inline object-fit:cover */
/* migrated content galleries: show images responsively, clickable */
.foogallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin: 1.25rem 0; }
.foogallery .fg-item, .foogallery .fg-item-inner, .foogallery .fg-thumb { margin: 0; display: block; }
.foogallery .fg-image { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; cursor: zoom-in; display: block; }
.entry-content img, .prose img { cursor: zoom-in; }

/* AJAX-swapped listing region: dim + lock while a new page is fetching (nav.js) */
.js-listing { outline: none; }
.js-listing.is-loading { opacity: .5; pointer-events: none; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .js-listing.is-loading { transition: none; } }
.aver-pagination { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; margin-top:2.5rem; gap:.4rem; }
.aver-pagination a, .aver-pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-weight:600; color:var(--c-ink); text-decoration:none; padding:.45rem .85rem; border:1.5px solid var(--c-primary-soft); border-radius:10px; background:var(--c-surface); box-shadow:0 1px 2px rgba(20,30,25,.06); transition:background .2s ease, border-color .2s ease, color .2s ease; }
.aver-pagination a:hover { background:var(--c-primary-tint); border-color:var(--c-primary); color:var(--c-primary); }
.aver-pagination .current { background:var(--c-primary); color:#fff; border-color:var(--c-primary); box-shadow:0 3px 10px rgba(67,116,92,.32); }
.aver-pagination .icon { width:1.05rem; height:1.05rem; }
[dir="rtl"] .aver-pagination .icon { transform: scaleX(-1); }

/* ----- Actualités: search / topic / sort toolbar ----- */
.news-filter { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-bottom:1rem; }
.news-filter__search { position:relative; flex:1 1 16rem; min-width:13rem; }
.news-filter__search .news-filter__icon { position:absolute; inset-inline-start:.85rem; top:50%; transform:translateY(-50%); width:1.15rem; height:1.15rem; color:var(--c-muted); pointer-events:none; }
.news-filter__search input { width:100%; box-sizing:border-box; padding:.7rem 1rem; padding-inline-start:2.6rem; border:1px solid var(--c-border); border-radius:var(--pill); background:var(--c-surface); color:var(--c-ink); font:inherit; }
.news-filter__select { position:relative; flex:0 0 auto; }
.news-filter__select select { appearance:none; -webkit-appearance:none; padding:.7rem 2.4rem .7rem 1rem; border:1px solid var(--c-border); border-radius:var(--pill); background:var(--c-surface); color:var(--c-ink); font:inherit; cursor:pointer; max-width:15rem; }
.news-filter__chev { position:absolute; inset-inline-end:.7rem; top:50%; transform:translateY(-50%); width:1.05rem; height:1.05rem; color:var(--c-muted); pointer-events:none; }
[dir="rtl"] .news-filter__select select { padding:.7rem 1rem .7rem 2.4rem; }
.news-filter input:focus-visible, .news-filter select:focus-visible { outline:2px solid transparent; outline-offset:2px; border-color:var(--c-primary); box-shadow:var(--ring); }
/* Windows high-contrast / forced-colors drops box-shadow — keep a real outline for focus + pagination. */
@media (forced-colors: active) {
	.news-filter input:focus-visible, .news-filter select:focus-visible,
	.news-filter__go:focus-visible, .aver-pagination a:focus-visible { outline:2px solid CanvasText; outline-offset:2px; }
	.aver-pagination .current { outline:2px solid CanvasText; }
}
.news-filter__go { flex:0 0 auto; }
.news-filter__reset { display:inline-flex; align-items:center; gap:.35rem; color:var(--c-muted); text-decoration:none; font-size:.95rem; padding:.5rem; }
.news-filter__reset:hover { color:var(--c-donate); }
.news-filter__reset .icon { width:1rem; height:1rem; }
.news-filter__count { color:var(--c-muted); font-size:.95rem; margin:.25rem 0 1.5rem; }
[dir="rtl"] .news-filter__count { font-family:"Tajawal",sans-serif; }
.news-empty { text-align:center; max-width:30rem; margin:1rem auto 0; display:flex; flex-direction:column; align-items:center; gap:1rem; padding:2.5rem 1rem; }
.news-empty .chip { display:inline-flex; align-items:center; justify-content:center; }
.news-empty p { color:var(--c-muted); margin:0; }
@media (max-width: 640px) {
	.news-filter__search { flex-basis:100%; }
	.news-filter__select, .news-filter__select select { flex:1 1 100%; width:100%; max-width:none; }
	.news-filter__go { flex:1 1 100%; }
}

/* page-hero post date/terms on single */
.page-hero .wp-block-post-date { color: var(--c-muted); font-family:"JetBrains Mono",monospace; font-size:.8rem; }
.page-hero .wp-block-post-terms { margin-top:.5rem; }
.page-hero .wp-block-post-terms a { display:inline-block; background:var(--c-surface); border:1px solid var(--c-border); padding:.2rem .7rem; border-radius:var(--pill); font-size:.8rem; text-decoration:none; color:var(--c-primary); }

/* search form */
.page-hero .wp-block-search__inside-wrapper { max-width:520px; border:1px solid var(--c-border); border-radius:var(--pill); overflow:hidden; background:#fff; }
.page-hero .wp-block-search__input { border:0; padding:.7rem 1rem; }
.page-hero .wp-block-search__button { background:var(--c-primary); color:#fff; border:0; margin:0; padding-inline:1.2rem; }

/* ============================================================= PROGRAMME LANDINGS */
/* full-bleed feature image directly under the page hero */
.program-banner { width:100%; aspect-ratio: 21/8; max-height: 420px; overflow:hidden; background: var(--c-primary-tint); border-bottom:1px solid var(--c-border); }
.program-banner img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 640px) { .program-banner { aspect-ratio: 3/2; } }

/* "what we do" checklist */
.program-actions { list-style:none; margin: 0 auto; padding:0; max-width: 760px; display:grid; gap: .85rem; }
.program-actions li { display:flex; align-items:flex-start; gap:.85rem; background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm); }
.program-actions li > span { color: var(--c-ink); line-height:1.55; }
.program-actions__check { flex:none; width:1.4rem; height:1.4rem; color: var(--c-primary); margin-top:.1rem;
  background: var(--c-primary-tint); border-radius:50%; padding:.22rem; box-sizing:content-box; }

/* numbered objectives */
.program-objectives { list-style:none; counter-reset: obj; margin: 0 auto; padding:0; max-width: 820px; display:grid; gap:1rem; }
.program-objectives li { counter-increment: obj; display:flex; align-items:flex-start; gap:1rem;
  background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius); padding:1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.program-objectives__num { flex:none; width:2.25rem; height:2.25rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--c-primary); color:#fff; font-family:"JetBrains Mono",monospace; font-weight:600; font-size:.95rem; }
.program-objectives__num::before { content: counter(obj,decimal-leading-zero); }
.program-objectives li > span:last-child { color: var(--c-ink); line-height:1.55; align-self:center; }

/* volunteer cards */
.vol-card__head { display:flex; align-items:flex-start; gap:.85rem; margin-bottom:.85rem; }
.vol-card__head .chip { margin:0; flex:none; }
.vol-card__head h3 { margin:0; font-size:1.05rem; }
.vol-card__country { font-family:"JetBrains Mono",monospace; font-size:.75rem; letter-spacing:.04em; color: var(--c-primary); text-transform:uppercase; }
.vol-card__desc { color: var(--c-muted); font-size:.95rem; line-height:1.55; margin:0 0 .9rem; }
.vol-card__meta { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-top:auto; padding-top:.75rem; border-top:1px solid var(--c-border); }
.vol-card__meta span { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color: var(--c-muted); font-family:"JetBrains Mono",monospace; }
.vol-card__meta .icon { width:1rem; height:1rem; color: var(--c-primary); }

/* photo gallery */
.program-gallery { display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.5rem,1.4vw,1rem); }
.program-gallery__item { margin:0; aspect-ratio:1; overflow:hidden; border-radius: var(--radius); border:1px solid var(--c-border); background: var(--c-primary-tint); }
.program-gallery__item img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.program-gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 980px) { .program-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .program-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Translated-article photo gallery (carried over from the original on AR/EN posts) */
.aver-post-gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem,1.4vw,1rem); margin: clamp(1.5rem,3vw,2.25rem) 0 0; }
.aver-post-gallery__item { margin:0; aspect-ratio:4/3; overflow:hidden; border-radius: var(--radius); border:1px solid var(--c-border); background: var(--c-primary-tint); }
.aver-post-gallery__item img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.aver-post-gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 560px) { .aver-post-gallery { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================= INSTITUTIONAL PAGES
   (About, Contact, Mission, Bureau, EVS — inc/content-pages.php) */
.prose--lead { max-width: 820px; }
.prose--lead p { font-size: 1.125rem; line-height: 1.7; color: var(--c-slate); }
.section-head--left { max-width: none; margin: 0 0 1.5rem; text-align: start; }
.card--feature .card__body { padding: 1.6rem 1.75rem 1.9rem; }
.card--feature h2 { font-size: var(--wp--preset--font-size--h3); margin:.2rem 0 .6rem; }
.aver-quote { margin:.25rem 0 1rem; padding-inline-start: 1rem; border-inline-start: 3px solid var(--c-gold);
  font-style: italic; color: var(--c-ink); line-height: 1.6; }

/* two-column split (content + side panel) */
.aver-split { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items:start; }
/* Contact: the coords column is short and the form tall — centre the coords against the form so the
   leftover height is balanced above/below it instead of dumped as white space below the coords. */
.aver-split--contact { grid-template-columns: .9fr 1.1fr; align-items:center; }
@media (max-width: 860px) { .aver-split { grid-template-columns: 1fr; } }

/* pill list (target groups) */
.pill-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.pill { display:inline-flex; align-items:center; gap:.55rem; background: var(--c-surface); border:1px solid var(--c-border);
  border-radius: 999px; padding:.55rem 1.05rem; font-weight:600; color: var(--c-ink); box-shadow: var(--shadow-sm); }
.pill__icon { width:1.15rem; height:1.15rem; color: var(--c-primary); flex:none; }

/* facts panel (legal identity) */
.aver-facts { background: var(--c-surface); border:1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: clamp(1.25rem,2.5vw,1.75rem); box-shadow: var(--shadow-sm); }
.aver-facts__title { font-size: 1.15rem; margin:0 0 1rem; }
.aver-facts dl { margin:0; display:grid; gap:.9rem; }
.aver-facts__row { display:grid; grid-template-columns: 1.5rem auto; grid-template-rows:auto auto; gap:.1rem .75rem; align-items:start; }
.aver-facts__icon { width:1.25rem; height:1.25rem; color: var(--c-primary); grid-row:1 / span 2; align-self:center; }
.aver-facts dt { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--c-muted); font-weight:700; }
.aver-facts dd { margin:0; color: var(--c-ink); line-height:1.45; }

/* focus meters (mission %) */
.meter-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2.5vw,1.75rem); }
@media (max-width: 860px) { .meter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .meter-grid { grid-template-columns: 1fr; } }
.meter__head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.meter__label { font-weight:600; color: var(--c-ink); }
.meter__val { font-family:"JetBrains Mono",monospace; font-size:.85rem; color: var(--c-primary); font-weight:600; }
[dir="rtl"] .meter__val { font-family:"Tajawal",sans-serif; }
.meter__track { height:8px; border-radius:999px; background: var(--c-primary-tint); overflow:hidden; }
.meter__fill { display:block; height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-gold) 140%); }

/* team / board cards */
.team-card { text-align:center; }
.team-card .card__body { align-items:center; }
.team-card__avatar { width:4.25rem; height:4.25rem; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--c-primary-soft) 0%, var(--c-primary-tint) 100%);
  color: var(--c-primary); font-weight:800; font-size:1.35rem; letter-spacing:.02em; margin-bottom:.4rem; }
.team-card__name { margin:0; font-size:1.15rem; }
.team-card__role { color: var(--c-muted); font-size:.95rem; min-height:2.6em; }
.team-card__since { font-family:"JetBrains Mono",monospace; font-size:.72rem; letter-spacing:.04em; color: var(--c-primary);
  text-transform:uppercase; margin-top:.3rem; }
[dir="rtl"] .team-card__since { font-family:"Tajawal",sans-serif; }

/* contact coordinates + form */
.contact-coords { display:grid; gap:1.1rem; }
.contact-coords__item { display:flex; gap:.85rem; align-items:flex-start; }
.contact-coords__icon { width:1.4rem; height:1.4rem; color: var(--c-primary); flex:none; margin-top:.15rem; }
.contact-coords__label { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--c-muted); font-weight:700; }
.contact-coords__value { margin:.15rem 0 0; color: var(--c-ink); line-height:1.5; }
.contact-coords__value a { color: var(--c-ink); text-decoration:none; }
.contact-coords__value a:hover { color: var(--c-primary); text-decoration:underline; }
/* .contact-form is the institutional Contact page form column; its card styling now comes from the shared
   `.aver-formcard` class (added alongside in inc/content-pages.php), so there's no duplicate container rule. */
.contact-form__title { margin:0 0 1rem; font-size:1.25rem; }

/* call-to-action panel (EVS) */
.cta-panel { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  background: linear-gradient(135deg, var(--c-primary) 0%, #365e4b 100%); color:#fff;
  border-radius: var(--radius-lg); padding: clamp(1.5rem,4vw,2.5rem); }
.cta-panel h2 { margin:0 0 .35rem; color:#fff; font-size: var(--wp--preset--font-size--h3); }
.cta-panel p { margin:0; color: rgba(255,255,255,.85); max-width: 48ch; }
.cta-panel .btn { background:#fff; color: var(--c-primary); border-color:#fff; flex:none; }
.cta-panel .btn:hover { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }

/* ============================================================= TESTIMONIALS (homepage carousel) */
.testi-carousel { position: relative; }
.testi-viewport { overflow: hidden; }
.testi-track { display: flex; transition: transform .45s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .testi-track { transition: none; } }
.testi-slide { flex: 0 0 100%; display: flex; justify-content: center; padding: .3rem; }
.testi-slide .testi { width: 100%; max-width: 1040px; }
.testi-controls { display: flex; align-items: center; justify-content: flex-start; gap: 1.1rem; margin: 1.6rem auto 0; max-width: 1040px; }
.testi-arrow { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--c-primary);
  background: transparent; color: var(--c-primary); display: grid; place-items: center; cursor: pointer;
  transition: background .18s ease, color .18s ease; flex: none; }
.testi-arrow:hover { background: var(--c-primary); color: #fff; }
.testi-arrow .icon { width: 1.05rem; height: 1.05rem; }
[dir="rtl"] .testi-arrow .icon { transform: scaleX(-1); }
.testi-dots { display: flex; align-items: center; gap: .45rem; }
.testi-dot { width: .5rem; height: .5rem; border-radius: 999px; border: 0; background: var(--c-border);
  cursor: pointer; padding: 0; transition: width .2s ease, background .2s ease; }
.testi-dot.is-active { width: 1.5rem; background: var(--c-donate); }
/* Two-column module (photo + quote), matching the reference "Voices" card. Native CSS-grid RTL
   flow puts the photo on the right in Arabic automatically — no manual column swap needed. */
.testi { position: relative; margin: 0; background: var(--c-base); border: 0;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: visible;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem); }   /* bg-[#F7F9F6] rounded-3xl p-6 sm:p-10 gap-8 items-center */
.testi__media { position: relative; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--c-primary-soft); }   /* rounded-2xl aspect-square shadow-lg */
.testi__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testi__body { display: flex; flex-direction: column; gap: 1rem; padding: 0; background: transparent; }
.testi__mark { width: 2.5rem; height: 2.5rem; color: var(--c-primary-soft); opacity: 1; flex: none; }
.testi__quote { margin: 0 0 .5rem; position: relative; z-index: 1; color: var(--c-slate); font-weight: 500;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.5rem); line-height: 1.55; }   /* text-xl sm:text-2xl font-medium */
.testi__by { display: flex; flex-direction: column; gap: .25rem; margin-top: 0; }
.testi__name { font-size: 1.125rem; font-weight: 700; color: var(--c-slate); }   /* text-lg font-bold */
.testi__loc { display: inline-flex; align-items: center; gap: .4rem; color: var(--c-primary-soft); font-size: .875rem; }
.testi__loc .icon { width: .95rem; height: .95rem; flex: none; }
@media (max-width: 680px) {
  .testi { grid-template-columns: 1fr; gap: 1.5rem; }
  .testi__media { max-width: 320px; margin-inline: auto; }
}

/* ============================================================= PROGRESSIVE LOADING
   "Shell first, then items populate." Sections + hero rise in on scroll and grid cards stagger; image
   tiles shimmer until their picture loads. JS-gated (html.aver-js, set in <head> before first paint) so
   no-JS visitors see everything immediately, and fully disabled under prefers-reduced-motion. A failsafe
   (html.aver-reveal-all, added ~2.4s after load) guarantees content is never left hidden if JS stalls. */
@media (prefers-reduced-motion: no-preference) {
  html.aver-js:not(.aver-reveal-all) .page-hero,
  html.aver-js:not(.aver-reveal-all) .section { opacity: 0; transform: translateY(22px); }
  html.aver-js .page-hero, html.aver-js .section { transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
  html.aver-js .page-hero.is-in, html.aver-js .section.is-in { opacity: 1; transform: none; }
  /* grid cards populate in sequence once their section reveals */
  html.aver-js:not(.aver-reveal-all) .section:not(.is-in) .grid > * { opacity: 0; transform: translateY(14px); }
  html.aver-js .section .grid > * { transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
  html.aver-js .section.is-in .grid > * { opacity: 1; transform: none; }
  html.aver-js .section.is-in .grid > *:nth-child(2) { transition-delay: .07s; }
  html.aver-js .section.is-in .grid > *:nth-child(3) { transition-delay: .14s; }
  html.aver-js .section.is-in .grid > *:nth-child(4) { transition-delay: .21s; }
  html.aver-js .section.is-in .grid > *:nth-child(5) { transition-delay: .28s; }
  html.aver-js .section.is-in .grid > *:nth-child(6) { transition-delay: .35s; }
  /* value cards stagger in when the values grid itself scrolls into view (observed separately so the
     animation is visible, not pre-fired when the tall About section first enters) */
  html.aver-js:not(.aver-reveal-all) .values:not(.is-in) > * { opacity: 0; transform: translateY(16px); }
  html.aver-js .values > * { transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
  html.aver-js .values.is-in > * { opacity: 1; transform: none; }
  html.aver-js .values.is-in > *:nth-child(2) { transition-delay: .08s; }
  html.aver-js .values.is-in > *:nth-child(3) { transition-delay: .16s; }
  html.aver-js .values.is-in > *:nth-child(4) { transition-delay: .24s; }
}
/* image tiles: shimmer placeholder until the picture loads (covers it) */
@keyframes aver-shimmer { 100% { transform: translateX(100%); } }
.card__media:not(.card__media--ph), .program-gallery__item, .aver-post-gallery__item { position: relative; }
.card__media:not(.card__media--ph):not(.is-loaded)::after,
.program-gallery__item:not(.is-loaded)::after,
.aver-post-gallery__item:not(.is-loaded)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; overflow: hidden; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.45) 50%, transparent 100%);
  animation: aver-shimmer 1.5s infinite;
}
[dir="rtl"] .card__media:not(.card__media--ph):not(.is-loaded)::after,
[dir="rtl"] .program-gallery__item:not(.is-loaded)::after,
[dir="rtl"] .aver-post-gallery__item:not(.is-loaded)::after { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .card__media::after, .program-gallery__item::after, .aver-post-gallery__item::after { display: none !important; }
}

/* volunteers abroad — stats + searchable roster table */
/* ============================================================ VOLUNTEERS MOBILITY — infographic
   (client request: replace the long name roster with figures — hosted / sent / destinations — plus a
   real per-country destinations breakdown. The roster data still drives the counts.) */
.vinfo-image { margin:0; }
.vinfo-image img { display:block; width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
/* --- Exchange band: inbound (in) ⇄ hub (Médenine) ⇄ outbound (out), with flowing route lines --- */
.vmob-exchange { display:flex; align-items:stretch; gap:clamp(.5rem,2vw,1.5rem); margin:clamp(1.5rem,3.5vw,2rem) 0;
  background:linear-gradient(135deg,var(--c-primary-tint),var(--c-surface)); border:1px solid var(--c-border);
  border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,2.75rem) clamp(1.2rem,3vw,2.5rem); box-shadow:var(--shadow-sm); }
.vmob-node { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.4rem; }
.vmob-node__ic { display:grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:50%; }
.vmob-node--in  .vmob-node__ic { background:rgba(67,116,92,.14); color:var(--c-primary); }
.vmob-node--out .vmob-node__ic { background:rgba(176,86,54,.14); color:var(--c-donate); }
.vmob-node__ic .icon { width:1.4rem; height:1.4rem; }
.vmob-node__num { font-size:clamp(2.6rem,6vw,3.8rem); font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.vmob-node--in  .vmob-node__num { color:var(--c-primary); }
.vmob-node--out .vmob-node__num { color:var(--c-donate); }
.vmob-node__label { color:var(--c-muted); font-weight:600; font-size:.9rem; max-width:18ch; line-height:1.3; }
.vmob-hub { flex:0 0 auto; align-self:center; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.vmob-hub__ring { display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:50%; background:var(--c-primary); color:#fff; box-shadow:0 0 0 6px rgba(67,116,92,.14); }
.vmob-hub__ic { display:flex; align-items:center; justify-content:center; line-height:0; }
.vmob-hub__ring .icon { width:1.5rem; height:1.5rem; display:block; }
.vmob-hub__label { font-weight:700; font-size:.8rem; color:var(--c-primary); white-space:nowrap; }
.vmob-conn { flex:1 1 0; min-width:2rem; align-self:center; display:flex; align-items:center; gap:.35rem; }
.vmob-conn--in { color:var(--c-primary); }
.vmob-conn--out { color:var(--c-donate); }
.vmob-conn__line { flex:1; height:3px; border-radius:3px; background-size:14px 100%; opacity:.75;
  background-image:repeating-linear-gradient(90deg,currentColor 0 7px,transparent 7px 14px); }
.vmob-conn__arrow { display:inline-flex; }
.vmob-conn__arrow .icon { width:1.05rem; height:1.05rem; }
/* Dashes flow in the reading direction: INTO the hub on the inbound side, OUT of the hub toward "sent" on
   the outbound side (both segments run left→right in LTR, so both share one direction). RTL flips both. */
@media (prefers-reduced-motion:no-preference){
  .vmob-conn__line { animation: vmob-flow 1s linear infinite; }
}
@keyframes vmob-flow { to { background-position-x: 14px; } }
[dir="rtl"] .vmob-conn__arrow .icon { transform:scaleX(-1); }
[dir="rtl"] .vmob-conn__line { animation-direction: reverse; }
@media (max-width:760px){
  .vmob-exchange { flex-direction:column; }
  .vmob-conn { width:100%; min-height:2.25rem; flex-direction:column; }
  .vmob-conn__line { width:3px; height:auto; align-self:center; min-height:1.8rem; background-size:100% 14px; animation:none;
    background-image:repeating-linear-gradient(180deg,currentColor 0 7px,transparent 7px 14px); }
  .vmob-conn__arrow .icon, [dir="rtl"] .vmob-conn__arrow .icon { transform:rotate(90deg); }
}

/* --- Europe destinations map (jsVectorMap, bundled locally) --- */
.vmob-mapwrap { margin:clamp(1.5rem,3.5vw,2rem) 0 0; border:1px solid var(--c-border); border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg,#f3f7f3,var(--c-surface)); box-shadow:var(--shadow-sm); }
.vmob-map { width:100%; height:clamp(340px,46vw,540px); }
.jvm-container { background:transparent!important; touch-action:pan-y; }
.jvm-tooltip { position:absolute; display:none; max-width:240px; padding:.4rem .7rem; border-radius:8px;
  background:var(--c-ink); color:#fff; font:600 .82rem/1.3 "Inter",sans-serif; box-shadow:var(--shadow-lg); pointer-events:none; z-index:40; }
.jvm-tooltip.active, .jvm-tooltip.jvm-tooltip--active { display:block; }
[dir="rtl"] .jvm-tooltip { font-family:"Tajawal",sans-serif; }
.jvm-line { pointer-events:none; }
.jvm-marker { cursor:default; }

/* --- Destinations "bento": featured top country + compact tiles, each with a proportional fill --- */
.vmob-dest { margin-top:0; }
.vmob-dest__head { margin-bottom:1.35rem; }
.vmob-dest__head h3 { margin:0 0 .3rem; }
.vmob-dest__head p { margin:0; color:var(--c-muted); }
.vmob-dest__head p b { color:var(--c-primary); }
.vmob-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; gap:.85rem; }
.vmob-cell { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.1rem; min-height:6.75rem;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:1rem 1.1rem 1.35rem; box-shadow:var(--shadow-sm); }
.vmob-cell__rank { position:absolute; top:.65rem; inset-inline-end:.85rem; font-size:.72rem; font-weight:700; color:var(--c-muted); opacity:.55; }
.vmob-cell__name { font-weight:600; color:var(--c-ink); font-size:.92rem; }
.vmob-cell__num { font-size:1.9rem; font-weight:800; line-height:1.15; color:var(--c-primary); font-variant-numeric:tabular-nums; }
.vmob-cell__bar { position:absolute; left:0; right:0; bottom:0; height:.4rem; background:var(--c-primary-tint); }
.vmob-cell__fill { display:block; height:100%; width:var(--pct,0%); background:linear-gradient(90deg,var(--c-primary),var(--c-primary-soft)); }
[dir="rtl"] .vmob-cell__fill { background:linear-gradient(270deg,var(--c-primary),var(--c-primary-soft)); }
@media (prefers-reduced-motion:no-preference){ .vmob-cell__fill { width:0; animation:vmob-grow 1.1s .12s cubic-bezier(.2,.7,.3,1) forwards; } }
@keyframes vmob-grow { to { width:var(--pct,0%); } }
.vmob-cell--feat { grid-column:span 2; grid-row:span 2; justify-content:flex-end;
  background:linear-gradient(150deg,var(--c-primary),var(--c-primary-soft)); border-color:transparent; color:#fff; }
.vmob-cell--feat .vmob-cell__name { color:rgba(255,255,255,.92); font-size:1.05rem; }
.vmob-cell--feat .vmob-cell__num { color:#fff; font-size:clamp(3rem,6vw,4.6rem); }
.vmob-cell--feat .vmob-cell__rank { color:rgba(255,255,255,.7); font-size:.85rem; }
.vmob-cell--feat .vmob-cell__bar { background:rgba(255,255,255,.22); height:.5rem; }
.vmob-cell--feat .vmob-cell__fill { background:#fff; }
@media (max-width:900px){ .vmob-bento { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){
  .vmob-bento { grid-template-columns:repeat(2,1fr); }
  .vmob-cell--feat { grid-column:1 / -1; grid-row:auto; min-height:8rem; }
  .vmob-cell--feat .vmob-cell__num { font-size:3.2rem; }
}

/* ============================================================= CUSTOM SCROLLBAR
   Branded viewport scrollbar that replaces the OS default. CSS-only — no JS and
   no scroll-hijack — so keyboard scrolling, RTL (the bar auto-flips to the left
   edge in Arabic) and prefers-reduced-motion all keep working untouched.
   Firefox uses scrollbar-color; Chromium/Safari use the ::-webkit-scrollbar
   pseudos. Colours come from the design tokens, so the bar adapts to both brand
   palettes (official sage / reference blue) with a Customizer toggle. */
html {
  scrollbar-width: thin;                                                  /* Firefox */
  scrollbar-color: var(--c-primary-soft, #7A9D7E) transparent;            /* green thumb, no track background */
}
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece { background: transparent; box-shadow: none; border: 0; }
::-webkit-scrollbar-thumb {
  background-color: var(--c-primary-soft, #7A9D7E);
  border-radius: 999px;
  border: 3px solid transparent;          /* transparent border insets the pill inside the track */
  background-clip: padding-box;
  transition: background-color .18s ease;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background-color: var(--c-primary, #43745C); }
::-webkit-scrollbar-corner { background: transparent; }