/* ==========================================================================
   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;
  /* A long unbroken token — an email address, an IBAN, a pasted URL — breaks
     rather than pushing its box past the screen. Only ever acts on a word
     that would otherwise overflow, so ordinary text is untouched. */
  overflow-wrap: break-word;
  -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(min(290px, 100%), 1fr)); }

/* A page with a main column and a side column — the donation form and its
   summary, an appeal and its donate box, the contact form and its details.

   Each of these used to write its columns in a `style` attribute, and a style
   attribute beats every media query: the donation form stayed split into two
   narrow columns on a phone, with the side column around 85px wide. The page
   still chooses its own proportion, through `--layout-main`; the stylesheet
   now decides when there is room for two columns at all. */
.layout-aside {
  display: grid; align-items: start; gap: var(--s-8);
  grid-template-columns: minmax(0, var(--layout-main, 1.6fr)) minmax(0, 1fr);
}
@media (max-width: 900px) {
  .layout-aside { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

.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; flex-wrap: wrap; 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;
  max-width: 100%;
  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; }
/* The Details button under the summary: its own width, at the reading edge,
   rather than stretched across the column the card body is. */
.card-body > .card-details { align-self: flex-start; }

/* "You are giving $10 — your card is charged ₺486.20." Stated before the
   button, because being charged in a currency you did not choose is the sort
   of surprise that makes somebody cancel the payment afterwards. */
.charge-note {
  display: flex; gap: var(--s-3); align-items: flex-start; text-align: start;
  padding: var(--s-4); margin-bottom: var(--s-4);
  background: var(--green-tint); border-radius: var(--r-md);
  border-inline-start: 3px solid var(--green);
}
.charge-note-icon { color: var(--green); flex: none; line-height: 0; margin-top: 2px; }
.charge-note-main { margin: 0; font-size: var(--t-sm); color: var(--ink); }
.charge-note-main b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.charge-note-rate { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--ink-2); }
.charge-note-source { display: block; opacity: .85; }

/* The lira line under the total: the same row, quieter, because it restates
   one figure rather than adding another. */
.cart-total--base { border-top: 0; padding-top: 0; margin-top: calc(var(--s-2) * -1); font-size: var(--t-sm); color: var(--ink-2); }
.cart-total--base b { font-weight: 700; color: var(--ink-2); }

/* The accounts offered where a card has just failed. */
.bank-transfer-list { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin-bottom: var(--s-4); }
.bank-transfer-item { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); }
.bank-transfer-item .ct-iban { margin: var(--s-1) 0 var(--s-3); }

/* Every "details" button on the website — projects, humanitarian cases,
   initiatives — in the site's third accent, the development-stages green
   (#617f67). One class, so a new card gets the same look by using it. */
.btn-details { background: var(--green); border-color: var(--green); color: #fff; }
.btn-details:hover,
.btn-details:focus-visible { background: #4f6a55; border-color: #4f6a55; color: #fff; }
.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);
}

/* A campaign card's picture is a wrapper rather than the link itself, so the
   chips can lie over it without being inside the link. The link still fills
   the whole picture, so the picture is still the click target it was. */
.card-media-link { display: block; width: 100%; height: 100%; }

/* Who it reaches, who a gift covers and where, along the foot of the picture.
   The wash underneath carries white chips over a pale photograph as well as a
   dark one, and the row lets clicks through to the picture's own link. */
.card-facts--media {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  gap: 5px;
  padding: var(--s-6) var(--s-3) var(--s-3);
  background: linear-gradient(to top, rgba(24, 12, 16, .74), rgba(24, 12, 16, 0));
  pointer-events: none;
}
/* Tighter than the same chip in a card body: three of them share the foot
   of a narrow picture, and a third row would bury the photograph. */
.card-facts--media .fact {
  padding: 0.18rem 0.5rem; line-height: 1.45;
  background: rgba(255, 255, 255, .93); color: var(--ink);
  backdrop-filter: blur(4px);
}
.card-facts--media .fact svg { color: var(--brand); }

