/* =============================================================================
   SWB BRAND TOKENS — single source of truth
   Derived from: SWB Brand Guide 2026 (V1.0)
   Edit values HERE. Map Elementor Global Colors / Fonts to these tokens.
   Never hard-code hex/font values in widgets or page CSS.
   ============================================================================= */

:root {
  /* --- Core palette (§02 Color) ------------------------------------------- */
  --color-forest:        #004F3F; /* PRIMARY · headlines & structure · PMS 3435 C */
  --color-vibrant:       #04A887; /* ACCENT  · CTAs, eyebrows, arch, hovers · PMS 3395 C */
  --color-deep-forest:   #003B30; /* HERO / COVER backgrounds · PMS 5535 C */
  --color-yellow:        #FDC406; /* MAIN ACCENT · key accents only (Original Yellow) */

  /* --- Forest tint system (§02 Extended) ---------------------------------- */
  --color-forest-50:     #82A79D; /* disabled states */
  --color-forest-20:     #D5E5DF; /* hover backgrounds */
  --color-forest-10:     #EDF3F0; /* table rows & focus rings */

  /* --- Neutrals ----------------------------------------------------------- */
  --color-ink:           #0A2A24; /* body text */
  --color-gray-500:      #5A6864; /* captions */
  --color-mint:          #E8F2EE; /* surfaces */
  --color-warm-white:    #FDFCF8; /* page background (NOT pure #FFF) */
  --color-parchment:     #F4EDE0; /* print / reports only */
  --color-academic-gold: #A8832A; /* reports / academic only */

  /* --- Semantic ----------------------------------------------------------- */
  --color-success:       #04A887; /* = Vibrant Green */
  --color-error:         #B83B3B; /* earthier red */
  --color-warning:       #9E6E1A; /* dark amber */

  /* --- Surfaces & text roles (convenience aliases) ------------------------ */
  --bg-page:             var(--color-warm-white);
  --bg-surface:          var(--color-mint);
  --bg-hero:             var(--color-deep-forest);
  --text-body:           var(--color-ink);
  --text-heading:        var(--color-forest);
  --text-caption:        var(--color-gray-500);
  --text-on-dark:        #FFFFFF;

  /* --- Typography families (§03 Typography) ------------------------------- */
  /* Display / covers / pull quotes */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  /* Section heads, body, eyebrow, caption — the workhorse sans */
  --font-sans:    "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;

  /* --- Type weights ------------------------------------------------------- */
  --fw-display:   700;
  --fw-heading:   700;
  --fw-eyebrow:   500;
  --fw-body:      400;

  /* --- Type scale & rhythm ------------------------------------------------ */
  --fs-body:      15px;   /* GSF · 400 */
  --lh-body:      1.6;    /* guide: 1.55–1.65 */
  --measure-body: 68ch;   /* guide: cap measure 65–72 characters */

  --fs-caption:   11px;   /* GSF · 400 · Gray 500 */

  /* Eyebrow · GSF · 500 · 11px · 0.14em tracking · CAPS */
  --fs-eyebrow:   11px;
  --tracking-eyebrow: 0.14em;

  /* Display H1 (reference values from live theme; tune per layout) */
  --fs-h1: 42px;  --lh-h1: 1.05;
  --fs-h2: 36px;
  --fs-h3: 28px;  --lh-h3: 1.05;
  --fs-h4: 24px;
  --fs-h5: 22px;
  --fs-h6: 20px;

  /* --- Components (§05) --------------------------------------------------- */
  --radius-card:   20px;  /* program card radius */
  --radius-pill:   100px; /* pill button / tag radius */
  --focus-ring:    0 0 0 3px var(--color-forest-10); /* Forest focus ring — never blue */
  --scrim-photo:   rgba(0, 79, 63, 0.62); /* Forest scrim 50–70% for text-over-photo */
}

