/* ============================================================================
   theme.css — the shared theme layer for every public page.
   ============================================================================

   Approved by محمد فهيم 2026-09-11 (audit phases A, B, C). Loaded LAST on
   every public page, after header-services.css, so it is the one place a
   theme decision is written once and holds everywhere.

   What lives here, and why it is not left where it was:

   1. THE PALETTE. The audit counted three navies, four teals, six dark golds
      and three greys, each a legitimate-looking token in a different file.
      One value per role is defined here, and the legacy tokens are pointed at
      it — so thousands of existing declarations change colour without a
      single one of them being edited.
   2. THE HEADING SCALE. aegov-dls.css set h2 at 48px on desktop, four-fifths
      of the hero's own title, which flattened the page's hierarchy.
   3. THE SECTION COMPONENTS — heading, gold-lozenge divider, white/tint
      rhythm. They were in home-sections.css, which only the homepage loads.
   4. THE FOOTER. Its CSS was pasted inline into 37 pages, in off-palette gold,
      with a green heading layered over it from v9-overrides.css.
   5. HEADER FIXES that belong to every page, not just the homepage.
   ========================================================================= */


/* ---------------------------------------------------------------- 1 ---
   Palette — the identity table in CLAUDE.md §6, plus the one derived step
   the identity needs: gold is too light to be TEXT on white (2.3:1), so text
   uses gold-ink #7D6217 (5.8:1 on white, 5.4:1 on the tint). */
:root {
  --brand-navy: #0A2A3D;
  --brand-teal: #12525C;
  --brand-teal-300: #3D7580;
  --brand-gold: #C9A227;
  --brand-gold-light: #E3C15A;
  --brand-gold-ink: #7D6217;
  --brand-grey: #5A6B74;
  --brand-tint: #F4F6F7;

  /* Legacy tokens, one role each, pointed at the table above. */
  --ds-teal-900: var(--brand-navy);
  --ae-brand-navy: var(--brand-navy);
  --teal-900: var(--brand-navy);
  --ds-teal-700: var(--brand-teal);
  --teal-700: var(--brand-teal);
  --mb-teal: var(--brand-teal);
  --gold-500: var(--brand-gold);
  --ds-gold-500: var(--brand-gold);
  --gold-600: var(--brand-gold-ink);
  --ae-gold-700: var(--brand-gold-ink);
  --ds-gold-700: var(--brand-gold-ink);
  --ds-progress: var(--brand-gold-ink);
  --ds-ink-500: var(--brand-grey);
  --ds-bg-tint: var(--brand-tint);

  /* The greens (batch 2, 2026-09-11). The identity has no green, yet the
     donate form, the zakat calculator and the contact form's status line all
     drew from these legacy tokens — measured on those pages as borders,
     labels, the selected amount and icons. Pointed at the teal that plays the
     same role everywhere else, so every var() use follows at once. */
  --green-500: var(--brand-teal-300);
  --green-600: var(--brand-teal);
  --green-700: var(--brand-teal);
  --mb-green: var(--brand-teal);
  --mb-emerald: var(--brand-teal);
  /* batch 3: the status «success» green and the night pages' chip green. */
  --ds-success: var(--brand-teal);
  /* gold-light, not teal-300: on the night pages this token is the FILL of a
     pressed chip under #08252B text — teal-300 measured 3.10:1 there. */
  --mbn-green: var(--brand-gold-light);
  --ae-green-700: var(--brand-teal);
}
.mbn--daylight { --mbn-green: var(--brand-teal); --mbn-green-b: var(--brand-teal); }

/* batch 3: the 13px floor reaches the shell. The services bar set its text at
   .72rem (11.5px) and the menu's sub-link descriptions at .78em of that
   (9.7px, inline from header-v2.js, at 68% opacity). */
.hotline-strip,
.hotline-strip :is(a, span, b),
.ubar__licence,
.hotline-strip .language-switch button { font-size: 0.8125rem !important; }
.site-header .nav-sub-desc {
  font-size: 0.8125rem !important;
  opacity: 1 !important;
  color: var(--brand-grey) !important;
}


/* ---------------------------------------------------------------- 2 ---
   Heading scale — steps at breakpoints, the approach aegov-dls.css already
   uses, with the top step brought down so the page has a hierarchy:
     h1  32 → 40 → 52      (was 62 on desktop)
     h2  26 → 30 → 36      (was 48)
     h3  20 → 22 → 24      (was 32)
   Same selectors and the same !important as the rules they replace, so this
   wins exactly where aegov-dls.css won and nowhere else — any rule that
   already beat aegov (the homepage hero title, card titles) still does. */
