/*
  Medicine in Mission — "Field Dispatch" design system for WordPress.

  Translated from the Astro prototype's src/styles/global.css (the source of
  truth). Same tokens, same class names, vanilla CSS instead of Tailwind.

  IMPORTANT: every selector here is OPT-IN. Nothing targets bare elements at
  the page level — styles apply only inside a `.fd` wrapper, to the signature
  editorial classes (.dateline, .pull-quote, …), or to `.is-style-fd-*` block
  styles. Installing this stylesheet on a live site changes nothing until a
  page uses these classes. The sitewide typography flip lives in the child
  theme, applied at the END of the rollout.
*/

/* ---- Self-hosted variable fonts (latin subset, weight axis) ---- */
@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-latin-wght-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Fraunces Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/fraunces-latin-wght-italic.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Hanken Grotesk Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Hanken Grotesk Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/hanken-grotesk-latin-wght-italic.woff2) format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
}

/* ---- Design tokens (names match the Astro @theme block exactly) ----
   Declared on :root for the front end and .editor-styles-wrapper for the
   block editor (which may or may not iframe content depending on WP setup). */
:root,
.editor-styles-wrapper {
  --font-sans: "Hanken Grotesk Variable", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Fraunces Variable", Georgia, Cambria, "Times New Roman", serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, "SFMono-Regular", monospace;

  --color-red-50: #fdf2f3;
  --color-red-100: #fbe0e2;
  --color-red-200: #f6c2c7;
  --color-red-300: #ed98a0;
  --color-red-400: #e16470;
  --color-red-500: #d23b48;
  --color-red-600: #bd1f2f;
  --color-red-700: #9e1827;
  --color-red-800: #841823;
  --color-red-900: #6f1822;
  --color-red-950: #3c0a10;

  --color-ink-50: #f7f6f5;
  --color-ink-100: #ebe9e7;
  --color-ink-200: #d7d3d0;
  --color-ink-300: #b9b4b0;
  --color-ink-400: #928c87;
  --color-ink-500: #6f6964;
  --color-ink-600: #5b5651;
  --color-ink-700: #46423e;
  --color-ink-800: #2f2b28;
  --color-ink-900: #1b1815;
  --color-ink-950: #0d0b0a;

  --color-paper-50: #faf9f8;
  --color-paper-100: #f2f1ef;
  --color-paper-200: #e6e4e1;
  --color-paper-300: #d5d2ce;
  --color-paper-400: #b7b2ad;
  --color-paper-500: #948e89;
  --color-paper-600: #736d68;
  --color-paper-700: #585450;
  --color-paper-800: #413d3a;
  --color-paper-900: #312e2b;
  --color-paper-950: #1c1a18;


  --color-surface: #ffffff;
}

/* =====================================================================
   .fd — the scope wrapper. Every Field Dispatch pattern's outer group
   carries this class; inside it, typography follows the design system.
   ===================================================================== */
