/* ==========================================================================
   Hope Foundation — design system
   --------------------------------------------------------------------------
   One stylesheet, no framework. The site previously pulled Bootstrap, the
   Bootstrap RTL bundle, Bootstrap Icons, FontAwesome and jQuery from five
   CDNs on every page load; all of that is gone. Icons are inline SVG,
   behaviour is vanilla JS.

   Sections:
     1. Tokens
     2. Reset and base
     3. Layout primitives
     4. Typography
     5. Buttons
     6. Forms
     7. Cards and media
     8. Progress and statistics
     9. Header and navigation
    10. Footer
    11. Hero and page banners
    12. Components (accordion, alerts, badges, breadcrumb, pagination, steps)
    13. Utilities
    14. Motion and responsive
   ========================================================================== */

/* -- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Ink and surfaces. The neutrals carry a slight warm/red bias so they sit
     with the burgundy brand rather than reading as cold grey against it. */
  --ink:            #23191c;
  --ink-2:          #5b4c50;
  --ink-3:          #8d7d81;
  --line:           #e7dee0;
  --line-soft:      #f1eaec;
  --bg:             #faf7f8;
  --bg-sunk:        #f2eaec;
  --surface:        #ffffff;

  /* Wijdan's own brand: burgundy for the institution, gold for action.
     Both hexes are taken from the organisation's live site. Everything else
     in this stylesheet derives from these two, so re-theming is a token
     change and never a hunt through components. */
  --brand:          #6d2435;
  --brand-dark:     #4a121d;
  --brand-mid:      #8a3448;
  --brand-tint:     #f6ecef;
  --accent:         #b2946b;
  --accent-dark:    #96794f;
  --accent-tint:    #f7f1e8;

  /* The footer is the one dark surface on the site, and it is deliberately
     not the burgundy: the organisation's own footer is a near-black
     charcoal with gold headings, and the burgundy returns only in the rule
     under each heading. */
  /* A third accent, taken from the charity's own pages: it colours every
     second card in a row and the ticks on a checklist. */
  --green:          #617f67;
  --green-tint:     #eaf0ec;

  --footer-bg:      #262729;
  --footer-ink:     #d5d7d8;

  /* Semantic, deliberately separate from the brand and the accent so that
     "this succeeded" never reads as "this is on brand". */
  --ok:             #2c6248;
  --ok-tint:        #e8f2ed;
  --warn:           #a66a12;
  --warn-tint:      #fcf2e0;
  --danger:         #b3261e;
  --danger-tint:    #fdeceb;

  /* Type. One pairing serves all three languages: both families cover Arabic,
     Turkish and English, so the site keeps the same voice when the locale
     changes instead of shifting typeface mid-brand. */
  --f-display: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body:    "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 0.9375rem;  /* 15 */
  --t-md:   1rem;       /* 16 */
  --t-lg:   1.125rem;   /* 18 */
  --t-xl:   1.375rem;   /* 22 */
  --t-2xl:  1.75rem;    /* 28 */
  --t-3xl:  2.25rem;    /* 36 */
  --t-4xl:  3rem;       /* 48 */

  /* The sizes Appearance can override, defaulted to the scale above. The
     two largest stay fluid: the setting becomes the *ceiling* of a clamp,
     so a headline an editor enlarges still comes down on a phone. */
  --fs-h1:    var(--t-4xl);
  --fs-h2:    var(--t-3xl);
  --fs-h3:    var(--t-xl);
  --fs-h4:    var(--t-lg);
  --fs-h5:    var(--t-md);
  --fs-h6:    var(--t-base);
  --fs-body:  var(--t-base);
  --fs-label: var(--t-sm);

  /* Space */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.5rem;   --s-8: 3rem;
  --s-9: 4rem;     --s-10: 5.5rem;

  /* Shape */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(35, 25, 28, .06), 0 1px 3px rgba(35, 25, 28, .04);
  --shadow-md: 0 4px 12px rgba(35, 25, 28, .07), 0 1px 3px rgba(35, 25, 28, .05);
  --shadow-lg: 0 14px 38px rgba(35, 25, 28, .10), 0 3px 10px rgba(35, 25, 28, .05);

  --ring: 0 0 0 3px rgba(138, 52, 72, .32);

  --wrap: 1180px;
  --wrap-narrow: 760px;
  /* The header bar carries the mark, eight menu items and the donate
     button; it needs more room than the reading column below it. */
  --wrap-wide: 1400px;
}

/* -- 2. Reset and base --------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-mid); }

:focus-visible {
  outline: 2px solid var(--brand-mid);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }

::selection { background: var(--accent-tint); color: var(--accent-dark); }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--brand-dark); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-md) 0;
  font-weight: 600;
}
.skip-link:focus { inset-inline-start: 0; color: #fff; }

/* -- 3. Layout primitives ------------------------------------------------ */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--s-5); }

.section { padding-block: var(--s-9); }
.section-sm { padding-block: var(--s-7); }
.section-tight { padding-block: var(--s-6); }
.section--surface { background: var(--surface); }
.section--sunk { background: var(--bg-sunk); }
.section--brand { background: var(--brand-dark); color: #fff; }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: center;
}

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -- 4. Typography ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.6vw, var(--fs-h1)); }
h2 { font-size: clamp(1.55rem, 3.2vw, var(--fs-h2)); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

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

.eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--s-3);
}
.section--brand .eyebrow { color: #d9c39f; }

.lede { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.6; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-sm); }
.tabular { font-variant-numeric: tabular-nums; }

.section-head { max-width: 640px; margin-bottom: var(--s-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-2); font-size: var(--t-md); margin: 0; }

/* Rich text produced by the admin editors. */
.prose { color: var(--ink-2); font-size: var(--t-md); line-height: 1.75; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: var(--t-2xl); margin: var(--s-7) 0 var(--s-3); color: var(--ink); }
.prose h3 { font-size: var(--t-xl); margin: var(--s-6) 0 var(--s-3); color: var(--ink); }
.prose h4 { font-size: var(--t-lg); margin: var(--s-5) 0 var(--s-2); color: var(--ink); }
.prose p { margin: 0 0 var(--s-4); }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-inline-start: 1.35rem; }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose img { border-radius: var(--r-md); margin: var(--s-5) 0; }
.prose blockquote {
  margin: var(--s-5) 0; padding: var(--s-4) var(--s-5);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-tint); border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: var(--t-base); }
.prose th, .prose td { padding: var(--s-3); border-bottom: 1px solid var(--line); text-align: start; }
.prose th { background: var(--bg-sunk); font-weight: 700; color: var(--ink); }

/* -- 5. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--f-body); font-size: var(--t-base); font-weight: 700;
  line-height: 1; text-align: center; white-space: nowrap;
  padding: 0.875rem 1.4rem;
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; box-shadow: var(--shadow-md); }

.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); color: #fff; }

.btn-outline { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

.btn-ghost { background: transparent; color: var(--brand); padding-inline: var(--s-3); }
.btn-ghost:hover { background: var(--brand-tint); }

.btn-on-dark { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-on-dark:hover { background: rgba(255,255,255,.22); color: #fff; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #93201a; color: #fff; }

.btn-sm { padding: 0.5rem 0.85rem; font-size: var(--t-sm); border-radius: var(--r-sm); }
.btn-lg { padding: 1.05rem 1.9rem; font-size: var(--t-md); }
.btn-block { width: 100%; }

.btn[disabled], .btn.is-disabled { opacity: .55; pointer-events: none; }

/* -- 6. Forms ------------------------------------------------------------ */

.field { display: block; margin-bottom: var(--s-4); }
.field > label, .label {
  display: block; font-size: var(--fs-label); font-weight: 700;
  color: var(--ink); margin-bottom: var(--s-2);
}
.label .req { color: var(--danger); }

.input, .select, .textarea {
  width: 100%;
  font-family: var(--f-body); font-size: var(--t-base); color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.8rem 0.95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-mid); box-shadow: var(--ring);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237c8b99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px;
  padding-inline-end: 2.4rem;
}

.hint { font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s-2); }
.error-text { font-size: var(--t-xs); color: var(--danger); margin-top: var(--s-2); font-weight: 600; }

.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-base); cursor: pointer; }
.check input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--brand); flex: none; }
.check span { color: var(--ink-2); }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }

/* Honeypot — present for bots, invisible and unreachable for people.

   It used to be parked at `inset-inline-start: -9999px`, which is off the
   left in English and off the RIGHT in Arabic — and content past the right
   edge widens the document, so every page carrying this field had a few
   pixels of sideways scroll in the site's main language. Clipping in place
   has no direction to get wrong, and is the same pattern `.loc-radio` and
   `.show-toggle` already use. */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* -- 7. Cards and media -------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: transparent; }

.card-media { position: relative; aspect-ratio: 3 / 2; background: var(--bg-sunk); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card-body > .card-actions { margin-top: auto; padding-top: var(--s-2); }
.card-title { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: -0.015em; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--brand); }
.card-text { color: var(--ink-2); font-size: var(--t-base); margin: 0; }
.card-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; }

.card-tag {
  position: absolute; top: var(--s-3); inset-inline-start: var(--s-3);
  background: rgba(74, 18, 29, .88); color: #fff;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em;
  padding: 0.3rem 0.65rem; border-radius: var(--r-full);
  backdrop-filter: blur(4px);
}

/* -- 8. Progress and statistics ------------------------------------------ */

.progress {
  height: 8px; background: var(--bg-sunk);
  border-radius: var(--r-full); overflow: hidden;
}
.progress > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), #c9ae87);
  border-radius: var(--r-full);
  transition: width .8s cubic-bezier(.22,.8,.3,1);
}
.progress--done > span { background: linear-gradient(90deg, var(--ok), #3f8567); }

.raise {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); font-size: var(--t-sm);
}
.raise b { font-family: var(--f-display); font-size: var(--t-md); color: var(--ink); font-variant-numeric: tabular-nums; }
.raise .goal { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.stat {
  text-align: center;
  padding: var(--s-5) var(--s-3);
  border-inline-end: 1px solid var(--line);
}
.stat:last-child { border-inline-end: 0; }
.stat-value {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  letter-spacing: -0.03em; color: var(--brand);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-label { display: block; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-2); font-weight: 600; }
.stat-icon { color: var(--accent); margin-bottom: var(--s-2); display: inline-flex; }
.stat-icon svg { width: 22px; height: 22px; }

.section--brand .stat { border-color: rgba(255,255,255,.14); }
.section--brand .stat-value { color: #fff; }
.section--brand .stat-label { color: rgba(255,255,255,.72); }
.section--brand .stat-icon { color: #d9c39f; }

/* -- 9. Header and navigation -------------------------------------------- */

.topbar {
  background: var(--brand-dark); color: rgba(255,255,255,.82);
  font-size: var(--t-xs); font-weight: 600;
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; justify-content: space-between; padding-block: var(--s-2); }
/* WCAG 2.2 (2.5.8, AA) asks for a target of at least 24×24 CSS pixels. These
   links were 22px tall — the text and its line box, nothing else — which is a
   real miss on a phone, where this bar carries the telephone number and the
   WhatsApp link somebody is most likely reaching for in a hurry. Added as a
   minimum height rather than a fixed one, so the bar still grows when a
   translation wraps. */
.topbar a {
  color: rgba(255,255,255,.82);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px;
}
.topbar a:hover { color: #fff; }
.topbar svg { width: 13px; height: 13px; }
.topbar-links { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }
/* Full width, so the mark sits on the same page margin as the slideshow and
   the banners below it. The bar needs every pixel it can get anyway: eight
   menu items, the mark and the donate button, in whichever of the three
   languages has the longest words. */
.site-header .wrap,
.topbar .wrap { max-width: none; padding-inline: var(--s-5); }

/* A grid, not a flex row: the mark, the menu and the actions each own a
   column and keep it. Flex left their positions to whatever the menu
   happened to contain, and needed an auto margin — mirrored by hand for
   Arabic — to hold them apart. */
.site-header .wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-3);
}
.brand          { grid-area: 1 / 1; }
.nav            { grid-area: 1 / 2; }
.header-actions { grid-area: 1 / 3; }

.brand { display: flex; align-items: center; flex: none; }
.brand img { height:70px; width: auto; }
.brand-text { font-family: var(--f-display); font-weight: 700; font-size: var(--t-lg); color: var(--brand-dark); letter-spacing: -0.02em; }

/* The menu must never be a scroll container: every drop-down is positioned
   absolutely against its `.nav-item`, and a scrolling ancestor clips it. When
   the labels do not fit, the bar wraps to a second line and the header grows
   — nothing is hidden and nothing scrolls sideways. */
.nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 2px var(--s-1);
}
/* Right-to-left the menu starts where the reading starts, beside the mark;
   left-to-right it ends beside the donate button. Its column is the same
   either way — this is only which end of it the items gather at. */
[dir="rtl"] .nav { justify-content: flex-start; }
.nav a { color: var(--ink-2); }

/* The links and the drop-down parents share one rule so they cannot drift
   apart: a parent is a <button>, a plain item an <a>, and they sit next to
   each other in the same bar. Identical box, identical height. */
.nav a, .nav-item > .nav-parent {
  position: relative;
  display: inline-flex; align-items: center;
 font-size: 14px;
    font-weight: bold; line-height: 1.4;
  padding: 0.5rem 0.7rem; border-radius: var(--r-sm);
  white-space: nowrap;
}
.nav a:hover { color: var(--brand); background: var(--brand-tint); }
.nav a.is-active { color: var(--brand); }
.nav a.is-active::after {
  content: ""; position: absolute;
  inset-inline: 0.7rem; bottom: 0.25rem; height: 2px;
  background: var(--accent); border-radius: var(--r-full);
}

.header-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-inline-start: auto;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 20px; height: 20px; }

/* -- 10. Footer ---------------------------------------------------------- */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding-block: var(--s-8) var(--s-5);
  margin-top: var(--s-9);
  line-height: 1.9;
}
.site-footer a { color: var(--footer-ink); }
.site-footer a:hover { color: #fff; }
.site-footer p { font-size: var(--t-base); line-height: 1.8; }

/* The footer runs the full width, like the two bars at the top of the page.

   It was the only band still held to the 1180px measure while the header and
   the utility bar ran to the edge, so the page ended by stepping inwards for
   no reason a reader could see. Now the three of them line up at every width.

   A cap was tried first — the thought being that a twelve-column block of text
   spread across an ultrawide monitor reads worse than a header does, since the
   header is one row with its content pushed to the two ends. But the number
   that made the columns comfortable (1720px) left the footer visibly narrower
   than the header on an ordinary 1920 screen, which is the exact misalignment
   this was meant to fix. Matching the header wins: it is what makes the page
   read as one object.

   `body.layout-boxed` still holds all four bands to `--boxed-width`, so the
   boxed appearance is unaffected — the footer simply fills its sheet. */
.site-footer .wrap {
  max-width: none;
  padding-inline: var(--s-6);
}

/* The mark, and an optional line about the organisation. Both are content:
   the source site carries no blurb, so the paragraph is absent while the
   setting is blank and the logo sits alone. */

/* Twelve columns so the four blocks keep the 4-2-2-4 rhythm of the source. */
.footer-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-7) var(--s-6); }
.footer-col { grid-column: span 2; min-width: 0; }
.footer-col-wide { grid-column: span 4; }