main h1, .mbn__h1, .hero-content h1, .page-hero h1, #hero-title { font-size: 2rem !important; }
main h2, .mbn__h2 { font-size: 1.625rem !important; }
main h3 { font-size: 1.25rem !important; }
@media (min-width: 768px) {
  main h1, .mbn__h1, .hero-content h1, .page-hero h1, #hero-title { font-size: 2.5rem !important; }
  main h2, .mbn__h2 { font-size: 1.875rem !important; }
  main h3 { font-size: 1.375rem !important; }
}
@media (min-width: 1280px) {
  /* 44px, not 52 (batch 3): the distilled inner-page header set its title
     at 44, and the pages without that header — audit, impact, charity guide,
     the confirmations, 404 — stayed at 52, so two inner pages opened at two
     sizes. The homepage hero keeps its own larger rule. */
  main h1, .mbn__h1, .hero-content h1, .page-hero h1, #hero-title { font-size: 2.75rem !important; }
  main h2, .mbn__h2 { font-size: 2.25rem !important; }
  main h3 { font-size: 1.5rem !important; }
}


/* ---------------------------------------------------------------- 3 ---
   Section heading — moved from home-sections.css.

   Home markup:   .mb-head > .mb-head__kicker + h2.mb-head__title + .mb-head__lead
   Inner pages:   .page-section … > p.eyebrow + h2
   The inner pages are styled into the same shape rather than rewritten, so
   the association's editable regions (data-cms) are untouched. */
.mb-head { text-align: center; margin-block-end: clamp(28px, 4vw, 44px); }

.mb-head .mb-head__title {
  font-weight: 700;
  color: var(--ds-ink-900, #1a2530);
  margin: 0 0 var(--ds-s3, 12px);
  letter-spacing: -0.01em;
}
/* The gold rule under the heading. 20px clears the deepest descender
   Alexandria draws at this size (the tails of ذ and ي), so the gap is a
   property of the font and not of the sentence. */
.mb-head .mb-head__title::after,
main .page-section .eyebrow + h2::after,
main .v9-section .v9-eyebrow + h2::after {
  content: "";
  display: block;
  inline-size: 56px;
  block-size: 3px;
  border-radius: 999px;
  margin: 20px auto 0;
  background: var(--brand-gold);
}
/* Inner-page headings are start-aligned, so their rule is too. */
main .page-section .eyebrow + h2::after,
main .v9-section .v9-eyebrow + h2::after { margin-inline: 0; }

/* NOT class="lede": aegov-dls.css forces `main .lede` to 18px !important. */
.mb-head .mb-head__lead {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ds-ink-700, #324049);
  max-width: 62ch;
  margin: 0 auto;
}

/* The pill above the heading. The inner pages' eyebrows carry inline
   colour, tracking and weight from an older pass, hence the !important —
   an inline style can only be answered that way. White on teal: 8.8:1. */
/* Inner-page section labels are quiet text, not pills (2026-09-11, after
   محمد فهيم found the pages crowded). A teal pill, then the heading, then a
   gold rule under it, on every section, was three accents where one reads.
   The label stays — it names the section's kind — but as small gold-ink
   text; the heading and its rule carry the section. The homepage kicker
   below is unchanged. */
main .page-section .eyebrow,
main .v9-section .v9-eyebrow {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  background: none !important;
  color: var(--brand-gold-ink) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.6;
}
.mb-head__kicker {
  display: inline-block;
  margin-block-end: var(--ds-s4, 16px);
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--brand-teal);
  color: #fff !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.7;
}


/* The label above a hero title («جمعية المبرة الخيرية العالمية»): 11.5px
   and tracked at .18em, the only text on the homepage under 12px. Arabic is
   a joined script — letter-spacing pulls its letters apart — so the tracking
   goes to zero and the size comes up to the same 13px as every other label. */
main .hero-section .eyebrow,
main .page-hero .eyebrow {
  font-size: 0.8125rem !important;
  letter-spacing: 0 !important;
}

/* The phone's sticky «تبرع الآن» bar (built by motion.min.js). Its pill was
   #21A05B with white 12px text — 3.2:1, below the 4.5:1 that size needs,
   and green where every other donate action on the site is gold. */
.mb-sticky-cta b {
  background: var(--brand-gold);
  color: var(--brand-navy);
  font-size: 13px;
  font-weight: 700;
}

/* ONE FLOATING ACTION AT A TIME on a phone (محمد فهيم 2026-09-11).
   The sticky donate bar and the WhatsApp disc stacked at the bottom of the
   screen — 108px of it, over the content. While the bar is showing it is the
   page's action, so the disc steps aside and the bar drops to the bottom edge
   it no longer has to share; when the bar hides (the first and last part of
   the page) the disc comes back. The 76px lift was for .action-dock, so it
   stays on the pages that have one. */
