/**
 * =====================================================================
 * GLOBAL STYLESHEET
 * =====================================================================
 *
 * PURPOSE OF THIS FILE:
 * Holds ONLY things that are truly shared across every component:
 *   - CSS custom properties (variables)
 *   - Small spacing/utility helper classes
 *
 * WHAT DOES NOT BELONG HERE:
 *   - Anything specific to a single component (that belongs in that
 *     component's own style.css, e.g. components/hero/style.css)
 *   - Anything that overrides Blocksy's own design system. We EXTEND
 *     Blocksy, we never fight it.
 *
 * NAMING CONVENTION:
 * All custom properties are prefixed with --bc- (Blocksy Child) to
 * avoid clashing with variables Blocksy itself may define.
 * =====================================================================
 */

:root {
	/* Spacing scale — used by every component for consistent rhythm. */
	--bc-space-xs: 0.5rem;
	--bc-space-sm: 1rem;
	--bc-space-md: 1.5rem;
	--bc-space-lg: 2.5rem;
	--bc-space-xl: 4rem;

	/* Radius + shadow tokens — reused so components feel cohesive. */
	--bc-radius-sm: 4px;
	--bc-radius-md: 8px;
	--bc-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.08);

	/*
	 * Color tokens intentionally fall back to Blocksy's own CSS
	 * variables where possible, so the component system automatically
	 * matches whatever color scheme is set in the Blocksy Customizer.
	 * Adjust the var(--theme-palette-color-X) names if your Blocksy
	 * setup uses different variable names.
	 */
	--bc-color-text: var(--theme-text-color, #1a1a1a);
	--bc-color-muted: var(--theme-text-color-2, #6b7280);
	--bc-color-accent: var(--theme-palette-color-1, #2563eb);
	--bc-color-surface: var(--theme-palette-color-8, #ffffff);
	--bc-color-border: rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------------------------
 * Small utility classes, used across multiple components so we don't
 * repeat the same one-off rule in five different style.css files.
 * ---------------------------------------------------------------- */

.bc-container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bc-space-sm);
	padding-right: var(--bc-space-sm);
}

.bc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.bc-text-center {
	text-align: center;
}

/**
 * =====================================================================
 * SITE DESIGN SYSTEM (Borderless Alliance — "Foundry Press")
 * =====================================================================
 * Everything below this line is the project's real, site-wide design
 * system — tokens, reset, and shared utility classes (.container,
 * .section, .grid, .btn, .reveal, .to-top, etc.) — kept in lock-step
 * with the canonical static stylesheet at the project root,
 * css/style.css. Only the rules genuinely SHARED across more than one
 * component (or needed on every page regardless of which shortcodes
 * it uses) live here; everything page/component-specific lives in
 * that component's own style.css instead — see each component folder.
 *
 * 2026 REDESIGN NOTE: the static site moved from an earlier
 * gold/ivory/STIX-Two-Text/rounded-pill design to this black/white/red
 * "Foundry Press" system (Instrument Serif for editorial headings,
 * Instrument Sans for structure/body, Fragment Mono for real numerals
 * and reference codes, sharp 2px corners instead of pills). This
 * block was updated to match — if you change the typefaces/palette
 * again, update BOTH css/style.css and this file (+ inc/head-assets.php's
 * Google Fonts enqueue) together, per this project's existing rule.
 *
 * WHY THIS IS APPENDED RATHER THAN REPLACING THE --bc-* SET ABOVE:
 * The generic `hero`/`team`/`faq`-style scaffolding this framework
 * shipped with originally depended on the --bc-* variables and .bc-*
 * utility classes defined above. None of those names collide with
 * anything below (different prefix, different naming style entirely),
 * so both systems safely coexist in one file. Nothing above this line
 * needs to change.
 * =====================================================================
 */

/* ---------- Design tokens ---------- */
:root {
  /* LOGO-DERIVED PALETTE: sampled directly from the client's logo.png
     (dominant pixels: #FFFFFF white, #040707 black, #ED1C24 red).
     --red is nudged two points darker than the raw logo red so white
     text/links on it still clear 4.5:1 AA; --red-bright is nudged
     lighter from the same logo red so it clears >5:1 sitting on
     black. Both read as the same red as the logo at a glance. */
  --white: #ffffff;
  --ink: #040707;      /* true black, matching the logo exactly */
  --ink-2: #1a1a1a;    /* raised black panel */
  --red: #e11b22;      /* the brand red, from the logo */
  --red-deep: #b4161b;
  --red-bright: #f03e45; /* same red, lightened — for text/accents ON black */
  --ivory: #f5f5f3;    /* barely-tinted white (alternating sections) */
  --sand: #ebebe9;     /* deeper neutral (nested surfaces) */
  --slate: #6b6b6b;    /* grey — secondary text, a tint of black */
  --line: #e3e3e1;     /* hairline on a light surface */
  --focus: #f03e45;

  --max: 1400px;
  --gutter: clamp(20px, 4vw, 40px);

  /*
   * TYPE DIRECTION — kept in lock-step with css/style.css. Instrument
   * Sans carries headlines' STRUCTURE (h3/h4, nav, labels, body) at
   * moderate weight; Instrument Serif carries every EDITORIAL
   * statement (h1/h2 — see the base typography rules below); Fragment
   * Mono is reserved for real numerals/counters/reference codes only
   * (--font-display and --font-sans are deliberately the SAME family —
   * see css/style.css's own :root "TYPE, revised" note — kept as two
   * named tokens for semantic clarity in components that reach for
   * "the display face" vs. "the running-text face").
   */
  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, Menlo, monospace;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.6vw, 1.45rem);
  --step-2: clamp(1.35rem, 1.1rem + 1vw, 1.6rem);
  --step-3: clamp(1.75rem, 1.3rem + 1.8vw, 2.2rem);
  --step-4: clamp(2.25rem, 1.6rem + 2.8vw, 3.2rem);
  --step-5: clamp(2.8rem, 2rem + 4vw, 4.5rem);

  --shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.1), 0 2px 8px rgba(20, 23, 26, 0.06);
  --shadow-md: 0 10px 24px rgba(20, 23, 26, 0.16);
  --shadow-lg: 0 24px 50px rgba(20, 23, 26, 0.22);

  /* Sharp, notched-tag corners instead of pills/rounded cards. */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --notch: 14px;

  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --dur: 0.5s;
}