.fd {
  font-family: var(--font-sans);
  color: var(--color-ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.fd h1,
.fd h2,
.fd h3,
.fd h4 {
  font-family: var(--font-serif);
  font-weight: 560; /* variable-font weight, matches the Astro headings */
  color: var(--color-ink-900);
  text-wrap: balance;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.fd p {
  text-wrap: pretty;
}
.fd ::selection {
  background-color: var(--color-red-200);
  color: var(--color-ink-900);
}
.fd :focus-visible {
  outline: 3px solid var(--color-red-600);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Heading size utilities (Tailwind scale → clamp; md/lg steps folded in). */
.fd .fd-text-display {
  font-size: clamp(2.5rem, 1.3rem + 2.7vw, 4.5rem); /* immersive hero h1 */
}
.fd .fd-text-h1 {
  font-size: clamp(2.25rem, 1.7rem + 1.9vw, 3.75rem); /* page header h1: 4xl→6xl */
}
.fd .fd-text-h2-lg {
  font-size: clamp(2.25rem, 1.95rem + 0.9vw, 3rem); /* section h2: 4xl→5xl */
}
.fd .fd-text-h2 {
  font-size: clamp(1.875rem, 1.72rem + 0.45vw, 2.25rem); /* h2: 3xl→4xl */
}
.fd .fd-text-lede {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.625;
  color: var(--color-ink-700);
}

/* ---- Signature editorial classes (names match the Astro system) ---- */
.dateline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-red-700);
}
/* Dateline over dark photography / ink bands. The inner-container variants
   out-specify Astra's cover-paragraph color rule. */
.fd-on-dark .dateline,
.dateline.fd-on-dark,
p.is-style-fd-dateline.fd-on-dark,
.fd-on-dark p.is-style-fd-dateline,
.fd-hero .wp-block-cover__inner-container p.is-style-fd-dateline.fd-on-dark {
  color: var(--color-red-300);
}

/* Links inside datelines (e.g. ledger entries) keep the dateline look.
   The .fd-scoped duplicates out-specify Astra's content-link underlines. */
.dateline a,
p.is-style-fd-dateline a,
.fd .dateline a,
.fd p.is-style-fd-dateline a {
  color: inherit;
  text-decoration: none;
}
.dateline a:hover,
p.is-style-fd-dateline a:hover,
.fd .dateline a:hover,
.fd p.is-style-fd-dateline a:hover {
  color: var(--color-red-600);
}



/* ---- Buttons ----
   Raw classes (for hand-written markup) and WordPress block-style variants
   (.is-style-fd-* on core/button) share the same rules. The default look for
   a button inside .fd is the black "primary". */
.fd .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.fd .wp-block-button__link {
  background-color: var(--color-ink-900);
  color: var(--color-paper-50);
  border: none;
}
.fd .wp-block-button__link:hover {
  background-color: var(--color-ink-800);
  color: var(--color-paper-50);
}
.fd .is-style-fd-accent .wp-block-button__link,
.is-style-fd-accent .wp-block-button__link {
  background-color: var(--color-red-600);
  color: var(--color-paper-50);
  border: none;
}
.fd .is-style-fd-accent .wp-block-button__link:hover,
.is-style-fd-accent .wp-block-button__link:hover {
  background-color: var(--color-red-700);
  color: var(--color-paper-50);
}
.fd .is-style-fd-outline .wp-block-button__link,
.is-style-fd-outline .wp-block-button__link {
  background-color: transparent;
  border: 1px solid var(--color-ink-800);
  color: var(--color-ink-900);
}
.fd .is-style-fd-outline .wp-block-button__link:hover,
.is-style-fd-outline .wp-block-button__link:hover {
  background-color: var(--color-ink-900);
  color: var(--color-paper-50);
}
.fd .is-style-fd-outline-light .wp-block-button__link,
.is-style-fd-outline-light .wp-block-button__link {
  background-color: transparent;
  border: 1px solid rgba(250, 249, 248, 0.7);
  color: var(--color-paper-50);
}
.fd .is-style-fd-outline-light .wp-block-button__link:hover,
.is-style-fd-outline-light .wp-block-button__link:hover {
  background-color: var(--color-paper-50);
  color: var(--color-ink-900);
}

/* ---- Link CTA — mono label over a red underline ---- */
/* One rule for both the raw class and the paragraph-wrapper variant
   (patterns emit .fd-link-cta so link edits in WP can't strip styling). */
.fd-link-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-bottom: 2px solid var(--color-red-500);
  padding-bottom: 0.125rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink-900);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.fd-link-cta a:hover {
  border-bottom-color: var(--color-red-700);
  color: var(--color-red-700);
}

/* ---- Prose — rich running text (apply .fd-prose to a group of paragraphs) ---- */
.fd-prose {
  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--color-ink-800);
}
.fd-prose > * + * {
  margin-top: 1.25rem;
}
.fd-prose h2 {
  margin-top: 3rem;
  font-size: 1.875rem;
}
.fd-prose h3 {
  margin-top: 2rem;
  font-size: 1.5rem;
}
.fd-prose a {
  font-weight: 500;
  color: var(--color-red-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fd-prose a:hover {
  color: var(--color-red-800);
}
.fd-prose ul,
.fd-prose ol {
  padding-left: 1.5rem;
}
.fd-prose ul {
  list-style: disc;
}
.fd-prose ol {
  list-style: decimal;
}
.fd-prose li + li {
  margin-top: 0.5rem;
}
.fd-prose li::marker {
  color: var(--color-red-500);
}
.fd-prose blockquote {
  border-left: 2px solid var(--color-red-600);
  padding-left: 1.25rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-ink-900);
}
.fd-prose img {
  border-radius: 0.5rem;
  max-width: 100%;
  height: auto;
}
.fd-prose strong {
  font-weight: 600;
  color: var(--color-ink-900);
}

/* Lead prose — editorial drop cap on the first paragraph. */
.prose-lead > p:first-of-type::first-letter,
.fd-prose.prose-lead > p:first-of-type::first-letter {
  float: left;
  margin-right: 0.75rem;
  margin-top: 0.25rem;
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 0.8;
  color: var(--color-red-600);
}
.prose-lead {
  font-size: 1.25rem;
}

/* ---- Pull quote — Fraunces italic with a red left rule ----
   Raw class + block style for core/pullquote (which needs its centered
   defaults neutralised). */
.pull-quote {
  border-left: 2px solid var(--color-red-600);
  padding-left: 1.5rem;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem);
  font-style: italic;
  line-height: 1.375;
  color: var(--color-ink-900);
}
.wp-block-pullquote.is-style-fd-pullquote {
  border: none;
  padding: 0;
  text-align: left;
}
.wp-block-pullquote.is-style-fd-pullquote blockquote {
  border-left: 2px solid var(--color-red-600);
  padding: 0 0 0 1.5rem;
  margin: 0;
}
.wp-block-pullquote.is-style-fd-pullquote p {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem);
  font-style: italic;
  line-height: 1.375;
  color: var(--color-ink-900);
}
.wp-block-pullquote.is-style-fd-pullquote cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ink-500);
}

/* Paragraph block styles: dateline / eyebrow via one click in the editor. */
p.is-style-fd-dateline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-red-700);
  /* Block-level flex, NOT inline-flex: WP's constrained layout only aligns
     block-level children into the centered content column — inline-level
     boxes fall back to the group's full-width left edge, which made page
     header eyebrows hug the viewport edge while the title sat in-column. */
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
p.is-style-fd-dateline::before {
  content: "";
  display: inline-block;
  height: 1px;
  width: 2rem;
  background-color: var(--color-red-600);
}
p.is-style-fd-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ink-500);
}

/* Separator block style: hairline rule. */
hr.wp-block-separator.is-style-fd-rule {
  border: 0;
  border-top: 1px solid var(--color-paper-300);
  background: none;
  height: 0;
  max-width: none;
  opacity: 1;
}

/* =====================================================================
   Group block styles / pattern structure
   ===================================================================== */

/* Ink band — dark editorial section (scripture band, CTA band). */
.fd-ink-band,
.wp-block-group.is-style-fd-ink-band {
  background-color: var(--color-ink-800);
  color: var(--color-paper-50);
}
.fd-ink-band h1,
.fd-ink-band h2,
.fd-ink-band h3,
.wp-block-group.is-style-fd-ink-band h1,
.wp-block-group.is-style-fd-ink-band h2,
.wp-block-group.is-style-fd-ink-band h3 {
  color: var(--color-paper-50);
}
.fd-ink-band .eyebrow,
.wp-block-group.is-style-fd-ink-band .eyebrow,
.fd-ink-band p.is-style-fd-eyebrow,
.wp-block-group.is-style-fd-ink-band p.is-style-fd-eyebrow {
  color: var(--color-paper-400);
}
.fd-ink-band .fd-text-lede,
.wp-block-group.is-style-fd-ink-band .fd-text-lede {
  color: var(--color-paper-100);
}
.fd-ink-band .pull-quote,
.wp-block-group.is-style-fd-ink-band .wp-block-pullquote.is-style-fd-pullquote p {
  color: var(--color-paper-50);
}
/* On ink bands the quote stands alone — no left rule (mirrors the homepage
   scripture band in index.astro), and no theme quote-mark glyph anywhere. */