/* -- 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); }

/* The currency dropdown beside the bank accounts. A native select, so the
   list is the platform's own on a phone; only the closed control is styled.
   `dir="ltr"` on it keeps "USD $" and the chevron in place on Arabic pages. */
.cur-switch { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.cur-switch select {
  -webkit-appearance: none; appearance: none;
  font: inherit; font-weight: 700; color: inherit; line-height: 1.5;
  padding-block: 0; padding-inline: 8px 20px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 7px center / 9px 6px;
  cursor: pointer;
}
.cur-switch select:hover { border-color: rgba(255, 255, 255, .7); }
.cur-switch select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cur-switch option { color: #1c1c1c; background: #fff; }
.cur-switch button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .2); color: inherit; cursor: pointer;
}

.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);
  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; }

/* Below the desktop layout the twelve-column track is dropped, not re-spanned.

   The columns used to become `span 6` and then `span 12` of that same grid.
   But twelve columns carry eleven gaps, and eleven gaps of 2rem are 352px on
   their own — wider than a phone before a single letter is laid out. Worse,
   section 14 once switched the grid to a single `1fr` column at 620px while
   this rule still asked for `span 12`, so the browser invented eleven empty
   columns to honour the span, and every footer column came out 352px wide on
   every phone: the page slid sideways on all of them. Two plain grids instead,
   and no spans to reconcile. */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col, .footer-col-wide { grid-column: auto; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .site-footer .wrap { padding-inline: var(--s-5); }
  .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; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) 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; margin-inline-start: auto; min-width: 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) {
  /* The mark takes the flexible column; the burger and the actions keep their
     own. The burger used to sit in the middle `minmax(0, 1fr)` column — the
     one that gives way when space runs out — so on a phone it shrank to
     nothing and the button slid underneath the basket beside it. */
  .site-header .wrap { grid-template-columns: minmax(0, 1fr) auto auto; }
  .brand { min-width: 0; }
  /* The mark's height was fixed at 70px and its width left to whatever space
     remained, so a phone squeezed it sideways: 21px wide and 70px tall in
     English at 320px. A ceiling on the height and a width that may not exceed
     its column keep the proportions at every size. */
  .brand img { height: auto; max-height: 70px; max-width: 100%; }
  .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);
    /* The menu opens inside the sticky header. Taller than the screen, its
       last items would sit below the fold with nothing to scroll them into
       view. A scroll container is safe at this width — unlike the desktop
       bar — because the sub-menus are in the flow here, not positioned
       against their items. */
    max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .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: minmax(0, 1fr); gap: var(--s-6); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 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); }
}

/* Single columns on a phone are `minmax(0, 1fr)`, never a bare `1fr`. A bare
   `1fr` means `minmax(auto, 1fr)`: the column may not be narrower than the
   longest word inside it, so one email address or IBAN widened the column —
   and the page — past the screen. The footer's own rules live in section 10;
   one used to be repeated here, where it overrode them and broke the footer. */
@media (max-width: 620px) {
  :root { --s-9: 3rem; --s-10: 3.5rem; }
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .toasts { inset-inline: var(--s-4); max-width: none; }
  .panel { padding: var(--s-5); }
  /* A label that does not fit wraps inside its button instead of carrying the
     button off the edge of the screen. Long Turkish and English labels did. */
  .btn { padding: 0.8rem 1.15rem; white-space: normal; line-height: 1.3; }

  /* The utility bar: smaller type in two aligned rows — the contact details
     (phone, WhatsApp, email) on the first, bank accounts and the language
     switch on the second. Everything stays written out: the email address is a
     contact detail people read and copy, not just a link to tap.

     One row was measured and is not possible: written out, the five items need
     about 560px even at 10px type, and a phone has 290–380px. At 10px the
     contact row needs about 326px, so it holds on one line from 360px up;
     only a 320px phone moves the email to a line of its own. The language
     links set their size in rem, so they are told to follow the bar here. */
  .topbar { font-size: 10px; }
  .topbar .wrap {
    justify-content: center; align-items: center; text-align: center;
    gap: 0 var(--s-3); padding-block: 3px; padding-inline: var(--s-3);
  }
  .topbar-links { justify-content: center; align-items: center; gap: 0 var(--s-2); }
  .topbar a { min-width: 24px; justify-content: center; gap: 4px; }
  .topbar svg { width: 12px; height: 12px; }
  .lang-switch a, .lang-switch .sep { font-size: inherit; }

  /* A compact bar: the sticky header was 95px of a phone's screen. */
  .site-header .wrap { padding-inline: var(--s-4); padding-block: var(--s-2); gap: var(--s-2); }
  .brand img { max-height: 48px; }
  .header-actions { gap: var(--s-2); }
  .header-actions .btn {
    white-space: nowrap; line-height: 1;
    min-height: 42px; padding: 0.55rem 0.8rem; font-size: var(--t-sm);
  }

  /* A row of label and value drops the value under its label when the two do
     not fit side by side; a reference that is one long token may then break
     rather than run off the screen. */
  .detail-list dd.nowrap { white-space: normal; overflow-wrap: anywhere; }
}

