/* =========================================================================
   ep3-bootstrap-override — defensive restyling layer for legacy parts.

   The eight per-Accelerator parts files (e.g. site/initiatives/lokahi/
   lokahi-parts.html) still author content in Bootstrap idiom — color-
   coded .text-primary/.text-success/.text-info H2s, .lead paragraphs,
   .bi-* icons. This layer quiets that vocabulary inside the WebShield
   chrome without rewriting the markup.

   Scoped to #initiative-content so the override cannot leak to any
   other page. Survives the eventual parts rewrite as inert — selectors
   target legacy classes; when those classes go away, the rules become
   no-ops and the file can be deleted.

   Loaded AFTER Bootstrap CSS in buildDetailPage so it wins specificity
   without leaning on !important for layout, but Bootstrap utility
   classes (.text-*, .fw-*, .lead) are themselves declared with
   !important so the overrides match.

   Claude Design B·01 — Lōkahi review (and the implicit B·06 for the
   hero body, since #initiative-content scopes that too).
   ========================================================================= */

/* ── Section headings ────────────────────────────────────────────
   Parts H2s arrive as "1. The Opportunity" / "2. Our Mission" with
   .fw-bold + .text-primary etc. Normalize to the EP3 serif register;
   color goes navy. The number prefix stays in the heading for now —
   it's a content concern (rewrite or strip later via parts pass). */
#initiative-content h2,
#initiative-content .h2 {
  font-family: var(--ws-font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 3.4vw, 36px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
  color: var(--ws-ink) !important;
}

/* ── Section header icons ────────────────────────────────────────
   The bi-globe / bi-heart-pulse / bi-diagram / bi-lightning / bi-
   person-plus glyphs were the loudest single signal in the legacy
   layout — big colored icons sitting in a sibling div next to the
   H2 (not nested inside it), sized via Bootstrap's .fs-1 utility
   (~40px). Mute to a small coral accent. */
#initiative-content .bi.fs-1,
#initiative-content i.bi.fs-1 {
  font-size: 18px !important;
  color: var(--ws-accent) !important;
  opacity: 0.7;
}
/* The icon's wrapper is a .me-3 div; shrink the right margin so the
   small icon sits close to the heading. */
#initiative-content .d-flex.align-items-center > .me-3 {
  margin-right: 10px !important;
}

/* ── Body copy ───────────────────────────────────────────────────
   Bootstrap's .lead is 1.25× body emphasis at semi-bold which fought
   the H2 above it for attention. Normalize to Inter / 16px / muted
   ink — the H2 stays the loudest element in each section.

   Also drop the dark-blue 'initiative-text-dark-secondary' class
   referenced by some parts files, which painted the body too dark. */
#initiative-content p,
#initiative-content .lead,
#initiative-content .initiative-text-dark-secondary {
  font-family: var(--ws-font-body) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  color: var(--ws-ink-muted) !important;
}
/* Re-emphasize the <strong> inside body — parts §1 / §5 use it as a
   pull-out, which works once the surrounding paragraph quiets down. */
#initiative-content p strong,
#initiative-content .lead strong {
  color: var(--ws-ink) !important;
  font-weight: 600 !important;
}

/* ── Inline icons (bullet checkmarks) ────────────────────────────
   Lōkahi §5 (and similar sections in other parts) uses Bootstrap's
   bi-check-circle-fill with .text-success — bright green on warm
   bone breaks the palette. Recolor to coral. */
#initiative-content .bi-check-circle-fill,
#initiative-content .bi-check-circle {
  color: var(--ws-accent) !important;
}

/* ── Kill Bootstrap color classes ────────────────────────────────
   Wherever .text-primary / .text-success / .text-info / .text-warning
   appear inside the parts scope, force ink. This catches the H2
   colors as well as any inline span color. */
#initiative-content :is(
  .text-primary, .text-success, .text-info,
  .text-warning, .text-danger
) {
  color: var(--ws-ink) !important;
}

/* ── Capability grid (Lōkahi §4 specifically, but pattern reused) ─
   The 10-cell capability label grid is the page's worst single
   moment per the reviewer (B·04, deferred to parts rewrite). The
   override here at least drops the thin gray box treatment to a
   hairline rule + larger label so it reads less Bootstrap-y. The
   structural fix (definition list) lands later. */
#initiative-content .initiative-capability-item {
  font-family: var(--ws-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ws-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--ws-rule-faint) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  text-align: left !important;
}