/* ---------- Reset ---------- */
/*
 * NOTE ON SCOPING: the rules below are deliberately written as
 * ".entry-content {selector}" rather than bare "{selector}" (e.g.
 * ".entry-content a" instead of just "a"). ".entry-content" is
 * Blocksy's own standard WordPress wrapper around the actual page/post
 * content area — confirmed in Blocksy's own documentation.
 *
 * This does two things at once:
 *   1. Gives these rules enough specificity to reliably win against
 *      Blocksy's own content-area typography (a bare "h1" selector,
 *      as used here, sits at the very bottom of the specificity
 *      scale — see the real conflict this caused, resolved in
 *      components/page_hero/style.css's own comment on this topic).
 *   2. Just as important: CONFINES these rules to the content area
 *      only. Without ".entry-content", strengthening something like
 *      "a { color: inherit; }" would also override link colors inside
 *      Blocksy's own header, navigation menu, and footer widgets —
 *      areas this project was never meant to restyle (see the
 *      original brief: "Do NOT replace Blocksy features. Only extend
 *      it."). Scoping to .entry-content keeps that promise while still
 *      fixing the actual specificity problem.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -moz-osx-font-smoothing: grayscale; }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.entry-content img, .entry-content svg, .entry-content video { display: block; max-width: 100%; height: auto; }

/* Base <button> reset — ported from the static site's own css/style.css
   (its line 117) but missing from this file until now; discovered
   while building the main_nav component's real <button> elements
   (.nav__toggle/.nav__sub-toggle), which need this to render with the
   right cursor/font/color instead of the browser's native <button>
   chrome. Applies site-wide, same as every other component's own
   button (contact_form's submit, document_library's Preview, …) —
   BEFORE this, each of those relied on Blocksy's own generic button
   reset happening to be close enough; this makes it exact. */
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.entry-content a { color: inherit; text-decoration: none; }
.entry-content button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.entry-content input, .entry-content textarea, .entry-content select { font: inherit; color: inherit; }

/* Focus & Selection */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 0; }
::selection { background: var(--red); color: var(--white); }