@media (max-width: 640px) {
  .whatsapp-floating {
    transition: opacity 220ms ease, visibility 220ms, transform 220ms cubic-bezier(.22, .61, .36, 1);
  }
  body:has(.mb-sticky-cta.is-shown) .whatsapp-floating {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
  }
  body:not(:has(.action-dock)) .mb-sticky-cta {
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
}


/* ---------------------------------------------------------------- 4 ---
   Gold-lozenge divider — moved from home-sections.css. A hairline that fades
   at both ends with the gold lozenge at its centre. aria-hidden is on the
   element in the markup. */
.mb-divider {
  position: relative;
  block-size: 1px;
  max-width: 1100px;
  margin-inline: auto;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(10, 42, 61, 0.14) 22%,
    rgba(10, 42, 61, 0.14) 78%,
    transparent 100%);
}
.mb-divider::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 9px;
  block-size: 9px;
  translate: 50% -50%;
  rotate: 45deg;
  background: var(--brand-gold);
  border-radius: 2px;
  box-shadow: 0 0 0 5px var(--ds-cream-50, #fff);
}

/* Section rhythm on the inner pages: white, then the tint — the same two
   grounds the homepage alternates. */
main .page-section { background: #fff; }
main .page-section.alt { background: var(--brand-tint); }

/* One section rhythm for both inner-page systems (batch 1, 2026-09-11):
   .page-section was 80/96px and .v9-section 64px, so two pages of the same
   site breathed differently. Phones keep motion-fixes.css's 40px. */
main .page-section,
main .v9-section { padding-block: clamp(56px, 7vw, 88px); }


/* ---------------------------------------------------------------- 4b ---
   The inner-page header (batch 1, 2026-09-11).

   Twenty-four pages open on .page-hero, in two markups: seventeen with an
   inner wrapper (eyebrow, title, lead, then the breadcrumb at the BOTTOM),
   seven without one (breadcrumb at the TOP, no eyebrow). Measured heights ran
   from 435px to 744px. One header now:
   - a band of one proportion, content centred in it;
   - the breadcrumb first on every page — where a visitor looks for "where
     am I", and where the seven already had it — moved by flex order, so no
     page's markup changes;
   - the lead held to a readable measure. */
main .page-hero {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: clamp(300px, 36vh, 400px);
  padding-block: clamp(64px, 8vw, 104px) clamp(48px, 6vw, 80px);
  padding-inline: var(--ds-s5, 24px);
  background-size: cover;
  background-position: center;
}
main .page-hero .page-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 900, measured: at 820 the about page's one-sentence title took three
     lines and the header 753px; at 900 it takes two and the header 688px.
     Wider changed nothing further. */
  max-width: 900px;
  margin-inline: auto;
}
/* On a phone motion-fixes.css caps the title at 16ch, about 280px of a
   339px column — the about title took four lines and its header 856px, more
   than the 812px screen. The column is already narrow; the cap goes. */
@media (max-width: 640px) {
  main .page-hero h1,
  main .page-hero .page-hero-inner h1 { max-width: none; }
  /* The narrowing that mattered: motion-fixes.css pads .page-hero-inner
     18px a side INSIDE the hero's own 24px, leaving the title 291px of a
     375px screen. The hero's padding is enough on its own. */
  main .page-hero .page-hero-inner { padding-inline: 0 !important; }
}
/* The zakat page's live nisab dot was #21A05B, written as a literal in
   extensions.css and so outside the green tokens pointed at teal above. */
.mb-price-stamp .mb-dot { background: var(--brand-teal); }
main .page-hero .crumbs,
main .page-hero .crumb {
  order: -1;
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.78);
}
main .page-hero .crumbs a { color: #fff; text-decoration: none; }
main .page-hero .crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 28ch, not 22: at 22 the about page's title — one sentence — broke into
   three lines, 195px of a 752px header. */
main .page-hero h1 { max-width: 28ch; margin-inline: auto; text-wrap: balance; }

/* DISTILLED (2026-09-11). The header does one job: say where the visitor is.
   - The label above the title goes: on every page it repeated the last step
     of the breadcrumb directly above it («من نحن» under «الرئيسية / من نحن»).
   - The title steps down to 44px: an inner page is not the homepage, whose
     own title is 54px.
   - The lead is one quiet paragraph, a size under body-large.
   - Less height around them. */
main .page-hero .eyebrow { display: none !important; }
main .page-hero h1,
main .page-hero .page-hero-inner h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem) !important;
  line-height: 1.3 !important;
  margin-block: 0 14px;
}
main .page-hero p:not(.eyebrow):not(.crumb) {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.86);
  margin-block: 0;
}
main .page-hero {
  min-height: clamp(260px, 30vh, 340px);
  padding-block: clamp(56px, 6vw, 88px) clamp(44px, 5vw, 64px);
}
/* A photograph behind the words is a ground, not a picture to read over:
   one even navy veil, so the lead never sits on the bright part of it. */