.wp-block-group.is-style-fd-ink-band .wp-block-pullquote.is-style-fd-pullquote blockquote {
  border-left: none;
  padding-left: 0;
}
.wp-block-pullquote.is-style-fd-pullquote::before,
.wp-block-pullquote.is-style-fd-pullquote blockquote::before,
.wp-block-pullquote.is-style-fd-pullquote blockquote p::before {
  content: none;
}
.wp-block-group.is-style-fd-ink-band .wp-block-pullquote.is-style-fd-pullquote cite {
  color: var(--color-paper-400);
}

/* Prose images — photos dropped between paragraphs on content pages. */
.fd .wp-block-image.fd-prose-image img {
  border-radius: 0.375rem;
  width: 100%;
  height: auto;
}

/* Scripture band as a photo cover (boats-at-sunset with fixed background —
   the photo stays pinned while the page scrolls past). Mirrors the ink-band
   quote treatment above; the heavy selectors counter Astra's (0,3,2)
   `body .wp-block-cover:not(...) p` rule, same battle as the hero. */
.fd-scripture-band.wp-block-cover {
  color: var(--color-paper-50);
}
.fd-scripture-band.wp-block-cover .wp-block-cover__inner-container p.is-style-fd-eyebrow {
  color: var(--color-paper-400);
}
.fd-scripture-band.wp-block-cover .wp-block-cover__inner-container .wp-block-pullquote.is-style-fd-pullquote p {
  color: var(--color-paper-50);
}
.fd-scripture-band .wp-block-pullquote.is-style-fd-pullquote blockquote {
  border-left: none;
  padding-left: 0;
}
.fd-scripture-band .wp-block-pullquote.is-style-fd-pullquote cite {
  color: var(--color-paper-400);
}
@media (prefers-reduced-motion: reduce) {
  .fd-scripture-band.wp-block-cover.has-parallax {
    background-attachment: scroll;
  }
}
/* Touch devices: iOS sizes a fixed background against the whole document
   (a giant blurry zoom), so fall back to a normal static photo there. */
@media (hover: none) {
  .fd-scripture-band.wp-block-cover.has-parallax {
    background-attachment: scroll;
  }
}

/* Editorial card — hairline border, white surface, serif title.
   Works as a block style on core/group (used inside a columns grid). */
.fd-card,
.wp-block-group.is-style-fd-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.5rem;
  border: 1px solid var(--color-paper-200);
  background-color: var(--color-surface);
  transition: border-color 0.2s;
  height: 100%;
}
.fd-card:hover,
.wp-block-group.is-style-fd-card:hover {
  border-color: var(--color-red-400);
}
/* Card image area. With no photo chosen yet, the red→ink gradient fallback
   from Card.astro shows instead of a broken image. */
.fd-card .wp-block-image,
.wp-block-group.is-style-fd-card .wp-block-image {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(
    to bottom right,
    var(--color-red-500),
    var(--color-ink-800)
  );
}
/* Defensive: pages holding legacy hand-inserted cards may still carry an
   empty <img> from the old pattern shape — never show a broken-image icon. */
.fd-card .wp-block-image img:not([src]),
.wp-block-group.is-style-fd-card .wp-block-image img:not([src]) {
  display: none;
}

/* Media cards (fd-card-media) paint the gradient area structurally until a
   real image block is added inside the card — no fragile empty <img> tags. */
.fd-card-media:not(:has(.wp-block-image))::before {
  content: "";
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(
    to bottom right,
    var(--color-red-500),
    var(--color-ink-800)
  );
}
/* A real photo in the media area gets the same 16:10 crop as the gradient
   placeholder, so mixed-ratio photos still make an even card grid. */
.fd-card-media > .wp-block-image,
.wp-block-group.is-style-fd-card > .wp-block-image {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.fd-card .wp-block-image img,
.wp-block-group.is-style-fd-card .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
/* Focal-point override for the 16:10 card crop — shift what stays in frame
   for tall group photos (e.g. keep the back row's heads). */
.fd-card-focus-top img {
  object-position: 50% 18%;
}
.fd-card-focus-bottom img {
  object-position: 50% 82%;
}
.fd-card:hover .wp-block-image img,
.wp-block-group.is-style-fd-card:hover .wp-block-image img {
  transform: scale(1.05);
}
.fd-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.25rem;
}
.fd-card h3,
.wp-block-group.is-style-fd-card h3 {
  margin-top: 0.5rem;
  font-size: 1.25rem;
}
.fd-card h3 a,
.wp-block-group.is-style-fd-card h3 a {
  color: inherit;
  text-decoration: none;
}
.fd-card h3 a:hover,
.wp-block-group.is-style-fd-card h3 a:hover {
  color: var(--color-red-700);
}
.fd-card-body p:not(.dateline):not(.is-style-fd-dateline) {
  color: var(--color-ink-700);
}
.fd-card-body .link-cta,
.fd-card-body .fd-link-cta {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 1.25rem;
}
.fd-card-body .fd-link-cta {
  margin-bottom: 0;
}

/* Page header band — inner-page opener (dateline + serif h1 + intro). */
.fd-page-header {
  background-color: var(--color-paper-50);
  border-bottom: 1px solid var(--color-paper-200);
}
/* Breadcrumbs — red links, muted current page. */
.fd p.fd-crumbs {
  font-size: 0.875rem;
  color: var(--color-ink-500);
  margin-bottom: 1.25rem;
}
.fd p.fd-crumbs a {
  color: var(--color-red-700);
  /* Underlined so links are distinguishable without relying on color (WCAG 1.4.1). */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fd p.fd-crumbs a:hover {
  color: var(--color-red-600);
}

/* Panels — soft rounded boxes (At a glance, planned giving, form shells).
   Default = sand; fd-panel-white = white on sand bands. */
.fd .fd-panel,
.fd-panel {
  background-color: var(--color-paper-100);
  border-radius: 0.75rem;
  padding: 1.75rem;
}
.fd .fd-panel.fd-panel-white,
.fd-panel.fd-panel-white {
  background-color: var(--color-surface);
  border: 1px solid var(--color-paper-200);
}
.fd-panel h3 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}
/* At-a-glance rows — compact bold labels + muted values. */
.fd-panel p.fd-glance-label {
  margin: 1rem 0 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-ink-900);
}
.fd-panel p.fd-glance-value {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  color: var(--color-ink-700);
}