/* The narrowest phones. The donate button keeps its heart and its name — the
   name is still what a screen reader announces — but gives up the written
   label, which cannot fit beside the mark, the basket and the menu at 320px
   without shrinking the mark to an unreadable sliver. */
@media (max-width: 359px) {
  .brand img { max-height: 40px; }
  .header-donate { width: 42px; padding: 0; gap: 0; }
  .header-donate-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* -- 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(min(232px, 100%), 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: minmax(0, 1fr); margin-top: calc(var(--s-7) * -1); }
  .zk-result { position: static; }
  .zk-info { grid-template-columns: minmax(0, 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: minmax(0, 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);display: none;}

.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;display: none;
}
.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(min(300px, 100%), 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: minmax(0, 1fr); }
  .ct-form-grid { grid-template-columns: minmax(0, 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(min(230px, 100%), 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(min(160px, 100%), 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; }

/* A page banner that cycles, set at Admin -> Page banners.

   The slides and the dots are the home page's own, so there is one slider on
   this site and not two. What differs is the frame: a page banner puts its
   picture *behind* a heading, so the container fills the banner the way any
   `.hero-media` does and the picture keeps the same wash a still one has.
   These rules sit after `.home-slide img` deliberately — that is what they
   are correcting. */
.hero-slides .home-slide { transition: opacity .6s ease, visibility 0s linear .6s; }
.hero-slides .home-slide.is-active { transition: opacity .6s ease, visibility 0s; }
.hero-slides .home-slide img { opacity: .38; }
.hero-dots {
  position: absolute; inset-inline: 0; bottom: var(--s-4); z-index: 3;
  display: flex; justify-content: center; gap: var(--s-2);
}

@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; }
/* A project given a figure to raise reports against it in the shape a
   sponsorship's page already uses: the total, the bar, then the per-cent
   and what is still needed. */
.pj-panel--fund { display: grid; gap: var(--s-4); }
.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(min(220px, 100%), 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(min(220px, 100%), 1fr)); gap: var(--s-5); }
/* The figure cards are the about-us page's `.pg-card` wearing a number: the
   same ground and border, the same icon blob that morphs on hover, and the
   same short rule underneath cycling the three accents along the row. Drawn
   here rather than by reusing the class because the contents differ — a
   figure and its label, not a heading and a paragraph. */
.rp-stat {
  text-align: center; padding: var(--s-6) var(--s-5);
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r-xl);
}
/* `.rp-stat .rp-stat-icon`, not `.rp-stat-icon`: the label below is a plain
   `<span>`, so `.rp-stat span` matches this span too and, being the heavier
   selector, was painting the icon in the label's grey. */
.rp-stat .rp-stat-icon {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin: 0 auto var(--s-4);
  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;
}
.rp-stat:hover .rp-stat-icon {
  background: var(--brand); color: #fff;
  border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}
.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; }
.rp-stat::after {
  content: ""; display: block; width: 30px; height: 2px;
  margin: var(--s-3) auto 0; border-radius: var(--r-full);
  background: var(--accent);
}
.rp-stat:nth-child(3n+2)::after { background: var(--green); }
.rp-stat:nth-child(3n)::after   { background: var(--brand); }

