/* =========================================================================
   ERC / Nahr Al Hayat — design tokens, fonts, RTL base
   Source of truth: Figma "Du - Red Crescent" (get_variable_defs)
   Loaded globally via globalCSS client extension.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Noto+Sans+Arabic:wght@400;500;700&display=swap');
@import url('erc-theme-ataya.css');

:root {
  /* Brand / red (Red Crescent) */
  --erc-red-500: #e20612;   /* primary CTA, links            */
  --erc-red-400: #f35757;   /* gradient highlight            */
  --erc-brand-header: #bf0d0d; /* identity bar / header brand */
  --erc-indigo: #3c3f90;    /* Nahr Al Hayat logo indigo     */
  --erc-green-500: #16a34a; /* Ataya "Donate now" CTA        */
  --erc-green-600: #15803d; /* Ataya CTA hover                */
  --erc-green-hero: #3f9678; /* Ataya About Us hero background */

  /* Text */
  --erc-text-heading: #020617;
  --erc-text-body: #334155;     /* descriptions               */
  --erc-text-caption: #475569;
  --erc-text-on-color: #ffffff;
  --erc-text-link: #e20612;

  /* Surfaces / strokes */
  --erc-surface-base: #ffffff;
  --erc-surface-low: #f1f5f9;   /* tinted sections, menu bar  */
  --erc-stroke: #cbd5e1;

  /* Shape */
  --erc-radius-pill: 24px;      /* buttons / cards / tags     */
  --erc-radius-card: 20px;
  --erc-radius-round: 100px;

  /* Type families (Latin default; Arabic falls back gracefully) */
  --erc-font-heading: 'Inter', 'Noto Sans Arabic', system-ui, sans-serif;
  --erc-font-body: 'Roboto', 'Noto Sans Arabic', system-ui, sans-serif;

  /* Brand gradient used on filled CTAs (Donate now) */
  --erc-cta-gradient: radial-gradient(circle at 50% 120%, var(--erc-red-400) 0%, #eb2f35 25%, #e61a23 38%, var(--erc-red-500) 50%);

  /* Layout */
  --erc-content-max: 1440px;
  --erc-gutter: 80px;
}

/* ============================================================================
   Nahr Al Hayat brand recolour — RED -> INDIGO/BLUE (Figma "Du - Red Crescent",
   home node 4977-302972). SCOPED to nahr pages via body:has(.erc-header) so the
   shared erc-theme keeps serving the original palette to other microsites. NOTE:
   ataya ALSO carries .erc-header (its root is class="erc-header ataya-header"), so we
   must EXCLUDE it via :not(:has(.ataya-header)) — otherwise ataya's shared-token
   elements (member-form Submit, links, focus) would recolour too. Ataya's own identity
   bar uses --erc-indigo (untouched) regardless. Every nahr fragment consumes these brand
   tokens, so this single block recolours CTAs (+hover), links, pagination, focus
   rings, the Make-a-Gift progress bar and the identity bar at once. globalCSS =>
   deploys LIVE, no site re-init. --brand-color-1 is overridden here too (beats the
   Style Book by specificity: body:has() = 0,1,1 > :root = 0,1,0) so token-fallback
   consumers such as report-item recolour live as well. New brand:
     Indigo  #3c3f90  (primary CTA / links / accents)
     Blue    #4cb9db  (secondary accent / identity bar)  */
/* Per-microsite brand palette. CONVENTION: each microsite header root carries
   `erc-header <site>-header` (ataya=.ataya-header, nahr=.nahr-header). Add ONE block
   per site, keyed on its own class — no shared default, so a NEW microsite never
   inherits another's colours; it simply gets its own block (+ its own identity-bar
   rule in its header fragment). Nahr Al Hayat = indigo/blue:
   (2nd selector is transitional — keeps nahr recoloured until its header re-init picks
   up the .nahr-header class; drop it once every site has its modifier class.) */