/* -----------------------------------------------------------------------------
   USAGE GUARDRAILS (from the guide — kept as comments, not enforced here)
   - Usage ratio: ~55% white/breathing room · 25% Forest · 10% Vibrant · 5% Yellow · 5% Ink.
   - Vibrant Green is NEVER a section background — CTAs, eyebrows, arch, link hover only.
   - White on Yellow FAILS contrast — never use. Yellow carries Ink or Forest text only.
   - Body text: Ink only. Captions: Gray 500. Headlines/structure: Forest.
   - Icons: Lucide, 1.5px stroke, Forest or Vibrant only — never filled, never recolored.
   - One serif: Source Serif 4. One sans: Google Sans Flex. No second display family.
   --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   OPT-IN HELPERS ONLY.
   We deliberately do NOT blanket-restyle body / h1–h6 here: global colors and
   fonts are owned by the Elementor Kit (which colors headings contextually —
   e.g. white on Deep Forest heroes). A blanket `h1–h6 { color: Forest }` would
   turn those hero headings invisible. Use these classes intentionally instead.
   --------------------------------------------------------------------------- */

/* Display serif is opt-in via class to honor "one family per heading block". */
.swb-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
}

.swb-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-vibrant);
}

.swb-caption {
  font-size: var(--fs-caption);
  color: var(--text-caption);
}

/* =============================================================================
   COMPONENT FIX — desktop nav dropdown hover bridge
   The Elementor Pro nav menu dropdown sits 10px below its parent item
   (margin-top:10px). Moving the cursor into the dropdown crosses that 10px
   dead-zone and the menu closes before you can click. We span the gap with an
   invisible bridge so the hover region is continuous (keeps hover-to-open UX).
   Desktop only; the mobile toggle menu is unaffected.
   ============================================================================= */
/* =============================================================================
   Friends of Gaza (page 3522) — program cards.
   The homepage renders its cards with the theme's `work-item` markup styled by
   an INLINE <style> in the homepage shortcode (not a site-wide stylesheet), so
   those rules don't reach this page. We mirror them VERBATIM, scoped to 3522,
   against the same markup (a single `.work-list` HTML widget) so the cards are
   pixel-identical to the homepage. Keep these values in sync with the homepage.
   ============================================================================= */
.elementor-3522 .work-list {
  display: flex; flex-direction: row; flex-wrap: wrap;
  row-gap: 40px; column-gap: 40px;
}
.elementor-3522 .work-item { flex: 0 0 31.08%; }
.elementor-3522 .work-item__thumbnails {
  width: 100%; height: 368px;
  border-radius: 30px; border-top-left-radius: 0;
  position: relative; overflow: hidden; margin-bottom: 24px;
}
/* Homepage uses width:auto; we use width:100% + cover so every card image fills
   the thumbnail identically (uniform sizes incl. mobile, mixed source aspects). */
.elementor-3522 .work-item__thumbnails img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.elementor-3522 .work-item__shortname {
  padding: 16px; background-color: #ffffff; border-bottom-right-radius: 16px;
  position: absolute; overflow: hidden; top: 0; left: 0;
}
.elementor-3522 .work-item__shortname p {
  margin-bottom: 0; font-family: "Work Sans", Sans-serif;
  font-size: 9.6px; font-weight: 600; text-transform: uppercase;
  line-height: 14.4px; letter-spacing: 1.73px;
}
.elementor-3522 .work-item__shortname p .first-word {
  font-family: "Google Sans Flex", sans-serif; font-optical-sizing: auto;
  font-size: 20px; font-weight: 600; line-height: 20px; letter-spacing: 0;
  color: #004F3F; display: block;
}
@media (max-width: 1024px) { .elementor-3522 .work-item { flex: 0 0 47%; } }
@media (max-width: 767px)  { .elementor-3522 .work-item { flex: 0 0 100%; }
  .elementor-3522 .work-item__thumbnails { height: 300px; } }

/* =============================================================================
   Friends of Gaza (page 3522) — FAQ accordion, styled to the reference
   ============================================================================= */