.site-footer h5 {
  position: relative;
  color: var(--accent); font-family: var(--f-display);
  font-size: var(--t-lg); font-weight: 700;
  letter-spacing: normal; text-transform: none;
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3);
}
/* Logical offset, so the rule starts at the reading edge in both directions. */
.site-footer h5::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 50px; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-base); }
.footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--t-base); }
.footer-contact li { display: flex; gap: var(--s-3); align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: 6px; color: var(--accent); }

/* The bank card. Darker than the footer around it, the way a printed slip
   sits on a page — the IBANs have to be readable enough to copy. */
.footer-bank {
  background: #1f2937; border: 1px solid #374151;
  border-radius: var(--r-md); padding: var(--s-4);
  font-size: var(--t-sm); line-height: 1.8;
}
.footer-bank-meta { margin: 0; display: grid; gap: 2px; }
.footer-bank-meta > div { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.footer-bank-meta dt { margin: 0; color: rgba(255, 255, 255, .5); }
.footer-bank-meta dd { margin: 0; color: #fff; font-weight: 600; }
.footer-iban { margin-top: var(--s-3); }
.footer-iban code {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: var(--t-sm); color: #fff; letter-spacing: .06em; word-break: break-word;
}
.footer-iban span { color: var(--accent); font-size: var(--t-xs); }

.social { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.social a {
  width: 35px; height: 35px; border-radius: var(--r-full);
  background: var(--accent); color: var(--footer-bg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.social a:hover { color: #fff; transform: scale(1.08); }
.social svg { width: 17px; height: 17px; }

/* Each account's own colour on hover, as the source does it. */
.social a.social-facebook:hover  { background: #1877f2; }
.social a.social-x:hover         { background: #000; }
.social a.social-tiktok:hover    { background: #000; }
.social a.social-instagram:hover { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.social a.social-youtube:hover   { background: #ff0000; }
.social a.social-telegram:hover  { background: #229ed9; }
.social a.social-linkedin:hover  { background: #0a66c2; }
.social a.social-linktree:hover  { background: #43e660; color: var(--footer-bg); }

/* A link into the middle of a page — the footer's "Bank Accounts" goes to
   `contact#bank-accounts` — must not land underneath the sticky header. */
:target { scroll-margin-top: 96px; }

.footer-bottom {
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  justify-content: space-between; align-items: center;
  font-size: var(--t-xs); color: rgba(255, 255, 255, .5);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-credit a { color: var(--accent); }
.footer-credit a:hover { color: #fff; }

@media (max-width: 1000px) {
  .footer-col, .footer-col-wide { grid-column: span 6; }
}
@media (max-width: 620px) {
  .footer-col, .footer-col-wide { grid-column: span 12; }
  .footer-bottom { justify-content: flex-start; }
}
/* -- 11. Hero and page banners ------------------------------------------- */

/* The banner every page with one carries. `.page-hero` on its own is a flat
   brand-coloured strip; with a photograph the page adds `.page-hero--media`
   and a `.hero-media` div, and the photograph goes behind the wash rather
   than under the text at full strength. There is no second implementation —
   see "And one banner look" in CLAUDE.md before writing one. */

.page-hero {
  background: var(--brand-dark); color: #fff; position: relative; overflow: hidden;
  min-height: clamp(300px, 36vw, 480px);
  display: flex; align-items: center;
}
.page-hero > .wrap { width: 100%; }
/* `z-index: 0` is doing real work: it makes this a stacking context, so the
   photograph's own z-index stays inside it and cannot climb over the
   gradient that gives the heading its contrast. */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(1000px 340px at 82% -10%, rgba(138,52,72,.55), transparent 70%);
}
.page-hero .wrap { position: relative; z-index: 2; padding-block: var(--s-8); }
.page-hero h1 { color: #fff; margin-bottom: var(--s-2); }
.page-hero p { color: rgba(255,255,255,.8); max-width: 62ch; margin: 0; font-size: var(--t-md); }

/* -- 12. Components ------------------------------------------------------ */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .03em;
  padding: 0.28rem 0.6rem; border-radius: var(--r-full);
  background: var(--bg-sunk); color: var(--ink-2);
}
.badge-ok      { background: var(--ok-tint);     color: var(--ok); }
.badge-warn    { background: var(--warn-tint);   color: var(--warn); }
.badge-danger  { background: var(--danger-tint); color: var(--danger); }
.badge-brand   { background: var(--brand-tint);  color: var(--brand); }
.badge-accent  { background: var(--accent-tint); color: var(--accent-dark); }
.badge svg { width: 12px; height: 12px; }

.alert {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--t-base); margin-bottom: var(--s-5);
}
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.alert p { margin: 0; }
.alert-ok     { background: var(--ok-tint);     border-color: rgba(31,122,84,.25);  color: #14563b; }
.alert-error  { background: var(--danger-tint); border-color: rgba(179,38,30,.25);  color: #8c1d17; }
.alert-info   { background: var(--brand-tint);  border-color: rgba(109,36,53,.22);  color: var(--brand-dark); }
.alert-warn   { background: var(--warn-tint);   border-color: rgba(166,106,18,.28); color: #7c4f0d; }
.alert ul { margin: var(--s-2) 0 0; padding-inline-start: 1.15rem; }

.accordion { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.accordion + .accordion { margin-top: var(--s-4); }
.acc-item + .acc-item { border-top: 1px solid var(--line-soft); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); background: transparent; border: 0;
  font-family: var(--f-body); font-size: var(--t-md); font-weight: 700; color: var(--ink);
  text-align: start; cursor: pointer;
}
.acc-trigger:hover { background: var(--bg); }
.acc-trigger svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); transition: transform .22s ease; }
.acc-trigger[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--accent); }
.acc-panel { padding: 0 var(--s-5) var(--s-5); color: var(--ink-2); }
.acc-panel[hidden] { display: none; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s-4); }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .sep { color: var(--ink-3); }
.page-hero .breadcrumb { color: rgba(255,255,255,.6); }
.page-hero .breadcrumb a { color: rgba(255,255,255,.82); }
.page-hero .breadcrumb a:hover { color: #fff; }

.pagination { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-7); }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding-inline: var(--s-3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 700;
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .is-disabled { opacity: .45; pointer-events: none; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); counter-reset: step; }
.step { position: relative; padding-inline-start: 0; }
.step-n {
  width: 46px; height: 46px; border-radius: var(--r-full);
  background: var(--accent-tint); color: var(--accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-md);
  margin-bottom: var(--s-4);
}
.step h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.step p { color: var(--ink-2); margin: 0; }

.filters {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  padding: var(--s-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  margin-bottom: var(--s-6);
}
.filters .input, .filters .select { width: auto; min-width: 190px; flex: 1 1 190px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  padding: 0.45rem 0.85rem; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-2);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.empty {
  text-align: center; padding: var(--s-9) var(--s-5);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink-2);
}
.empty svg { width: 40px; height: 40px; color: var(--ink-3); margin: 0 auto var(--s-4); }
.empty h3 { color: var(--ink); }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6);
}
.panel-tight { padding: var(--s-5); }

.detail-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.detail-list > div {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft);
}
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.detail-list dd { font-size: var(--t-base); font-weight: 700; color: var(--ink); margin: 0; text-align: end; font-variant-numeric: tabular-nums; }

button.btn.btn-primary.btn-block.btn-lg.mb-3 {
    margin-bottom: 10px;
}

/* Lifted clear of the back-to-top button, which holds the same corner. A
   toast sitting an inch higher costs nothing; one landing on top of a button
   would cost the button. */
.toasts { position: fixed; inset-inline-end: var(--s-5); bottom: calc(var(--s-5) + 62px); z-index: 300; display: flex; flex-direction: column; gap: var(--s-3); max-width: 340px; }
.toast {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--ink); color: #fff; font-size: var(--t-base);
  box-shadow: var(--shadow-lg);
  animation: toast-in .28s cubic-bezier(.22,.8,.3,1);
}
.toast-ok    { background: #17573d; }
.toast-error { background: #8c1d17; }
.toast svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* -- 13. Utilities ------------------------------------------------------- */

.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.flex-1 { flex: 1; }
.nowrap { white-space: nowrap; }
.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;
}

/* -- 14. Motion and responsive ------------------------------------------- */

.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .55s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 1040px) {
  /* The footer has its own breakpoints in section 10; a rule here would
     land after them and quietly win. */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The menu collapses into the button sooner than it used to: eight items
   with English or Turkish labels do not fit beside the mark and the donate
   button on a small laptop, and a burger reads better there than a bar
   spilling onto a second line. */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; grid-area: 1 / 2; justify-self: end; }
  .nav {
    grid-area: 2 / 1 / 3 / -1;
    flex-direction: column; align-items: stretch;
    gap: 0; padding-top: var(--s-3);
    border-top: 1px solid var(--line-soft);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 0.75rem var(--s-2); border-radius: var(--r-sm); }
  .nav a.is-active::after { display: none; }
  .nav a.is-active { background: var(--brand-tint); }
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; gap: var(--s-5); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .stat { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .stat:nth-child(odd) { border-inline-end: 1px solid var(--line); }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  .section--brand .stat:nth-child(odd) { border-inline-end-color: rgba(255,255,255,.14); }
}

@media (max-width: 620px) {
  :root { --s-9: 3rem; --s-10: 3.5rem; }
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .topbar .wrap { justify-content: center; text-align: center; }
  .toasts { inset-inline: var(--s-4); max-width: none; }
  .panel { padding: var(--s-5); }
  .btn { padding: 0.8rem 1.15rem; }
}

/* -- 15. Right-to-left and Arabic typography -----------------------------

   The layout itself is already direction-agnostic: sections 2-14 use logical
   properties (padding-inline-start, border-inline-end, text-align: start and
   so on), so flipping `dir` on <html> mirrors the page without a second
   stylesheet. The site previously shipped Bootstrap's separate RTL bundle
   plus an rtl.css override file; neither is needed now.

   What follows is only what logical properties cannot express: a background
   image's position, glyphs that must physically mirror, and the typographic
   corrections Arabic needs.                                                */

/* The select chevron is a background image, and background-position has no
   logical form with dependable support. */
[dir="rtl"] .select {
  background-position: left 0.9rem center;
  padding-inline-end: 0.95rem;
  padding-inline-start: 2.4rem;
}

/* Icons that point somewhere must point the other way. Chevrons and arrows
   are mirrored; everything else (a heart, a lock, a receipt) must not be. */
[dir="rtl"] .icon-directional,
[dir="rtl"] .breadcrumb svg,
[dir="rtl"] .pagination svg {
  transform: scaleX(-1);
}

/* A blockquote's flat edge follows the border, which has already flipped. */
[dir="rtl"] .prose blockquote {
  border-radius: var(--r-md) 0 0 var(--r-md);
}

/* ---- Arabic typography -------------------------------------------------
   Two corrections that matter more than they look:

   1. letter-spacing is destructive in Arabic. The script is cursive, so
      adding tracking pulls the joined letterforms apart and the word stops
      reading as a word. Every tracking value in this stylesheet is therefore
      reset to normal for Arabic.

   2. text-transform: uppercase is meaningless in Arabic — the script has no
      case — and on some engines it still triggers a font-synthesis pass. The
      eyebrow labels keep their weight and colour but lose the transform.

   Arabic also sits lower and denser than Latin at the same point size, so the
   line height is opened up slightly and headings are nudged larger.         */

[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] h5,
[lang="ar"] .eyebrow, [lang="ar"] .card-title, [lang="ar"] .stat-value,
[lang="ar"] .btn, [lang="ar"] .site-footer h5, [lang="ar"] .badge,
[lang="ar"] .chip, [lang="ar"] .acc-trigger {
  letter-spacing: normal;
}

[lang="ar"] .eyebrow {
  text-transform: none;
  font-size: var(--t-sm);
}

[lang="ar"] body,
[lang="ar"] .prose {
  line-height: 1.85;
}

[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 {
  line-height: 1.35;
}

/* Arabic numerals in this design stay Western, matching the organisation's
   own site, but they must not inherit Arabic's looser tracking in tables. */
[lang="ar"] .tabular,
[lang="ar"] .raise b,
[lang="ar"] .stat-value,
[lang="ar"] .detail-list dd {
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
}

/* ---- Language switcher ------------------------------------------------- */

.lang-switch { display: flex; align-items: center; gap: 2px; }
/* The same 24px minimum as the bar around it, and here `min-width` matters as
   much as the height: these are the smallest targets on the site — "EN" is
   about eighteen pixels of text. */
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; min-width: 24px;
  padding: 0.15rem 0.45rem;
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, .72);
  line-height: 1.6;
}
.lang-switch a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.lang-switch a[aria-current="true"] {
  color: var(--brand-dark);
  background: var(--accent);
}
.lang-switch .sep { color: rgba(255, 255, 255, .28); font-size: var(--t-xs); }

/* ---- Nested navigation (Wijdan's menu has sub-menus) -------------------- */

.nav-item { position: relative; }

.nav-item > .nav-parent {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; color: var(--ink-2);
}
.nav-item > .nav-parent:hover,
.nav-item > .nav-parent[aria-expanded="true"] { color: var(--brand); background: var(--brand-tint); }
.nav-item > .nav-parent svg { width: 13px; height: 13px; transition: transform .18s ease; }
.nav-item > .nav-parent[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-item.is-active > .nav-parent { color: var(--brand); }

.nav-sub {
  position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 70;
  min-width: 236px; padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 1px;
}
.nav-sub[hidden] { display: none; }
.nav-sub a {
  padding: 0.55rem 0.7rem; border-radius: var(--r-sm);
  font-size: 14px;font-weight:bold; color: var(--ink-2); white-space: nowrap;
}
.nav-sub a:hover { background: var(--brand-tint); color: var(--brand); }
.nav-sub a[aria-current="page"] { color: var(--brand); font-weight: 700; }

@media (max-width: 1100px) {
  .nav-item { width: 100%; }
  .nav-item > .nav-parent { width: 100%; justify-content: space-between; padding: 0.75rem var(--s-2); }
  .nav-sub {
    position: static; min-width: 0; box-shadow: none; border: 0;
    border-inline-start: 2px solid var(--line);
    border-radius: 0; margin-inline-start: var(--s-3); padding-inline: var(--s-2);
  }
}

/* ---- Partner strip ----------------------------------------------------- */

.partners {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  align-items: center; justify-content: center;
}
.partners a, .partners span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 84px; min-width: 140px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.partners a:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.partners img { max-height: 54px; width: auto; object-fit: contain; }

/* ---- Bank account cards ------------------------------------------------ */

.bank-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5);
  border-inline-start: 3px solid var(--accent);
}
.bank-card + .bank-card { margin-top: var(--s-4); }
.bank-card h3 { font-size: var(--t-md); margin-bottom: var(--s-4); }
.bank-row {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-base);
}
.bank-row:last-child { border-bottom: 0; }
.bank-row dt { color: var(--ink-2); margin: 0; flex: none; }
.bank-row dd {
  margin: 0; font-weight: 700; text-align: end;
  font-variant-numeric: tabular-nums; word-break: break-all;
  letter-spacing: normal;
}
.bank-row dd code { background: var(--bg-sunk); padding: 2px 6px; border-radius: 3px; }

/* ---- Case cards -------------------------------------------------------- */

.case-urgent { border-inline-start: 3px solid var(--danger); }
.case-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  font-size: var(--t-xs); color: var(--ink-3); font-weight: 600;
}

/* ---- Zakat calculator --------------------------------------------------
   The calculator has its own banner, a segmented switch between four groups
   of assets, and a result panel that follows the donor down the page. It is
   the only page with this much chrome, so its classes are namespaced `zk-`
   and everything here composes the tokens above rather than new colours.
   Direction-agnostic like the rest of the sheet: the switch, the icons inside
   the fields and the result panel all use logical properties.              */

/* The zakat banner is the site's banner — `.page-hero page-hero--media` in
   the markup — plus two things that are only true here: the extra room below
   the text, which the calculator card overlaps into, and the gold strapline
   under the heading. The extra room is written with both classes so it wins
   wherever the shared padding rule happens to sit in this file. */
.page-hero.zk-hero .wrap { padding-block: var(--s-9) calc(var(--s-9) + var(--s-8)); }
.zk-hero-inner { max-width: 720px; }
.zk-hero h1 { margin-bottom: 0; }
.zk-hero-tag { display: block; color: var(--accent); font-size: clamp(1.1rem, 2.4vw, var(--t-2xl)); margin-top: var(--s-2); }
.zk-hero p { max-width: 60ch; }

.zk-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: rgba(178, 148, 107, .18); border: 1px solid rgba(178, 148, 107, .42);
  color: #e8d3ae; padding: 0.5rem 1.1rem; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.zk-badge svg { width: 14px; height: 14px; }

.zk-rule { height: 4px; width: 88px; background: var(--accent); border-radius: var(--r-full); margin-block: var(--s-5); }

.zk-nisab {
  margin-top: var(--s-6); max-width: 440px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg); padding: var(--s-5);
}
.zk-nisab-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  color: rgba(255, 255, 255, .78); font-size: var(--t-sm); margin-bottom: var(--s-3);
}
.zk-nisab-head b { color: #fff; font-family: var(--f-display); font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.zk-nisab p { color: rgba(255, 255, 255, .6); font-size: var(--t-xs); margin: var(--s-3) 0 0; }
.zk-bar { height: 8px; background: rgba(255, 255, 255, .16); border-radius: var(--r-full); overflow: hidden; }
.zk-bar > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), #e0c79c);
  border-radius: var(--r-full); transition: width .5s cubic-bezier(.22, .8, .3, 1);
}

/* The calculator overlaps the banner, as the design intends. */
.zk-body { padding-block: 0 var(--s-9); }
.zk-layout {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--s-7); align-items: start;
  margin-top: calc(var(--s-8) * -1); position: relative; z-index: 3;
}

.zk-tabs {
  display: flex; gap: 6px; padding: 7px; margin-bottom: var(--s-5);
  background: var(--bg-sunk); border: 1px solid var(--line-soft);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
}
.zk-tab {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.9rem 0.7rem; border: 0; border-radius: var(--r-lg);
  background: transparent; color: var(--ink-2); cursor: pointer;
  font-family: inherit; font-size: var(--t-sm); font-weight: 700; line-height: 1.3;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.zk-tab svg { width: 17px; height: 17px; flex: none; }
.zk-tab:hover { color: var(--brand); }
.zk-tab[aria-selected="true"] {
  background: var(--surface); color: var(--brand);
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.zk-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zk-card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: var(--s-7);
}
.zk-card + .zk-card { margin-top: var(--s-5); }
.zk-card > h2 {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-xl); color: var(--brand); margin-bottom: var(--s-2);
}
.zk-card > h2 svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.zk-card-note { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: var(--s-6); }

.zk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.zk-fields .field { margin-bottom: 0; }

/* A field with its glyph parked on the inline-start edge — the same side as
   the label, and clear of the select's own chevron at the other end. */
.zk-ctl { position: relative; }
.zk-ctl .input, .zk-ctl .select {
  border-width: 2px; border-radius: var(--r-lg);
  padding-block: 0.85rem;
  font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums;
}
.zk-ctl .input { padding-inline-start: 3rem; }
.zk-ctl .input:focus, .zk-ctl .select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px rgba(178, 148, 107, .16);
}
.zk-ctl > svg {
  position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-3); pointer-events: none;
  transition: color .2s ease;
}
.zk-ctl:focus-within > svg { color: var(--accent); }