/* Immersive hero — built on core/cover. The two-layer scrim from the Astro
   Hero (95° sweep + bottom fade) is painted by the hero itself (::after) so
   it survives image replacement — WordPress may drop the cover's own overlay
   element when media changes. Paint order: image (z 0) → scrim (::after, z 0,
   later in DOM) → content (z 1). */
.fd-hero.wp-block-cover {
  background-color: var(--color-ink-900);
}
.fd-hero.wp-block-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
      95deg,
      rgba(20, 16, 12, 0.86) 0%,
      rgba(20, 16, 12, 0.55) 40%,
      rgba(20, 16, 12, 0) 72%
    ),
    linear-gradient(to top, rgba(20, 16, 12, 0.6) 0%, rgba(20, 16, 12, 0) 42%);
}
/* Lift the text layer above the scrim, and make the inner container span
   the whole cover: with a custom content position WP shrink-wraps it, which
   breaks bottom-right caption anchoring. Full-bleed container + flex keeps
   the text bottom-left while the caption pins to the photo's true corner,
   and the constrained children align to the same 72rem column as the page. */
.fd-hero.wp-block-cover .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  /* !important: the pattern uses contentPosition:"bottom left" (which places
     the content and gives us full cover height for the absolute caption), and
     core's cover CSS then shrink-wraps this container to width:auto at up to
     (0,5,0) — `.wp-block-cover.has-custom-content-position.has-custom-content
     -position.is-position-bottom-left .wp-block-cover__inner-container`. That
     un-anchors the caption from the photo's right edge, so we force full
     width back. Removing contentPosition instead was tried and reverted: the
     constrained layout then insets the container (caption drifts ~64px off
     the corner). Out-specifying core's selector is an arms race; use this. */
  width: 100% !important;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Keep the text column shrink-wrapped at the left edge — a stretched
     child re-centers its constrained content and shoves the headline to
     mid-hero. The caption is absolute, so this doesn't affect it. */
  align-items: flex-start;
  padding-inline: 1.5rem;
}
/* WP's constrained-layout engine centers the container's children with
   margin auto !important (same war as the caption's own margin) — pin the
   text group back to the hero's left edge. */
.fd-hero.wp-block-cover .wp-block-cover__inner-container > .wp-block-group {
  margin-left: 0 !important;
}
/* Decorative corner rule, top-left, desktop only. */
.fd-hero::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-left: 2px solid rgba(250, 249, 248, 0.8);
  border-top: 2px solid rgba(250, 249, 248, 0.8);
  z-index: 1;
  display: none;
}
@media (min-width: 1024px) {
  .fd-hero::before {
    display: block;
  }
}
.fd-hero h1 {
  color: var(--color-paper-50);
}
/* Hero lede matches the headline color (paper-50) per owner preference.
   Specificity note: Astra's `body .wp-block-cover:not(.has-text-color
   .has-link-color) p` weighs (0,3,2) — hero paragraph selectors need four
   classes to beat it. */
.fd-hero .fd-text-lede,
.fd-hero.wp-block-cover .wp-block-cover__inner-container p.fd-text-lede {
  color: var(--color-paper-50);
  max-width: 36rem;
}
/* Mono photo-caption chip, bottom-right. WP's constrained layout applies
   `margin-inline: auto !important` to children, which drags the chip toward
   its static position — margin:0 !important is required to win. */
.fd-hero .fd-caption,
.fd-hero.wp-block-cover .wp-block-cover__inner-container p.fd-caption {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  left: auto;
  margin: 0 !important;
  width: fit-content;
  z-index: 2;
  border-radius: 0.25rem;
  background-color: rgba(27, 24, 21, 0.75);
  padding: 0.25rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-paper-50);
}

/* Split hero — built on core/media-text: photo right, corner rule, caption. */
.fd-split-hero {
  background-color: var(--color-paper-50);
  border-bottom: 1px solid var(--color-paper-200);
}
.fd-split-hero .wp-block-media-text__media {
  position: relative;
  border-radius: 0.75rem;
  border: 1px solid var(--color-paper-200);
  overflow: hidden;
}
.fd-split-hero .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .fd-split-hero .wp-block-media-text__media::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: -0.75rem;
    width: 4rem;
    height: 4rem;
    border-left: 2px solid var(--color-red-400);
    border-top: 2px solid var(--color-red-400);
    z-index: 1;
  }
}

/* Stats strip — editorial "field numbers" over columns, centered column. */
.fd-stats {
  text-align: center;
  max-width: 56rem;
  margin-inline: auto;
}
.fd-stats .fd-stat-value {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 2.6rem + 1.2vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-red-600);
}
.fd-stats .fd-stat-label {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ink-700);
}
@media (min-width: 782px) {
  .fd-stats .wp-block-column + .wp-block-column {
    border-left: 1px solid var(--color-paper-300);
  }
}

/* Ledger intro carries the editorial top hairline from the prototype. */
.fd-ledger-intro {
  border-top: 1px solid var(--color-paper-300);
  padding-top: 2rem;
}

/* Return ledger — the homepage signature. Group-based entries: each
   .fd-ledger-entry holds a dateline paragraph + a summary paragraph. The
   FIRST entry (the newest — genLedger sorts newest-first) automatically gets
   the red logo cross; no class management needed when adding a year. Editor preview is
   approximate; the front end is exact. */