/* Visually hidden but accessible to assistive tech (matches css/style.css's .sr-only). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip link — offscreen by default, visible & on-brand on focus. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: 12px 18px; border-radius: 0 0 var(--radius-md) 0;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- Shared Layout Utilities ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(70px, 9vw, 130px); position: relative; }
.section--tight { padding-block: clamp(50px, 6vw, 80px); }
.section--ink { background: var(--ink); color: var(--white); }
.section--ivory { background: var(--ivory); }

.grid { display: grid; gap: 30px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Typography ----------
 * Serif carries every editorial statement (h1/h2 — the things a
 * reader is meant to feel); the clean sans carries structure and
 * function (h3/h4, nav, labels, body) — matching css/style.css's own
 * base rule exactly. Same .entry-content scoping reasoning as Reset.
 */
.entry-content h1, .entry-content h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: inherit;
}
.entry-content h3, .entry-content h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0 0 0.6em;
  color: inherit;
}
.entry-content h1 { font-size: var(--step-5); }
.entry-content h2 { font-size: var(--step-4); }
.entry-content h3 { font-size: var(--step-2); font-weight: 600; }
.entry-content h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: 0; }
.entry-content p { margin: 0 0 1em; color: var(--ink-2); }
.entry-content p:last-child { margin-bottom: 0; }
.entry-content strong { font-weight: 600; }
.serif { font-family: var(--font-display); }

/*
 * "span.eyebrow" + font-family !important: same confirmed fix as
 * .stat__num/.crumbs/.mv__label elsewhere in this project — a bare
 * single-class selector loses to Blocksy's own styling, and
 * font-family specifically needs !important, not just specificity.
 * This one matters more than most since .eyebrow is shared across
 * page_hero, our_story, mission_vision, activities, and statistics.
 *
 * NOTE: the eyebrow's own text is --ink (near-black), NOT red — only
 * its short leading bar (::before) carries the brand red. This is a
 * deliberate change from the previous design system (where the text
 * itself was red) — confirm against css/style.css's ".eyebrow" rule
 * before "restoring" red text here, it would be a regression.
 *
 * BOTH "span.eyebrow" AND "p.eyebrow": every usage of this class is a
 * <span> except partners_marquee's intro label, which the real markup
 * renders as a <p class="eyebrow"> instead (confirmed in index.html)
 * — both need the same specificity-vs-Blocksy fix.
 */
span.eyebrow, p.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans) !important;
  font-weight: 600;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before { content: ""; width: 30px; height: 3px; background: var(--red); }
.section--ink .eyebrow { color: rgba(255, 255, 255, 0.7); }
.section--ink .eyebrow::before { background: var(--red-bright); }

/*
 * NOTE ON "p.lede" (NOT JUST ".lede"): a bare, single-class selector
 * like ".lede" has LOWER CSS specificity than the ".entry-content p"
 * rule above (one class vs. one class + one tag) — meaning, despite
 * being declared later in this same file, ".lede" alone would still
 * LOSE to ".entry-content p" for any property both rules set. Adding
 * the "p" tag to the selector brings it up to the same specificity
 * level, so it wins here.
 */
p.lede { font-size: var(--step-1); color: var(--ink); max-width: 62ch; }
.section--ink .lede { color: rgba(255,255,255,0.85); }

/* ---------- Section Header Pattern ---------- */
.section__head {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end;
  margin-bottom: 60px;
}
.section__head p { color: var(--slate); }
.section--ink .section__head p { color: rgba(255,255,255,0.7); }
@media (max-width: 900px) {
  .section__head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
}

/* A single left-aligned block instead of the eyebrow/heading-left,
   lede-right split — used by the homepage's index-list and impact
   sections (see components/mandates_index/style.css and
   components/impact_stat/style.css). */
.index-head { max-width: 640px; margin-bottom: 48px; }
.index-head .lede { color: var(--slate); }

/* ---------- Global Buttons ----------
 * Sharp corners (border-radius: 0, matching --radius-* tokens above),
 * uppercase tracked label — a deliberate change from the previous
 * design system's rounded pill buttons. "a.btn"/"button.btn" (not just
 * ".btn") for the same specificity-vs-Blocksy reasoning documented
 * throughout this project (see p.lede above, and page_hero/style.css's
 * own h1 note). "button.btn" added alongside "a.btn" once a second
 * consumer appeared — contact_form's submit button, a real <button>,
 * not a link, needing the exact same visual treatment.
 */