.zk-with-btn { display: flex; gap: var(--s-3); align-items: stretch; }
.zk-with-btn .zk-ctl { flex: 1; }
.zk-with-btn .btn { flex: none; padding-inline: var(--s-4); }

.zk-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
  margin-top: var(--s-6); padding: var(--s-5);
  background: var(--accent-tint); border: 1px solid rgba(178, 148, 107, .28);
  border-radius: var(--r-lg);
}
.zk-tile { background: var(--surface); border-radius: var(--r-md); padding: var(--s-4); text-align: center; }
.zk-tile span { display: block; font-size: var(--t-xs); color: var(--ink-2); margin-bottom: var(--s-1); }
.zk-tile b {
  font-family: var(--f-display); font-size: var(--t-lg); color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* Project chooser */
.zk-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s-4); }
.zk-project {
  display: flex; flex-direction: column; gap: var(--s-2);
  text-align: start; font-family: inherit; font-size: var(--t-base);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-5); cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.zk-project::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: var(--accent); transform: scaleX(0); transform-origin: center;
  transition: transform .3s ease;
}
.zk-project:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.zk-project:hover::before, .zk-project[aria-pressed="true"]::before { transform: scaleX(1); }
.zk-project[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(178, 148, 107, .2); }
.zk-project:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.zk-project:disabled::before { transform: scaleX(0); }
.zk-project-icon {
  width: 54px; height: 54px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent-dark); margin-bottom: var(--s-2);
  transition: background .3s ease, color .3s ease;
}
.zk-project-icon svg { width: 24px; height: 24px; }
.zk-project:hover .zk-project-icon,
.zk-project[aria-pressed="true"] .zk-project-icon { background: var(--accent); color: #fff; }
.zk-project h3 { font-size: var(--t-md); color: var(--brand); margin: 0; }
.zk-project p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.zk-project-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: auto; padding-top: var(--s-4);
}
.zk-project-min { font-size: var(--t-xs); font-weight: 700; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.zk-pick {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 700; padding: 0.35rem 0.7rem;
  border-radius: var(--r-full); background: var(--bg-sunk); color: var(--ink-2);
}
.zk-pick svg { width: 12px; height: 12px; }
.zk-project[aria-pressed="true"] .zk-pick { background: var(--accent); color: #fff; }

.zk-alloc {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  flex-wrap: wrap; margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
}
.zk-alloc-label { font-size: var(--t-xs); color: var(--ink-2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.zk-alloc b { display: block; font-family: var(--f-display); font-size: var(--t-lg); color: var(--brand); }

/* Result panel */
.zk-result {
  position: sticky; top: 88px;
  background: linear-gradient(155deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff; border-radius: var(--r-xl); padding: var(--s-7) var(--s-6); text-align: center;
  box-shadow: 0 26px 54px -18px rgba(109, 36, 53, .5), inset 0 1px 0 rgba(255, 255, 255, .16);
  overflow: hidden;
}
.zk-result > h2 {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  color: #fff; font-size: var(--t-lg); margin-bottom: var(--s-5);
}
.zk-result > h2 svg { width: 20px; height: 20px; color: var(--accent); }
.zk-stat {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg); padding: var(--s-4); text-align: start;
}
.zk-stat + .zk-stat { margin-top: var(--s-3); }
.zk-stat span {
  display: block; font-size: var(--t-xs); font-weight: 700; color: #e3cfae;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px;
}
.zk-stat b { font-family: var(--f-display); font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.zk-due {
  padding-block: var(--s-6); margin-block: var(--s-5);
  border-block: 1px solid rgba(255, 255, 255, .14);
}
.zk-due-label { display: block; font-size: var(--t-xs); font-weight: 700; color: #e3cfae; letter-spacing: .08em; text-transform: uppercase; }
.zk-amount {
  display: block; margin-block: var(--s-4);
  font-family: var(--f-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(to bottom, #ffffff 35%, #f2d7b4 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #f2d7b4;
}
.zk-verdict {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.6rem 1.15rem; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600; text-align: start;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff;
}
.zk-verdict svg { width: 15px; height: 15px; flex: none; }
.zk-verdict--ok   { background: rgba(90, 190, 140, .18); border-color: rgba(90, 190, 140, .38); color: #b8ecd0; }
.zk-verdict--warn { background: rgba(230, 180, 80, .16); border-color: rgba(230, 180, 80, .38); color: #f4d9a6; }
.zk-result-chosen { font-size: var(--t-sm); color: rgba(255, 255, 255, .78); margin-bottom: var(--s-4); }
.zk-result-chosen b { color: #fff; }
.zk-quick { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.zk-quick .btn { flex: 1; }
.zk-note { font-size: var(--t-xs); color: rgba(255, 255, 255, .55); line-height: 1.7; margin: var(--s-5) 0 0; }

/* The two reassurance cards under the calculator. */
.zk-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.zk-info > div {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-sm);
}
.zk-info > div:last-child { border-inline-start-color: var(--ok); }
.zk-info h3 { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-lg); color: var(--brand); }
.zk-info h3 svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.zk-info ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.zk-info li { display: flex; gap: var(--s-3); color: var(--ink-2); font-size: var(--t-base); }
.zk-info li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--ok); }
.zk-info p { color: var(--ink-2); margin: 0; }

/* Arabic has no case and must not be tracked out. */
[lang="ar"] .zk-badge,
[lang="ar"] .zk-stat span,
[lang="ar"] .zk-due-label,
[lang="ar"] .zk-alloc-label {
  letter-spacing: normal; text-transform: none;
}
[lang="ar"] .zk-tab,
[lang="ar"] .zk-amount,
[lang="ar"] .zk-tile b,
[lang="ar"] .zk-stat b { letter-spacing: normal; }

@media (max-width: 980px) {
  .zk-layout { grid-template-columns: 1fr; margin-top: calc(var(--s-7) * -1); }
  .zk-result { position: static; }
  .zk-info { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .page-hero.zk-hero .wrap { padding-block: var(--s-7) calc(var(--s-8) + var(--s-6)); }
  .zk-tabs { flex-wrap: wrap; }
  .zk-tab { flex: 1 1 44%; }
  .zk-card { padding: var(--s-5); border-radius: var(--r-lg); }
  .zk-fields, .zk-tiles { grid-template-columns: 1fr; }
  .zk-nisab { max-width: none; }
}

@media print {
  .hero-media, .zk-tabs, .zk-quick, .zk-projects,
  .site-header, .site-footer, .topbar { display: none !important; }
  .zk-result { position: static; box-shadow: none; }
  .zk-panels [role="tabpanel"][hidden] { display: block !important; }
}
/* ---- Category landing banner with a photograph -------------------------
   `.page-hero` on its own is a flat brand-coloured strip. A category that has
   its own banner image gets this modifier: the same strip, with the photo
   behind a vertical wash so the heading keeps its contrast. The gradient is
   deliberately vertical rather than angled — it must not need mirroring in
   Arabic.                                                                  */

.page-hero--media .hero-media img {
  opacity: 1; position: relative; z-index: 1;
  object-fit: cover; object-position: top;
}

/* The brand colour, over the photograph. Every banner then reads as part of
   this site whatever colours the photograph happens to carry — and a pale
   sky behind a white heading stops being a problem. `--hero-tint` is the
   one number to change. */
.page-hero--media { --hero-tint: .55; }
.page-hero--media .hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--brand-dark);
  opacity: var(--hero-tint);
}

/* The same photograph, blown up and blurred, behind the one you are looking
   at — so a squarer photograph sits in something rather than floating in a
   pair of bare stripes. `--hero-backdrop` is set by initHeroBackdrop(); with
   no script the sides are the band's own colour. */
.page-hero--media .hero-media::before {
  content: ""; position: absolute; inset: -6%;
  background-image: var(--hero-backdrop, none);
  background-size: cover; background-position: center;
  filter: blur(28px) saturate(1.15); opacity: .8;
}
.page-hero--media .wrap { padding-block: var(--s-9); }
.page-hero--media::after {
  background: linear-gradient(to top,
    rgba(26, 9, 15, .72) 0%,
    rgba(26, 9, 15, .42) 42%,
    rgba(26, 9, 15, .12) 78%,
    rgba(26, 9, 15, 0) 100%);
}
/* The words sit on a photograph now rather than on a flat wash, so they
   carry their own shadow — a pale sky behind a headline is otherwise a
   headline nobody can read. */
.page-hero--media h1,
.page-hero--media > .wrap > p,
.page-hero--media .breadcrumb,
.page-hero--media .eyebrow { text-shadow: 0 2px 12px rgba(16, 6, 10, .55); }
.page-hero--media > .wrap > p { color: rgba(255, 255, 255, .94); }
.page-hero--media .eyebrow { color: #e3cfae; }

/* ---- Campaign card: funding summary and facts --------------------------
   The card footer used to stack three rows of small grey text — a raised/goal
   line, then "N% funded" beside a beneficiary count, then a second identical
   row holding the location — and stated the percentage twice, once in the meta
   row and again inside the bar's own label. This says each thing once: the
   money on one baseline with the percentage as a pill, the bar, then one row
   of chips for who and where.

   Card-scoped on purpose. `.raise`, `.progress` and `.card-meta` stay exactly
   as they were for the campaign detail page and the news cards.            */

.fund { display: flex; flex-direction: column; gap: var(--s-3); }

.fund-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
}
.fund-money { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
.fund-raised {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-lg); line-height: 1.15; color: var(--ink);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.fund-goal { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fund-pct {
  flex: none; font-size: var(--t-xs); font-weight: 700;
  padding: 0.2rem 0.6rem; border-radius: var(--r-full);
  /* Burgundy on the gold tint, not accent-dark: at 12px bold that pairing
     measures 3.64:1, under the 4.5:1 this size needs. This is 9.6:1. */
  background: var(--accent-tint); color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.fund--done .fund-pct { background: var(--ok-tint); color: var(--ok); }

/* Who it reaches and where, as one wrapping row rather than two grey lines. */
.card-facts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fact {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.25rem 0.65rem; border-radius: var(--r-full);
  background: var(--bg-sunk); color: var(--ink-2);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.6;
}
.fact svg { width: 13px; height: 13px; flex: none; color: var(--ink-3); }

/* Arabic is cursive: tracking pulls the joined letterforms apart. */
[lang="ar"] .fund-raised,
[lang="ar"] .fund-pct,
[lang="ar"] .fund-goal,
[lang="ar"] .fact { letter-spacing: normal; }

/* ---- Contact page ------------------------------------------------------
   Three pieces, following the organisation's own design: a centred banner
   over a photograph, a pair of cards — the channels in white, the opening
   hours in near-black — and the bank accounts on a sunk band.

   Direction-agnostic, with one exception marked below: a phone number, an
   IBAN or an email is Latin script and has to stay left-to-right even on an
   Arabic page, or the digits reorder on screen.                           */

.eyebrow-badge {
  display: inline-block;
  background: rgba(178, 148, 107, .18);
  border: 1px solid rgba(178, 148, 107, .45);
  color: #e8d3ae;
  padding: 0.45rem 1.6rem; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: var(--s-5);
}

.pg-rule {
  width: 160px; height: 3px; margin: var(--s-5) auto; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), #e0c79c, transparent);
}

/* The pair of cards. */
.ct-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); align-items: start; }

.ct-card {
  background: linear-gradient(145deg, #fffdfa, var(--surface));
  border: 1px solid rgba(178, 148, 107, .25);
  border-radius: var(--r-xl); padding: var(--s-8) var(--s-6);
  box-shadow: var(--shadow-lg);
}

.ct-item {
  display: flex; gap: var(--s-4); align-items: center;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
  border: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.ct-item:hover {
  background: var(--accent-tint); border-color: rgba(178, 148, 107, .35);
}

/* The organic blob the organisation uses for its contact icons. */
.ct-blob {
  width: 58px; height: 58px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--brand);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: background .3s ease, color .3s ease, border-radius .3s ease;
}
.ct-blob svg { width: 24px; height: 24px; }
.ct-item:hover .ct-blob {
  background: var(--brand); color: #fff;
  border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}

.ct-item-label {
  display: block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 2px;
}
.ct-item-value { display: block; color: var(--ink); font-weight: 600; line-height: 1.5; }
a.ct-item-value:hover { color: var(--brand); }

/* Latin-script data keeps its own direction inside an Arabic page. */
.ct-ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }

.ct-social-wrap { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); }
.ct-social { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.ct-social-link {
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-sunk); color: var(--ink-2);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.ct-social-link:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.ct-social-link svg { width: 17px; height: 17px; }

/* Hours, in the dark card the source uses to set them apart. */
.ct-hours {
  background: linear-gradient(145deg, #241f20, #322a2b);
  border: 1px solid rgba(178, 148, 107, .4);
  border-radius: var(--r-xl); padding: var(--s-8) var(--s-6);
  color: #fff; box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.ct-hours h2 { color: #fff; font-size: var(--t-xl); }
.ct-hours .eyebrow { color: #e8d3ae; }
.ct-hours-note { color: rgba(255, 255, 255, .72); font-size: var(--t-sm); }

.ct-hours-list { display: flex; flex-direction: column; margin: 0; }
.ct-hours-list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-block: var(--s-3); border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ct-hours-list > div:last-child { border-bottom: 0; }
.ct-hours-list dt { color: rgba(255, 255, 255, .8); font-size: var(--t-base); margin: 0; }
.ct-hours-list dd {
  margin: 0; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; text-align: end;
}
.ct-hours-list .ct-closed { color: #e8d3ae; font-weight: 600; }

.ct-always {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid rgba(178, 148, 107, .35);
}
.ct-always h3 {
  display: flex; align-items: center; gap: var(--s-2);
  color: #e8d3ae; font-size: var(--t-md); margin-bottom: var(--s-2);
}
.ct-always h3 svg { width: 16px; height: 16px; }
.ct-always p { color: rgba(255, 255, 255, .72); font-size: var(--t-sm); margin-bottom: var(--s-4); }

/* Bank accounts. */
.ct-banks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); }
.ct-bank {
  background: var(--surface); border-radius: var(--r-xl);
  border-bottom: 5px solid var(--brand);
  padding: var(--s-6); box-shadow: var(--shadow-md);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ct-bank:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ct-bank h3 { font-size: var(--t-lg); color: var(--brand); margin-bottom: var(--s-5); }
.ct-iban {
  font-family: var(--f-display); font-size: var(--t-md); font-weight: 700;
  color: var(--ink); letter-spacing: .04em; word-break: break-all;
  background: var(--bg-sunk); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); margin: var(--s-2) 0 var(--s-4);
}

/* Arabic is cursive: tracking pulls the joined letterforms apart. */
[lang="ar"] .eyebrow-badge,
[lang="ar"] .ct-item-label { letter-spacing: normal; text-transform: none; }
[lang="ar"] .ct-hours-list dd,
[lang="ar"] .ct-iban { letter-spacing: normal; }

@media (max-width: 980px) {
  .ct-duo { grid-template-columns: 1fr; }
  .ct-form-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 700px) {
  .ct-card, .ct-hours { padding: var(--s-6) var(--s-5); }
  .ct-item { padding-inline: var(--s-2); }
  .ct-blob { width: 48px; height: 48px; }
  .ct-blob svg { width: 20px; height: 20px; }
}

/* ---- CMS page sections -------------------------------------------------
   The blocks a page is built from in the admin panel — a story beside a
   photograph, a grid of value cards, a band of figures — rebuilt in this
   site's own tokens from the organisation's design. The source page drew
   them with a CSS framework, FontAwesome and animated counters; here the
   type, the colour and the spacing are the ones every other page uses, the
   glyphs are inline SVG and a figure is the text an administrator typed.

   Direction-agnostic throughout: the offsets are logical properties, so the
   decorative corners on the photograph swap sides in Arabic on their own. */


/* The rule under a heading. Dark on light backgrounds, gold on the brand. */
.pg-rule--ink {
  width: 64px; height: 4px; margin: var(--s-3) auto var(--s-4);
  background: var(--accent); border-radius: 4px;
}

.pg-heading { font-size: var(--t-2xl); margin-bottom: var(--s-4); }

/* Story: the photograph beside the text. */
.pg-intro {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--s-8); align-items: center;
}
.pg-intro--text { grid-template-columns: minmax(0, 1fr); }

.pg-figure { position: relative; }
.pg-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  position: relative; z-index: 1;
}
/* The two offset corners the organisation puts behind this photograph. */
.pg-figure::before,
.pg-figure::after {
  content: ""; position: absolute; width: 6rem; height: 6rem; z-index: 0;
}
.pg-figure::before {
  inset-block-start: -1rem; inset-inline-end: -1rem;
  background: rgba(178, 148, 107, .38); border-start-end-radius: var(--r-xl);
}
.pg-figure::after {
  inset-block-end: -1rem; inset-inline-start: -1rem;
  background: rgba(109, 36, 53, .12); border-end-start-radius: var(--r-xl);
}

.pg-intro-body { margin-bottom: var(--s-6); }
.pg-intro-body p:last-child { margin-bottom: 0; }

.pg-subheading {
  font-size: var(--t-lg); margin-bottom: var(--s-5);
  border-inline-start: 4px solid var(--accent);
  padding-inline-start: var(--s-3);
}

.pg-pillars { display: grid; gap: var(--s-5); }
.pg-pillar { display: flex; gap: var(--s-4); align-items: flex-start; }
.pg-pillar-icon {
  width: 46px; height: 46px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-tint); color: var(--brand);
  border-radius: var(--r-lg);
  transition: background .25s ease, color .25s ease;
}
.pg-pillar:hover .pg-pillar-icon { background: var(--brand); color: #fff; }
.pg-pillar h4 { font-size: var(--t-md); margin-bottom: 4px; }
.pg-pillar p { color: var(--ink-2); font-size: var(--t-base); margin: 0; }

/* Values: a grid of icon cards. */
.pg-cards {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* Six cards fit the row four-and-two, which leaves a ragged tail. A count
   of six (or three) reads better three across, so the grid asks how many
   there are. Browsers without :has() keep the auto-fit above, which still
   works — it is just less tidy. */
@media (min-width: 861px) {
  .pg-cards:has(> :nth-child(6):last-child),
  .pg-cards:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pg-card {
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: var(--r-xl); padding: var(--s-6) var(--s-5);
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pg-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: rgba(178, 148, 107, .45);
}
.pg-card-icon {
  width: 62px; height: 62px; margin: 0 auto var(--s-4);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--brand);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transition: background .3s ease, color .3s ease, border-radius .3s ease;
}
.pg-card:hover .pg-card-icon {
  background: var(--brand); color: #fff;
  border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}
.pg-card h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.pg-card p { color: var(--ink-2); font-size: var(--t-base); margin: 0; }

/* Figures: a band on the brand colour. */
.pg-stats {
  background: var(--brand-dark); color: #fff;
  position: relative; overflow: hidden;
}
.pg-stats::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 300px at 78% -20%, rgba(138, 52, 72, .6), transparent 70%);
}
.pg-stats .wrap { position: relative; z-index: 2; }
.pg-stats h2 { color: #fff; margin-bottom: var(--s-2); }
.pg-stats .eyebrow { color: #e3cfae; }
.pg-stats-note { color: var(--accent); margin: 0; }

.pg-stat-grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: var(--s-7); margin-top: var(--s-6);
}
.pg-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pg-stat-icon { color: var(--accent); opacity: .9; }
.pg-stat-value {
  font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 800;
  color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
}
.pg-stat-label { color: rgba(255, 255, 255, .82); font-size: var(--t-md); }
.pg-stat-note { color: rgba(255, 255, 255, .6); font-size: var(--t-sm); }

.center-prose { max-width: 62ch; margin-inline: auto; text-align: center; }

@media (max-width: 900px) {
  .pg-intro { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .pg-figure::before, .pg-figure::after { width: 4rem; height: 4rem; }
}

@media (max-width: 640px) {
  .pg-stat-value { font-size: var(--t-2xl); }
  .pg-card { padding: var(--s-5) var(--s-4); }
}

/* ==========================================================================
   Home page
   --------------------------------------------------------------------------
   The bands of the front page. Each one is a row in `homepage_sections`, so
   these rules style a shape rather than a piece of copy: a band with nothing
   in it is never drawn, and one that is reordered in the admin simply moves.

   Everything here is direction-agnostic — logical properties throughout — so
   the Arabic page mirrors without a second set of rules.
   ========================================================================== */

/* ---- The slider -------------------------------------------------------- */

.home-hero { position: relative; background: var(--brand-dark); overflow: hidden; }

.home-slides {
  position: relative;
  aspect-ratio: 1600 / 560;
  background: var(--brand-dark);
}
.home-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  /* The visibility change waits for the fade, so the slide going out stays
     on screen while the one coming in rises over it. Without the delay it
     vanished at once and left a dark gap for six hundred milliseconds. */
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.home-slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity .6s ease, visibility 0s;
}
/* Whole, not cropped: the artwork carries the headline, and `cover` cuts
   words off it. With the band in the artwork's own shape there is nothing
   to letterbox; an oddly shaped upload is shown complete on the band's
   colour rather than trimmed. */
.home-slide img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}

/* The artwork carries the headline, so the buttons sit over its foot rather
   than in the middle of it. */
.home-hero-actions {
  position: absolute; inset-inline: 0; bottom: 0;
  padding-block: var(--s-6) var(--s-7);
  background: linear-gradient(to top, rgba(38, 39, 41, .72), rgba(38, 39, 41, 0));
}
.home-hero-actions .cluster { gap: var(--s-3); }

.home-dots {
  position: absolute; inset-inline: 0; bottom: var(--s-3);
  display: flex; justify-content: center; gap: var(--s-2);
}
.home-dot {
  width: 9px; height: 9px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .45);
  transition: background .2s ease, width .2s ease;
}
.home-dot.is-active { background: var(--accent); width: 22px; }

@media (max-width: 700px) {
  /* The band is only as tall as the artwork allows here, which is not
     enough to hold two stacked buttons over it — so they come out from
     over the picture and sit under it. */
  .home-hero-actions {
    position: static; background: var(--brand-dark);
    padding-block: var(--s-5);
  }
  .home-hero-actions .cluster { flex-direction: column; align-items: stretch; }
  .home-dots { bottom: auto; position: static; padding-block: var(--s-3); background: var(--brand-dark); }
}

/* ---- Who we are -------------------------------------------------------- */

.home-about {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-8); align-items: center;
}
.home-about-figure { margin: 0; position: relative; }
.home-about-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}
/* The organisation's own line about itself, sitting on the photograph. */
.home-about-figure figcaption {
  position: absolute; inset-inline-start: var(--s-5); bottom: var(--s-5);
  inset-inline-end: var(--s-8);
  background: var(--brand); color: #fff;
  font-family: var(--f-display); font-size: var(--t-md); font-weight: 700;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.home-linkcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-6); }
.home-linkcard {
  display: flex; gap: var(--s-3); align-items: center;
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--bg-sunk); border: 1px solid var(--line-soft);
  color: inherit;
}
a.home-linkcard:hover { border-color: var(--accent); background: var(--accent-tint); }
.home-linkcard-icon {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
}
.home-linkcard b { display: block; font-size: var(--t-base); }
.home-linkcard em { display: block; font-style: normal; font-size: var(--t-sm); color: var(--ink-2); }

/* ---- What we work on --------------------------------------------------- */

.home-progs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.home-prog {
  display: block; text-align: center; color: inherit;
  padding: var(--s-6) var(--s-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.home-prog:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.home-prog-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin-bottom: var(--s-4);
  border-radius: var(--r-full);
  background: var(--brand-tint); color: var(--brand);
}
a.home-prog:hover .home-prog-icon { background: var(--brand); color: #fff; }
.home-prog h3 { font-size: var(--t-lg); margin: 0 0 var(--s-2); }
.home-prog p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* ---- A humanitarian case ----------------------------------------------- */

.home-case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8); align-items: center;
}
.home-case figure { margin: 0; }
/* The source photograph is a wide banner. Left at its own proportions it
   would be a thin strip beside a column of text, so it is cropped to the
   height of the words rather than the other way round. */
.home-case figure img {
  width: 100%; height: 100%; min-height: 260px; max-height: 340px;
  object-fit: cover; display: block;
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
}
.home-case h2 { margin-bottom: var(--s-3); }
.home-case .lede { margin-bottom: var(--s-5); }

/* ---- The four project families ----------------------------------------- */

.home-families { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.home-family {
  display: flex; flex-direction: column; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.home-family:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.home-family-media { display: block; aspect-ratio: 16 / 9; background: var(--bg-sunk); }
.home-family-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-family-body { display: block; padding: var(--s-5); }
.home-family-body b { display: block; font-family: var(--f-display); font-size: var(--t-lg); margin-bottom: var(--s-2); }
.home-family-body em { display: block; font-style: normal; font-size: var(--t-sm); color: var(--ink-2); }
.home-family-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-4); color: var(--brand);
  font-size: var(--t-sm); font-weight: 700;
}
.home-family-cta svg { transition: transform .18s ease; }
.home-family:hover .home-family-cta svg { transform: translateX(3px); }
[dir="rtl"] .home-family-cta svg { transform: scaleX(-1); }
[dir="rtl"] .home-family:hover .home-family-cta svg { transform: scaleX(-1) translateX(3px); }

/* ---- The figures ------------------------------------------------------- */

.home-figures .stat-value { color: #fff; }
.home-figures .stat-label { color: rgba(255, 255, 255, .8); }
.home-figures .stat-icon { color: var(--accent); }

/* ---- The zakat band ---------------------------------------------------- */

.home-zakat {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-6) var(--s-7);
  background: var(--accent-tint); border: 1px solid rgba(178, 148, 107, .35);
  border-radius: var(--r-xl);
}
.home-zakat > div { flex: 1 1 22rem; }
.home-zakat h2 { font-size: var(--t-2xl); margin: 0 0 var(--s-2); }
.home-zakat p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.home-zakat-icon {
  flex: none; width: 66px; height: 66px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--accent);
}