.fd-ledger {
  margin: 0.5rem 0 0;
  padding: 0;
}
.fd-ledger .fd-ledger-entry {
  position: relative;
  padding-left: 2.25rem;
  padding-bottom: 2.25rem;
}
.fd-ledger .fd-ledger-entry:last-child {
  padding-bottom: 0;
}
/* Marker: hollow circle on the spine. */
.fd-ledger .fd-ledger-entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 9999px;
  border: 2px solid var(--color-paper-400);
  background-color: var(--color-paper-50);
}
/* Connector line down to the next entry. */
.fd-ledger .fd-ledger-entry::after {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 1.375rem;
  bottom: 0.25rem;
  width: 1px;
  background-color: var(--color-paper-300);
}
.fd-ledger .fd-ledger-entry:last-child::after {
  display: none;
}
/* Newest entry (always first): small red cross (the logo mark) instead of
   the circle — automatic, so the annual update needs no class edits. */
.fd-ledger .fd-ledger-entry:first-child::before {
  width: 1rem;
  height: 1rem;
  border: none;
  border-radius: 0;
  background-color: var(--color-red-600);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 0h2v5h5v2H7v5H5V7H0V5h5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 0h2v5h5v2H7v5H5V7H0V5h5z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
}
.fd-ledger .fd-ledger-entry p {
  margin: 0;
}
.fd-ledger .fd-ledger-entry p + p {
  margin-top: 0.5rem;
}
.fd-ledger .fd-ledger-entry p:not(.dateline):not(.is-style-fd-dateline) {
  max-width: 36rem;
  color: var(--color-ink-700);
}
.fd-ledger a {
  text-decoration: none;
}

/* Team card — leadership profile card: centered, circular photo/initial,
   red role line, bio. Mirrors TeamCard.astro. */
.fd-team-card {
  text-align: center;
}
.fd-team-card .fd-card-body {
  padding: 2rem 1.75rem;
}
.fd-team-card p.fd-team-initial {
  width: 8rem;
  height: 8rem;
  margin: 0 auto 1.5rem;
  border-radius: 9999px;
  background-color: var(--color-paper-100);
  border: 1px solid var(--color-paper-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--color-ink-400);
}
.fd-team-card .wp-block-image img {
  border-radius: 9999px;
  aspect-ratio: 1;
  object-fit: cover;
  width: 8rem;
  height: 8rem;
  margin: 0 auto 1.5rem;
}
.fd-team-card:has(.wp-block-image img[src]) p.fd-team-initial {
  display: none;
}
/* Real headshot — a circular portrait in the initial's spot. */
.fd-team-card .wp-block-image.fd-team-photo {
  width: 10rem;
  height: 10rem;
  margin: 0 auto 1.5rem;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid var(--color-paper-200);
}
.fd-team-card .wp-block-image.fd-team-photo img,
.fd-team-card:hover .wp-block-image.fd-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: none;
}
.fd-team-card h3 {
  margin-top: 0;
  font-size: 1.35rem;
}
.fd-team-card p.fd-role {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: var(--color-ink-700);
}
/* Shared red role treatment — team cards and the founder profile render
   role lines on the same Leadership page once a second member exists. */
.fd-team-card p.fd-role strong,
.fd-leader-role strong {
  color: var(--color-red-700);
  font-weight: 500;
}
.fd-team-card p:not(.fd-role):not(.fd-team-initial) {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--color-ink-700);
  text-align: center;
}

/* Founder's-message layout (Our Leadership): full portrait + name/title/bio
   beside the president's letter. Both columns are .fd-prose so the name and
   the letter heading share the same serif h2 treatment. */
.fd-leader-profile .fd-leader-portrait {
  margin: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--color-paper-200);
}
.fd-leader-profile .fd-leader-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 921 / 1289; /* reserve the portrait's box before it loads (no CLS) */
  object-fit: cover;
  border-radius: 0; /* the figure clips; keep the img square-cornered */
}
.fd-leader-profile h2 {
  margin-top: 1.5rem;
}
.fd-leader-role {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-ink-600);
}
/* Photo gallery — square editorial thumbnails with hover zoom (mirrors
   Gallery.astro); lightbox comes from the core "Expand on click" setting. */
.fd .wp-block-gallery,
.fd-gallery {
  gap: 0.75rem;
}
.fd-gallery .wp-block-image {
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: var(--color-paper-200);
  margin: 0;
  /* Keep thumbnails uniform: core galleries stretch items in an incomplete
     last row to fill it, blowing up the final photo. */
  flex-grow: 0 !important;
}
.fd-gallery .wp-block-image img {
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.3s;
}
.fd-gallery .wp-block-image:hover img {
  transform: scale(1.05);
}

/* Gallery lightbox (assets/js/gallery-lightbox.js) — a fixed overlay div
   with dialog semantics; sits above everything including the admin bar. */
.fd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  padding: 2rem 1rem;
  background: rgba(15, 12, 10, 0.92);
  display: grid;
  place-items: center;
}
.fd-lightbox[hidden] {
  display: none;
}
.fd-lightbox-frame {
  position: relative;
  width: fit-content;
  max-width: min(64rem, 96vw);
}
.fd-lightbox-image {
  display: block;
  margin: 0 auto;
  max-height: 80vh;
  width: auto;
  max-width: 100%;
  border-radius: 0.5rem;
}
.fd-lightbox-caption {
  margin: 0.75rem 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-paper-50);
}
.fd-lightbox-close,
.fd-lightbox-prev,
.fd-lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  /* padding:0 defeats the theme's generous button padding, which otherwise
     stretches the circle into an ellipse and squeezes the icon to 0 width. */
  padding: 0;
  border-radius: 9999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink-900);
  cursor: pointer;
}
.fd-lightbox-close svg,
.fd-lightbox-prev svg,
.fd-lightbox-next svg {
  flex: none;
}
.fd-lightbox-close:hover,
.fd-lightbox-prev:hover,
.fd-lightbox-next:hover,
.fd-lightbox-close:focus,
.fd-lightbox-prev:focus,
.fd-lightbox-next:focus {
  background: #ffffff;
  color: var(--color-ink-900);
}
.fd-lightbox button:focus-visible {
  outline: 3px solid var(--color-red-400);
  outline-offset: 2px;
}
.fd-lightbox-close {
  top: 0.75rem;
  right: 0.75rem;
}
.fd-lightbox-close svg {
  width: 1.25rem;
  height: 1.25rem;
}
.fd-lightbox-prev,
.fd-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}
.fd-lightbox-prev {
  left: 0.75rem;
}
.fd-lightbox-next {
  right: 0.75rem;
}
.fd-lightbox-prev svg,
.fd-lightbox-next svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Ledger scroll — cap the homepage trip history at ~3 entries; older years
   reachable by native scroll. Sticky gradient fade cues "more below". */