a.btn, button.btn {
  --btn-bg: var(--ink); --btn-fg: var(--white); --btn-border: var(--ink);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 28px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 0;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
a.btn:hover, button.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--btn-fg); }
a.btn:active, button.btn:active { transform: translateY(0) scale(0.985); }
svg.btn__arrow { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
a.btn:hover .btn__arrow, button.btn:hover .btn__arrow { transform: translateX(4px); }
a.btn--primary, button.btn--primary { --btn-bg: var(--red); --btn-fg: var(--white); --btn-border: var(--red); }
a.btn--primary:hover, button.btn--primary:hover { --btn-bg: var(--red-deep); --btn-border: var(--red-deep); }
a.btn--ghost, button.btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-border: rgba(255,255,255,0.5); }
a.btn--ghost:hover, button.btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-border: var(--white); }
a.btn--dark, button.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-border: var(--ink); }
a.btn--outline, button.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--ink); }
a.btn--outline:hover, button.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--white); }
button.btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/*
 * ---------- Shared Feature Image + Badge ----------
 * Used by BOTH our_story and feature_block. Deliberately placed here
 * in global.css (which loads unconditionally on every page) rather
 * than inside either component's own style.css — a rule shared across
 * two component folders would otherwise silently never load at all on
 * a page using only one of them, since each component's own CSS file
 * only loads when THAT specific shortcode is present.
 */
div.feature__media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/5; background: var(--sand);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
span.feature__badge {
  position: absolute; bottom: 20px; left: 20px;
  padding: 12px 18px; background: var(--white);
  border-radius: 2px; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-md);
}
.feature__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/*
 * ---------- Shared Partner Logo Mark ----------
 * Used by BOTH partners_marquee (its static "grid" layout mode) and
 * partners_focus's logo label — same "shared across ≥2 component
 * folders → global.css" reasoning as .feature__media/.feature__badge
 * above. partners_marquee's OWN style.css adds the marquee-specific
 * sizing override (".partners-track .plogo") on top of this base.
 */
.plogo {
  aspect-ratio: 3/2; border: 1px solid var(--line); border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 22px;
  background: var(--white);
  transition: transform 0.3s var(--ease), border-color 0.35s var(--ease), box-shadow 0.3s var(--ease);
}
.plogo:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.plogo img { width: 100%; height: 100%; object-fit: contain; }
.plogo__name {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink);
}

/*
 * Shared by BOTH page_hero and article_component — same reasoning as
 * the rules above: a rule shared across two component folders has to
 * live somewhere that always loads (here), not inside either
 * component's own conditionally-loaded style.css.
 *
 * NOTE: the "sep" separator is --slate (grey), NOT red — another
 * deliberate change from the previous design system, confirmed
 * against css/style.css's own ".crumbs .sep" rule.
 */
nav.crumbs { font-family: var(--font-sans) !important; font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--slate); margin-bottom: 28px; }
.crumbs a { color: var(--slate); }
.crumbs .sep { margin: 0 12px; color: var(--slate); }

/* ---------- Interactive Helpers / Utilities ---------- */
.text-center { text-align: center; }
.mt-lg { margin-top: 60px; }
.mb-lg { margin-bottom: 60px; }
@media (max-width: 700px) { .hide-mobile { display: none; } }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 30;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.3s var(--ease);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--red); }
.to-top svg { width: 18px; height: 18px; }

/* Updating/sequential numbers shouldn't jitter as digits change —
   shared across every component that animates or displays a counter. */
.hero__counter, .stat__num, .acard__num, .tl-year, .gov__num,
.docs-results-count, .docs-results-count b, .docs-filter-label .val,
.doc-card__meta, .news-pagination__status, .docs-page-btn, .lb__counter,
.gallery-card__badge, .news__date-day, .news__date-year {
  font-variant-numeric: tabular-nums;
}

/* ---------- Shared form validation / anti-spam utilities ----------
 * Used by every component with a form (newsletter, contact_form).
 * Centralized here rather than duplicated per component.
 */