/* ---- Narrower screens -------------------------------------------------- */

@media (max-width: 1000px) {
  .home-progs, .home-families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .home-about, .home-case { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  /* The photograph reads better above the words once they stack. */
  .home-about-figure, .home-case figure { order: -1; }
  .home-zakat { padding: var(--s-5); }
}

@media (max-width: 560px) {
  .home-progs, .home-families, .home-linkcards { grid-template-columns: minmax(0, 1fr); }
  .home-about-figure figcaption {
    position: static; inset: auto; margin-top: var(--s-3); display: block;
  }
}

/* ---- Lede, checklist and callout ---------------------------------------
   Three more ways a CMS section can be drawn. Added for the development
   stages page, but nothing on them is specific to it: any page can use them
   from the layout menu in the admin. */

.pg-lede { max-width: 62ch; margin-inline: auto; text-align: center; }
.pg-lede h2 { margin: 0 0 var(--s-3); }
.pg-lede .pg-rule { margin-inline: auto; }
.pg-lede .prose { color: var(--ink-2); }
.pg-lede .prose p:last-child { margin-bottom: 0; }
/* The line a page closes on: the same words as the body, said with weight. */
.pg-lede-close {
  margin: var(--s-4) 0 0;
  font-family: var(--f-display); font-weight: 700;
  color: var(--brand); font-size: var(--t-lg);
}
.pg-lede-cta { margin: var(--s-6) 0 0; }

.pg-checklist {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--s-8); align-items: center;
}
.pg-checklist .prose { color: var(--ink-2); }
.pg-checklist .prose p:last-child { margin-bottom: 0; }