main .page-hero[style*="background-image"]::after {
  background: linear-gradient(180deg, rgba(10, 42, 61, 0.84) 0%, rgba(10, 42, 61, 0.9) 100%);
}
/* After the rule above, not before it: the phone veil written earlier in
   this file lost to it on source order, and the contact photo's own
   lettering read through the title again. */
@media (max-width: 640px) {
  main .page-hero[style*="background-image"]::after { background: rgba(10, 42, 61, 0.93); }
}

/* The about page's central message, moved out of its header into a band of
   its own directly below it. */
.about-thesis {
  padding: clamp(40px, 5vw, 64px) var(--ds-s5, 24px);
  background: var(--brand-tint);
  text-align: center;
}
.about-thesis__quote {
  max-width: 46rem;
  margin: 0 auto;
}
.about-thesis__quote p {
  margin: 0;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.8;
  color: var(--brand-navy);
  text-wrap: balance;
}
.about-thesis__quote footer {
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand-gold-ink);
}
/* A photograph under the title, now that the photographs show. On a phone
   the title wraps to three lines over the busiest part of the picture, and
   the contact hero's photo carries lettering of its own that read through
   motion-fixes.css's 0.72-0.88 veil. A little more navy there, on photo
   heroes only; the plain navy heroes are unchanged. */
@media (max-width: 640px) {
  main .page-hero[style*="background-image"]::after {
    background: linear-gradient(135deg,
      rgba(10, 42, 61, 0.92) 0%,
      rgba(10, 42, 61, 0.84) 50%,
      rgba(10, 42, 61, 0.9) 100%);
  }
}
main .page-hero p:not(.eyebrow):not(.crumb) { max-width: 62ch; margin-inline: auto; text-wrap: pretty; }


/* ---------------------------------------------------------------- 4c ---
   Buttons: one shape (batch 1). aegov-dls.css gives .primary-button and
   .ghost-button the 8px, 48px system shape, but its list leaves out
   .btn-ghost, .btn-secondary, .tcase-cta and .mb-cta — so on donate, news,
   programs and volunteer an 8px gold button stood next to a 999px pill. They
   take the same geometry; their colours are left as each page set them. */
.btn-ghost,
.btn-secondary,
.tcase-cta,
.mb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ae-radius, 8px) !important;
  min-height: 48px !important;
  padding-inline: 24px !important;
  font-weight: 500 !important;
}

/* Cards: the news card was the one at 20px where every other card is 18. */
main .news-card { border-radius: var(--ds-r-md, 18px); }


/* ---------------------------------------------------------------- 4d ---
   Batch 2 — the five key pages (2026-09-11).

   A 13px floor for labels, measured one by one on donate, zakat, programs
   and about: tags, hints, suffixes and small kickers ran from 10.9px
   («مؤهّل للزكاة») to 12.5px. Listed by class rather than by a blanket rule,
   so nothing outside these four pages changes size. */
main :is(
  .dv2-segment legend, .nm em, .dv2-opt, .path-card__tag,
  .zv2-eyebrow, .mb-price-stamp, .zv2-field-hint, .zv2-suffix,
  .zv2-disclaimer, .zv2-asnaf-num, .sharia-block__tag,
  .mbn__kicker, .prog-zakat, .mbn-card__tag, .prog-cat__status,
  .brand-thesis .source,
  /* batch 3, measured on the remaining 28 pages */
  .eyebrow, small, dt, .news-badge, .report-badge, .ops-pill, .ts,
  .zc-hint, .zc-suffix, .zc-result-note, .zc-disclaimer,
  .cg-cat__count, .imp-stat__sub, .tier-badge, .pc-status, .paused-note,
  .donor-history-status,
  .imp-seg-wrap span, .imp-filter-group span, .imp-map-legend span, .imp-map-legend b,
  .audit-stat .label, .ops-card .label, .ledger-row .body span,
  .zc-tab, .zc-nisab-box span, .impact-stat .label, .impact-stat .sub,
  .hero-field-label__unit, .zk-band__kicker, .mtile__badge, .mtile__date
) {
  font-size: 0.8125rem !important;
  letter-spacing: 0 !important;
}

/* Programs: the card buttons were a light green (#6FBF5B) — the only green
   call to action on the site, next to gold ones in the same page. Gold with
   navy text, the site's donate button; navy on this gold is 6.1:1. */
main .mbn-card__cta {
  background: var(--brand-gold) !important;
  color: var(--brand-navy) !important;
  border-color: var(--brand-gold) !important;
}
main .mbn-card__cta:hover { background: var(--brand-gold-light) !important; }
main .prog-cat__status {
  color: var(--brand-teal) !important;
  border-color: rgba(18, 82, 92, 0.4) !important;
  background: rgba(18, 82, 92, 0.08) !important;
}