.elementor-3522 .elementor-accordion-item { border: 0; border-bottom: 1px solid rgba(0,79,63,.12); }
.elementor-3522 .elementor-tab-title { padding: 20px 2px; display: flex; align-items: center; gap: 14px; }
.elementor-3522 .elementor-tab-content { padding: 0 2px 22px; color: var(--color-ink, #0A2A24); font-size: 15px; line-height: 1.6; }
.elementor-3522 .elementor-accordion-icon { font-size: 13px; color: var(--color-vibrant, #04A887); width: auto; min-width: 0; margin: 0; }
.elementor-3522 .elementor-accordion-icon i { font-weight: 400; }

/* nav dropdown hover bridge (existing) */
@media (min-width: 1025px) {
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children {
    position: relative;
  }
  /* invisible bridge filling the 10px gap beneath each top-level parent item */
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > a::after,
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > .elementor-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;            /* covers the 10px margin-top + buffer */
    background: transparent;
  }
  /* keep the dropdown visible while the cursor is over the bridge or submenu */
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu,
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}


/* ============================================================================
   Header menu — dropdown position fix (ported from live swbrelief.org).
   Staging had the submenu at top:0 (overlapping the parent); live positions it
   24px below the item so the hover bridge works and it doesn't overlap.
   ============================================================================ */
.nav-item-children {
  top: 24px !important; transform: none !important;  /* matches live's native position (no-op on prod; fixes staging's top:0 overlap) */
  left: 0 !important;          /* align under the parent (staging had left:76px) */
  background: #fff !important;  /* staging dropdown was transparent */
  box-shadow: 0 16px 50px 0 rgba(0,0,0,.07) !important;
  border-radius: 5px !important;
  padding: 13.5px 0 !important;
  min-width: 232px !important;
}
.nav-item-children li a { color: var(--color-ink, #0A2A24) !important; }
.nav-item-children li a:hover { color: var(--color-forest, #004F3F) !important; }
/* hover bridge: a transparent strip filling the gap between the menu item and the
   dropdown so the menu stays open while you move the mouse down to click an item
   (pure CSS — works even if the theme menu JS isn't active here). */
.nav-item-children::before {
  content: "" !important; position: absolute !important;
  left: 0 !important; right: 0 !important; top: -22px !important; bottom: auto !important;
  height: 26px !important; background: transparent !important; display: block !important;
}

/* Homepage: hide the redundant "Become a Friend of Gaza" header button — the live
   homepage has none. Element id is unique to homepage post 4119. Interim until
   the homepage block rebuild. */
.elementor-element-38a9507e { display: none !important; }

/* =============================================================================
   Nav dropdown — keep it open on hover (the theme JS hides the submenu inline
   when the cursor leaves the LINK, so moving down to click an item closed it).
   Force it visible while the parent <li> is hovered — and :hover stays true
   while the cursor is over the submenu, since it's a descendant of the <li>.
   CSS !important beats the JS inline style. Desktop only.
   ============================================================================= */
@media (min-width: 1025px) {
  li.menu-item-has-children:hover > .nav-item-children,
  .nav-item-children:hover {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* =============================================================================
   Nav dropdown — stacking fix. The menu's Elementor section sits at z-index:5,
   the SAME as the hero section, which comes later in the DOM and paints over the
   dropdown (the submenu's own z-index can't escape its parent's z:5 context).
   Lift every Elementor section that CONTAINS the menu above page content.
   ============================================================================= */
@media (min-width: 1025px) {
  .elementor-element:has(.lqd-fancy-menu) { position: relative !important; z-index: 100 !important; }
  .nav-item-children { z-index: 100 !important; }
}

/* =============================================================================
   Nav dropdown — stacking fix for BLOCK-TEMPLATE pages (swb-full-width).
   The rule above only lifts the menu's Elementor wrapper, which does NOT exist
   on block pages — there the theme header overlays a `.swb-hero` that sets
   `position:relative; z-index:1`, so the hero painted over the dropdown ("Our
   Causes" got covered). Lift the theme header (and its dropdown) above block
   content. Scoped to the block template + z-index only — no layout change.
   ============================================================================= */
body.page-template-swb-full-width #header.main-header { z-index: 1000 !important; }
body.page-template-swb-full-width #header .nav-item-children { z-index: 1001 !important; }
/* belt-and-suspenders: the hero only needs to layer its own bg/scrim/grid, so
   keep its stacking context low enough that the lifted header always wins. */
body.page-template-swb-full-width .swb-hero { z-index: 1; }