/**
 * =====================================================================
 * 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)
 * =====================================================================
 * 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.) — added as-is so
 * new components (like page_hero) can use the exact class names and
 * variables (--ink, --red, --ivory, --font-mono, and so on) they were
 * designed against, with zero renaming.
 *
 * WHY THIS IS APPENDED RATHER THAN REPLACING THE --bc-* SET ABOVE:
 * The hero/team/faq components built earlier already depend 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.
 *
 * IF YOU LATER WANT ONE UNIFIED SYSTEM:
 * The cleanest long-term move is to gradually migrate the earlier
 * hero/team/faq components's CSS to reference these tokens directly
 * (e.g. var(--red) instead of var(--bc-color-accent)) and then delete
 * the --bc-* block above — but there's no functional need to do that
 * right now, and nothing here requires it.
 * =====================================================================
 */

/* ---------- Design tokens ---------- */
:root {
  --white: #ffffff;
  --ink: #1b1b1b;
  --ink-2: #2a2a2a;
  --red: #c8102e;
  --red-deep: #9c0d24;
  --ivory: #f6f1ea;
  --sand: #ece4d6;
  --slate: #6b6560;
  --line: #e6e0d6;
  --gold: #b8935a;
  --focus: #1b1b1b;

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

  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --step-1: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --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(27, 27, 27, 0.06), 0 2px 8px rgba(27, 27, 27, 0.04);
  --shadow-md: 0 6px 20px rgba(27, 27, 27, 0.08), 0 2px 6px rgba(27, 27, 27, 0.05);
  --shadow-lg: 0 24px 60px rgba(27, 27, 27, 0.12);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;

  --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; }
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; }
.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: 2px; }
::selection { background: var(--red); color: var(--white); }

/* Skip link */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--white); padding: 12px 16px; }
.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 ---------- */
/* Same .entry-content scoping reasoning as the Reset section above. */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.06;
  margin: 0 0 0.6em;
  color: inherit;
}
.entry-content h1 { font-size: var(--step-5); font-weight: 400; }
.entry-content h2 { font-size: var(--step-4); font-weight: 400; }
.entry-content h3 { font-size: var(--step-2); }
.entry-content h4 { font-size: var(--step-1); font-family: var(--font-sans); 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 — 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.
 */
span.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono) !important;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--red); }
.section--ink .eyebrow { color: var(--gold); }
.section--ink .eyebrow::before { background: var(--gold); }

/*
 * 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 (this
 * was confirmed as a real, live bug: every property on a similarly-
 * built ".hero__sub" rule was being silently overridden). Adding the
 * "p" tag to the selector brings it up to the same specificity level,
 * so it wins here — both through this file's own declaration order,
 * and because component stylesheets that also use ".lede" always load
 * after this file anyway.
 */
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 h2 {
  /* Repeated explicitly here rather than relying only on the generic
     "h1, h2, h3, h4 { font-family: var(--font-display); }" rule above
     — see the matching comment in components/page_hero/style.css for
     why: that bare-tag rule has low enough specificity that a parent
     theme's own heading styles (e.g. Blocksy's) can override it.
     !important added: confirmed (via statistics' .stat__num) that
     Blocksy uses !important on its own font-family declaration, so
     specificity alone isn't sufficient for this property. */
  font-family: var(--font-display) !important;
}
.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; }
}

/* ---------- Global Buttons ---------- */
/*
 * NOTE ON "a.btn" (NOT JUST ".btn"): same fix pattern as p.lede and
 * p.hero__sub elsewhere in this project — a bare single-class
 * selector has lower specificity than a class+tag selector, and
 * Blocksy (like many themes) very likely has its own generic anchor
 * styling for mobile — commonly making links/buttons full-width for
 * easier tapping — that would otherwise silently win over ".btn"
 * alone. Adding the "a" tag ties/beats that, exactly like the
 * previous two fixes.
 */
a.btn {
  --btn-bg: var(--ink); --btn-fg: var(--white); --btn-border: var(--ink);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
/*
 * color: var(--btn-fg) added here (wasn't in the original design) —
 * this is the fix for text turning red on hover. The base "a.btn"
 * rule sets color once, but never re-asserted it specifically on
 * :hover — leaving room for Blocksy's own generic link-hover color
 * styling (very common in themes, usually scoped similarly to
 * ".entry-content a:hover") to silently take over just for the hover
 * state, since a same-specificity hover-specific rule can still win
 * independently of the non-hover base rule. Re-declaring color here,
 * on the hover selector itself, closes that gap the same way the
 * base ".btn" fixes closed it for the non-hover state.
 */
a.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn__arrow { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
a.btn:hover .btn__arrow { transform: translateX(4px); }
/*
 * FIX (was the actual cause of the reported color regression):
 * these MUST match "a.btn"'s specificity too, not just the base
 * selector above. Each of these sets --btn-bg/--btn-fg/--btn-border
 * to OVERRIDE the defaults "a.btn" itself sets — but a plain
 * ".btn--primary" (class only) has LOWER specificity than "a.btn"
 * (class + tag), so once the base was bumped to "a.btn", these
 * modifier rules stopped being able to override it at all, silently
 * falling back to the base's dark/ink colors. Bumping these to
 * "a.btn--primary" etc. ties the specificity, and since they're
 * declared AFTER the base rule in this same file, the tie correctly
 * resolves in the modifier's favor — restoring the exact original
 * colors. No color VALUES were changed here, only which selector
 * they're attached to.
 */
a.btn--primary { --btn-bg: var(--red); --btn-fg: var(--white); --btn-border: var(--red); }
a.btn--primary:hover { --btn-bg: var(--red-deep); --btn-border: var(--red-deep); }
a.btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-border: rgba(255,255,255,0.5); }
a.btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-border: var(--white); }
a.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-border: var(--ink); }
a.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: var(--ink); }
a.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--white); }

/*
 * ---------- 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. Confirmed live:
 * a page with only [feature_block] never enqueued our_story/style.css,
 * so .feature__badge had no styling whatsoever — not a specificity
 * loss, the file itself was never even requested.
 */
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: 999px; 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 by BOTH marquee and partners_marquee — same reasoning as the
 * rules directly 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.
 */
@keyframes marquee { to { transform: translateX(-50%); } }

/*
 * 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. Confirmed live: a
 * page with only [article_component] (no [page_hero]) never loaded
 * page_hero/style.css, so this breadcrumb had no styling whatsoever.
 */
nav.crumbs { font-family: var(--font-mono) !important; 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(--red); }


/* ---------- 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; }

@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; }
}

/**
 * =====================================================================
 * 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. */