/* ---------------------------------------------------------------- 5 ---
   Footer — moved from the inline <style> each page carried. The off-palette
   golds (#c9b475, #b8a35f) become the brand gold, the green headings
   v9-overrides.css laid over them are gone, and nothing is under 13px.
   Gold on the footer navy measures 6.1:1; the muted #8a99a3 line 5.0:1. */
.mabarrah-footer {
  background: var(--brand-navy);
  color: #e8eef2;
  padding: 48px 24px 24px;
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.mabarrah-footer .mb-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px; max-width: 1280px; margin: 0 auto; width: 100%; }
.mabarrah-footer .mb-footer-col { min-width: 0; }
.mabarrah-footer .mb-footer-col h3 { font-size: 15px; letter-spacing: .02em; margin: 0 0 14px; color: var(--brand-gold); font-weight: 700; }
.mabarrah-footer .mb-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mabarrah-footer .mb-footer-col li { margin: 0; }
.mabarrah-footer .mb-footer-col a { color: #e8eef2; text-decoration: none; font-size: 14px; transition: color .2s; }
.mabarrah-footer .mb-footer-col a:hover,
.mabarrah-footer .mb-footer-col a:focus-visible { color: var(--brand-gold-light); }
.mabarrah-footer .mb-footer-tagline,
.mabarrah-footer .mb-footer-tagline strong { color: var(--brand-gold); font-size: 16px; }
.mabarrah-footer .mb-footer-tagline { margin: 8px 0 12px; }
.mabarrah-footer .mb-footer-about p { font-size: 14px; color: #b8c4cc; margin: 0 0 16px; }
.mabarrah-footer .mb-footer-social { display: flex !important; flex-direction: row !important; gap: 12px; margin-top: 16px !important; }
.mabarrah-footer .mb-footer-social a { display: inline-block; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 20px; font-size: 13px; }
.mabarrah-footer .mb-footer-contact address { font-style: normal; font-size: 14px; color: #b8c4cc; }
.mabarrah-footer .mb-footer-contact address p { margin: 6px 0; }
.mabarrah-footer .mb-footer-contact a { color: #e8eef2; }
.mabarrah-footer .mb-footer-newsletter { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.mabarrah-footer .mb-footer-newsletter p { font-size: 13px; color: #b8c4cc; margin: 6px 0 10px; }
.mabarrah-footer .mb-news-row { display: flex; gap: 8px; }
/* The newsletter's answer, in place (2026-09-13), and its honeypot field,
   which no person sees: off-screen rather than display:none, since some bots
   skip fields that are not rendered. */
.mabarrah-footer .mb-news-status { margin: 8px 0 0; font-size: 13px; line-height: 1.7; }
.mabarrah-footer .mb-news-status.is-ok { color: #8fd6b4; }
.mabarrah-footer .mb-news-status.is-error { color: #f2a8a3; }
.mb-news-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mabarrah-footer .mb-news-row button:disabled { opacity: .7; cursor: progress; }
.mabarrah-footer .mb-news-row input { flex: 1; padding: 9px 12px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #e8eef2; font-size: 13px; font-family: inherit; }
.mabarrah-footer .mb-news-row button { padding: 9px 16px; background: var(--brand-gold); color: var(--brand-navy); border: 0; border-radius: 6px; font-weight: 700; font-family: inherit; cursor: pointer; font-size: 13px; }
.mabarrah-footer .mb-news-row button:hover { background: var(--brand-gold-light); }
.mabarrah-footer .mb-footer-license { max-width: 1280px; margin: 32px auto 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; color: #b8c4cc; text-align: center; }
.mabarrah-footer .mb-footer-license b { color: var(--brand-gold); }
.mabarrah-footer .mb-footer-bottom { max-width: 1280px; margin: 20px auto 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.mabarrah-footer .mb-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }
.mabarrah-footer .mb-footer-legal a { color: #b8c4cc; font-size: 13px; text-decoration: none; }
.mabarrah-footer .mb-footer-legal a:hover { color: var(--brand-gold-light); }
.mabarrah-footer .mb-footer-copy { font-size: 13px; color: #8a99a3; margin: 0; max-width: 900px; }
/* The payment marks, in the footer of every page (2026-09-11). The marks are
   card-shaped files with their own ground, so they sit bare on the navy. */
.mabarrah-footer .mb-footer-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.mabarrah-footer .mb-footer-pay > span { font-size: 13px; color: #b8c4cc; }
.mabarrah-footer .mb-footer-pay .pay-marks { margin: 0; gap: 6px; }
/* The older footer (faq, charity guide, board, gift…) has no bottom bar, so
   the row stands on its own under the columns. */
.mabarrah-footer > .mb-footer-pay {
  max-width: 1280px;
  margin: 20px auto 0;
  padding: 16px 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
/* The footer carries the horizontal lockup too, in white. v9-overrides.css
   sizes every .brand-logo--white to 52px tall and at most 80px wide — a rule
   written for the old square mark — which would crush a 3.9:1 logo, so the
   footer's copy is sized here. */
.mabarrah-footer .brand-logo--white {
  width: 13rem;
  max-width: 100%;
  height: auto;
  position: static;
  opacity: 1;
}
/* THE FOOTER ON A PHONE — from 2,078px to about one screen (محمد فهيم
   2026-09-11). Nothing is removed that is not said twice:
   - «عن الجمعية» keeps the logo, the line and the social links; its paragraph
     restates the hero.
   - The two link lists fold (header-services.js turns each heading into a
     button); without the script they sit in two columns instead of one.
   - «تواصل معنا» becomes two tappable chips, email and WhatsApp, and the
     address. The «خدمة المتبرعين» line repeated the WhatsApp number and
     «الموقع» linked to the site the visitor is on.
   - The newsletter keeps its label, field and button; its description goes.
   - The legal links sit two to a row. */
@media (max-width: 640px) {
  .mabarrah-footer .brand-logo--white { width: 11rem; }
  .mabarrah-footer { padding: 28px 16px 18px; }
  .mabarrah-footer .mb-footer-grid { gap: 0; }
  .mabarrah-footer .mb-footer-about { padding-block-end: 18px; }
  .mabarrah-footer .mb-footer-about p:not(.mb-footer-tagline) { display: none; }
  .mabarrah-footer .mb-footer-tagline { margin: 10px 0 4px; }
  .mabarrah-footer .mb-footer-social { margin-top: 10px !important; }

  .mabarrah-footer .mb-footer-col:not(.mb-footer-about) {
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  }
  .mabarrah-footer .mb-footer-col h3 { margin: 0; padding-block: 16px 12px; }
  .mabarrah-footer .mb-footer-col h3:has(.mb-footer-fold) { padding: 0; }
  .mabarrah-footer .mb-footer-fold {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    min-block-size: 52px;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mabarrah-footer .mb-footer-fold::after {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    margin-inline-end: 6px;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 240ms cubic-bezier(.22, .61, .36, 1);
  }
  .mabarrah-footer .mb-footer-fold[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
  .mabarrah-footer .mb-footer-fold:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 2px; border-radius: 6px; }
  .mabarrah-footer .mb-footer-col.is-folded ul { display: none; }
  .mabarrah-footer .mb-footer-col:not(.mb-footer-about):not(.mb-footer-contact) ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    padding-block-end: 14px;
  }
  .mabarrah-footer .mb-footer-col:not(.mb-footer-about):not(.mb-footer-contact) li a {
    display: block;
    padding-block: 9px;
  }
  /* After the two-column rule and at its specificity plus one class: the
     .is-folded rule above was (0,3,1) against that rule's (0,5,1), so the
     lists stayed open and the footer measured 1,592px with both "folded". */
  .mabarrah-footer .mb-footer-col.is-folded:not(.mb-footer-about):not(.mb-footer-contact) ul { display: none; }

  .mabarrah-footer .mb-footer-contact address { display: flex; flex-wrap: wrap; gap: 8px; }
  .mabarrah-footer .mb-footer-contact address p { margin: 0; }
  .mabarrah-footer .mb-footer-contact address p:nth-child(3),
  .mabarrah-footer .mb-footer-contact address p:nth-child(5) { display: none; }
  .mabarrah-footer .mb-footer-contact address p:nth-child(1),
  .mabarrah-footer .mb-footer-contact address p:nth-child(2) {
    flex: 1 1 9.5rem;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    font-size: 13px;
  }
  .mabarrah-footer .mb-footer-contact address p:nth-child(1) b,
  .mabarrah-footer .mb-footer-contact address p:nth-child(2) b {
    display: block;
    font-weight: 600;
    color: #b8c4cc;
  }
  .mabarrah-footer .mb-footer-contact address p:nth-child(4) { flex-basis: 100%; font-size: 13px; line-height: 1.7; }
  .mabarrah-footer .mb-footer-newsletter { margin-top: 14px; padding-top: 14px; }
  .mabarrah-footer .mb-footer-newsletter p { display: none; }
  .mabarrah-footer .mb-footer-newsletter label { display: block; margin-block-end: 8px; }

  .mabarrah-footer .mb-footer-license { margin-top: 18px; padding-top: 16px; }
  .mabarrah-footer .mb-footer-bottom { margin-top: 14px; padding-top: 14px; gap: 10px; }
  .mabarrah-footer .mb-footer-legal { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; justify-items: center; }
  .mabarrah-footer .mb-footer-legal a { padding-block: 7px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .mabarrah-footer .mb-footer-fold::after { transition: none; }
}
@media (max-width: 640px) {
  .mabarrah-footer .mb-footer-grid { gap: 28px; }
}


/* ---------------------------------------------------------------- 6 ---
   Header, every page.

   will-change: transform on the header (set elsewhere as a scroll hint) made
   it the containing block of its own position:fixed menu panel, so the panel's
   offset was measured from the header's top instead of the viewport's — the
   phone menu opened 38px below the bar with the hero showing through the gap.
   The header's movement is a plain top offset, so the hint bought nothing. */
.site-header { will-change: auto !important; }

/* One weight and one size across the top-level menu. Plain links rendered at
   12.5px/700 and the dropdown parents at 14px/500 side by side. «تبرع الآن»
   keeps its own weight: it is the bar's one call to action. */
/* THE MENU BUTTON (phone and tablet). Rebuilt 2026-09-11.

   What was wrong, measured at 768px: the button was a grid, so its three
   bars were laid out as grid rows and spread over the whole 42px box — at
   5, 20 and 35px — instead of sitting together at its centre; they were
   1.9px thin; and the open state moved each bar 4.8px (0.3rem) to meet in
   the middle when they were 15px apart, so the X never closed and read as
   a broken slash.

   Now the bars are positioned, not laid out: each one is placed from the
   button's centre, so the geometry is exact at any button size and the X
   meets at one point. The middle bar is shorter and gold — the one brand
   note in the control — and it grows to full width on hover, so the
   button answers the pointer before it is pressed. Open, the button turns
   navy and the bars white: the control that closes the panel looks like
   part of it. aria-expanded is the state it reads, the same attribute the
   script sets for assistive technology, so what is seen and what is
   announced cannot disagree. */
.site-header .menu-toggle {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(10, 42, 61, 0.14);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(10, 42, 61, 0.06), 0 4px 12px -6px rgba(10, 42, 61, 0.18);
  color: var(--brand-navy);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 280ms cubic-bezier(.22, .61, .36, 1),
              border-color 280ms cubic-bezier(.22, .61, .36, 1),
              box-shadow 280ms cubic-bezier(.22, .61, .36, 1),
              transform 160ms ease;
}
.site-header .menu-toggle span:not(.sr-only) {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: block;
  width: 1.25rem;
  height: 2px;
  margin: 0;
  border-radius: 2px;
  background: currentColor;
  translate: 50% -50%;            /* RTL: inline-start is the right edge */
  transform-origin: center;
  transition: transform 280ms cubic-bezier(.22, .61, .36, 1),
              width 280ms cubic-bezier(.22, .61, .36, 1),
              opacity 180ms ease,
              background-color 280ms ease;
}
.site-header .menu-toggle span:not(.sr-only):nth-child(1) { transform: translateY(-6px); }
.site-header .menu-toggle span:not(.sr-only):nth-child(3) { transform: translateY(6px); }
/* The middle bar: shorter, gold, and flush with the reading edge (right). */
.site-header .menu-toggle span:not(.sr-only):nth-child(2) {
  width: 0.8rem;
  /* Its right end sits on the other bars' right end: they are 1.25rem wide
     and centred, so that end is half their width in from the centre. */
  inset-inline-start: calc(50% - 0.625rem);
  translate: 0 -50%;
  background: var(--brand-gold);
}
@media (hover: hover) and (pointer: fine) {
  .site-header .menu-toggle:hover {
    background: var(--brand-tint);
    border-color: rgba(10, 42, 61, 0.24);
  }
  .site-header .menu-toggle:hover span:not(.sr-only):nth-child(2) { width: 1.25rem; }
}
.site-header .menu-toggle:active { transform: scale(0.96); }
.site-header .menu-toggle:focus-visible {
  outline: 3px solid var(--brand-gold);
  outline-offset: 2px;
}

/* Open: navy button, white X meeting at the centre. */
.site-header .menu-toggle[aria-expanded="true"] {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(10, 42, 61, 0.45);
}
.site-header .menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(1) { transform: translateY(0) rotate(45deg); }
.site-header .menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(3) { transform: translateY(0) rotate(-45deg); }
.site-header .menu-toggle[aria-expanded="true"] span:not(.sr-only):nth-child(2) {
  width: 0;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .menu-toggle,
  .site-header .menu-toggle span:not(.sr-only) { transition: none; }
}

.site-header .site-menu > a:not([href="donate"]),
.site-header .site-menu .nav-parent,
.site-header .site-menu .submenu a {
  font-size: 0.875rem !important;
  /* !important because aegov-dls.css sets the plain links to 700 with it
     (`.site-header .site-menu a … { font-weight: 700 !important }`) while
     the dropdown parents it never names stayed at 500 — measured side by
     side. This answers it at higher specificity; nothing else here does. */
  font-weight: 600 !important;
}
/* The menu's donate button was the one link left at 12.5px. Size only: its
   weight and colours stay the button's own. */
.site-header .site-menu > a[href="donate"] { font-size: 0.875rem !important; }

/* batch 4: the legal pages. Their head is the site's .page-hero now, so the
   article runs full width and its reading column moves to its children. The
   lead opens the text under the meta row (it made the band 458px on a phone). */
.legal-shell > .lead {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #34424b;
  margin-block: 0 28px;
}
@media (max-width: 640px) {
  /* motion-fixes.css padded the article 18px a side, which also kept the
     band off the screen's edges; the 18px goes to the column instead. */
  .legal-shell { padding-inline: 0 !important; }
  .legal-shell > :not(.legal-hero) { padding-inline: 18px; }
}

/* batch 5: the 13px floor on the three special pages — the live monitor,
   the relief room and the printable receipt. Count badges keep their size. */
.monitor-header .command-trigger :is(span, b),
.keyboard-hints :is(span, kbd), .hud-status-row span, .console-metrics span,
.track-rail kbd, .stage-loader b, .zoom-overlay span, .destination-case-note,
.cinematic-trigger, .case-card__tag, .case-card__row span,
.quick-response-card__top :is(span, b),
.receipt-meta .label, .receipt-amount .label, .receipt-fineprint, .receipt-fineprint * {
  font-size: 0.8125rem !important;
  letter-spacing: 0 !important;
}

/* Payment marks (2026-09-11). The four marks supplied by the association
   are card-shaped already (their own ground, corner and edge), so they
   stand bare at one size; only the bank glyph, which is ours, takes the
   white tile. assets/payments/<name>.webp — replace in place to update. */
.pay-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pay-mark {
  display: grid;
  place-items: center;
  inline-size: 3.75rem;
  block-size: 2.5rem;
  padding: 0.35rem 0.5rem;
  background: #fff;
  border: 1px solid rgba(10, 42, 61, 0.14);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(10, 42, 61, 0.06);
  box-sizing: border-box;
}
.pay-mark:has(> img) {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.pay-mark img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.pay-mark--icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: var(--brand-teal);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pay-marks--sm { margin-block-start: 12px; gap: 6px; }
.pay-marks--sm .pay-mark { inline-size: 3rem; block-size: 2rem; padding: 0.3rem 0.4rem; }

/* The three channels on the donate page: one row each, the tick, the name
   and one line, and the marks at the row's end. */
.pay-channels {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pay-channel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid rgba(10, 42, 61, 0.1);
  border-radius: 14px;
}
.pay-channel__check {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--brand-gold);
}
.pay-channel__check svg {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
main .pay-channel__body h3 {
  margin: 0 0 2px;
  font-size: 1.0625rem !important;
  color: var(--brand-navy);
}
.pay-channel__body p { margin: 0; color: var(--brand-grey); font-size: 0.9375rem; line-height: 1.7; }
.pay-channel__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--brand-teal);
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
}
.pay-channel__link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .pay-channel { grid-template-columns: auto 1fr; gap: 12px 14px; padding: 16px; }
  .pay-channel > .pay-marks,
  .pay-channel > .pay-channel__link { grid-column: 2; }
}

/* Under «متابعة إلى الدفع الآمن»: where the donor will pay, as marks. */
.dv2-paysafe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-block-start: 12px;
  color: var(--brand-grey);
  font-size: 0.8125rem;
}
.dv2-paysafe .pay-marks--sm { margin: 0; }
/* The same row in the home hero's quick-donation card (2026-09-11): the
   «طرق التبرع» section that carried the marks is hidden on the live site,
   so the card itself shows where the donor will pay. */
.hero-paysafe { margin-block-start: 14px; }
/* English withheld until the content is complete (2026-09-11): the language
   switch and the separator before it leave the services bar. EN_ENABLED in
   i18n.js and script.js keeps every page in Arabic. */
.language-switch,
.hotline-strip .ubar__sep:has(+ .language-switch) { display: none !important; }

/* «استكشف أوجه العطاء» jumps here; the sticky header must not cover the heading. */
#giving-doors { scroll-margin-block-start: 96px; }

/* The hero's quick amounts (2026-09-11): 20 · 50 · 100 · 200 in one even
   row, «مبلغ مخصص» on its own row under them, and the field it opens. */
#home .hero-amounts [data-hero-amount="custom"] { grid-column: 1 / -1; }
.hero-custom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-block-start: 0.5rem;
  padding-inline: 12px;
  background: #fff;
  border: 1px solid rgba(10, 42, 61, 0.18);
  border-radius: 8px;
}
.hero-custom[hidden] { display: none !important; }
.hero-custom:focus-within {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(18, 82, 92, 0.18);
}
.hero-custom input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--brand-navy);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hero-custom input:focus-visible { outline: none !important; }
.hero-custom__suffix { color: var(--brand-grey); font-size: 0.8125rem; }