.pg-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.pg-ticks li {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pg-tick {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-tint); color: var(--green);
}
.pg-ticks b { display: block; font-size: var(--t-md); }
.pg-ticks em { display: block; font-style: normal; font-size: var(--t-sm); color: var(--ink-2); }

/* The closing ask: a panel rather than a full-width band, so it reads as an
   invitation at the end of the page and not as another section of it. */
.pg-callout {
  text-align: center; padding: var(--s-8) var(--s-6);
  background: var(--bg-sunk); border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.pg-callout h2 { color: var(--brand); margin: 0 0 var(--s-3); font-size: var(--t-2xl); }
.pg-callout p { color: var(--ink-2); max-width: 56ch; margin: 0 auto var(--s-6); }
.pg-callout .prose { max-width: 56ch; margin-inline: auto; margin-bottom: var(--s-6); }

/* The source gives each card in a row one of three accents in turn. The cycle
   is design rather than data, so it lives here and no editor has to pick a
   colour per card. */
.pg-card::after {
  content: ""; display: block; width: 30px; height: 2px;
  margin: var(--s-3) auto 0; border-radius: var(--r-full);
  background: var(--accent);
}
.pg-card:nth-child(3n+2)::after { background: var(--green); }
.pg-card:nth-child(3n)::after   { background: var(--brand); }

@media (max-width: 860px) {
  .pg-checklist { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

/* ---- The project page ---------------------------------------------------
   A project is not a fundraising appeal, and its page is shaped after the
   charity's own: a photographic banner, the overview and objectives in the
   reading column, and the project's facts, its film and one donate button
   beside them. */

/* The banner is the site's banner (`.page-hero page-hero--media`). A detail
   page names one thing — a project, an article, a case — so its heading is
   allowed to be bigger than a listing's; that is all this class now does. */
.pj-hero h1 { margin: var(--s-3) 0 0; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.7rem); }
.pj-hero > .wrap > p { margin: var(--s-3) 0 0; }

.pj-layout {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--s-8); align-items: start;
}
.pj-main { display: grid; gap: var(--s-6); }

.pj-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s-7);
}
.pj-card > h2 {
  font-size: var(--t-xl); color: var(--brand); margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-soft);
}
.pj-card .prose:last-child > :last-child { margin-bottom: 0; }

/* The challenge the project answers, set apart from the overview. */
.pj-challenge {
  margin-top: var(--s-6); padding: var(--s-5);
  background: var(--green-tint); border-inline-start: 3px solid var(--green);
  border-radius: var(--r-md);
}
.pj-challenge h3 { margin: 0 0 var(--s-2); font-size: var(--t-md); color: var(--green); }
.pj-challenge p { margin: 0; color: var(--ink-2); }

.pj-objectives { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.pj-objectives li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--ink-2); }
.pj-bullet {
  flex: none; width: 26px; height: 26px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-tint, #f6efe4); color: var(--accent);
}

.pj-side { display: grid; gap: var(--s-5); position: sticky; top: 92px; }
.pj-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--s-6);
}
.pj-panel > h3 { margin: 0 0 var(--s-4); font-size: var(--t-md); }
.pj-panel--give { background: var(--bg-sunk); text-align: center; }
.pj-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-4); padding: 0.3rem 0.7rem;
  border-radius: var(--r-full); background: var(--brand); color: #fff;
  font-size: var(--t-xs); font-weight: 700;
}

.pj-facts { margin: 0; display: grid; gap: var(--s-3); }
.pj-facts > div {
  display: flex; justify-content: space-between; gap: var(--s-4);
  align-items: baseline; padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}
.pj-facts > div:last-child { padding-bottom: 0; border-bottom: 0; }
.pj-facts dt {
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: var(--ink-3); font-size: var(--t-sm); font-weight: 600; margin: 0;
}
.pj-facts dd { margin: 0; font-weight: 700; text-align: end; }

/* The film keeps its shape while it loads, so the panel does not jump. */
.pj-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--bg-sunk); }
.pj-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .pj-layout { grid-template-columns: minmax(0, 1fr); }
  .pj-side { position: static; }
  .pj-card { padding: var(--s-5); }
}

/* ---- News and initiatives ----------------------------------------------- */

/* The meta line under an article's headline, on the photographic banner. */
.news-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5); color: rgba(255,255,255,.88);
  font-size: var(--t-sm); font-weight: 600;
}
.news-meta span { display: inline-flex; align-items: center; gap: var(--s-2); }

.news-gallery-title {
  margin: var(--s-8) 0 var(--s-5); font-size: var(--t-xl); color: var(--brand);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-soft);
}
.news-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.news-gallery figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-sunk); }
.news-gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* An initiative reads as one document: the five parts of it, stacked. */
.in-sections { display: grid; gap: var(--s-6); }
.in-nav {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding-bottom: var(--s-5); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.in-nav a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.45rem 0.85rem; border-radius: var(--r-full);
  background: var(--bg-sunk); color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 700;
}
.in-nav a:hover { background: var(--brand); color: #fff; }

.in-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.in-list li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--ink-2); }
.in-list li::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.5rem;
  border-radius: var(--r-full); background: var(--accent);
}

/* ---- Reports and achievements ------------------------------------------- */

/* The two jump buttons, sitting on the seam under the banner. */
.rp-jump { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--s-5); }
.rp-jump .cluster { justify-content: center; }

.rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-5); }
.rp-stat {
  text-align: center; padding: var(--s-7) var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
}
.rp-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: var(--s-4);
  border-radius: var(--r-full); background: var(--accent-tint); color: var(--accent);
}
.rp-stat b {
  display: block; font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); color: var(--brand); line-height: 1.1;
}
.rp-stat span { display: block; margin-top: var(--s-2); color: var(--ink-2); font-weight: 600; }

/* The journey: a rule down the side with a year marking each turn. */
.rp-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.rp-timeline li {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-5);
  align-items: start;
}
.rp-year {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.35rem 0.6rem; border-radius: var(--r-full);
  background: var(--brand); color: #fff;
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm);
}
.rp-entry {
  padding: var(--s-5) var(--s-6);
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent); border-radius: var(--r-lg);
}
.rp-entry h3 { margin: 0 0 var(--s-2); font-size: var(--t-md); color: var(--brand); }
.rp-entry p { margin: 0; color: var(--ink-2); }

.rp-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-7) var(--s-6); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl);
}
.rp-card-year {
  position: absolute; inset-block-start: var(--s-5); inset-inline-end: var(--s-5);
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-2xl);
  color: var(--line); line-height: 1;
}
.rp-card h3 { margin: 0; font-size: var(--t-lg); padding-inline-end: 4rem; }
.rp-card-period {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: 0; color: var(--ink-3); font-size: var(--t-sm); font-weight: 600;
}
.rp-card-figures {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3); margin: var(--s-2) 0;
  padding: var(--s-4) 0; border-block: 1px solid var(--line-soft);
}
.rp-card-figures > div { text-align: center; }
.rp-card-figures dt {
  font-family: var(--f-display); font-weight: 800; font-size: var(--t-lg); color: var(--brand);
}
.rp-card-figures dd { margin: 0; font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; }
.rp-card-text { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.rp-card .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 600px) {
  .rp-timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .rp-year { justify-self: start; }
}

/* ---- Areas of work ------------------------------------------------------ */

.wa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); }
/* Six countries fit the row four-and-two, which leaves a ragged tail; the
   source runs them three across, and so does this above 980px. */
@media (min-width: 980px) { .wa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wa-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-xl); background: var(--brand-dark); color: #fff;
  box-shadow: var(--shadow-sm);
}
.wa-card img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .45s ease; opacity: .55;
}
a.wa-card:hover img { transform: scale(1.05); }
/* The name and the work sit on the photograph, so the picture needs a floor. */
.wa-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38,10,17,.15) 30%, rgba(38,10,17,.9) 100%);
}
.wa-body {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.wa-body h3 { margin: 0 0 var(--s-2); color: #fff; font-size: var(--t-xl); }
.wa-body p { margin: 0; color: rgba(255,255,255,.86); font-size: var(--t-sm); }
.wa-more {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-3); font-size: var(--t-sm); font-weight: 700; color: var(--accent);
}

/* ---- The organisation chart ---------------------------------------------
   A real tree of nested lists rather than a picture: it reads in either
   direction, it resizes, and a screen reader can follow it. Depth chooses the
   colour, which is why a row stores none. */

.org-chart { overflow-x: auto; padding-block: var(--s-4); }
.org-root, .org-children { list-style: none; margin: 0; padding: 0; }
.org-root { display: grid; gap: var(--s-4); justify-items: center; }
.org-root > li { display: grid; justify-items: center; gap: var(--s-4); width: 100%; }

.org-children {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-4); width: 100%;
}
.org-children > li { display: grid; justify-items: center; gap: var(--s-3); }
/* A short stem so the levels read as connected without drawing a diagram. */
.org-children > li::before {
  content: ""; display: block; width: 2px; height: var(--s-4);
  background: var(--line); border-radius: var(--r-full);
}