/* The same breathing room `.pg-card` takes back on a narrow screen. */
@media (max-width: 860px) {
  .rp-stat { padding: var(--s-5) var(--s-4); }
}

/* 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(min(300px, 100%), 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 .3s ease, box-shadow .3s ease, border-color .3s ease; }
.rp-stat:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: rgba(178, 148, 107, .45);
}

@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-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(min(200px, 100%), 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(min(150px, 100%), 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 giving block on a card ----------------------------------------- */
/*
   A card's own donation action: the amounts the site offers, an open amount
   box, and the two ways to give — into the basket, or straight on to the
   donation form.

   The amounts sit on one line that scrolls rather than wrapping, so every
   card in a row keeps the same height whatever each project's minimum leaves
   on the strip. The arrows are shown only once `app.js` has measured a strip
   that is actually wider than its box; with scripting off the strip is still
   scrollable by touch and by keyboard, and the amount box still works.
*/
.card-actions--give { display: grid; gap: var(--s-3); }

.card-give { display: grid; gap: var(--s-3); }
/* A grid item's minimum size is its content, so without this the row of
   amounts refuses to shrink and the last chip hangs out of the card on a
   narrow column — ₺2,500 was over the edge below about 380px of card. The
   track inside it already scrolls; it just has to be allowed to get smaller
   than what it holds. */
.card-give > * { min-width: 0; }

.card-give-amounts { display: flex; align-items: center; gap: var(--s-1); min-width: 0; }

.card-give-track {
  flex: 1; min-width: 0;
  display: flex; gap: var(--s-2);
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
  /* Room for the focus ring, taken back off the layout. */
  padding: 2px; margin: -2px;
}
.card-give-track::-webkit-scrollbar { display: none; }

/* On a phone the card is the width of the screen and the arrows are eating
   the room the chips need, so the row wraps to a second line instead: every
   amount visible at once, and nothing to scroll. */
@media (max-width: 700px) {
  .card-give-track { flex-wrap: wrap; overflow-x: visible; }
  .card-give-nav { display: none !important; }
}

/* Small enough that a full set of five fits a card column without scrolling.
   The size is fixed rather than per currency: ₺2,500 is the widest label the
   site offers, so sizing for it keeps the row identical in TL, USD and EUR
   instead of the chips changing size when a donor switches currency. */
.amt-pill {
  flex: none;
  padding: 0.32rem 0.6rem;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink);
  font-size: var(--t-xs); font-weight: 700; line-height: 1.4;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.amt-pill:hover { border-color: var(--brand); color: var(--brand); }
.amt-pill[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

.card-give-nav {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 28px; padding: 0;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--ink-3); cursor: pointer;
}
.card-give-nav:hover { color: var(--brand); }
/* A class with a display of its own outranks the browser's rule for [hidden]. */
.card-give-nav[hidden] { display: none; }
.card-give-nav[disabled] { opacity: .3; pointer-events: none; }

.card-give-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.card-give-cart { display: flex; gap: var(--s-2); flex: 1 1 10rem; min-width: 0; }
.card-give-field { display: flex; flex: 1 1 5.5rem; min-width: 0; }

.card-give-field .input {
  /* Level with the buttons beside it, whatever they measure. */
  height: 100%;
  padding: 0.5rem 0.7rem;
  font-size: var(--t-sm); border-radius: var(--r-sm);
  background: var(--bg-sunk);
  /* The spinner arrows crowd a box this narrow. */
  -moz-appearance: textfield;
}
.card-give-field .input::-webkit-outer-spin-button,
.card-give-field .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.card-give-add { flex: none; }
/* Alone on its line in a narrow card, it takes the width. */
.card-give-now { flex: 1 1 auto; }

/* "Details" under the giving block: the same outline button the initiative
   and case cards use (.btn .btn-outline .btn-sm); this only places it. */
.card-give-more { justify-self: start; }


/* "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 ---------------------------------------------------- */