.fd-ledger.fd-ledger-scroll {
  max-height: 21rem;
  overflow-y: auto;
  position: relative;
  padding-right: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-paper-400) transparent;
}
.fd-ledger.fd-ledger-scroll::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 3rem;
  margin-top: -3rem;
  background: linear-gradient(
    to bottom,
    rgba(242, 241, 239, 0),
    var(--color-paper-100)
  );
  pointer-events: none;
}
p.fd-ledger-hint {
  margin: 0.75rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ink-500);
}

/* Testimonial cards — Fraunces italic quote with red rule + mono attribution. */
.fd-testimonial p.fd-quote {
  margin: 0;
  border-left: 2px solid var(--color-red-600);
  padding-left: 1.25rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--color-ink-900);
}
.fd-testimonial p.fd-quote-attr {
  margin: 1.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ink-500);
}

/* Sand band — the light alternating section background. */
.fd-sand-band,
.wp-block-group.is-style-fd-sand-band {
  background-color: var(--color-paper-100);
}

/* =====================================================================
   Header restyle — Field Dispatch chrome for Astra's default header.
   OPT-IN: only applies when the mim_fd_enable_header filter adds the
   .fd-has-header body class (off by default so the live site's header
   is untouched until its rollout phase).
   ===================================================================== */
.fd-has-header .main-header-bar,
.fd-has-header .ast-primary-header-bar {
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-paper-200);
}
/* Brand: red cross mark + serif wordmark + mono tagline (mirrors Logo.astro). */
.fd-has-header .site-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.fd-has-header .site-title a {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.6rem;
  align-items: center;
  color: var(--color-ink-900);
  text-decoration: none;
}
.fd-has-header .site-title a::before {
  content: "";
  grid-row: 1 / span 2;
  width: 2.5rem;
  height: 2.5rem;
  background-image: url(../img/logo-160.png);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.fd-has-header .site-title a::after {
  content: "Sustainable Global Healthcare";
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red-600);
  margin-top: 0.15rem;
}
/* Menu typography + red hover. */
.fd-has-header .main-header-menu .menu-link {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink-800);
}
/* Narrow-desktop band: Astra keeps the desktop menu all the way down to
   922px, where six items + the Give button overflow the row and the button
   wraps beneath the menu (caught on a ~1024px window, 2026-07-15). Tighten
   link padding and type only in this band so everything holds one row. */
@media (min-width: 922px) and (max-width: 1079px) {
  .fd-has-header .main-header-menu .menu-link {
    font-size: 0.875rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  .fd-has-header .main-header-menu > .menu-item:last-child > .menu-link {
    margin-left: 0.35rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}
.fd-has-header .main-header-menu .menu-link:hover,
.fd-has-header .main-header-menu .current-menu-item > .menu-link,
.fd-has-header .main-header-menu .current-menu-ancestor > .menu-link {
  color: var(--color-red-700);
}
.fd-has-header .main-header-menu .sub-menu {
  border: 1px solid var(--color-paper-200);
  box-shadow: 0 8px 24px rgba(27, 24, 21, 0.08);
}
/* Give — the last top-level menu item becomes the red accent button,
   vertically centered instead of stretching the full header height. */
/* Font-inflation resilience: browser minimum-font-size settings (an
   accessibility feature) can inflate the 0.95rem nav links until the Give
   button no longer fits its row. Never fight the user's font size — wrap
   gracefully instead: the overflowing item lands right-aligned on a tidy
   second row (caught on a visitor's browser, 2026-08-16). */
.fd-has-header .main-header-menu {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 0.25rem;
}
.fd-has-header .main-header-menu > .menu-item:last-child {
  display: flex;
  align-items: center;
}
.fd-has-header .main-header-menu > .menu-item:last-child > .menu-link {
  line-height: 1.4;
  height: auto;
  background-color: var(--color-red-600);
  color: var(--color-paper-50) !important;
  border-radius: 0.375rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
  margin-left: 0.75rem;
  font-weight: 600;
}
.fd-has-header .main-header-menu > .menu-item:last-child > .menu-link:hover {
  background-color: var(--color-red-700);
}
/* Mobile dropdown: Astra reuses .main-header-menu inside
   .ast-mobile-header-content, so the desktop Give-button rules above would
   render it as an edge-to-edge bar flush with the dropdown's bottom. Inset it
   like a proper mobile CTA and give the menu bottom breathing room. */
.fd-has-header .ast-mobile-header-content .main-header-menu > .menu-item:last-child {
  display: block;
  padding: 0.5rem 1.1rem 1.1rem;
}
.fd-has-header .ast-mobile-header-content .main-header-menu > .menu-item:last-child > .menu-link {
  display: block;
  text-align: center;
  margin-left: 0;
}

/* Astra's scroll-to-top widget ships in stock blue — restyle on-brand.
   Gated with the header chrome (fd-has-header) so the live site is
   untouched until that phase. */
.fd-has-header #ast-scroll-top {
  background-color: var(--color-ink-900);
  color: var(--color-paper-50);
  border-radius: 0.375rem;
}
.fd-has-header #ast-scroll-top:hover {
  background-color: var(--color-red-600);
}

/* =====================================================================
   Site footer — the ink footer from Footer.astro, rendered by the plugin
   on every page (Astra's own footer is hidden via .fd-has-footer).
   Layout is self-contained CSS (no core layout supports) so the markup
   renders correctly from any hook.
   ===================================================================== */