.org-card {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 0.7rem 1.1rem; border-radius: var(--r-lg);
  font-weight: 700; text-align: start; box-shadow: var(--shadow-sm);
}
.org-l0 { background: #1e6b8f; color: #fff; }
.org-l1 { background: var(--accent); color: #fff; }
.org-l2 { background: var(--brand); color: #fff; font-weight: 600; }
.org-icon { display: inline-flex; opacity: .85; }
.org-text b { display: block; font-size: var(--t-base); }
.org-text em {
  display: block; font-style: normal; font-weight: 500;
  font-size: var(--t-xs); opacity: .85; margin-top: 2px;
}

@media (max-width: 700px) {
  .org-children { flex-direction: column; align-items: center; }
}

/* ---- Humanitarian cases -------------------------------------------------- */

.hc-urgent {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.15rem 0.55rem; border-radius: var(--r-full);
  background: #fdecec; color: #b3261e; font-weight: 700; font-size: var(--t-xs);
}
.hc-raised {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin: 0; color: var(--green); font-weight: 700; font-size: var(--t-sm);
}

/* ---- The reports page, closer to the source ------------------------------
   The organisation's own page sets the banner over a darkened photograph with
   a badge above the headline, runs the journey down a single rule with a dot
   on each year, and stamps the year across each report card. */

/* The badge above the headline, as the source draws it. */
.page-hero .eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.3rem 0.8rem; border-radius: var(--r-full);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  color: #fff; letter-spacing: .02em;
}

/* The journey: one rule, a dot per year. */
.rp-timeline { position: relative; }
.rp-timeline::before {
  content: ""; position: absolute; inset-block: 12px;
  inset-inline-start: 41px; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
  border-radius: var(--r-full);
}
.rp-timeline li { position: relative; }
.rp-year { position: relative; z-index: 1; box-shadow: 0 0 0 4px var(--bg-sunk); }

.rp-stat { transition: transform .25s ease, box-shadow .25s ease; }
.rp-stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

@media (max-width: 600px) {
  .rp-timeline::before { display: none; }
}

/* ---- The page builder ---------------------------------------------------
   A row is a band, a column is a share of twelve, a block is something to
   look at. Below the layout breakpoint every column goes full width, which is
   what stops an editor having to think about phones. */

.bld-row { padding-block: var(--s-8); }
.bld-row:first-child { padding-block-start: 0; }
.bld-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); align-items: start; }
.bld-col { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }

.bld-w1  { grid-column: span 1; }   .bld-w2  { grid-column: span 2; }
.bld-w3  { grid-column: span 3; }   .bld-w4  { grid-column: span 4; }
.bld-w5  { grid-column: span 5; }   .bld-w6  { grid-column: span 6; }
.bld-w7  { grid-column: span 7; }   .bld-w8  { grid-column: span 8; }
.bld-w9  { grid-column: span 9; }   .bld-w10 { grid-column: span 10; }
.bld-w11 { grid-column: span 11; }  .bld-w12 { grid-column: span 12; }

.bld-align-center { text-align: center; }
.bld-align-end    { text-align: end; }
.bld-align-center .btn, .bld-align-end .btn { display: inline-flex; }

.bld-sub { font-size: var(--t-xl); color: var(--brand); margin: 0 0 var(--s-5); }

/* A banner inside a column, rather than across the page. */
.bld-hero { border-radius: var(--r-xl); }
.bld-hero .wrap { max-width: none; padding-inline: var(--s-7); }

.bld-quote {
  margin: 0; padding: var(--s-6) var(--s-7);
  background: var(--bg-sunk); border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-lg);
}
.bld-quote blockquote { margin: 0; font-family: var(--f-display); font-size: var(--t-lg); color: var(--ink); }
.bld-quote figcaption { margin-top: var(--s-3); color: var(--ink-3); font-weight: 600; font-size: var(--t-sm); }

.bld-image { display: block; margin: 0; }
.bld-image img { display: block; width: 100%; height: auto; }
.bld-image.is-rounded img { border-radius: var(--r-xl); }
.bld-image figcaption { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--t-sm); }

.bld-video figcaption { margin-top: var(--s-3); color: var(--ink-3); font-size: var(--t-sm); }

.bld-cta { padding: var(--s-8) var(--s-7); border-radius: var(--r-xl); text-align: center; }
.bld-cta h2 { margin: 0 0 var(--s-3); }
.bld-cta p  { margin: 0 auto var(--s-6); max-width: 56ch; color: var(--ink-2); }
.bld-tone-none    { padding-inline: 0; }
.bld-tone-surface { background: var(--surface); border: 1px solid var(--line); }
.bld-tone-sunk    { background: var(--bg-sunk); }
.bld-tone-brand   { background: var(--brand); }
.bld-tone-brand h2, .bld-tone-brand p { color: #fff; }

.bld-accordion, .pg-accordion { display: grid; gap: var(--s-3); }
.bld-accordion details, .pg-accordion details {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.bld-accordion summary, .pg-accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); cursor: pointer; font-weight: 700; list-style: none;
}
.bld-accordion summary::-webkit-details-marker,
.pg-accordion summary::-webkit-details-marker { display: none; }
.bld-accordion details[open] summary,
.pg-accordion details[open] summary { border-bottom: 1px solid var(--line-soft); }
.bld-accordion details[open] summary svg,
.pg-accordion details[open] summary svg { transform: rotate(180deg); }
.bld-accordion summary svg,
.pg-accordion summary svg { flex: none; transition: transform .2s ease; }
.bld-accordion .prose, .pg-accordion .prose { padding: var(--s-5); }

/* Tabs on radios: open before any script runs, and keyboard-navigable. */
.bld-tabs { display: block; }
.bld-tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.bld-tab-strip { display: flex; flex-wrap: wrap; gap: var(--s-2); border-bottom: 1px solid var(--line); }
.bld-tab {
  padding: var(--s-3) var(--s-5); cursor: pointer; font-weight: 700;
  color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.bld-tab:hover { color: var(--brand); }
.bld-tab-panel { display: none; padding-top: var(--s-5); }
.bld-tabs .bld-tab-radio:nth-of-type(1):checked ~ .bld-tab-strip .bld-tab:nth-of-type(1),
.bld-tabs .bld-tab-radio:nth-of-type(2):checked ~ .bld-tab-strip .bld-tab:nth-of-type(2),
.bld-tabs .bld-tab-radio:nth-of-type(3):checked ~ .bld-tab-strip .bld-tab:nth-of-type(3),
.bld-tabs .bld-tab-radio:nth-of-type(4):checked ~ .bld-tab-strip .bld-tab:nth-of-type(4),
.bld-tabs .bld-tab-radio:nth-of-type(5):checked ~ .bld-tab-strip .bld-tab:nth-of-type(5),
.bld-tabs .bld-tab-radio:nth-of-type(6):checked ~ .bld-tab-strip .bld-tab:nth-of-type(6) {
  color: var(--brand); border-bottom-color: var(--brand);
}
.bld-tabs .bld-tab-radio:nth-of-type(1):checked ~ .bld-tab-panel[data-tab="0"],
.bld-tabs .bld-tab-radio:nth-of-type(2):checked ~ .bld-tab-panel[data-tab="1"],
.bld-tabs .bld-tab-radio:nth-of-type(3):checked ~ .bld-tab-panel[data-tab="2"],
.bld-tabs .bld-tab-radio:nth-of-type(4):checked ~ .bld-tab-panel[data-tab="3"],
.bld-tabs .bld-tab-radio:nth-of-type(5):checked ~ .bld-tab-panel[data-tab="4"],
.bld-tabs .bld-tab-radio:nth-of-type(6):checked ~ .bld-tab-panel[data-tab="5"] { display: block; }

.bld-html > :first-child { margin-block-start: 0; }
.bld-html > :last-child  { margin-block-end: 0; }
.bld-note {
  margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4);
  background: #fff8e6; border: 1px solid #f0d089; border-radius: var(--r-md);
  color: #7a5c14; font-size: var(--t-sm);
}

@media (max-width: 860px) {
  .bld-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .bld-col[class*="bld-w"] { grid-column: 1 / -1; }
  .bld-row { padding-block: var(--s-6); }
}

/* ---- The administrator's bar on the live site ---------------------------
   Only ever sent to a signed-in administrator, so it costs a visitor nothing.
   Fixed to the bottom, out of the way of the content and of the mobile
   navigation. */

.edit-bar {
  position: fixed; inset-block-end: var(--s-4); inset-inline-start: var(--s-4);
  z-index: 60; display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm);
}
.edit-bar-toggle {
  flex: none; width: 40px; height: 40px; border: 0; cursor: pointer;
  border-radius: var(--r-full); background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.edit-bar-body {
  display: flex; align-items: center; gap: var(--s-1, 4px);
  padding: 6px; border-radius: var(--r-full);
  background: rgba(24,18,20,.94); color: #fff; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
}
.edit-bar[data-collapsed="1"] .edit-bar-body { display: none; }

.edit-bar-label {
  padding: 0 var(--s-3); font-weight: 700; color: rgba(255,255,255,.66);
  max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.edit-bar-link, .edit-bar-lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: var(--r-full);
  color: #fff; font-weight: 600; white-space: nowrap;
}
.edit-bar-link:hover, .edit-bar-lang:hover { background: rgba(255,255,255,.16); color: #fff; }
.edit-bar-lang { font-size: var(--t-xs); font-weight: 700; padding-inline: 9px; }
.edit-bar-lang.is-on { background: var(--accent); color: #fff; }
.edit-bar-sep { width: 1px; height: 20px; background: rgba(255,255,255,.22); margin-inline: 4px; }

@media (max-width: 700px) {
  .edit-bar { inset-block-end: var(--s-3); inset-inline-start: var(--s-3); }
  .edit-bar-label, .edit-bar-link span { display: none; }
}

@media print { .edit-bar { display: none; } }

/* The "not published" flag, drawn only for a signed-in administrator. */
.preview-flag {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  background: #7a5c14; color: #fff; font-size: var(--t-sm); text-align: center;
  box-shadow: var(--shadow-md);
}
.preview-flag strong { color: #fff; }
@media print { .preview-flag { display: none; } }

/* ---- Tags ---------------------------------------------------------------
   The tags a piece of content carries, and the page that lists all of them.
   `partials/tag-chips.php` draws nothing when a record has no tags, so — as
   with the gallery — there is no empty state to style.                     */

.tag-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-block: var(--s-5);
}

.tag-chips-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-3);
  margin-inline-end: var(--s-1);
}

.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.34rem 0.8rem;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tag-chip:hover,
.tag-chip:focus-visible {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

.tag-chip-count {
  font-size: var(--t-xs); font-weight: 700;
  padding: 1px 7px; border-radius: var(--r-full);
  background: var(--bg-sunk); color: var(--ink-3);
}
.tag-chip:hover .tag-chip-count,
.tag-chip:focus-visible .tag-chip-count {
  background: rgba(255,255,255,.22); color: #fff;
}

/* The tags page itself: bigger targets, and the label is the page's heading
   rather than a line in front of the row. */
.tag-chips--page { gap: var(--s-3); margin-block: 0; }
.tag-chips--page .tag-chip { padding: 0.5rem 1rem; font-size: var(--t-base); }

/* Under a piece of content, the row is separated from the text above it. */
.tag-chips--content {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* ---- Share this ---------------------------------------------------------
   The block that passes a page on, drawn by `partials/share.php`.

   It began as a bare row under a hairline, which read as leftover markup at
   the end of the article rather than something offered. It is a **panel**
   now: the two brand tints on a diagonal, a gold edge at the reading side,
   and the invitation and the buttons at opposite ends of it. That says "this
   is a thing you may do" in a way a row of grey circles did not.

   Each button carries its network's own colour **at rest**, on a white disc,
   and fills with that colour when reached for. Colour at rest is what makes
   the row scannable — you find WhatsApp by its green, not by reading six
   glyphs — and the white discs on the tinted ground keep it from shouting.

   Circles here, pills for tags, on purpose: a tag is a word and a share
   button is a mark, and the shapes should not pretend otherwise. The words
   are still there for anybody who needs them — every button carries
   `aria-label` and `title` — so nothing depends on recognising a glyph.    */

.share {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-4);
  margin-block: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  /* The gold sits at the reading edge in both directions. */
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand-tint), var(--accent-tint));
}

.share-label {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-md); color: var(--ink);
}

/* The paper plane on a disc of its own, so the label has a mark rather than
   a floating glyph a third the height of the words beside it. */
.share-mark {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.share-mark svg { width: 16px; height: 16px; }

.share-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.share-btn {
  --net: var(--brand);
  position: relative;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-full);
  background: var(--surface); color: var(--net);
  box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.share-btn svg { width: 17px; height: 17px; }
.share-btn:hover,
.share-btn:focus-visible {
  background: var(--net); color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Each network's own colour, set once and used at rest and on hover alike.
   One custom property per network rather than two rules each — adding a
   network is then one line here and one in `Core\Share`. */
.share-whatsapp { --net: #1faf54; }
.share-facebook { --net: #1877f2; }
.share-x        { --net: #14171a; }
.share-telegram { --net: #1d94cc; }
.share-linkedin { --net: #0a66c2; }
.share-email    { --net: var(--brand-mid); }
.share-copy     { --net: var(--accent-dark); }

/* Copying is confirmed by the site's own toast, not by a second signal on the
   button — `data-copy` in app.js already says "Link copied" in the reader's
   language, and two confirmations for one press is noise. */

/* On a narrow screen the panel becomes two rows, and the buttons should start
   at the reading edge under the label rather than sitting out at the far end
   of a line of their own. */
@media (max-width: 560px) {
  .share { justify-content: flex-start; }
}

/* The tags follow the share panel as a plain row: the panel already carries
   the separation the tag row's own rule was drawing, and two lines a few
   pixels apart looked like a mistake. */
.share + .tag-chips--content { border-top: 0; padding-top: 0; }

/* ---- The gallery and the film ------------------------------------------
   Every content type with a page of its own can carry photographs and one
   film, drawn by `partials/media-gallery.php` and `partials/media-video.php`.
   Neither section exists in the markup when there is nothing to show, so
   there is no "empty" state to style.

   Direction-agnostic: the caption, the arrows and the thumbnail strip are all
   placed with logical properties, so the viewer reads right-to-left in Arabic
   without a second set of rules.                                           */

.media-block { margin-top: var(--s-8); }
.media-title {
  margin: 0 0 var(--s-5); font-size: var(--t-xl); color: var(--brand);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-soft);
}

/* Inside a card that already has its own padding and heading rule. */
.media-block--flush { margin-top: 0; }

/* Standing among cards, as on a project page: it should be one of them. */
.media-block--card {
  margin-top: 0; padding: var(--s-7);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
}

.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-4); }

.mg-shot {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); background: var(--bg-sunk);
  box-shadow: var(--shadow-sm);
}
.mg-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .45s cubic-bezier(.22, .8, .3, 1);
}
.mg-shot:hover img, .mg-shot:focus-visible img { transform: scale(1.06); }
.mg-shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The magnifier that says a photograph opens. */
.mg-shot::after {
  content: ""; position: absolute; inset-block-start: var(--s-3); inset-inline-end: var(--s-3);
  width: 30px; height: 30px; border-radius: var(--r-full);
  background: rgba(20, 10, 14, .55) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: 0; transition: opacity .25s;
}
.mg-shot:hover::after, .mg-shot:focus-visible::after { opacity: 1; }

.mg-cap {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  background: linear-gradient(to top, rgba(18, 8, 12, .82), rgba(18, 8, 12, 0));
  color: #fff; font-size: var(--t-sm); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- The viewer --------------------------------------------------------
   Built by `initLightbox()` in app.js when a gallery is on the page. Without
   JavaScript none of this exists and a photograph is a plain link to the
   full-size file.                                                          */

.lb {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: rgba(14, 6, 9, .975); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.lb.is-open { opacity: 1; }

/* `display: flex` above would otherwise beat the browser's own rule for
   `hidden`, leaving a see-through full-screen panel over every page and
   swallowing every click on it. Say it here instead of relying on that. */
.lb[hidden] { display: none; }
body.lb-open { overflow: hidden; }

.lb-bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); color: rgba(255, 255, 255, .8);
  font-size: var(--t-sm); flex: 0 0 auto;
}
.lb-count { font-variant-numeric: tabular-nums; }
.lb-bar .spacer { flex: 1; }

.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-width: 40px; height: 40px; padding-inline: var(--s-3);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-full);
  background: rgba(255, 255, 255, .08); color: #fff;
  font: inherit; font-size: var(--t-sm); cursor: pointer; text-decoration: none;
  transition: background .2s, border-color .2s;
}
.lb-btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); color: #fff; }
.lb-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lb-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.lb-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s-4);
}
.lb-stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: var(--r-md);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

