/**
 * Israel Vets theme — global chrome.
 *
 * Header, footer, typography, pull-quotes, In Memoriam, and the theme-toggle
 * button. Ported from the G2b-pic prototype BASECSS (non-token rules) so every
 * page inherits the same look. Colors reference the tokens in tokens.css, so
 * these rules work in both light and navy dark mode.
 *
 * Fonts (Fraunces + Inter) are enqueued from functions.php; body font stays
 * theme-default elsewhere but headings + accents use Fraunces.
 */

/* ── Body baseline (scoped to the new theme surfaces, NOT legacy .entry-content) ── */
body {
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  transition: background .2s, color .2s;
}
.iv-scope img { max-width: 100%; }

/* ── Site-wide font consistency (2026-10-01) ──
 * Headings use Fraunces (the hero "The story of the volunteers..." face) and
 * body/paragraph text uses Inter, on ALL non-legacy pages (Contact, Newsletters,
 * Further Research, etc.), so generic pages match the homepage instead of falling
 * back to Astra's default font. EXCLUDED: legacy pages (body.iv-legacy-page) and
 * any .legacy-content block keep their measured Drupal-era typography untouched.
 * theme.css loads after Astra's inline CSS, so equal-specificity wins by source
 * order (no !important needed on the element selectors). */