/* ---- The basket, as a table --------------------------------------------- */
/*
   Six columns with a heading each. Below 760px the rows stack into cards and
   every cell wears its own heading from `data-label`, which keeps the page
   from scrolling sideways on a phone and keeps each box labelled.
*/
.cart-table {
  width: 100%; border-collapse: collapse;
  margin-bottom: var(--s-5);
}
.cart-table th {
  text-align: start; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cart-table td {
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.cart-table tr:last-child td { border-bottom: 0; }
.cart-col-img { width: 130px; }
.cart-col-act { width: 1%; text-align: end; }
.cart-col-sum { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-col-sum b { font-family: var(--f-display); font-size: var(--t-md); color: var(--brand); }

.cart-thumb { display: block; width: 110px; border-radius: var(--r-md); overflow: hidden; background: var(--bg-sunk); }
.cart-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.cart-name { font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; margin: 0 0 2px; line-height: 1.3; }
.cart-name a { color: var(--ink); }
.cart-name a:hover { color: var(--brand); }
.cart-min { margin: 0; font-size: var(--t-xs); color: var(--ink-3); }

/* The currency sits inside the box rather than floating beside it. */
.cart-field { position: relative; display: block; max-width: 9.5rem; }
.cart-field-cur {
  position: absolute; inset-inline-start: 0.6rem; inset-block-start: 50%;
  transform: translateY(-50%);
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); pointer-events: none;
}
.cart-field .input {
  padding: 0.55rem 0.7rem; padding-inline-start: 1.8rem;
  font-size: var(--t-base); font-variant-numeric: tabular-nums;
}
.cart-qty {
  width: 5rem; padding: 0.55rem 0.5rem;
  text-align: center; font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: auto; }
  .cart-table tr {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: var(--s-4); margin-bottom: var(--s-4); background: var(--surface);
  }
  .cart-table td {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 0;
  }
  /* Each cell says which column it came from. */
  .cart-table td::before {
    content: attr(data-label);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3); flex: none;
  }
  .cart-col-img, .cart-col-act { width: auto; text-align: start; }
  .cart-col-img::before { display: none; }
  .cart-col-img { display: block; padding-bottom: var(--s-3); }
  .cart-thumb { width: 100%; }
  .cart-field, .cart-qty { max-width: 9rem; width: 9rem; }
}

/* ---- "Added to your basket" --------------------------------------------- */
/*
   Shown once, after something goes into the basket, so the donor keeps the
   page they were reading. Every way out of it is a link back to that same
   page, so it closes with the script switched off too.
*/
.ca-wrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s-4); }
.ca-veil { position: absolute; inset: 0; background: rgba(24, 12, 16, .5); backdrop-filter: blur(2px); }
.ca-box {
  position: relative; width: min(26rem, 100%);
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: var(--s-6);
  max-height: calc(100dvh - 2rem); overflow-y: auto;
}
.ca-x {
  position: absolute; inset-block-start: var(--s-3); inset-inline-end: var(--s-3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-full); color: var(--ink-3);
}
.ca-x:hover { background: var(--bg-sunk); color: var(--ink); }

.ca-head {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 var(--s-6) var(--s-5) 0;
  font-family: var(--f-display); font-size: var(--t-md); font-weight: 700; color: var(--ink);
}
.ca-tick {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: var(--r-full);
  background: var(--ok-tint); color: var(--ok);
}