.form__error {
  display: block; margin-top: 6px;
  font-size: 12.5px; font-weight: 500; color: var(--red);
}
.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"],
.form__field select[aria-invalid="true"] { border-color: var(--red); }
.form__msg { min-height: 18px; margin-top: 10px; font-size: 13px; color: var(--red); }
.form__msg.is-ok { color: #1a7e3e; }
.form__msg.is-error { color: var(--red); }
.form__field input:focus-visible,
.form__field textarea:focus-visible,
.form__field select:focus-visible,
.docs-search input:focus-visible,
.docs-select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* ---------- Prose (Privacy / Terms — long-form legal/editorial content) ----------
 * Not tied to any shortcode/component — Legal pages are just a
 * [page_hero] followed by ordinary native WordPress block/page
 * content (see this theme's README for the documented editorial
 * workflow: wrap the body content in a core Group block with the
 * additional CSS class "prose section container"). Since nothing
 * triggers this file's conditional per-component CSS loading for
 * plain page content, ".prose" has to live somewhere that always
 * loads — here, not in any single component's own style.css.
 */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-2); margin: 1.6em 0 0.5em; }
.prose h3 { font-size: var(--step-1); font-family: var(--font-sans); font-weight: 600; margin: 1.4em 0 0.4em; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { margin: 0 0 1em 1.1em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--red); border-bottom: 1px solid currentColor; }
.prose a:hover { color: var(--red-deep); }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--ivory); padding: 1px 5px; border-radius: 3px; }
.prose__meta {
  font-size: 13px; color: var(--slate);
  border-left: 2px solid var(--red); padding-left: 16px; margin-bottom: 2.4em;
}

/* Honeypot — present in the DOM for bots, removed from view & the a11y tree. */
.form__hp {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/**
 * ---------- Shared filterable archive toolbar ----------
 * Used by [news] (archive mode: Latest Updates/Upcoming Events/Press
 * Releases), [document_library], and [media_gallery] (Photo/Video
 * Gallery) — all four share this exact toolbar/grid skeleton in the
 * real design (css/style.css's own comment there: "used on the
 * Resource Library, Photo/Video Gallery, and the three News pages,
 * all of which share this exact toolbar/grid structure"). Genuinely
 * shared across 3+ component folders, so it lives here rather than
 * being duplicated three times — same reasoning as .feature__media
 * above. Each component's own style.css adds only what's specific to
 * IT (card shapes, the lightbox, the preview modal).
 */
.browse { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.browse__main { min-width: 0; }
.browse__sidebar .docs-toolbar { position: sticky; top: 96px; }
@media (max-width: 900px) {
  .browse { grid-template-columns: 1fr; }
  .browse__sidebar .docs-toolbar { position: static; }
}

.docs-toolbar {
  position: relative; z-index: 2;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 3vw, 40px);
}
.docs-search { position: relative; margin-bottom: 22px; }
.docs-search input {
  width: 100%; padding: 15px 20px 15px 48px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--white); font-size: 15px; color: var(--ink);
  outline: none; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.docs-search input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(27,27,27,0.06); }
.docs-search svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--slate); pointer-events: none;
}

.docs-filters { display: grid; grid-template-columns: 1fr; gap: 22px; }
.docs-toolbar__footer { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.docs-filter-label {
  display: block; font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 10px;
}
.docs-filter-label .val { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }
.docs-select {
  width: 100%; padding: 13px 40px 13px 16px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6560' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
  font-size: 14.5px; color: var(--ink); appearance: none; -webkit-appearance: none; outline: none;
  transition: border-color 0.25s var(--ease);
}
.docs-select:focus { border-color: var(--ink); }
.docs-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.docs-range { width: 100%; }
.docs-range input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 2px; background: var(--line); outline: none; cursor: pointer;
}
.docs-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); border: 3px solid var(--white); box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  margin-top: -7px;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.docs-range input[type="range"]:hover::-webkit-slider-thumb,
.docs-range input[type="range"]:active::-webkit-slider-thumb,
.docs-range input[type="range"]:focus-visible::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.docs-range input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--red);
  border: 3px solid var(--white); box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.docs-range input[type="range"]:hover::-moz-range-thumb,