/* The arrows sit against the edges, so they mirror themselves in Arabic. */
.lb-arrow {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; padding: 0;
}
.lb-prev { inset-inline-start: var(--s-3); }
.lb-next { inset-inline-end: var(--s-3); }
.lb-arrow[hidden] { display: none; }

.lb-foot { flex: 0 0 auto; padding: var(--s-4); }
.lb-cap {
  margin: 0 auto var(--s-4); max-width: 70ch; text-align: center;
  color: rgba(255, 255, 255, .88); font-size: var(--t-md); line-height: 1.55;
}
.lb-cap:empty { display: none; }

.lb-thumbs {
  display: flex; gap: var(--s-2); justify-content: flex-start;
  overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: thin;
}
.lb-thumbs:only-child { margin-top: 0; }
.lb-thumb {
  flex: 0 0 auto; width: 74px; height: 52px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden;
  background: none; opacity: .55; transition: opacity .2s, border-color .2s;
}
.lb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lb-thumb:hover { opacity: .85; }
.lb-thumb.is-on { opacity: 1; border-color: var(--accent); }
.lb-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 700px) {
  .media-block--card { padding: var(--s-5); }
  .mg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .lb-arrow { width: 40px; height: 40px; }
  .lb-btn span { display: none; }
  .lb-thumbs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lb, .mg-shot img { transition: none; }
  .mg-shot:hover img, .mg-shot:focus-visible img { transform: none; }
}

@media print { .lb { display: none; } }

/* ---- Motion -------------------------------------------------------------
   Things arrive rather than appear: a heading, a card or a photograph rises a
   little and fades in as it comes into view, and a banner photograph drifts
   very slowly while you read the heading over it.

   Three rules, and they are why this is safe to have on every page:

   1. **Nothing is hidden unless the script is running.** The starting state is
      scoped to `.has-motion`, which `initReveal()` puts on <html>. With
      JavaScript off — or if the script throws — everything is simply visible.
   2. **Nothing already on screen is hidden.** Only what is below the fold when
      the page loads starts hidden, so the first screenful never flashes empty.
   3. `prefers-reduced-motion` turns all of it off. The blanket rule in section
      14 already kills the durations; the starting state is dropped here too,
      so nothing is left invisible by a transition that never runs.

   Only opacity and transform are animated, so none of it costs a layout.

   The hover behaviour further down is not conditional on the script and is
   deliberately small — nothing here changes a size anything else is laid out
   against.                                                                 */

@media (prefers-reduced-motion: no-preference) {

  .has-motion [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity .7s cubic-bezier(.22, .8, .3, 1),
      transform .7s cubic-bezier(.22, .8, .3, 1);
    transition-delay: calc(var(--reveal-step, 0) * 70ms);
  }
  .has-motion [data-reveal].is-in { opacity: 1; transform: none; }

  /* One of a row of cards leans in as well as rising, which reads as a single
     movement across the row rather than four separate ones. */
  .has-motion [data-reveal="card"] { transform: translateY(16px) scale(.985); }

  /* The banner photograph drifts: slow enough to be felt rather than watched,
     and it settles rather than looping. */
  .page-hero--media .hero-media img {
    animation: hero-drift 20s cubic-bezier(.16, .6, .3, 1) forwards;
  }
  @keyframes hero-drift {
    from { transform: scale(1.07); }
    to   { transform: scale(1); }
  }

  /* The drop-down opens rather than blinking into place. */
  .nav-sub {
    animation: menu-drop .18s ease-out;
    transform-origin: top center;
  }
  @keyframes menu-drop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* A photograph on a card leans in when the card lifts. */
.card-media img { transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
.card-hover:hover .card-media img,
.card-hover:focus-within .card-media img { transform: scale(1.06); }

/* The panels that already lift, doing it on the same curve as everything else
   rather than each on its own. */
.ct-bank, .pj-card, .pg-card, .rp-card, .org-card, .home-linkcard, .stat {
  transition:
    transform .3s cubic-bezier(.22, .8, .3, 1),
    box-shadow .3s cubic-bezier(.22, .8, .3, 1),
    border-color .3s ease;
}

/* A link in running text underlines on its own time. */
.prose a { transition: color .2s ease, text-decoration-color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal] { opacity: 1; transform: none; }
  .card-hover:hover .card-media img,
  .card-hover:focus-within .card-media img { transform: none; }
}

/* ---- The basket ---------------------------------------------------------
   A donor giving to three projects should pay once. The header carries what
   they have chosen so far; `/cart` is where the amounts are changed.

   Direction-agnostic: the panel hangs from the inline-end of the button, so
   it opens leftwards in English and rightwards in Arabic on its own.       */

.cart-widget { position: relative; flex: none; }

.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-2);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.cart-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
.cart-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.has-items .cart-btn { color: var(--brand); border-color: var(--brand); }

.cart-count {
  position: absolute; inset-block-start: -6px; inset-inline-end: -6px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  border-radius: var(--r-full); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-panel {
  position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0;
  z-index: 70; width: min(320px, calc(100vw - var(--s-6)));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-4);
}
.cart-panel[hidden] { display: none; }
.cart-panel-empty { margin: 0; color: var(--ink-3); font-size: var(--t-sm); text-align: center; }

.cart-panel-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.cart-panel-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font-size: var(--t-sm);
}
.cart-panel-list a { color: var(--ink); font-weight: 600; }
.cart-panel-list a:hover { color: var(--brand); }
.cart-panel-list b { color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cart-panel-total {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding-top: var(--s-3); border-top: 1px solid var(--line-soft);
  font-weight: 700;
}
.cart-panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-4); }
.cart-panel-actions .btn { width: 100%; }

/* The card's own "put it in the basket" sits beside its donate button. */
.card-basket { display: inline-flex; }
.card-basket .btn {     padding-inline: 0.7rem;
    background: rgba(74, 18, 29, .88);
    color: #fff; }

/* "Or put this much in the basket", under the donate button on a project's
   or an appeal's page. */
.pj-basket {
  display: grid; gap: var(--s-2);
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.pj-basket .input-group { margin: 0; }
.pj-basket .input { background: var(--surface); }

/* ---- The basket page ---------------------------------------------------- */

.cart-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

.cart-line {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 190px auto;
  gap: var(--s-4); align-items: center;
  padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.cart-thumb { display: block; width: 120px; border-radius: var(--r-md); overflow: hidden; }
.cart-thumb img { display: block; width: 100%; height: 80px; object-fit: cover; }

.cart-name { font-size: var(--t-md); margin: 0; line-height: 1.35; }
.cart-name a { color: var(--ink); }
.cart-name a:hover { color: var(--brand); }
.cart-min { margin: var(--s-1) 0 0; font-size: var(--t-xs); color: var(--ink-3); }

.cart-amount .input-group { margin: 0; }

.cart-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink-3); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.cart-remove:hover { color: #a12b2b; border-color: #e3b7b7; background: #fdf3f3; }

.cart-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-6);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.cart-total { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--t-md); }
.cart-total b { font-family: var(--f-display); font-size: var(--t-2xl); color: var(--brand); }

.cart-summary { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }
.cart-summary li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--ink-2);
}
.cart-summary b { color: var(--ink); white-space: nowrap; }

@media (max-width: 760px) {
  .cart-line { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .cart-thumb { width: 84px; }
  .cart-thumb img { height: 60px; }
  .cart-amount { grid-column: 2 / -1; }
  .cart-panel { width: min(300px, calc(100vw - var(--s-5))); }
}

/* ---- The questions page ------------------------------------------------
   A jump list beside the questions, which becomes a row above them when
   there is no room for a column.                                          */

.faq-layout {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--s-8); align-items: start;
}
.faq-side { position: sticky; top: 92px; }
.faq-side-title {
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-3);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-3);
}
[lang="ar"] .faq-side-title { letter-spacing: normal; text-transform: none; }

.faq-layout section { scroll-margin-top: 100px; }

@media (max-width: 860px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
}


/* ---- Appearance ---------------------------------------------------------
   What an administrator can change at Admin → Appearance. The colours and the
   type sizes arrive as `:root` overrides from `Core\Appearance`; the three
   choices that are not values live here as real rules, switched by an
   attribute on <html> or a class on <body>.                                */

/* -- Dark -----------------------------------------------------------------
   A palette, not a filter. The neutrals keep the same warm bias they have in
   the light theme so the burgundy still sits with them, the brand tint becomes
   a lift rather than a wash, and the surfaces are two steps apart so a card
   reads as a card. Only tokens are redefined: no component knows about this.

   The brand and accent hues are deliberately left alone — they are the
   organisation's, and an editor who overrides them from the admin panel gets
   the same colours in both themes.                                          */

html[data-theme="dark"] {
  --ink:            #f2eaec;
  --ink-2:          #c3b3b7;
  --ink-3:          #94868a;
  --line:           #3a2f32;
  --line-soft:      #2c2326;
  --bg:             #171215;
  --bg-sunk:        #1f181b;
  --surface:        #221a1d;

  --brand-tint:     #2e2024;
  --accent-tint:    #2b241c;
  --green-tint:     #1e2620;

  --ok-tint:        #16241d;
  --warn-tint:      #2a2013;
  --danger-tint:    #2b1817;

  --footer-bg:      #120e10;
  --footer-ink:     #cfc7c9;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .5);
  --shadow-lg: 0 14px 38px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .4);
}

/* The two places the light theme puts white on a pale ground and the dark one
   must not: a bordered input and the top bar's own strip. */
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea { background: var(--bg-sunk); color: var(--ink); }

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel { border-color: var(--line); }

/* A photograph on a dark page is brighter than the page. Taking a little of
   its light out stops each card glaring. */
html[data-theme="dark"] .card-media img,
html[data-theme="dark"] .mg-shot img { filter: brightness(.92); }

/* -- Boxed ----------------------------------------------------------------
   The page becomes a sheet on a darker ground. `.layout-boxed` is on <body>,
   so the header, the main column and the footer are all inside it — the site
   is boxed, not just its middle.                                            */

body.layout-boxed {
  /* Narrow enough that the sheet is visible on an ordinary desktop —
     at 1520 "boxed" and "wide" looked the same on every screen anyone
     actually has. */
  --boxed-width: 1320px;
  background: var(--bg-sunk);
}
body.layout-boxed > .topbar,
body.layout-boxed > .site-header,
body.layout-boxed > main,
body.layout-boxed > .site-footer {
  max-width: var(--boxed-width, 1520px);
  margin-inline: auto;
  background-color: var(--bg);
}
body.layout-boxed > .topbar { background-color: var(--brand-dark); }
body.layout-boxed > .site-header { background-color: var(--surface); }
body.layout-boxed > .site-footer { background-color: var(--footer-bg); }

/* The sheet's edges, so it reads as one object rather than three stacked. */
@media (min-width: 1360px) {
  body.layout-boxed > .topbar { box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line); }
  body.layout-boxed > .site-header,
  body.layout-boxed > main { box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line); }
}

/* -- A header that does not stick ----------------------------------------- */

body.no-sticky > .site-header { position: static; }
body.no-sticky .faq-side,
body.no-sticky .pj-side > .pj-panel:first-child { top: var(--s-5); }

/* -- Partner logos --------------------------------------------------------
   A strip that scrolls by itself, in the reading direction of the page:
   right to left in Arabic, left to right in English and Turkish. That is the
   client's own requirement, and it is the right one — a strip crawling
   against the language reads as though it is rewinding.

   How it works. The markup is one set of logos inside a track;
   `assets/js/app.js` copies the set until the track is at least twice the
   width of the screen and sets two custom properties on the strip:

     --partner-set        the width of ONE set, in pixels
     --partner-duration   how long one set takes to pass, from a constant
                          speed, so five logos and twenty move alike

   The animation then shifts the track by exactly one set width and starts
   again, which lands on an identical set of logos — so the loop has no seam.
   Nothing moves until JavaScript has measured (`[data-ready="1"]`), and
   `[data-ready="static"]` is the reduced-motion case: a plain, readable row.
   ------------------------------------------------------------------------ */