body:has(.nahr-header),
body:has(.erc-header):not(:has(.ataya-header)):not(:has(.nahr-header)):not(:has(.fatima-header)) {
  --erc-red-500: #3c3f90;      /* primary CTA / links / focus  -> Nahr indigo  */
  --erc-red-400: #585ba7;      /* gradient highlight           -> light indigo */
  --erc-brand-header: #4cb9db; /* top identity bar             -> Nahr blue    */
  --erc-text-link: #3c3f90;    /* links, pagination hover      -> Nahr indigo  */
  --erc-blue: #4cb9db;         /* secondary brand accent                       */
  --brand-color-1: #3c3f90;    /* Classic "Brand Color 1" (report-item hover…) */
  --erc-cta-gradient: radial-gradient(circle at 50% 120%, #585ba7 0%, #4d51a5 25%, #43469a 38%, #3c3f90 50%);
  /* Figma keeps the primary-button hover/active/focus red even on Nahr's indigo
     theme (idle state stays indigo) — see erc-btn--primary interactive rules. */
  --erc-btn-primary-hover-bg: #e20612;
}

/* Fatima (Sheikha Fatima Fund for Women Refugee) brand palette — cream/gold,
   per Figma "Du - Red Crescent" node 5286:210186 (header) & 5548:12438 (hero).
   Scoped to fatima pages via body:has(.fatima-header), same convention as
   ataya/nahr above, so other microsites keep their own tokens untouched. */
body:has(.fatima-header) {
  --erc-red-500: #d7b642;      /* primary CTA / links / focus -> Fatima gold  */
  --erc-red-400: #e6ce78;      /* gradient highlight          -> light gold   */
  --erc-brand-header: #f7f3e4; /* top identity bar            -> Fatima cream */
  --erc-text-link: #d7b642;
  --erc-cta-gradient: radial-gradient(circle at 50% 120%, #e6ce78 0%, #ddc35a 25%, #dabb4c 38%, #d7b642 50%);
  /* Classic theme's #wrapper (main.css) reads background-color from
     var(--body-bg, #fff) -- overriding the variable itself (rather than
     fighting #wrapper's rule with our own selector/!important) means Classic's
     own CSS renders the fallback colour with no specificity war. --body-bg only
     feeds background-color though (Classic has no background-image variable),
     so the gradient itself still needs one explicit background-image rule below. */
  --body-bg: #0b2b76;
}
body:has(.fatima-header) #wrapper {
  background-image: radial-gradient(101.75% 61.7% at 50% 50%, #0b2b76 0%, #000f33 100%);
}

/* Arabic / RTL: prefer the Arabic family, mirror automatically via dir=rtl */
[lang="ar"],
[dir="rtl"] {
  --erc-font-heading: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
  --erc-font-body: 'Noto Sans Arabic', 'Roboto', system-ui, sans-serif;
}

/* Ataya brand typeface (Brando Arabic) — scoped to ataya pages only via
   body:has(.ataya-header), same convention as the Nahr brand recolour above.
   Declared AFTER [lang="ar"]/[dir="rtl"] so it wins on Arabic ataya pages too
   (equal specificity, later source order); other microsites are untouched
   and keep Inter/Roboto/Noto Sans Arabic. Font files + @font-face live in
   erc-theme-ataya.css. */
body:has(.ataya-header) {
  --erc-font-heading: 'Brando Arabic', 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
  --erc-font-body: 'Brando Arabic', 'Noto Sans Arabic', 'Roboto', system-ui, sans-serif;
}

/* Shared building blocks consumed by ERC fragments ----------------------- */

h1, h2 {
  text-wrap: balance;
}

.erc-container {
  width: 100%;
  max-width: var(--erc-content-max);
  margin-inline: auto;
  padding-inline: var(--erc-gutter);
}

/* Responsive side gutter. The desktop gutter (80px) is far too wide on phones —
   e.g. on a 390px screen it leaves only ~230px of content, which is why the
   /apply form (max-width:100%) was squeezed to ~230px regardless of its own
   media queries: the PARENT .erc-container constrained it. Shrinking the token
   here fixes every .erc-container-based page at once (apply form, about,
   partners, section intros...). Only reduces padding, so it can never introduce
   horizontal scrolling. Desktop (>=901px) keeps the original 80px. */
@media (max-width: 1024px) { :root { --erc-gutter: 24px; } }
@media (max-width: 600px) { :root { --erc-gutter: 20px; } }

/* ---- Medium nav (768–1364px): shrink the pill bar to fit one row, no hamburger ----
   The full 8-item pill bar + logos + tools only fits one row from ~1366px up at
   full size (measured: wraps at 1280, clean single row at 1440). Rather than
   pushing the hamburger down across the whole tablet range (which hid the nav
   behind a tap target on iPad-sized screens), shrink logo size, pill padding and
   font size in this band so the same one-row layout keeps fitting down to 768px.
   The hamburger only appears below that, at true phone widths (<=767px). */
@media (max-width: 1364px) and (min-width: 768px) {
  .erc-header__primary { padding-block: 10px; gap: 12px; }
  .erc-header__logos { gap: 10px; }
  .erc-header__logo { height: clamp(48px, 5vw, 72px) !important; }
  .erc-header__emblem { height: clamp(52px, 5.6vw, 80px) !important; }

  /* Let the nav pills claim the row's free space instead of sitting at their
     natural width — keeps the utility icons pinned on the same row instead of
     being pushed onto a second line as the pill bar's own width tightens. */
  .erc-header__nav-widget { flex: 1; }
  .erc-header__nav-widget .nav-link {
    padding-inline: 12px;
    font-size: 14px;
  }
  .erc-header__nav-widget .navbar-nav { gap: 2px; }
  .erc-header__tools { gap: 8px; }
}

/* ---- Mobile navigation (collapse the nav behind the hamburger, <=767px) ----
   Declared globally here (not the fragment) so it deploys WITHOUT a site re-init.
   !important on the show/hide toggles guarantees these beat the fragment's own
   rules regardless of stylesheet load order. */
@media (max-width: 767px) {
  .erc-header__primary { padding-block: 10px; justify-content: flex-start; gap: 12px; }
  /* Keep ALL brand logos visible at every width (scaled down) — override the
     fragment's <=900 display:none so the full lock-up (Nahr + Red Crescent +
     accreditation + UAE emblem) stays in the bar; the hamburger is pushed to
     the far right. */
  .erc-header__logos { gap: 10px; }
  .erc-header__logos > .erc-header__logo { display: block !important; }
  /* Fluid logo height: 34px on phones, grows with the viewport, capped near the
     80px desktop size. clamp() keeps marks legible without ever wrapping the row. */
  .erc-header__logo { height: clamp(34px, 5.2vw, 72px) !important; }
  .erc-header__emblem { display: block !important; height: clamp(38px, 5.8vw, 80px) !important; }

  .erc-header__burger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    flex: none;
    margin-inline-start: auto;
    border: 0;
    background: transparent;
    border-radius: 12px;
    color: var(--erc-text-heading);
    cursor: pointer;
  }
  .erc-header__burger:hover { background: rgba(2, 6, 23, .04); }
  .erc-header__burger-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .erc-header.is-nav-open .erc-header__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .erc-header.is-nav-open .erc-header__burger-bar:nth-child(2) { opacity: 0; }
  .erc-header.is-nav-open .erc-header__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .erc-header__menu { display: none !important; }
  .erc-header.is-nav-open .erc-header__menu { display: block !important; }

  .erc-header__nav {
    flex-direction: column !important;
    align-items: stretch;
    gap: 8px;
    padding-block: 8px 16px;
  }
  .erc-header__nav-widget { padding-block: 0; }
  .erc-header__nav-widget .navbar-nav {
    flex-direction: column !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 2px;
  }
  .erc-header__nav-widget .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .erc-header__nav-widget .nav-link { width: 100%; min-height: 48px; }
  .erc-header__nav-widget .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none;
    min-width: 0;
    margin: 0;
    padding: 2px 0 2px 16px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .erc-header__nav-widget .dropdown-menu .nav-link,
  .erc-header__nav-widget .dropdown-menu a { min-height: 44px; }
  .erc-header__tools { justify-content: flex-start; gap: 12px; padding-inline: 4px; }
  /* .erc-header__nav stretches its column children (align-items: stretch above)
     so the language pill fills the row; pin it to its natural width instead. */
  .erc-lang { align-self: flex-start; }
}

/* Mobile tap targets: guarantee >=44x44px touch area on footer links (email,
   phone, legal, social). Global so it applies wherever the footer renders.
   Nav pills get their 48px height from the header fragment's mobile styles;
   carousel arrows are already 48px. */
@media (max-width: 600px) {
  .erc-footer__contact-link,
  .erc-footer__phone-num,
  .erc-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .erc-footer__social-btn { min-width: 44px; min-height: 44px; }
}

/* Pill button system (matches Figma button component) */
.erc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 24px;
  border-radius: var(--erc-radius-round);
  font-family: var(--erc-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, background-color .15s ease;
}
.erc-btn:hover,
.erc-btn:focus,
.erc-btn:active { text-decoration: none; }
.erc-btn--primary {
  background-image: var(--erc-cta-gradient);
  background-color: var(--erc-red-500);
  color: var(--erc-text-on-color);
}
.erc-btn--primary:hover {
  background-image: none;
  background-color: var(--erc-btn-primary-hover-bg, var(--erc-red-500));
  color: var(--erc-text-on-color);
  filter: brightness(1.05);
  box-shadow: 0px 6px 8px rgba(0, 0, 0, .08), 0px 3px 3px rgba(0, 0, 0, .12), 0px 9px 14px rgba(0, 0, 0, .05);
}
.erc-btn--primary:active {
  background-image: none;
  background-color: var(--erc-btn-primary-hover-bg, var(--erc-red-500));
  color: var(--erc-text-on-color);
  filter: brightness(.92);
  box-shadow: none;
}
.erc-btn--primary:focus-visible {
  background-image: none;
  background-color: var(--erc-btn-primary-hover-bg, var(--erc-red-500));
  color: var(--erc-text-on-color);
  border-color: var(--erc-stroke-focused, #f8a0a0);
  box-shadow: 0 0 0 2px rgba(226, 6, 18, .2);
  outline: none;
}
.erc-btn--primary:disabled,
.erc-btn--primary.disabled {
  background-image: none;
  background-color: var(--erc-surface-disabled, #cbd5e1);
  color: var(--erc-text-disabled, #94a3b8);
  opacity: 1;
  cursor: default;
}
.erc-btn--ghost {
  background: var(--erc-surface-base);
  border-color: var(--erc-stroke);
  color: var(--erc-text-body);
}
.erc-btn--ghost:hover { background: var(--erc-surface-low-hover, #e2e8f0); }
.erc-btn--ghost:focus-visible {
  background: var(--erc-surface-low-hover, #e2e8f0);
  border-color: var(--erc-stroke-focused, #f8a0a0);
  box-shadow: 0 0 0 2px rgba(226, 6, 18, .2);
  outline: none;
}
.erc-btn--ghost:disabled,
.erc-btn--ghost.disabled {
  background: var(--erc-surface-disabled, #cbd5e1);
  border-color: transparent;
  color: var(--erc-text-disabled, #94a3b8);
  opacity: 1;
  cursor: default;
}

.erc-btn svg { width: 20px; height: 20px; flex: none; }

/* RTL: flip directional icons (arrows) */
[dir="rtl"] .erc-icon--flip { transform: scaleX(-1); }

/* The microsite provides its own header/footer via the master page, so hide the
   Classic theme's default banner/footer — but ONLY on pages that render our own
   header (i.e. the microsite, via the master page). Scoping with :has(.erc-header)
   keeps the default Liferay site's header/footer intact (login, navigation, etc.).
   erc-theme is company-scoped, so this selector is what limits it per-site. */
body:has(.erc-header) #banner,
body:has(.erc-header) #footer { display: none !important; }

/* Sticky footer: on short microsite pages, keep our footer pinned to the bottom
   of the viewport. The Classic theme's #wrapper is a 100vh flex column and #content
   (.flex-fill) fills it; we make #content's content grow so the master-page footer
   (rendered after the DropZone) is pushed down. */
body:has(.erc-header) #content { display: flex; flex-direction: column; }
body:has(.erc-header) #content > div { flex: 1 0 auto; display: flex; flex-direction: column; }
body:has(.erc-header) #main-content { flex: 1 0 auto; }

/* About Us web content (rendered via Journal Content widget + DDM template).
   Liferay strips the template's inline <style>, so the styling lives here in the
   global theme CSS. Targets the .erc-about-content wrapper (works for both the
   minimal and the styled FTL markup). */
.erc-about-content {
  max-width: var(--erc-content-max);
  margin-inline: auto;
  padding: 56px var(--erc-gutter);
  font-family: var(--erc-font-body);
  color: var(--erc-text-body);
}
.erc-about-content h1,
.erc-about-content__title {
  font-family: var(--erc-font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--erc-text-heading);
  margin: 0 0 20px;
  line-height: 1.2;
}
.erc-about-content h2 {
  font-family: var(--erc-font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--erc-red-500);
  margin: 28px 0 10px;
}
.erc-about-content p { margin: 0 0 14px; line-height: 1.75; }
[dir="rtl"] .erc-about-content { text-align: right; }

/* ============================================================
   News page - Collection Display: row spacing + restyled pager.
   Kept in the theme so CSS-only changes deploy via erc-theme
   WITHOUT re-running the Site Initializer.
   ============================================================ */

.erc-news-collection .erc-news-card { margin-bottom: 32px; }

/* --- Restyle Liferay's built-in Collection Display pager (Clay). ---
   Clay renders: prev/next arrows + numbers + a "..." ellipsis (a
   .dropdown.page-item) for skipped pages. Clay itself never renders
   First/Last -- those <li class="erc-pagination-first/-last"> items are
   injected by the pagination block in each site's header fragment main.js
   (liferay-fragments/src/<site>/header/main.js), which reuses Clay's own
   first/last page-number links rather than building URLs. This lives in
   the header fragment, NOT a company-scope globalJS client extension,
   because globalJS injection does not work on this Liferay instance --
   confirmed by deploying a verbatim copy of Liferay's own sample globalJS
   extension and observing it never gets injected into any page either,
   despite being registered/APPROVED in Client Extensions admin and the
   LPD-30371 feature flag being enabled. The header fragment is proven to
   render on every page (it's embedded in the master page), so the script
   lives there instead. Only hide the "Showing X to Y" text -- do NOT hide
   .dropdown (that IS the ellipsis). */
.lfr-layout-structure-item-collection .pagination-results { display: none !important; }

.lfr-layout-structure-item-collection .pagination-bar { justify-content: center !important; border: 0 !important; padding: 16px 0 56px !important; }
.lfr-layout-structure-item-collection .pagination { display: flex !important; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin: 0; }

/* Figma node 4964:284166 ("Pagination"): 12px gap between all items; number
   items get 16px/8px padding, Prev/Next add a 12px icon-text gap on top of
   that same padding; text is Regular 16px in --erc-text-heading; the active
   page is a --erc-surface-low pill pinned to 40px (Figma's 41px width is
   this same 40px box plus its 1px border, which this pager doesn't use). */
.lfr-layout-structure-item-collection .pagination .page-item .page-link {
  display: inline-flex !important; align-items: center !important; justify-content: center; gap: 12px;
  min-width: 40px; height: 40px; padding: 8px 16px; white-space: nowrap;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  border-radius: var(--erc-radius-round, 100px);
  color: var(--erc-text-heading, #020617); font-size: 16px; font-weight: 400; line-height: 1.5;
  /* Liferay's Classic theme (clay.css) ships the base .page-link with
     letter-spacing:0.033em, then zeroes it back out to 0px on :hover, .hover,
     :active, .active, .page-item.active, and [aria-expanded="true"]/.show —
     so page numbers visibly shift width on hover/active unless every one of
     those states is pinned to this same 0.033em explicitly (declaring
     "normal" here does NOT match 0.033em, so that only fixes hover in one
     direction and still drifts elsewhere). */
  letter-spacing: 0.033em;
}
.lfr-layout-structure-item-collection .pagination .page-item .page-link:hover,
.lfr-layout-structure-item-collection .pagination .page-item .page-link.hover,
.lfr-layout-structure-item-collection .pagination .page-item .page-link:active,
.lfr-layout-structure-item-collection .pagination .page-item .page-link[aria-expanded="true"],
.lfr-layout-structure-item-collection .pagination .page-item .page-link.show,
.lfr-layout-structure-item-collection .pagination .page-item.active .page-link {
  letter-spacing: 0.033em;
}
.lfr-layout-structure-item-collection .pagination .page-item .page-link:hover,
.lfr-layout-structure-item-collection .pagination .page-item .page-link.hover {
  color: var(--erc-text-link, #dc2626); background: transparent !important;
}
.lfr-layout-structure-item-collection .pagination .page-item.active .page-link {
  background: var(--erc-surface-low, #f1f5f9) !important; color: var(--erc-text-heading, #020617); font-weight: 400;
  padding-inline: 8px;
}
/* Clay.css draws a ::before on EVERY .page-link, not just the active one
   (confirmed live: an inactive number, the ellipsis-adjacent item, and our
   own injected First/Last all carry it) -- a 0-height bar sized to the
   link's width that only becomes visible as an underline on :hover/.active
   via Clay's own hover/active styling. None of that is part of the Figma
   pill design, which has no underline in any state, so hide it everywhere
   in this pager, not just .active. */
.lfr-layout-structure-item-collection .pagination .page-item .page-link::before {
  display: none !important;
}
.lfr-layout-structure-item-collection .pagination .page-item.disabled .page-link { opacity: .4; }

/* Prev/Next/First/Last: let text + arrow sit on one line. */
.lfr-layout-structure-item-collection .pagination .page-item:has(.lexicon-icon) .page-link { min-width: auto; }
.lfr-layout-structure-item-collection .pagination .page-item:has(.lexicon-icon-angle-right) .page-link,
.lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-last .page-link { flex-direction: row-reverse !important; }
.lfr-layout-structure-item-collection .pagination .page-item .page-link svg { flex: none; display: inline-block; vertical-align: middle; }
.lfr-layout-structure-item-collection .pagination .page-item:has(.lexicon-icon-angle-left) .page-link::after { content: "Previous"; }
.lfr-layout-structure-item-collection .pagination .page-item:has(.lexicon-icon-angle-right) .page-link::after { content: "Next"; }

/* First/Last: injected by erc-theme-pagination.js, styled the same as
   Prev/Next. Their <span> label + inline svg are markup we control
   directly, so no content::after trick is needed (unlike Prev/Next,
   which restyle Clay's own lexicon-icon markup). */
.lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-first .page-link,
.lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-last .page-link {
  gap: 12px;
}
.lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-first .page-link svg,
.lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-last .page-link svg {
  flex: none; display: inline-block; vertical-align: middle; fill: currentColor;
}
/* The Arabic label replaces the SAME ::after pseudo-element used above (not
   a separate ::before) — an earlier version put the Arabic "Next" label in
   ::before while the English ::after rule above still matched too, so both
   "Next" and "التالي" rendered together. */
:lang(ar) .lfr-layout-structure-item-collection .pagination .page-item:has(.lexicon-icon-angle-left) .page-link::after { content: "\0627\0644\0633\0627\0628\0642"; }
:lang(ar) .lfr-layout-structure-item-collection .pagination .page-item:has(.lexicon-icon-angle-right) .page-link::after { content: "\0627\0644\062A\0627\0644\064A"; }

/* Prev/Next/First/Last arrows point along reading direction, not the
   screen's left/right -- mirror them in RTL so "Next"/"Last" still point
   toward where the reader expects the next page (screen-left in Arabic). */
[dir="rtl"] .lfr-layout-structure-item-collection .pagination .page-item .lexicon-icon-angle-left,
[dir="rtl"] .lfr-layout-structure-item-collection .pagination .page-item .lexicon-icon-angle-right,
[dir="rtl"] .lfr-layout-structure-item-collection .pagination .page-item .lexicon-icon-angle-double-left,
[dir="rtl"] .lfr-layout-structure-item-collection .pagination .page-item .lexicon-icon-angle-double-right {
  transform: scaleX(-1);
}

/* First/Last labels: real text nodes (see erc-theme-pagination.js), not
   Clay markup, so translate via :lang() text-swap same as Prev/Next
   rather than content::after (there's no lexicon-icon ::after to hook). */
:lang(ar) .lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-first .page-link span { display: none; }
:lang(ar) .lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-first .page-link::after { content: "\0627\0644\0623\0648\0644"; }
:lang(ar) .lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-last .page-link span { display: none; }
:lang(ar) .lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-last .page-link::after { content: "\0627\0644\0623\062E\064A\0631"; }

/* Figma node 8007:4800 ("Pagination", type=Mobile): below 600px, collapse
   to icon-only Prev/Next + only the page numbers adjacent to the active
   one (current-1, current, current+1) -- no "Previous"/"Next" text, no
   "..." ellipsis. Clay still renders its full desktop set of page-item
   <li>s in the DOM at this width (it doesn't recompute which numbers
   exist per-breakpoint), so this can only hide/show from what Clay gave
   us; it can't invent a number Clay never rendered. That means near the
   start/end of a long range (e.g. viewing page 1 of 17) the window won't
   be a perfectly centred triplet -- Clay's own DOM already isn't
   symmetric there. Accepted as a minor edge-case gap vs. building a
   custom pager (see PR discussion). */
@media (max-width: 600px) {
  .lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-first,
  .lfr-layout-structure-item-collection .pagination .page-item.erc-pagination-last {
    display: none !important;
  }
  .lfr-layout-structure-item-collection .pagination .page-item:has(.lexicon-icon) .page-link::after {
    display: none;
  }
  .lfr-layout-structure-item-collection .pagination .page-item:has(.lexicon-icon) .page-link {
    gap: 0;
  }
  .lfr-layout-structure-item-collection .pagination .page-item.dropdown {
    display: none !important;
  }
  .lfr-layout-structure-item-collection .pagination .page-item:not(:has(.lexicon-icon)) {
    display: none !important;
  }
  .lfr-layout-structure-item-collection .pagination .page-item.active:not(:has(.lexicon-icon)),
  .lfr-layout-structure-item-collection .pagination .page-item.active:not(:has(.lexicon-icon)) + .page-item:not(:has(.lexicon-icon)),
  .lfr-layout-structure-item-collection .pagination .page-item:not(:has(.lexicon-icon)):has(+ .page-item.active) {
    display: inline-flex !important;
  }
}

/* ============================================================
   Partners web content (rendered via Journal Content widget +
   PARTNER-CARD DDM template). Liferay strips the template's inline
   <style>, so the styling lives here in the global theme CSS.
   The template loops a repeatable "partner" fieldset, so this must
   handle any number of partner logos (wraps to new rows).
   ============================================================ */
.erc-partners {
  background: var(--erc-surface-base);
  padding-block: 40px 80px;
  font-family: var(--erc-font-body);
}
.erc-partners .erc-container { max-width: var(--erc-content-max); margin-inline: auto; padding-inline: var(--erc-gutter); }
.erc-partners__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 48px 0 49px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.erc-partners__col { min-width: 0; flex: 1 1 0; }
.erc-partners__col--heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-inline: 48px;
}
.erc-partners__col--logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 24px 48px;
  padding-inline: 40px;
}
.erc-partners__title {
  margin: 0;
  font-family: var(--erc-font-heading);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--erc-text-heading);
  text-align: center;
}
.erc-partners__partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-decoration: none;
  color: inherit;
}
.erc-partners__logo-box {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.erc-partners__logo-box img { height: 100px; width: auto; max-width: 140px; display: block; object-fit: contain; }
.erc-partners__name {
  font-family: var(--erc-font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--erc-text-heading);
  text-align: center;
}

/* The logos column is a drop zone holding a Collection Display over the PARTNERS
   collection. Liferay renders it as
     .erc-partners__col--logos > div                      (unnamed drop-zone wrapper)
       > .lfr-layout-structure-item-collection
         > .container-fluid > .row > .col-*               (one per card)
   EVERY level in that chain must be transparent - miss one (the unnamed div is
   easy to forget) and it stays the single flex item, the cards collapse into
   normal block flow (a vertical stack) and the `order` the partners fragment JS
   derives from the Priority field lands on the wrapper instead of the cards. */
.erc-partners__col--logos > div,
.erc-partners__col--logos .lfr-layout-structure-item-collection,
.erc-partners__col--logos .container-fluid,
.erc-partners__col--logos .row { display: contents; }
.erc-partners__col--logos .col,
.erc-partners__col--logos [class*="col-"] {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding-inline: 0;
}
/* Collection Display still draws its single-page pager under the logos. */
.erc-partners__col--logos .pagination-bar,
.erc-partners__col--logos .taglib-page-iterator { display: none !important; }

@media (max-width: 768px) {
  .erc-partners__card { flex-direction: column; gap: 24px; padding: 32px 24px; }
  .erc-partners__col--heading,
  .erc-partners__col--logos { padding-inline: 0; }
  .erc-partners__col--logos { gap: 24px 32px; }
}

/* Gallery lightbox — declared GLOBALLY (not just in the gallery fragment CSS) so the
   overlay element (appended to <body> by the fragment JS) stays hidden after Liferay's
   SennaJS SPA navigation swaps to a page where the fragment CSS is no longer loaded. */
.erc-gallery-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.erc-gallery-lightbox.is-open { display: flex; }
.erc-gallery-lightbox__backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .85); }
.erc-gallery-lightbox__inner { position: relative; z-index: 1; width: fit-content; max-width: 92vw; }
.erc-gallery-lightbox__body { position: relative; min-height: 140px; }
.erc-gallery-lightbox__img {
  display: block; max-width: 92vw; max-height: 88vh; margin: 0;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.erc-gallery-lightbox__frame { position: relative; width: min(1100px, 92vw); aspect-ratio: 16 / 9; }
.erc-gallery-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.erc-gallery-lightbox__hint {
  position: absolute; bottom: -34px; left: 0; right: 0; text-align: center;
  color: rgba(255, 255, 255, .75); font-family: var(--erc-font-body, sans-serif); font-size: 13px;
}
.erc-gallery-lightbox__spinner {
  position: absolute; top: 50%; left: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px; z-index: 2;
  border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  border-radius: 50%; animation: erc-gallery-spin .8s linear infinite;
}
@keyframes erc-gallery-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   Composable /home section set — global rules (see [[home-composable-fragment-set]])
   ============================================================================ */

/* card-grid: the <lfr-drop-zone> renders an extra wrapper <div> inside
   .erc-cardgrid__track, so the CSS grid must sit on THAT wrapper (its children
   are the dropped story-cards). Declared globally so it survives SennaJS SPA nav
   and applies without re-running the Site Initializer. */
.erc-cardgrid__track {
  display: grid;
  gap: 24px;
  align-items: stretch;
}
.erc-cardgrid--cols-2 .erc-cardgrid__track { grid-template-columns: repeat(2, 1fr); }
.erc-cardgrid--cols-3 .erc-cardgrid__track { grid-template-columns: repeat(3, 1fr); }
.erc-cardgrid--cols-4 .erc-cardgrid__track { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .erc-cardgrid__track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .erc-cardgrid__track { grid-template-columns: 1fr; } }
/* The <lfr-drop-zone> renders one (view) or two (page-editor) single wrapper
   <div>s around the actual items. Dissolve those single wrappers so the cards
   (view) / toppers (editor) become the grid items in BOTH modes → same row layout
   on the editing canvas and the published page. */
.erc-cardgrid__track > div:only-child,
.erc-cardgrid__track > div:only-child > div:only-child { display: contents; }
.erc-cardgrid__track [class*="lfr-layout-structure-item"] { min-width: 0; height: 100%; }

/* Content width control (fragment config "Content width" -> class on the section).
   Overrides the inner .erc-container max-width. All values are MAX-widths, so they
   shrink to 100% on small screens automatically = mobile-safe (no fixed px). */
.erc-w-narrow  .erc-container { max-width: 960px; }
.erc-w-default .erc-container { max-width: var(--erc-content-max); }
.erc-w-wide    .erc-container { max-width: 1760px; }
.erc-w-full    .erc-container { max-width: none; }

/* "Meet the children" card row = a NATIVE Liferay Row (WYSIWYG in the page editor)
   whose columns each hold one story-card. We override Bootstrap's 12-grid with CSS
   grid so columns are ALWAYS equal width (Liferay's 12-grid can't split evenly by
   5/7 → middle column wider), the row width matches .erc-container (so it lines up
   with the other sections), and it stays horizontal in the editor. Add/remove a
   card = add/remove a column; cards auto-arrange 4 → 2 (tablet) → 1 (mobile). */
/* NOTE: cssClasses "erc-cards" lands on the OUTER layout-structure-item wrapper,
   whose single child is the Bootstrap `.row`. So constrain width on the wrapper and
   put the CSS grid on the inner .row (its children are the columns). */
.erc-cards {
  width: 100%;
  max-width: var(--erc-content-max);
  margin-inline: auto;
  padding-inline: var(--erc-gutter);
}
.erc-cards > .row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 !important;
}
.erc-cards > .row > [class*="col-"] {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 1024px) { .erc-cards > .row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .erc-cards > .row { grid-template-columns: 1fr; } }

/* 3-up card rows (Make a Gift, Our News) reuse .erc-cards but need 3 columns, not 4. */
.erc-cards--3 > .row { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .erc-cards--3 > .row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .erc-cards--3 > .row { grid-template-columns: 1fr; } }

/* Top gap for content sections that don't start with a section-intro (which already
   carries 40px top). Used between Make a Gift and the Support media+text block. */
.erc-section-gap { padding-top: 56px; }

/* ---- Page content spacing (global, fixes every page at once) ----
   The master header/footer render OUTSIDE #main-content, which wraps the page's
   content sections. One rule gives every page top/bottom breathing room from the
   chrome. Global (no SI re-init needed). Excludes ataya (:not(:has(.ataya-header)))
   -- ataya's sections (hero, collections, footer) each own their own spacing, so
   this shared padding just double-insets them (e.g. stacked with
   .ataya-news-collection's own padding-block on /news). */
body:not(:has(.ataya-header)) #main-content { padding-block: 40px 56px; }
/* Display pages (news details) embed the header+footer fragments INSIDE #main-content
   (they don't inherit the master), so the rule above would pad above the header and
   below the footer. Zero it out whenever the header is embedded in the content. */
#main-content:has(.erc-header) { padding-block: 0; }
/* Fatima pages want their sections flush against the header/footer chrome —
   zero out the global page padding for this microsite only. */
body:has(.fatima-header) #main-content { padding-block: 0; }
/* inter-section gaps within a page (between the 1st block and the one below it) */
.erc-apply--form { padding-top: 24px; }
.erc-contact--map { padding-top: 24px; }
.erc-news-collection { padding-top: 24px; }
.erc-gallery-collection { padding-top: 24px; }
.erc-stories-collection { padding-top: 24px; }

/* ---- Collection Display grids: responsive column counts on mobile ----
   /news and /programs use .erc-news-collection; /gallery uses
   .erc-gallery-collection; /success-stories uses .erc-stories-collection.
   All render Liferay Collection Display markup (.container-fluid > .row >
   Bootstrap col-*). The generated columns keep a fixed small width at every
   breakpoint (col-3 / col-2 base), so on phones the cards shrink to ~70-80px
   instead of stacking. Desktop (>=901px) is left exactly as Liferay renders
   it — these are media-query-only overrides that step the columns down to
   2-up <=900px and 1-up <=600px, matching the .erc-carousel--cols-4
   step-down. Descendant .row selector (not ">") because the Collection
   Display nests the row under its own wrapper container-fluid. */
@media (max-width: 1024px) {
  .erc-news-collection .row > [class*="col-"],
  .erc-gallery-collection .row > [class*="col-"],
  .erc-stories-collection .row > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}
@media (max-width: 600px) {
  .erc-news-collection .row > [class*="col-"],
  .erc-gallery-collection .row > [class*="col-"],
  .erc-stories-collection .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* Fatima home Events grid: 2-up on desktop, 1-up (full width) below 1024px —
   no step-down to 2-up like News/Gallery, since it's already only 2 columns. */
@media (max-width: 1024px) {
  .fatima-events-collection .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* Fatima Gallery grid (/gallery, all 20 videos, no pagination). The
   Collection's own cssClasses ("fatima-gallery-collection") never reach the
   DOM (Liferay only renders cssClasses on Row/Column/Section wrappers, not on
   a bare Collection element), so everything below is scoped off the
   surrounding Section class instead.
   Also fixes a real Liferay Collection Display bug seen only at higher item
   counts (20 items / 10 grid rows): the intermediate
   `.lfr-layout-structure-item-*` wrapper divs between the outer Column and
   the Bootstrap grid, and again around each card fragment, render as
   `display:block; width:auto` with only percentage-widthed / absolutely
   positioned descendants — so they have no intrinsic content width and
   collapse to ~4px, taking the whole grid down with them. Liferay sometimes
   patches this with an inline `style="width:100%"` on the collection
   wrapper, but not on the per-item wrapper and not reliably — so force it
   here rather than depend on that. */
.fatima-gallery-section .lfr-layout-structure-item-collection,
.fatima-gallery-section [class*="lfr-layout-structure-item-gallery-item"],
.fatima-gallery-section [class*="lfr-layout-structure-item-gallery-item"] > div {
  width: 100%;
}
@media (max-width: 1024px) {
  .fatima-gallery-section .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* No pager on the Fatima Gallery — all 20 items render on one page. */
.fatima-gallery-section .pagination-bar { display: none !important; }
/* Fatima News grid (/news, 36 articles paginated 6/page, 3 columns). Same
   wrapper-collapse bug as the Gallery grid above (see that comment) — the
   `.lfr-layout-structure-item-*` wrappers around the Collection and each
   news-item card have no intrinsic width and collapse to ~4px at this item
   count. Pager stays (6 real pages), only the grid itself is fixed. */
.fatima-news-section .lfr-layout-structure-item-collection,
.fatima-news-section [class*="lfr-layout-structure-item-news-item"],
.fatima-news-section [class*="lfr-layout-structure-item-news-item"] > div {
  width: 100%;
}
@media (max-width: 1024px) {
  .fatima-news-section .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* Side padding so the collection cards aren't edge-to-edge on mobile — applies
   to the home Gallery/News blocks AND the /news, /gallery, /programs pages
   (all the same full-width container-fluid with 0 side padding by default).
   Inset by the responsive gutter (24px <=900, 20px <=600). Mobile-only, so
   desktop keeps its centered container-fluid-max-xl layout.
   NOT .erc-stories-collection — that Section also carries .erc-container
   (constrained layout, not Fluid), which already applies the same
   padding-inline at every width; adding it again here would double-inset. */
@media (max-width: 1024px) {
  .erc-news-collection,
  .erc-gallery-collection { padding-inline: var(--erc-gutter); }
}

/* Empty "No Results Found" state on the dedicated collection pages (/news,
   /programs, /gallery, /open-data, /success-stories): Liferay renders it
   full-width and flush to the viewport edge, so it looks misaligned against
   the page heading + builder note (which sit at the centered content
   margin). Constrain it to the same content width so it lines up. Only
   visible before the builder adds content. */
.erc-news-collection .c-empty-state,
.erc-gallery-collection .c-empty-state,
.erc-stories-collection .c-empty-state,
.erc-open-data-collection .c-empty-state {
  max-width: var(--erc-content-max, 1440px);
  margin-inline: auto;
  padding-inline: var(--erc-gutter);
  box-sizing: border-box;
}

/* Fatima /reports empty state ("no reports yet"): restyle Liferay's native
   .c-empty-state to match the Figma "Page to be Updated" no-data screen
   (navy panel, gold ring icon, white message) instead of the default
   neutral/light empty state used elsewhere. Shown together with the
   page-hero fragment (image + "Report" title, toggled by
   reports-heading/index.js) when the collection has no items. */
.fatima-reports-collection .c-empty-state {
  max-width: var(--erc-content-max, 1440px);
  margin-inline: auto;
  padding: 80px var(--erc-gutter);
  box-sizing: border-box;
  background: transparent;
}

.fatima-reports-collection .c-empty-state .c-empty-state__icon,
.fatima-reports-collection .c-empty-state svg {
  color: #d7b642;
  fill: #d7b642;
}

.fatima-reports-collection .c-empty-state__title,
.fatima-reports-collection .c-empty-state__description,
.fatima-reports-collection .c-empty-state p {
  color: var(--erc-text-on-color, #ffffff);
}

/* Empty state content, per Figma node 7138:12833 ("Page to be Updated"): a
   gold ring-clock icon fading in above the message. Liferay's Collection
   Display only ever renders .c-empty-state > .c-empty-state-text (plain
   text, no icon slot, no as-code override for the markup), so the icon is a
   ::before background-image and the built-in text node is restyled in
   place rather than replaced. */
.fatima-reports-collection .c-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.fatima-reports-collection .c-empty-state::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none'%3E%3Cpath d='M26 0C20.8577 0 15.8309 1.52487 11.5552 4.38179C7.27951 7.23871 3.94702 11.2994 1.97914 16.0502C0.0112654 20.8011 -0.503621 26.0288 0.499594 31.0723C1.50281 36.1159 3.97907 40.7486 7.61524 44.3848C11.2514 48.0209 15.8842 50.4972 20.9277 51.5004C25.9712 52.5036 31.1989 51.9887 35.9498 50.0209C40.7007 48.053 44.7613 44.7205 47.6182 40.4448C50.4751 36.1691 52 31.1423 52 26C51.9927 19.1066 49.2511 12.4976 44.3767 7.62326C39.5024 2.74889 32.8934 0.00727955 26 0ZM26 48C21.6488 48 17.3953 46.7097 13.7775 44.2923C10.1596 41.8749 7.33979 38.439 5.67466 34.419C4.00953 30.3991 3.57386 25.9756 4.42274 21.708C5.27161 17.4404 7.36691 13.5204 10.4437 10.4437C13.5204 7.3669 17.4404 5.2716 21.708 4.42272C25.9756 3.57385 30.3991 4.00952 34.419 5.67465C38.439 7.33978 41.875 10.1596 44.2923 13.7775C46.7097 17.3953 48 21.6488 48 26C47.9934 31.8327 45.6734 37.4247 41.5491 41.549C37.4247 45.6734 31.8327 47.9934 26 48ZM42 26C42 26.5304 41.7893 27.0391 41.4142 27.4142C41.0392 27.7893 40.5304 28 40 28H26C25.4696 28 24.9609 27.7893 24.5858 27.4142C24.2107 27.0391 24 26.5304 24 26V12C24 11.4696 24.2107 10.9609 24.5858 10.5858C24.9609 10.2107 25.4696 10 26 10C26.5304 10 27.0392 10.2107 27.4142 10.5858C27.7893 10.9609 28 11.4696 28 12V24H40C40.5304 24 41.0392 24.2107 41.4142 24.5858C41.7893 24.9609 42 25.4696 42 26Z' fill='%23D7B642'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: fatima-reports-empty-icon-in 1.3s linear;
}

.fatima-reports-collection .c-empty-state-text {
  color: var(--erc-text-on-color, #ffffff);
  font-family: var(--erc-font-body);
  font-size: 40px;
  letter-spacing: .8px;
  animation: fatima-reports-empty-title-in 1.3s linear;
}

@keyframes fatima-reports-empty-icon-in {
  0% { animation-timing-function: ease-in-out; opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fatima-reports-empty-title-in {
  0% { animation-timing-function: ease-in-out; translate: 0 140px; }
  100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fatima-reports-collection .c-empty-state::before,
  .fatima-reports-collection .c-empty-state-text {
    animation: none;
  }
}

/* Belt-and-braces: fragment wrapper divs can carry a Bootstrap/Liferay
   `display` rule that outranks the bare [hidden] attribute's UA style, so
   force it explicitly for the two blocks reports-heading/index.js toggles. */
.fatima-reports-hero[hidden],
.fatima-reports-heading[hidden] {
  display: none !important;
}

/* /partners hero photo, per Figma node 5286:205609. page-hero is a shared
   fragment whose bg_image editable defaults to the About SFFWR photo; every
   page using it (Reports included) either keeps that default or has an
   editor swap it in the page editor. Overriding here via the page's own
   cssClasses (set on the Fragment element in page-definition.json) gives
   Partners its correct photo out of the box without touching the shared
   fragment default, and an editor can still replace it later -- this rule
   only wins until the editable field itself is next saved with a new value. */
.fatima-partners-hero .fatima-page-hero__bg {
  content: url("/o/erc-theme/fatima/hero-partners.png");
}

/* /contact-us hero photo, per Figma node 7672:13101. Same pattern as
   Partners above -- an editor can still replace it in the page editor. */
.fatima-contact-hero .fatima-page-hero__bg {
  content: url("/o/erc-theme/fatima/hero-partners.png");
}

/* Story details page: the media panel is `flex: 1 1 0` for the desktop two-column
   row. When the layout stacks to a column on mobile, flex-basis:0 on the now
   VERTICAL main axis collapses its height to 0, so the image vanishes (measured
   335x0). Reset to flex:none so its aspect-ratio drives the height from the full
   stacked width. */
@media (max-width: 900px) {
  .erc-storydetail__media { flex: none !important; width: 100%; }
}

/* Home banner alignment: the banner <section> wraps its own .erc-container
   (20px gutter) AND the fragment adds `padding: 20px` on mobile, double-
   insetting the hero card to ~40px while every other home section sits at 20px.
   Drop the banner's own horizontal padding so the card lines up at 20px. */
@media (max-width: 768px) {
  .erc-banner { padding-inline: 0 !important; }
}
/* Make a Gift CAROUSEL (home): a DonationObject Collection Display nested in the
   card-carousel fragment's drop zone. The collection renders container-fluid and
   CHUNKS the items into several .row elements (one per grid row); the fragment's
   main.js merges them into the FIRST .row, which these rules turn into a nowrap
   horizontal scroll track sized 3 / 2 / 1 cards. Prev/next buttons are the only
   control — the scrollbar is hidden. Kept in globalCSS (not the fragment) so it can
   be tuned without a site re-init. NO :has() in selector groups (would drop the rule). */
.erc-carousel__track .container-fluid { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.erc-carousel__track .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 0 !important;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.erc-carousel__track .row::-webkit-scrollbar { width: 0; height: 0; display: none; }
.erc-carousel__track .row > [class*="col-"] {
  flex: 0 0 calc((100% - 48px) / 3) !important;
  max-width: none !important;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  scroll-snap-align: start;
}
@media (max-width: 1024px) { .erc-carousel__track .row > [class*="col-"] { flex-basis: calc((100% - 24px) / 2) !important; } }
@media (max-width: 600px)  { .erc-carousel__track .row > [class*="col-"] { flex-basis: 100% !important; } }

/* Successful Stories carousel = 4 cards on desktop (card-carousel perView="4").
   More specific than the default 3-up rules above, so these win regardless of
   source order; steps down 4 -> 3 -> 2 -> 1. */
.erc-carousel--cols-4 .erc-carousel__track .row > [class*="col-"] { flex-basis: calc((100% - 72px) / 4) !important; }
@media (max-width: 1200px) { .erc-carousel--cols-4 .erc-carousel__track .row > [class*="col-"] { flex-basis: calc((100% - 48px) / 3) !important; } }
@media (max-width: 900px)  { .erc-carousel--cols-4 .erc-carousel__track .row > [class*="col-"] { flex-basis: calc((100% - 24px) / 2) !important; } }
@media (max-width: 600px)  { .erc-carousel--cols-4 .erc-carousel__track .row > [class*="col-"] { flex-basis: 100% !important; } }

/* Sticky footer. The theme's #main-content is a flex column that fills the
   viewport; on short pages (e.g. story/news details, which embed header+footer
   directly with little body) the leftover space would otherwise sit BELOW the
   footer. Pushing the footer layout item down with an auto top-margin sticks it to
   the bottom. Harmless on tall pages (auto margin resolves to 0 with no free
   space) and on non-flex layouts. */
.lfr-layout-structure-item-footer { margin-top: auto; }

/* Shared media lightbox. JS (gallery-card / story-card / story-detail) toggles
   .is-open on a single #erc-gallery-lightbox appended to <body>. Kept global here
   so it works on any page, including the story details display page (which has no
   gallery-card fragment). */
.erc-gallery-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; }
.erc-gallery-lightbox.is-open { display: flex; }
.erc-gallery-lightbox__backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .85); }
.erc-gallery-lightbox__inner { position: relative; z-index: 1; width: fit-content; max-width: 92vw; }
.erc-gallery-lightbox__body { position: relative; min-height: 140px; }
.erc-gallery-lightbox__spinner {
  position: absolute; top: 50%; left: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px; z-index: 2;
  border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  border-radius: 50%; animation: erc-gallery-spin .8s linear infinite;
}
@keyframes erc-gallery-spin { to { transform: rotate(360deg); } }
.erc-gallery-lightbox__img {
  display: block; max-width: 92vw; max-height: 88vh; margin: 0;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.erc-gallery-lightbox__frame { position: relative; width: min(1100px, 92vw); aspect-ratio: 16 / 9; }
.erc-gallery-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.erc-gallery-lightbox__hint {
  position: absolute; bottom: -34px; left: 0; right: 0; text-align: center;
  color: rgba(255, 255, 255, .75); font-family: var(--erc-font-body, sans-serif); font-size: 13px;
}

/* Make a Gift campaign collection (DonationObject objects). The Liferay collection
   renders a full-width container-fluid > row > col-*; constrain it to the site content
   width and lay the cards out on the same 3-up grid as the other card sections so it
   is wrapped and responsive (not edge-to-edge). Numeric pagination stays visible. */
.erc-gift-collection { padding-block: 24px; }
/* Donation carousel (.erc-gift-carousel) reuses the card-carousel chrome, which has its
   OWN .erc-container for the page gutter. When the fragment is dropped in a Row that ALSO
   carries .erc-container (home), the two nest and double-indent the heading + cards ~80px
   past every other section (e.g. "Successful Stories"). Zero the inner gutter so it aligns
   to the content edge. Inert when NOT nested (make-a-gift / correctly-structured pages),
   so the fragment's own .erc-container still provides the single gutter there. Scoped to
   .erc-gift-carousel so the shared card-carousel is never affected. */
.erc-container .erc-gift-carousel .erc-container { padding-inline: 0; max-width: none; }
.erc-gift-collection .container-fluid {
  max-width: var(--erc-content-max);
  margin-inline: auto;
  padding-inline: var(--erc-gutter);
}
.erc-gift-collection .container-fluid > .row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 !important;
}
.erc-gift-collection .container-fluid > .row > [class*="col-"] {
  flex: none !important; width: auto !important; max-width: none !important; min-width: 0;
  padding: 0 !important; margin: 0 !important;
}
@media (max-width: 1024px) { .erc-gift-collection .container-fluid > .row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .erc-gift-collection .container-fluid > .row { grid-template-columns: 1fr; } }
/* Pagination bar aligned to the same content width. */
.erc-gift-collection .pagination-bar,
.erc-gift-collection [class*="pagination"] { max-width: var(--erc-content-max); margin-inline: auto; padding-inline: var(--erc-gutter); }

/* Gallery pager: the gallery-card fragment hid the collection pager (leftover
   from when /gallery was a no-pager grid). Now that gallery paginates 6/page
   like /news, re-show it here (global → no fragment re-init needed). */
.erc-gallery-collection .pagination-bar { display: flex !important; justify-content: center; }
.erc-gallery-collection .pagination-root { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }

/* /success-stories pager: same treatment as /gallery — the story-card
   fragment carries no pager-hiding CSS, but keep the bar centered to match
   the rest of the site's collection pages. */
.erc-stories-collection .pagination-bar { display: flex !important; justify-content: center; }
.erc-stories-collection .pagination-root { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }

/* Fatima home Events grid: a fixed 4-card static grid, never more than one
   page, so Liferay's default pager (Previous / 1 / Next) is pure clutter. */
.fatima-events-collection .pagination-bar { display: none !important; }

/* Home News collection: a fixed 3-card grid (paginationType: "none" in the
   page-definition, numberOfItems == numberOfItemsPerPage), so it never has a
   second page — Liferay still renders the "Showing 1 to 3 of 3" pager
   regardless. Hide it, same as the Fatima Events grid above. */
.erc-news-collection .pagination-bar { display: none !important; }

/* ---- Plain page hero (Donate / Zakat) ----
   Reuses the `banner` fragment as a title-ONLY page header (image + one big
   title, no description/CTAs), per the Donate & Zakat redesigns. The
   page-def wraps the banner Section in .erc-hero-plain and sets only the title;
   here we hide the CTA row + description (so their fragment defaults
   never show), shrink the hero height and bottom-left align the title. RTL is
   free (banner overlay + flex already mirror). Global CSS → deploys without a
   site re-init. */
.erc-hero-plain .erc-banner__actions,
.erc-hero-plain .erc-banner__desc { display: none !important; }
.erc-hero-plain .erc-banner__container {
  min-height: 200px;
  justify-content: flex-end;
  gap: 0;
}
.erc-hero-plain .erc-banner__title { font-size: 48px; line-height: 1.1; }
@media (max-width: 900px) {
  .erc-hero-plain .erc-banner__container { min-height: 160px; padding: 24px; }
  .erc-hero-plain .erc-banner__title { font-size: 32px; }
}

/* Indigo CTA variant (payment flow: "Confirm and Pay", success-page buttons) —
   matches the Figma indigo gradient. Reusable alongside .erc-btn / .erc-btn--primary. */
.erc-btn--indigo {
  background: radial-gradient(circle at 50% 120%, #585ba7 0%, var(--erc-indigo, #3c3f90) 55%);
  color: var(--erc-text-on-color, #fff);
  border: 0;
}
.erc-btn--indigo:hover { filter: brightness(1.06); }
.erc-btn--indigo:disabled { opacity: .5; cursor: default; filter: none; }

/* Desktop: constrain the full-width Collection Display container to the content width
   so the /gallery, /news, /programs card grids line up with their page-intro hero
   (which uses .erc-container). Liferay renders the collection as a full-width
   .container-fluid.px-0; match .erc-container's max-width + responsive gutter. */
@media (min-width: 1025px) {
  .erc-gallery-collection .container-fluid,
  .erc-news-collection .container-fluid {
    max-width: var(--erc-content-max);
    margin-inline: auto;
    padding-inline: var(--erc-gutter) !important;
  }
}

/* /news, /programs and /gallery hero image columns: force them onto the SAME
   width schedule as their Collection Display card columns (50% <=1024px,
   100% <=600px) at every breakpoint, not just desktop. The two grids on each
   page are built by different Liferay mechanisms (a native Row/Column vs a
   Collection Display's generated col-*), so their Bootstrap classes diverge
   below the lg breakpoint even though both render the same col-lg-* on
   desktop (col-lg-4 for news/programs' 3-up grid, col-lg-6 for gallery's
   2-up grid) -- this keeps them pixel-equal below lg too, with the text
   column taking the complementary width. Both hero variants share one
   50%/100% schedule because .erc-news-collection and .erc-gallery-collection
   already step every card down to that same 50%/100% (section above).
   Liferay's SI does not render a Column's own `cssClasses` in this version
   (silently dropped), so the two columns are targeted structurally instead:
   .erc-news-hero / .erc-gallery-hero is on the Row (that class DOES render),
   and each hero has exactly 2 columns in a fixed order (text, then image). */
@media (max-width: 1024px) {
  .erc-news-hero > .row > [class*="col-"],
  .erc-gallery-hero > .row > [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
}
@media (max-width: 600px) {
  .erc-news-hero > .row > [class*="col-"],
  .erc-gallery-hero > .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* /gallery collection: Liferay's layout-item container padding overrides the
   .erc-gallery-collection padding-top down to ~8px (unlike /news), collapsing the
   gap under the hero. Force it to match the /news & /programs spacing. */
.erc-gallery-collection.lfr-layout-structure-item-container { padding-top: 24px !important; }

/* View All in the card-carousel head: match the section-intro "View All" colour
   (heading colour, not the red link colour). + breadcrumb breathing room under the
   embedded header on article detail pages. Live overrides (no site re-init). */
.erc-carousel__head .erc-carousel__viewall { color: var(--erc-text-heading); }
.erc-article-header[dir] { padding-top: 40px; }

/* ============================================================
   Make a Gift donation card (.erc-gift*) — GLOBAL copy.
   These live in the donation-card fragment's index.css too, but on /home the
   card-carousel main.js merges the Collection Display rows (moves the card
   columns into one scroll track). That DOM move drops Liferay's per-fragment
   scoped CSS, so the cards render unstyled after the carousel runs ("flash then
   break"). On the plain /make-a-gift page (no carousel) the fragment CSS holds.
   Putting the card styles in globalCSS makes them apply regardless of where the
   carousel moves the cards. (Matches the "collection CSS -> erc-theme" rule.) */
.erc-gift {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--erc-surface-low);
  border-radius: var(--erc-radius-card);
  overflow: hidden;
  font-family: var(--erc-font-body);
}
.erc-gift__media {
  position: relative;
  aspect-ratio: 413 / 260;
  border-radius: var(--erc-radius-card);
  overflow: hidden;
}
.erc-gift__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.erc-gift__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.16) 62%, rgba(0,0,0,.75) 84%);
}
.erc-gift__tag {
  position: absolute; top: 16px;
  display: inline-flex; align-items: center; gap: 2px;
  height: 40px; padding: 8px 16px;
  background: var(--erc-surface-low);
  border-radius: var(--erc-radius-pill);
  font-size: 14px; line-height: 20px; white-space: nowrap;
}
.erc-gift__tag--progress { inset-inline-start: 16px; color: var(--erc-text-caption); }
.erc-gift__tag--progress strong { color: var(--erc-text-info, #0e87b9); font-weight: 700; }
.erc-gift__tag--progress .erc-gift__tag-sep { color: var(--erc-text-caption); }
.erc-gift__tag--category { inset-inline-start: 127px; color: var(--erc-text-caption); }
.erc-gift__stats {
  position: absolute; inset-inline: 16px; bottom: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: #fff; font-size: 14px; line-height: 20px;
}
.erc-gift__stat { display: inline-flex; align-items: center; gap: 4px; }
.erc-gift__stat--end { justify-content: flex-end; }
.erc-gift__stat-label { font-weight: 400; }
.erc-gift__stat strong { font-weight: 700; }
.erc-gift__bar {
  position: absolute; inset-inline: 16px; bottom: 12px;
  height: 8px; background: var(--erc-surface-base); border-radius: 24px; overflow: hidden;
}
.erc-gift__bar-fill { display: block; height: 100%; background: var(--erc-red-500); border-radius: 24px; }
.erc-gift__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 0; }
.erc-gift__title {
  margin: 0; font-weight: 500; font-size: 20px; line-height: 28px; color: var(--erc-text-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erc-gift__desc {
  margin: 0; font-size: 16px; line-height: 24px; color: var(--erc-text-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.erc-gift__time { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--erc-text-body); }
.erc-gift__time svg { width: 24px; height: 24px; flex: none; color: var(--erc-text-caption); }
.erc-gift__actions { display: flex; flex-direction: column; gap: 12px; padding: 16px; margin-top: auto; }
.erc-gift__amount {
  display: flex; align-items: center;
  height: 48px; border: 1px solid var(--erc-stroke); border-radius: var(--erc-radius-pill);
  background: var(--erc-surface-base); overflow: hidden;
}
.erc-gift__step {
  flex: none; width: 48px; height: 100%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; color: var(--erc-text-heading);
}
.erc-gift__step svg { width: 20px; height: 20px; }
.erc-gift__step:hover { background: rgba(2, 6, 23, .04); }
.erc-gift__amount-value {
  flex: 1 0 0; text-align: center; font-weight: 500; font-size: 16px; color: var(--erc-text-heading);
  border-inline: 1px solid var(--erc-stroke); height: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.erc-gift__amount-cur { color: var(--erc-text-caption); }
.erc-gift__cta { width: 100%; justify-content: center; }

/* Disabled form input — clear greyed-out affordance (e.g. the donation amount on
   /donate when it is locked to the value carried from a Make-a-Gift card). */
.erc-field__input:disabled {
  background: #eef1f4 !important; color: var(--erc-text-caption) !important;
  cursor: not-allowed; opacity: 1;
}

/* Make-a-Gift amount input: center the digits and size to content so "AED N" reads
   centered between the − / + steppers (overrides the fragment's inline left-align +
   fixed width). Base rule works everywhere; field-sizing tightens it on modern browsers. */
.erc-gift__amount-input { width: 5ch !important; text-align: center !important; }
@supports (field-sizing: content) {
  .erc-gift__amount-input {
    field-sizing: content; width: auto !important; min-width: 1.5ch; max-width: 8ch;
  }
}

/* About Nahr Al Hayat Fund image (home + about-us): align to top instead of the
   fragment's default center crop, per Figma. */
.erc-imageblock__img[src*="about-fund.jpg"] { object-position: top; }