.docs-range input[type="range"]:active::-moz-range-thumb,
.docs-range input[type="range"]:focus-visible::-moz-range-thumb {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.docs-range input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: transparent; }
.docs-range input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: transparent; }
.docs-range input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.docs-results {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 34px 0 26px; flex-wrap: wrap;
}
.docs-results-count { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.docs-results-count b { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }
button.docs-clear { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

.docs-empty {
  grid-column: 1/-1; text-align: center; padding: 70px 30px;
  border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--ivory);
  color: var(--slate); font-size: 15px;
}
.docs-empty strong { display: block; font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); font-weight: 500; margin-bottom: 8px; }

.docs-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 50px; }
.docs-page-btn {
  min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--white); color: var(--ink); font-size: 13px; font-family: var(--font-sans);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.docs-page-btn:hover:not(:disabled) { border-color: var(--ink); }
.docs-page-btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.docs-page-btn.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.docs-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Compact "Page X of Y" readout shown alongside the News hub pages'
   pagination — same buttons as .docs-pagination, plus this status text. */
.news-pagination__status {
  font-family: var(--font-mono); font-size: 12px; color: var(--slate);
  margin-left: 6px;
}

@media (max-width: 700px) {
  .docs-toolbar { margin-top: -20px; }
  .docs-results { margin-top: 24px; }
}

/**
 * =====================================================================
 * BRAND OVERRIDE LAYER — deliberately uses !important
 * =====================================================================
 * Every other rule in this project intentionally avoids !important
 * (see the original CSS rules this project follows). This block is a
 * single, explicit, narrowly-scoped exception, and here's exactly why:
 *
 * For components this theme fully owns (page_hero, our_story, hero,
 * team, faq), a specificity conflict with Blocksy is fixable by simply
 * repeating the property on that component's own selector — see the
 * comment above ".page-hero h1" in components/page_hero/style.css for
 * a worked example. No !important needed there, because we control
 * both sides of that fight.
 *
 * But Blocksy's OWN markup (its header, nav, footer widgets, default
 * page title/archive templates — anything NOT rendered by one of this
 * theme's own components) uses class names and specificity we don't
 * control and can't reliably predict or match rule-by-rule. The only
 * way to GUARANTEE this project's typography wins there, regardless of
 * whatever selector Blocksy happens to use, is !important on the
 * specific properties that matter.
 *
 * WHY THIS IS SCOPED TO font-family ONLY, NOT "EVERYTHING":
 * Blocksy's own buttons, form fields, mobile menu, and similar
 * interactive elements are already designed with real thought given
 * to spacing, states, and accessibility. Blanket-overriding colors,
 * spacing, or borders site-wide risks breaking those in ways that are
 * hard to predict without seeing them. Typography (which font renders)
 * is a safe, purely visual property to force site-wide; if you later
 * want the brand's red accent color to also win everywhere, extend
 * this same pattern with another rule below, but do it one property/
 * element at a time, checking the result, rather than all at once.
 *
 * IF A NEW ELEMENT STILL DOESN'T MATCH YOUR BRAND SOMEWHERE:
 * Use your browser's DevTools "Inspect" on that element, find which
 * rule is currently winning (DevTools shows a strikethrough on the
 * rule that lost), and add one more targeted line below rather than
 * widening the selectors above — keeping this override list small and
 * auditable is what makes it safe to use !important here at all.
 *
 * NATIVE ALTERNATIVE WORTH CONSIDERING:
 * Blocksy's own Customizer (Appearance > Customize > Typography) can
 * usually set the theme's global font choice directly, which reaches
 * every Blocksy-rendered element (including ones this CSS can't easily
 * target, like text inside Blocksy's own widgets) more completely than
 * any child-theme CSS override can. For genuinely global typography,
 * doing it there first — and treating this block as a safety net for
 * whatever it doesn't reach — is usually the sturdier approach.
 * =====================================================================
 */

body,
body p,
body li,
body a,
body span,
body div,
body label,
body input,
body textarea,
body select,
body button {
  font-family: var(--font-sans) !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--font-display) !important;
}

/* Monospace elements (this theme's own breadcrumbs, eyebrows, etc.)
   are already scoped to specific classes with adequate specificity —
   see .crumbs / .eyebrow above — so they're deliberately NOT repeated
   here; this block only needs to cover the two site-wide defaults. */