body:not(.iv-legacy-page) h1,
body:not(.iv-legacy-page) h2,
body:not(.iv-legacy-page) h3,
body:not(.iv-legacy-page) h4,
body:not(.iv-legacy-page) h5,
body:not(.iv-legacy-page) h6,
body:not(.iv-legacy-page) .entry-title,
body:not(.iv-legacy-page) .ast-the-title {
  font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
}
body:not(.iv-legacy-page),
body:not(.iv-legacy-page) p,
body:not(.iv-legacy-page) li,
body:not(.iv-legacy-page) .entry-content,
body:not(.iv-legacy-page) .entry-content p {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
/* Never override inside legacy content even on a non-legacy page wrapper. */
body:not(.iv-legacy-page) .legacy-content,
body:not(.iv-legacy-page) .legacy-content * {
  font-family: revert;
}


/* ── Header ── */
.iv-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.iv-hdr .brand { display: flex; align-items: center; gap: 10px; }
.iv-hdr .brand img { height: 40px; width: auto; }
.iv-hdr .brand .t { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 16px; font-weight: 700; }
.iv-hdr nav { display: flex; flex-wrap: wrap; align-items: center; }
.iv-hdr nav a { color: var(--muted); text-decoration: none; margin-left: 16px; font-size: 12px; letter-spacing: .3px; }
.iv-hdr nav a.is-active { color: var(--gold); }

/* ── Theme toggle button ── */
.themebtn {
  margin-left: 16px;
  cursor: pointer;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}

/* ── Intro block ── */
.iv-intro { padding: 30px 20px 6px; }
.iv-intro .k { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.iv-intro h1 { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 30px; font-weight: 900; line-height: 1.08; max-width: 820px; }
.iv-intro p { color: var(--muted); font-size: 15px; margin-top: 12px; max-width: 620px; line-height: 1.6; }

/* ── Interspersed pull-quotes ── */
.iv-pq {
  position: relative;
  margin: 30px 20px;
  padding: 44px 48px;
  text-align: center;
}
/* The closing (Mickey Marcus) quote keeps BOTH horizontal rules; the opening
   (Ben-Gurion) quote has neither top nor bottom rule. */
.iv-pq-closing { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Opening mark is pinned at the UPPER-LEFT corner; the closing mark sits in
   normal flow, right-aligned below the remark and above the attribution name,
   so the two curls bookend the quote diagonally (upper-left / lower-right). */
.iv-pq .mark {
  font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  font-size: 44px;
  color: var(--gold);
  line-height: 1;
}
.iv-pq .mark:not(.mark-close) { position: absolute; top: 10px; left: 14px; }
.iv-pq .mark-close { display: block; text-align: right; margin: 8px 0 0; }
.iv-pq blockquote { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 21px; font-weight: 400; font-style: italic; line-height: 1.4; color: var(--fg); max-width: 780px; margin: 0 auto; border: none; padding-left: 0; padding-right: 0; }
.iv-pq .attr { margin-top: 16px; font-size: 13px; letter-spacing: 1px; color: var(--gold); text-transform: uppercase; }
.iv-pq .role { display: block; font-size: 11.5px; letter-spacing: .5px; color: var(--faint); text-transform: none; margin-top: 4px; }

/* ── In Memoriam (matches the removed top ledger band's palette) ── */
.iv-departed {
  padding: 18px 20px;
  background: #182130;
  color: #e6e1d5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  border-top: 1px solid #2b3749;
  margin-top: 34px;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.iv-departed .lbl { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); width: 100%; }
.iv-departed a { text-decoration: none; color: #fff; }
.iv-departed .nm { font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif; font-size: 18px; color: #fff; }
.iv-departed a:hover .nm { color: var(--gold); }
.iv-departed .sep { font-size: 18px; color: #a9b4c4; margin-left: -6px; }
.iv-departed .more .nm { font-size: 14px; color: var(--gold); }

/* ── "The Forty Who Fell" memorial band (Option A) ──
 * Full-bleed dark band echoing In Memoriam's palette, placed under the opening
 * (Ben-Gurion) quote. Kicker + serif headline + one line of context + a row of
 * circular portrait faces of the fallen (horizontally SWIPEABLE on mobile) +
 * a gold link to the memorial page. */
.iv-fallen {
  background: #182130;
  color: #e6e1d5;
  border-top: 1px solid var(--gold);
  margin-top: 34px;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.iv-fallen-in { padding: 26px 20px 24px; }
.iv-fallen .k { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.iv-fallen .hd {
  font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  font-size: 26px; font-weight: 700; line-height: 1.15; color: #fff;
  margin: 10px 0 0;
}
.iv-fallen .bd { color: #c3ccd9; font-size: 14.5px; line-height: 1.55; margin: 12px 0 0; max-width: 640px; }

/* Faces row: on mobile it scrolls horizontally (swipe); on wider screens it
 * simply fits. scroll-snap gives the swipe tidy stops; the gradient fade hints
 * there's more to swipe. */
.iv-fallen .faces {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;              /* Firefox: hide the bar; swipe is the affordance */
  text-decoration: none;             /* row is an <a> to the memorial — no underline */
  color: inherit;
  cursor: pointer;
}
.iv-fallen .faces::-webkit-scrollbar { height: 0; width: 0; }   /* WebKit: hide the bar */
.iv-fallen .face {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--gold);
  background: #0c0f14;
  scroll-snap-align: start;
  display: block;
}
.iv-fallen .face img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.05);
}
.iv-fallen .face.more {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #3a475a;
  color: #a9b4c4;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  text-decoration: none;
}
.iv-fallen .face.more:hover { color: var(--gold); border-color: var(--gold); }
.iv-fallen-cta {
  display: inline-block;
  margin: 18px 0 0;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
}
.iv-fallen-cta .ar { transition: transform .15s; display: inline-block; }
.iv-fallen-cta:hover .ar { transform: translateX(4px); }

@media (min-width: 768px) {
  .iv-fallen-in { padding: 30px 44px 28px; }
  .iv-fallen .hd { font-size: 32px; }
  .iv-fallen .face { width: 60px; height: 60px; }
}
@media (min-width: 1100px) {
  .iv-fallen-in { padding: 34px 70px 30px; }
  .iv-fallen .face { width: 64px; height: 64px; }
}

@media (min-width: 768px) {
  .iv-hdr { padding: 18px 44px; }
  .iv-hdr .brand img { height: 48px; }
  .iv-hdr .brand .t { font-size: 19px; }
  .iv-intro { padding: 40px 44px 8px; }
  .iv-intro h1 { font-size: 40px; }
  .iv-pq { margin: 40px 44px; }
  .iv-pq blockquote { font-size: 26px; }
  .iv-departed { padding: 22px 44px; gap: 34px; }
  .iv-departed .lbl { width: auto; }
  .iv-departed .nm { font-size: 20px; }
}

@media (min-width: 1100px) {
  .iv-hdr { padding: 20px 70px; }
  .iv-intro { padding: 44px 70px 10px; }
  .iv-intro h1 { font-size: 44px; }
  .iv-departed { padding: 22px 70px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ASTRA PALETTE OVERRIDE
   Astra prints dynamic inline CSS (on the astra-theme-css handle) that paints
   `body,.ast-separate-container{background-color:var(--ast-global-color-4)}`
   (a light blue #E7F6FF) and `h1..h6{color:var(--ast-global-color-2)}` (dark
   navy #0F172A). Those reference ASTRA's vars, not ours, which is why the warm
   papyrus was overridden and dark mode didn't affect the page background, and
   why headings vanished on dark (navy text on navy).

   This stylesheet is enqueued AFTER Astra's inline CSS, so equal-specificity
   rules here win on source order. We route the page background + default text
   color through OUR tokens so both light and navy dark work everywhere. Astra's
   accent vars (buttons/links: color-0/1/5) are left untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* Page background = our token (warm papyrus in light, navy in dark). */
body,
.ast-separate-container {
  background-color: var(--bg);
  background-image: none;
}

/* Default text + headings = our token, so headings stay legible in dark mode.
   Matches Astra's own heading selector specificity; loaded later, so it wins. */
body,
h1, h2, h3, h4, h5, h6,
.entry-content :where(h1, h2, h3, h4, h5, h6) {
  color: var(--fg);
}

/* Astra "separate container" cards (article/single/archive) sit on the page;
   in dark mode give them the surface token instead of hardcoded white. */
[data-theme="dark"] .ast-separate-container .ast-article-post,
[data-theme="dark"] .ast-separate-container .ast-article-single,
[data-theme="dark"] .ast-separate-container .ast-archive-description,
[data-theme="dark"] .ast-separate-container.ast-two-container #secondary .widget {
  background-color: var(--surface);
  background-image: none;
}

/* Elementor section/container backgrounds that pull Astra's light-blue
   global-color-4 (e.g. the About page "Who We Are" band) should match the
   theme surface, not the stray blue. Remap the var itself on non-legacy pages
   so every Elementor section referencing it flows through our token in light
   and dark; legacy pages keep Astra's palette untouched. */
body:not(.iv-legacy-page) {
  --ast-global-color-4: var(--bg);
  --e-global-color-astglobalcolor4: var(--bg);
}

/* Migrated research pages render their own <h1> inside the content, so hide
   Astra's auto page title to avoid the duplicate heading (2026-10-01). */
.page-id-4976 .entry-title,
.page-id-4976 .ast-the-title,
.page-id-4977 .entry-title,
.page-id-4977 .ast-the-title {
  display: none !important;
}


/* Dividers / separators: Elementor + Gutenberg + <hr> set a dark line color
   that vanishes on the navy field. In dark mode route them through --line so
   they stay visible. Elementor uses --divider-color on the separator; the
   border-color/background-color cover its line + Gutenberg + <hr> variants. */
[data-theme="dark"] .elementor-divider .elementor-divider-separator {
  --divider-color: var(--line) !important;
  border-color: var(--line) !important;
}
[data-theme="dark"] .elementor-divider-separator {
  border-block-start-color: var(--line) !important;
}
[data-theme="dark"] hr,
[data-theme="dark"] .wp-block-separator,
[data-theme="dark"] .entry-content hr {
  border-color: var(--line);
  background-color: var(--line);
  color: var(--line);
}
[data-theme="dark"] .elementor hr {
  background-color: var(--line) !important;
}