.ca-line { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.ca-thumb { width: 88px; height: 59px; flex: none; border-radius: var(--r-md); object-fit: cover; background: var(--bg-sunk); }
.ca-what { min-width: 0; display: grid; gap: 2px; }
.ca-what b { font-size: var(--t-base); line-height: 1.35; }
.ca-type { font-size: var(--t-xs); color: var(--ink-3); }

.ca-facts { margin: 0 0 var(--s-5); display: grid; gap: var(--s-2); }
.ca-facts > div { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--t-sm); }
.ca-facts dt { margin: 0; color: var(--ink-3); }
.ca-facts dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ca-facts .ca-sum { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.ca-facts .ca-sum dd { color: var(--brand); font-family: var(--f-display); font-size: var(--t-md); }

.ca-acts { display: grid; gap: var(--s-2); }

/* ---- The cards we take --------------------------------------------------- */

.pay-marks {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.pay-marks-label {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.pay-marks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pay-marks-list img { display: block; width: 42px; height: 28px; }
/* The other way to give, level with the marks it sits beside. */
.pay-bank {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 0.35rem 0.7rem; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--t-xs); font-weight: 700; color: var(--ink-2);
}
.pay-bank:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.pay-bank svg { flex: none; color: var(--brand); }

.pay-marks-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; flex: 1 1 14rem;
  font-size: var(--t-xs); color: var(--ink-3);
}
.pay-marks-note svg { flex: none; color: var(--ok); }

[lang="ar"] .cart-table th,
[lang="ar"] .cart-table td::before,
[lang="ar"] .pay-marks-label { letter-spacing: normal; text-transform: none; }

.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-panel { width: min(300px, calc(100vw - var(--s-5))); }
}

/* On a phone the basket drops down from the header bar, not from its button.

   Pinned to the button's edge, a panel up to 300px wide had to hang off one
   side of a narrow screen: at 320px in Arabic it opened at 66–362px, and the
   prices and the checkout button sat past the right edge — a direction a
   right-to-left page cannot scroll to, so they were simply unreachable.
   English lost the same strip off the left. Released from the button, the
   panel's reference becomes the sticky header itself, and it spans the bar
   with the page margin on either side, whichever way the text runs. */
@media (max-width: 620px) {
  .cart-widget { position: static; }
  .cart-panel { inset-inline: var(--s-4); inset-block-start: calc(100% + 4px); width: auto; }
}

/* ---- 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: minmax(0, 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(min(220px, 100%), 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; }

/* ---- Buttons on a page banner -------------------------------------------
   Set at Admin -> Page banners. The home hero's own pair — solid, then
   outlined for a dark ground — under the heading and its line rather than
   over the foot of the artwork, because a page banner's text is real text. */
.page-hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-5);
}

@media (max-width: 560px) {
  .page-hero-actions { flex-direction: column; align-items: stretch; }
  .page-hero-actions .btn { justify-content: center; }
}

/* ---- "More" (⋯) — the menu items that do not fit on the first line ------
   app.js moves them in here (`initNavOverflow`) on a screen wide enough for
   the bar but not for every label. The panel is the drop-down every sub-menu
   already uses, anchored at its reading end so it opens back over the bar
   rather than off the edge of the screen. Inside it the items are a stacked
   list, and a sub-menu opens in place, indented, the way it does in the
   burger menu. The rules for the panel's contents sit after the mega-menu's
   on purpose: those are what they undo. */
.nav-more[hidden] { display: none; }

.nav-item.nav-more > .nav-parent { padding-inline: 0.55rem; }
.nav-item.nav-more > .nav-parent svg,
.nav-item.nav-more > .nav-parent[aria-expanded="true"] svg { width: 20px; height: 20px; transform: none; }
.nav-item.nav-more.is-active > .nav-parent { color: var(--brand); background: var(--brand-tint); }

.nav-more-panel {
  inset-inline-start: auto; inset-inline-end: 0;
  min-width: 250px;
  max-height: min(72vh, 34rem); overflow-y: auto; overscroll-behavior: contain;
}
.nav-more-panel > a,
.nav-more-panel > .nav-item { width: 100%; }
.nav-more-panel > a { display: flex; }
.nav-more-panel > a.is-active::after { display: none; }
.nav-more-panel > a.is-active { background: var(--brand-tint); color: var(--brand); }

.nav-more-panel .nav-item > .nav-parent { width: 100%; justify-content: space-between; }
.nav-more-panel .nav-sub {
  position: static; min-width: 0; box-shadow: none; border: 0; border-radius: 0;
  border-inline-start: 2px solid var(--line);
  margin-block: 2px var(--s-2); margin-inline-start: var(--s-3);
  padding-block: 0; padding-inline: var(--s-2) 0;
}
.nav-more-panel .nav-sub--mega:not([hidden]) { display: flex; flex-direction: column; min-width: 0; }