.fd-has-footer .site-footer {
  display: none !important;
}
.fd-footer {
  background-color: var(--color-ink-900);
  color: var(--color-paper-100);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.fd-footer .fd-footer-inner {
  max-width: 72rem;
  margin-inline: auto;
  padding: 5rem 1.5rem 2rem;
}
.fd-footer a {
  text-decoration: none;
}
.fd-footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .fd-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .fd-footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Footer brand: round logo beside the wordmark + tagline. */
.fd-footer .fd-footer-ident {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  align-items: center;
}
.fd-footer .fd-footer-ident::before {
  content: "";
  grid-row: 1 / span 2;
  width: 3rem;
  height: 3rem;
  background-image: url(../img/logo-160.png);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.fd-footer .fd-footer-brand {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
}
.fd-footer .fd-footer-tagline {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-red-300);
}
.fd-footer .fd-footer-contact {
  margin-top: 1.25rem;
}
.fd-footer .fd-footer-contact p {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: var(--color-paper-200);
}
.fd-footer .fd-footer-contact a {
  color: var(--color-paper-200) !important;
}
.fd-footer .fd-footer-contact a:hover {
  color: #ffffff !important;
}
/* Social icons — circular bordered buttons (mirrors Footer.astro). */
.fd-footer .fd-footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.fd-footer .fd-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-ink-700);
  border-radius: 9999px;
  color: var(--color-paper-200) !important;
  transition: border-color 0.2s, color 0.2s;
}
.fd-footer .fd-footer-social a:hover {
  border-color: var(--color-red-300);
  color: #ffffff !important;
}
.fd-footer .fd-footer-social svg {
  width: 1rem;
  height: 1rem;
}
.fd-footer .fd-footer-heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
}
.fd-footer .fd-footer-heading a {
  color: var(--color-red-300) !important;
}
.fd-footer .fd-footer-heading a:hover {
  color: var(--color-red-200) !important;
}
.fd-footer ul.fd-footer-links {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.fd-footer ul.fd-footer-links li {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}
.fd-footer ul.fd-footer-links a {
  color: var(--color-paper-200) !important;
}
.fd-footer ul.fd-footer-links a:hover {
  color: #ffffff !important;
}
.fd-footer .fd-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-ink-700);
  font-size: 0.875rem;
  color: var(--color-paper-300);
}
.fd-footer .fd-footer-bottom p {
  margin: 0;
}
.fd-footer .fd-footer-bottom a {
  color: var(--color-red-300) !important;
}
.fd-footer .fd-footer-bottom a:hover {
  color: #ffffff !important;
}

/* =====================================================================
   Sticky Give — persistent CTA (Project HOPE pattern). The wrapper is
   always mounted; assets/js/sticky-give.js toggles .is-visible once the
   hero/page header scrolls out of view. Hidden state keeps pointer-events
   off so the invisible button can never intercept clicks.
   ===================================================================== */
.fd-sticky-give {
  position: fixed;
  top: 1rem;
  right: 1.5rem;
  z-index: 9990; /* above content bands; below the lightbox (100000) and admin bar */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.fd-sticky-give.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.admin-bar .fd-sticky-give {
  top: calc(1rem + 32px);
}
.fd-sticky-give-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.5rem;
  border-radius: 0.375rem;
  background-color: var(--color-red-600);
  color: var(--color-paper-50);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(27, 24, 21, 0.25);
  transition: background-color 0.2s;
}
.fd-sticky-give-btn:hover {
  background-color: var(--color-red-700);
  color: var(--color-paper-50);
}
@media (max-width: 640px) {
  /* Mirror Project HOPE on small screens: a full-width bar pinned to the top. */
  .fd-sticky-give {
    top: 0;
    right: 0;
    left: 0;
  }
  body.admin-bar .fd-sticky-give {
    top: 46px;
  }
  .fd-sticky-give-btn {
    display: flex;
    width: 100%;
    border-radius: 0;
    padding: 0.9rem 1rem;
    box-shadow: 0 3px 12px rgba(27, 24, 21, 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fd-sticky-give {
    transition: none;
  }
}

/* =====================================================================
   Announcement bar — dismissible sitewide notice (Project HOPE pattern).
   Rendered on wp_body_open only while the owner's "mim-alert-bar" synced
   pattern exists; an inline script sets [hidden] for the session on
   dismiss. Sits in normal flow above the header, so it never collides
   with the fixed sticky-Give button (which only appears after scrolling).
   ===================================================================== */
.fd-alert-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 3.25rem;
  background-color: var(--color-red-600);
  color: var(--color-paper-50);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
}
.fd-alert-bar[hidden] {
  display: none;
}
.fd-alert-bar-inner p {
  margin: 0;
  color: var(--color-paper-50);
}
.fd-alert-bar-inner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fd-alert-bar-inner a:hover {
  color: var(--color-red-100);
}
.fd-alert-bar-close {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-paper-50);
  font-family: var(--font-sans);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.fd-alert-bar-close:hover {
  background-color: var(--color-red-700);
  color: var(--color-paper-50);
}
@media (max-width: 640px) {
  .fd-alert-bar {
    justify-content: flex-start;
    padding: 0.6rem 3rem 0.6rem 1rem;
    font-size: 0.875rem;
    text-align: left;
  }
}

/* =====================================================================
   News / blog — the archive and single posts render through our own
   templates (blog-archive.php, blog-single.php) when mim_fd_enable_blog is
   on. Astra wraps template output in a boxed "separate-container"; neutralize
   that so our full-bleed page-header + constrained content read like the
   rest of the site. Scoped to .fd-has-blog so nothing changes until enabled.
   ===================================================================== */
/* Our templates replace Astra's index/single templates entirely, so only
   header.php's .ast-container survives — the other Astra wrappers (#main,
   #primary, .ast-article-single) never exist on these views (verified; the
   previous rules targeting them were dead). .archive covers the category/
   tag/date/author listings the archive template also serves. */
.fd-has-blog.blog .site-content .ast-container,
.fd-has-blog.single-post .site-content .ast-container,
.fd-has-blog.archive .site-content .ast-container {
  display: block; /* Astra makes .ast-container a flex row — stack our band + grid instead */
  max-width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
}
/* Native editor content on single posts: constrain to the prose column.
   Generator-synced posts embed their own .fd section wrappers, which the
   > :not(.fd) guard leaves untouched. */
.fd-post-content {
  padding-bottom: 3.5rem;
}
.fd-post-content > :not(.fd) {
  width: min(42rem, calc(100% - 3rem));
  margin-left: auto;
  margin-right: auto;
}
.fd-post-content .fd-post-pages {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* News card grid — the constrained wrapper + 2-up grid the archive template
   fills with .fd-card markup (reuses the card styling site-wide). Stacks at
   781px to match core wp:columns, so news cards break like every other grid. */
.fd-blog-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
}
.fd-blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 781px) {
  .fd-blog-grid {
    grid-template-columns: 1fr;
  }
}
.fd-blog-pagination-wrap {
  margin-top: 2.5rem;
}
.fd-blog-pagination-wrap .nav-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fd-blog-pagination-wrap .page-numbers {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-paper-200);
  border-radius: 0.25rem;
  color: var(--color-ink-700);
  text-decoration: none;
}
.fd-blog-pagination-wrap a.page-numbers:hover {
  border-color: var(--color-red-600);
  color: var(--color-red-700);
}
.fd-blog-pagination-wrap .page-numbers.current {
  background-color: var(--color-ink-900);
  border-color: var(--color-ink-900);
  color: var(--color-paper-50);
}