.partner-strip { background: var(--surface-2, #fbf9f7); overflow: hidden; }

.partner-strip__viewport {
  display: flex;
  /* No `overflow-x: auto` here: the track is deliberately wider than the
     screen, and a scrollbar under a self-scrolling strip is noise. The
     section clips it instead. */
  width: 100%;

  /* **Always physically left-to-right, in every language.** This is not
     a translation oversight — it is what keeps the strip full.

     In an Arabic page a flex row is laid out from the right, so the
     copies of the logo set stacked up *off-screen to the left* — and
     since the animation also travels left, nothing was ever coming in
     from the right. The strip emptied from the right edge as it moved:
     measured at 254px of blank page and growing.

     Forcing `ltr` here makes the geometry identical in all three
     languages — the copies always extend rightwards, so the row is full
     edge to edge at every moment of the cycle — and leaves the
     *direction of travel* to be decided by the animation alone, which
     is where it belongs. The reading order is handled where it should
     be, in the markup: `home.php` reverses the logos in Arabic so the
     first partner is the one at the right-hand edge. */
  direction: ltr;
}

.partner-strip__track {
  display: flex; align-items: center; direction: ltr;
  gap: var(--s-5, 1.5rem);
  padding-inline-end: var(--s-5, 1.5rem);   /* the gap after the last logo */
  flex: 0 0 auto;
}

/* Bigger than the first pass: these are the trust signals at the foot of the
   page, and at 150x96 they read as thumbnails. */
.partner-strip__item {
  flex: 0 0 auto;
  width: 230px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4, 1rem) var(--s-5, 1.5rem);
  background: #fff;
  border: 1px solid var(--line, #e7e1db);
  border-radius: var(--r-lg, 14px);
}

.partner-strip__item img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;

  /* Full colour, deliberately. A greyscale-until-hover strip is a common
     flourish and the wrong one here: a partner's mark is their property, and
     several of these organisations — the Red Crescent above all — have brand
     rules about its colour. The live site shows them in colour too. */
  transition: transform .2s ease;
}
.partner-strip__item:hover img { transform: scale(1.04); }

/* The movement. Two keyframes rather than one plus `animation-direction`,
   because the two languages start from opposite ends: in Arabic the track
   begins at rest and travels left; in English and Turkish it begins one set
   to the left and travels right. Either way it moves exactly one set. */
@keyframes partner-crawl-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--partner-set, 1000px) * -1)); }
}
@keyframes partner-crawl-ltr {
  from { transform: translateX(calc(var(--partner-set, 1000px) * -1)); }
  to   { transform: translateX(0); }
}

.partner-strip__viewport[data-ready="1"] .partner-strip__track {
  animation-name: partner-crawl-ltr;
  animation-duration: var(--partner-duration, 20s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.partner-strip__viewport[data-ready="1"][data-direction="rtl"] .partner-strip__track {
  animation-name: partner-crawl-rtl;
}

/* Stopping it. On hover so a logo can be looked at, and on keyboard focus so
   the same is true without a mouse. */
.partner-strip__viewport:hover .partner-strip__track,
.partner-strip__viewport:focus-within .partner-strip__track { animation-play-state: paused; }

/* A page that moves on its own is the clearest case there is for this
   setting. The strip becomes a row that scrolls by hand. */
@media (prefers-reduced-motion: reduce) {
  .partner-strip__viewport { overflow-x: auto; }
  .partner-strip__viewport .partner-strip__track { animation: none !important; }
  .partner-strip__item img { transition: none; }
  .partner-strip__item:hover img { transform: none; }
}
.partner-strip__viewport[data-ready="static"] { overflow-x: auto; }

@media (max-width: 620px) {
  .partner-strip__item { width: 170px; height: 108px; padding: var(--s-3, .75rem) var(--s-4, 1rem); }
}

/* ---------------------------------------------------------------------------
 * A home page band an administrator wrote
 *
 * Deliberately almost nothing: the markup inside is theirs, and a wrapper that
 * imposed padding, a width or a background would fight every layout they might
 * write. All it does is collapse the outer margins so a band cannot open with
 * a gap the rest of the page does not have, and give whoever wrote plain
 * paragraphs the same measure as the rest of the page rather than the full
 * width of the screen.
 * ------------------------------------------------------------------------- */
.home-custom > :first-child { margin-block-start: 0; }
.home-custom > :last-child  { margin-block-end: 0; }
.home-custom > p,
.home-custom > h2,
.home-custom > h3,
.home-custom > ul,
.home-custom > ol {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--s-5);
}

/* ---------------------------------------------------------------------------
 * More ways to draw a CMS page section
 *
 * Five looks plus one escape hatch, all drawn from columns `page_sections`
 * already had. The accordion is not here: it shares the page builder's rules
 * above, because two copies of the same component eventually stop matching.
 * ------------------------------------------------------------------------- */

/* A section an administrator wrote themselves. Deliberately almost nothing:
   the markup inside is theirs, and a wrapper that imposed padding, a width or
   a background would fight every layout they might write. It only collapses
   the outer margins, and gives whoever wrote plain paragraphs the same measure
   as the rest of the page rather than the full width of the screen. */
.pg-html > :first-child { margin-block-start: 0; }
.pg-html > :last-child  { margin-block-end: 0; }
.pg-html > p,
.pg-html > h2,
.pg-html > h3,
.pg-html > ul,
.pg-html > ol {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto; padding-inline: var(--s-5);
}

/* The photograph full width, the words over it. The scrim is what keeps the
   heading readable on a pale photograph; without it this layout is a coin
   toss decided by whatever was uploaded. */
.pg-banner {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(16rem, 34vw, 26rem);
  background: var(--brand);
}
.pg-banner-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.pg-banner::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6));
}
.pg-banner--flat::after { background: none; }
.pg-banner-body { padding-block: var(--s-8); color: #fff; max-width: 46rem; }
.pg-banner-body h2 { color: #fff; margin-block: 0 var(--s-3); }
.pg-banner-body p  { color: rgba(255,255,255,.85); font-size: var(--t-md); margin-block-end: var(--s-5); }
.pg-banner-body .eyebrow { color: var(--accent); }

/* A quotation. The mark is decoration, so it is drawn by CSS and hidden from
   the accessibility tree rather than typed into the copy. */
.pg-quote { margin: 0; text-align: center; }
.pg-quote blockquote {
  position: relative; margin: 0; padding-block-start: var(--s-7);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.5;
  font-weight: 600; color: var(--ink);
}
.pg-quote blockquote::before {
  content: '\201C'; position: absolute; inset-block-start: -.35em; inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: 4.5rem; line-height: 1; color: var(--accent); opacity: .5;
}
.pg-quote figcaption {
  margin-block-start: var(--s-5); display: grid; gap: 2px;
  font-size: var(--t-sm);
}
.pg-quote figcaption b    { color: var(--ink); }
.pg-quote figcaption span { color: var(--ink-3); }

/* Two columns of one body. `column-count` rather than a grid: the text flows
   between the columns at whatever length it is, and one column on a narrow
   screen needs no second rule. `break-inside` stops a heading being orphaned
   at the foot of the first column. */
.pg-columns { column-count: 2; column-gap: var(--s-8); }
.pg-columns > :first-child { margin-block-start: 0; }
.pg-columns h2, .pg-columns h3, .pg-columns h4 { break-after: avoid; }
.pg-columns p, .pg-columns li { break-inside: avoid; }
@media (max-width: 760px) { .pg-columns { column-count: 1; } }

/* A dated line of milestones. The rule is drawn on the list rather than
   between the items so it cannot end in a gap, and it is `inset-inline-start`
   throughout so the whole thing mirrors itself in Arabic. */
.pg-timeline {
  position: relative; list-style: none; margin: var(--s-7) 0 0; padding: 0;
  display: grid; gap: var(--s-6);
}
.pg-timeline::before {
  content: ''; position: absolute; inset-block: .6rem 0; inset-inline-start: 11px;
  width: 2px; background: var(--line);
}
.pg-milestone { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--s-4); }
.pg-milestone-dot {
  position: relative; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}
.pg-milestone-when {
  display: block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; color: var(--accent-dark);
}
.pg-milestone h3 { margin: 2px 0 var(--s-2); font-size: var(--t-lg); }
.pg-milestone p  { margin: 0; color: var(--ink-2); }

/* ---------------------------------------------------------------------------
 * Organisation chart: the two shapes a step down it can take
 *
 * A row of departments is a set of columns and stays a row; a row of teams is
 * the list inside one department and stacks. Which one a list is comes from
 * the tier, in the view — see `SiteStructure::TIERS`.
 * ------------------------------------------------------------------------- */
.org-children--stack { flex-direction: column; flex-wrap: nowrap; align-items: center; }

/* The row of departments holds its line on a real screen rather than folding
   into two half-rows that read as two levels. `.org-chart` is already
   `overflow-x: auto`, so a chart too wide to fit scrolls instead of wrapping —
   which is what an org chart should do. Below that width, wrapping is still
   the right answer and the default takes over. */
@media (min-width: 860px) {
  .org-children:not(.org-children--stack) { flex-wrap: nowrap; }
}

/* Columns of unequal height start together at the top. Without this the
   row stretches each column and a department with three teams sits a row
   higher than one with two — which reads as a level, not as a longer list. */
.org-children:not(.org-children--stack) { align-items: flex-start; }

/* The line of command sits under whatever flanks it, and stays centred. */
.org-children--line { flex-wrap: nowrap; }

/* ---------------------------------------------------------------------------
 * A mega panel instead of a dropdown
 *
 * Set per parent link at Admin → Menus. The column count arrives as
 * `--nav-cols` on the element, because it is data about that one link rather
 * than a rule about all of them.
 * ------------------------------------------------------------------------- */
.nav-sub--mega {
  display: grid;
  grid-template-columns: repeat(var(--nav-cols, 2), minmax(150px, 1fr));
  gap: 2px var(--s-4);
  min-width: min(44rem, 90vw);
}

/* Narrow screens get one column whatever the setting says: the menu is a
   stacked list there, and a four-column panel inside it is unreadable. */
@media (max-width: 900px) {
  .nav-sub--mega { grid-template-columns: 1fr; min-width: 0; }
}

/* ---- Back to top ---------------------------------------------------------
   One button, in the layout, so it is on every page.

   The ring around it is the page's own progress: a conic gradient driven by
   `--p`, which app.js sets on scroll. It is decoration with a job — it says
   how much of a long appeal is left, which is the question somebody reaching
   for this button has just asked themselves.

   Hidden with `visibility` rather than `opacity` alone, so a keyboard cannot
   tab to a button nobody can see. Logical properties throughout: it sits at
   the end of the line, which is the left in Arabic.                        */

.to-top {
  position: fixed;
  inset-block-end: var(--s-5); inset-inline-end: var(--s-5);
  z-index: 290;                     /* under the toasts, over the page */
  width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: var(--r-full);
  background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;

  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* The ring: gold as far as the page has been read, a faint track after it. */
.to-top-ring {
  position: absolute; inset: 0; border-radius: inherit;
  background: conic-gradient(
    var(--accent) calc(var(--p, 0) * 1%),
    rgba(255, 255, 255, .55) 0
  );
  box-shadow: var(--shadow-md);
}

/* The disc that sits inside the ring and carries the arrow. */
.to-top-face {
  position: relative;               /* over the ring */
  width: 38px; height: 38px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  transition: background-color .18s ease, transform .18s ease;
}
.to-top:hover .to-top-face,
.to-top:focus-visible .to-top-face { background: var(--brand-mid); transform: translateY(-2px); }
.to-top:focus-visible { outline: none; }
.to-top:focus-visible .to-top-face { box-shadow: var(--ring); }

/* The administrator's bar sits in the opposite corner, so the two never
   meet — but on a narrow screen everything is in one column, and the button
   comes in a little to stay off the edge. */
@media (max-width: 560px) {
  .to-top { inset-block-end: var(--s-4); inset-inline-end: var(--s-4); }
}

/* Somebody who has asked for less motion gets the button, without the slide
   in or the lift. It still appears and disappears — that is information, not
   decoration — but it does so by fading alone. */
@media (prefers-reduced-motion: reduce) {
  .to-top { transform: none; transition: opacity .01ms, visibility .01ms; }
  .to-top.is-visible { transform: none; }
  .to-top:hover .to-top-face, .to-top:focus-visible .to-top-face { transform: none; }
}

/* ---- Recommendations and the consent bar --------------------------------
   Drawn by `partials/recommendations.php` and `partials/audience-tracker.php`.
   Both reuse the card language the rest of the site already speaks rather
   than inventing a third one, so a recommended article looks like an article.
   ------------------------------------------------------------------------ */

.rec-block { margin-block: var(--s-6); }

.rec-head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-5); }
.rec-head h2 { margin: 0; font-size: var(--t-xl); }

.rec-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.rec-card {
  display: flex; flex-direction: column;
  /* Fill the grid track, so every card in a row is the height of its row and
     the row below matches it too — see the title rule further down, which is
     what actually makes the rows equal. */
  height: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }

/* Every picture the same size, whatever shape the original is.

   Three things together do that, and all three are needed: the box has a fixed
   ratio, it refuses to be squeezed or stretched by the card around it
   (`flex: none` — a flex child will otherwise shrink to make room for a long
   title), and the image inside is cropped to fill rather than letterboxed.
   `aspect-ratio` alone was not enough here. */
.rec-media {
  display: block; flex: none;
  aspect-ratio: 16 / 10;
  background: var(--bg-sunk);
  overflow: hidden;
}
.rec-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* A browser without `aspect-ratio` gets the same proportions the old way — a
   percentage padding on the box and the image laid over it. */
@supports not (aspect-ratio: 16 / 10) {
  .rec-media { position: relative; height: 0; padding-block-end: 62.5%; }
  .rec-media img { position: absolute; inset: 0; }
}

.rec-body { padding: var(--s-4); display: flex; align-items: flex-start; flex: 1 1 auto; }

/* Smaller than it was (16px), and — more importantly — always exactly two
   lines tall.

   The card heights used to differ by 24px depending on whether a headline
   wrapped, which is what made a row of them look uneven even though every
   picture was already identical. Reserving two lines means a short title and a
   long one produce the same card. A third line is clamped rather than allowed
   to push the card taller again. */
.rec-body h3 {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  min-height: calc(2 * 1.5em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-body a { color: var(--ink); }
.rec-body a:hover { color: var(--brand); }

/* The consent bar, when an administrator has asked for one. Bottom of the
   window, above everything, and it never covers the whole page — a wall
   between a reader and an article is how consent banners got their name. */
.consent-bar {
  position: fixed; inset-inline: var(--s-4); inset-block-end: var(--s-4);
  z-index: 320; margin-inline: auto; max-width: 680px;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.consent-bar p { margin: 0; flex: 1 1 280px; font-size: var(--t-sm); color: var(--ink-2); }
.consent-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* The consent bar gained a heading and a policy link, so the text and the
   buttons became two blocks rather than one line. */
.consent-text { flex: 1 1 300px; }
.consent-text strong { display: block; font-size: var(--t-base); color: var(--ink); margin-bottom: 2px; }
.consent-text p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.consent-text a { color: var(--brand); text-decoration: underline; }
.consent-bar .btn { min-height: 36px; }