/* ---- Scroll reveal (progressive enhancement; reveal.js ships disabled) ---- */
[data-reveal] {
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.fd-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
}
.fd-reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .fd-card .wp-block-image img,
  .wp-block-group.is-style-fd-card .wp-block-image img,
  .fd-gallery .wp-block-image img,
  .fd-link-cta a {
    transition: none;
  }
}

/* Visible keyboard-focus rings on interactive chrome (alert bar close,
   lightbox controls, gallery triggers) — WCAG 2.4.7. */
.fd-alert-bar-close:focus-visible,
.fd-lightbox-close:focus-visible,
.fd-lightbox-prev:focus-visible,
.fd-lightbox-next:focus-visible,
.fd-gallery .wp-block-image img:focus-visible {
  outline: 2px solid var(--color-red-500);
  outline-offset: 2px;
}

/* =====================================================================
   Grid / list view toggle (fd-cards-switchable indexes, e.g. Medical
   Mission Trips). cards-view.js injects the toolbar and toggles
   .fd-cards-list; the CSS below re-flows the SAME cards into compact
   editorial rows. Without JS neither class appears and the grid is
   untouched.
   ===================================================================== */
.fd-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.fd-view-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ink-500);
}
.fd-view-buttons {
  display: flex;
  border: 1px solid var(--color-paper-300);
  border-radius: 0.375rem;
  overflow: hidden;
}
.fd-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink-500);
  cursor: pointer;
}
.fd-view-btn + .fd-view-btn {
  border-left: 1px solid var(--color-paper-300);
}
.fd-view-btn svg {
  width: 1rem;
  height: 1rem;
}
.fd-view-btn[aria-pressed="true"] {
  background-color: var(--color-ink-900);
  color: var(--color-paper-50);
}
.fd-view-btn:focus-visible {
  outline: 2px solid var(--color-red-500);
  outline-offset: -2px;
}
/* "Load more" — shared by the news archive (fd-blog-wrap link, rendered by
   blog-archive.php) and switchable card indexes (button injected by
   cards-view.js). */
.fd-load-more {
  display: flex;
  justify-content: center;
  padding: 2rem 1.5rem 0.5rem;
}
.fd-load-more a,
.fd-load-more button {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ink-900);
  background: transparent;
  border: 1px solid var(--color-ink-900);
  border-radius: 0.375rem;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  text-decoration: none;
}
.fd-load-more a:hover,
.fd-load-more button:hover {
  background-color: var(--color-ink-900);
  color: var(--color-paper-50);
}
.fd-load-more a:focus-visible,
.fd-load-more button:focus-visible {
  outline: 2px solid var(--color-red-500);
  outline-offset: 2px;
}
.fd-load-more a[aria-busy="true"] {
  opacity: 0.55;
  cursor: progress;
}
/* Voices grid: equal-height quote cards — the quote grows to fill, so the
   attribution and the Read-the-full-story link pin to the bottom and every
   card in a row matches height regardless of quote length. */
.fd .wp-block-column > .fd-testimonial {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.fd-testimonial .fd-quote {
  flex-grow: 1;
}
/* Rows hidden behind "Show more" must stay hidden in list view too — the
   display:contents on .fd-cards-list columns would otherwise override the
   browser's own [hidden] rule (author styles beat UA styles). */
.fd-cards-switchable > .wp-block-columns[hidden] {
  display: none !important;
}
/* News archive in list mode: collapse the 2-col blog grid to stacked rows
   (the shared .fd-cards-list card-row styles do the rest). */
.fd-cards-list .fd-blog-grid {
  display: block;
}
/* List mode: dissolve the column boxes so cards stack, hide card media,
   and restyle each card as a hairline-separated row. */
.fd-cards-list .wp-block-columns,
.fd-cards-list .wp-block-column {
  display: contents;
}
.fd-cards-list .is-style-fd-card > .wp-block-image {
  display: none;
}
.fd-cards-list .is-style-fd-card {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-paper-200);
  background: transparent;
  box-shadow: none;
}
.fd-cards-list .is-style-fd-card:hover {
  transform: none;
  box-shadow: none;
}
.fd-cards-list .fd-card-body {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  gap: 0.35rem 1.5rem;
  align-items: baseline;
  padding: 1.1rem 0.25rem;
}
.fd-cards-list .fd-card-body > .is-style-fd-dateline {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.fd-cards-list .fd-card-body > h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 1.2rem;
}
.fd-cards-list .fd-card-body > p:not(.is-style-fd-dateline):not(.fd-link-cta) {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-ink-600);
}
.fd-cards-list .fd-card-body > .fd-link-cta {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .fd-cards-list .fd-card-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .fd-cards-list .fd-card-body > .is-style-fd-dateline,
  .fd-cards-list .fd-card-body > h3,
  .fd-cards-list .fd-card-body > p:not(.is-style-fd-dateline):not(.fd-link-cta),
  .fd-cards-list .fd-card-body > .fd-link-cta {
    grid-column: 1;
    grid-row: auto;
  }
}