/* ============================================================
   Provenience — theme.css (component / layout CSS)
   Phase 1 scope: global chrome only — reset/base, container,
   typography, eyebrow, buttons, navbar, footer, responsive.
   Section-specific CSS (hero, manifesto, framework, etc.) is
   added with its partial in Phase 2.

   Tokens are NOT defined here — they come from design-system.css
   (loaded first). This file only CONSUMES var(--token) values.
   ============================================================ */

/* ============================================================
   GLOBAL RESET + BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:26px;
  background:var(--color-bg);
  color:var(--color-text-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ text-decoration:none; color:inherit; transition:color var(--motion-base) var(--easing); }
img,svg{ max-width:100%; display:block; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

/* ============================================================
   CONTAINER + SECTION
   ============================================================ */
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px;
}
section{ padding:var(--section-pad-y) 0; }
.section-alt{ background:var(--color-bg-alt); }
.section-highlight{ background:var(--color-bg-highlight); }
.section-dark{ background:var(--color-navy); color:var(--color-text-on-dark); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.display-hero{
  font-family:var(--font-display);
  font-size:60px;
  line-height:68px;
  font-weight:600;
  letter-spacing:-0.02em;
  color:var(--color-text-primary);
  max-width:720px;
}
h1{
  font-family:var(--font-display);
  font-size:48px;
  line-height:56px;
  font-weight:600;
  letter-spacing:-0.015em;
  color:var(--color-text-primary);
  max-width:720px;
}
h2{
  font-family:var(--font-body);
  font-size:36px;
  line-height:44px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--color-text-primary);
  max-width:680px;
}
h3{
  font-family:var(--font-body);
  font-size:28px;
  line-height:36px;
  font-weight:500;
  letter-spacing:-0.005em;
  color:var(--color-text-primary);
}
h4{
  font-family:var(--font-body);
  font-size:22px;
  line-height:30px;
  font-weight:500;
  color:var(--color-text-primary);
}
h5{
  font-family:var(--font-body);
  font-size:18px;
  line-height:26px;
  font-weight:600;
  color:var(--color-text-primary);
}
p{
  font-family:var(--font-body);
  font-size:16px;
  line-height:26px;
  color:var(--color-text-secondary);
  max-width:640px;
}
.body-large{
  font-size:18px;
  line-height:28px;
  color:var(--color-text-secondary);
  max-width:680px;
}
.body-small{
  font-size:14px;
  line-height:22px;
  color:var(--color-text-secondary);
}
.caption{
  font-size:13px;
  line-height:20px;
  color:var(--color-text-tertiary);
  letter-spacing:0.01em;
}

/* Lead sentence — the bold first sentence of a section that summarises the argument */
.lead-sentence{
  font-size:18px;
  line-height:28px;
  font-weight:500;
  color:var(--color-text-primary);
  max-width:680px;
  margin-bottom:var(--space-lg);
}

/* Pull-quote — used inside long-form sections to break density */
.pullquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:24px;
  line-height:34px;
  color:var(--color-text-primary);
  max-width:680px;
  margin:var(--space-2xl) 0;
  padding-left:var(--space-lg);
  border-left:2px solid var(--color-gold);
}

/* Section dark text overrides */
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5{ color:var(--color-text-on-dark); }
.section-dark p,
.section-dark .body-large{ color:var(--color-text-on-dark-secondary); }

/* ============================================================
   EYEBROW — the recurring section-label pattern
   ============================================================ */
.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--color-text-secondary);
  margin-bottom:var(--space-md);
}
.eyebrow::before{
  content:'';
  display:inline-block;
  width:1px;
  height:24px;
  background:var(--color-gold);
  flex-shrink:0;
}
.section-dark .eyebrow{ color:var(--color-text-on-dark-secondary); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-block;
  padding:14px 24px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:500;
  line-height:1;
  border-radius:var(--radius-md);
  cursor:pointer;
  text-align:center;
  transition:all var(--motion-base) var(--easing);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{
  background:var(--color-navy);
  color:#fff;
  border-color:var(--color-navy);
}
.btn-primary:hover{
  background:var(--color-navy-hover);
  border-color:var(--color-navy-hover);
  color:#fff;
}
.btn-secondary{
  background:transparent;
  color:var(--color-text-primary);
  border-color:var(--color-text-primary);
}
.btn-secondary:hover{
  background:var(--color-bg-alt);
}
.section-dark .btn-secondary{
  color:var(--color-text-on-dark);
  border-color:var(--color-text-on-dark);
}
.section-dark .btn-secondary:hover{
  background:var(--color-navy-hover);
  color:var(--color-text-on-dark);
}
.btn-accent{
  background:var(--color-gold);
  color:var(--color-navy);
  font-weight:600;
  border-color:var(--color-gold);
}
.btn-accent:hover{
  background:var(--color-gold-hover);
  border-color:var(--color-gold-hover);
  color:var(--color-navy);
}
.btn-compact{ padding:10px 18px; font-size:14px; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
  height:76px;
  position:sticky;
  top:0;
  z-index:100;
}
.navbar .container{ height:100%; }
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
}
.logo{ display:flex; align-items:center; }
.logo img{ height:44px !important; width:auto !important; max-width:none !important; }
/* The full lockup is a wide 6.67:1 horizontal mark. On mobile, sizing it by a
   fixed 44px height made it ~293px wide — too wide for the viewport beside the
   hamburger, so the browser shrank it until illegible. Instead, let it scale by
   available width (height auto) and use the full mobile gutter. */
@media (max-width:900px){
  .logo img{
    height:auto !important;
    width:auto !important;
    max-width:200px !important;
  }
}
.nav-menu{ display:flex; gap:32px; align-items:center; }
.nav-menu a{
  color:var(--color-text-primary);
  font-size:15px;
  font-weight:500;
}
.nav-menu a:hover{ color:var(--color-gold); }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--color-navy);
  color:var(--color-text-on-dark);
  padding:80px 0 40px;
  border-top:1px solid var(--color-border-dark);
}
.footer-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;
  align-items:start;
  padding-bottom:var(--space-3xl);
  border-bottom:1px solid var(--color-border-dark);
}
.footer-brand img{ height:44px !important; width:auto !important; max-width:none !important; margin-bottom:var(--space-md); }
.footer-tagline{
  font-family:var(--font-display);
  font-style:italic;
  font-size:16px;
  color:var(--color-text-on-dark-secondary);
  margin-bottom:var(--space-lg);
}
.footer-signature{
  font-size:14px;
  color:var(--color-text-on-dark-secondary);
  max-width:380px;
  line-height:22px;
}
.footer-signature strong{
  color:var(--color-text-on-dark);
  font-weight:600;
}
.footer-col h5{
  color:var(--color-text-on-dark);
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:var(--space-md);
  line-height:1.2;
}
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col li{ line-height:1.35; }
.footer-col a{
  font-size:14px;
  line-height:1.35;
  color:var(--color-text-on-dark-secondary);
  transition:color var(--motion-base) var(--easing);
}
.footer-col a:hover{ color:var(--color-gold); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:var(--space-xl);
  font-size:13px;
  color:var(--color-text-muted);
  flex-wrap:wrap;
  gap:var(--space-md);
}
.footer-bottom a{ color:var(--color-text-muted); }
/* ============================================================
   RESPONSIVE — Mobile-first fallback (desktop-first design)
   ============================================================ */
@media (max-width: 900px){
  :root{ --section-pad-y: 64px; }
  .display-hero{ font-size:40px; line-height:48px; }
  h1{ font-size:34px; line-height:42px; }
  h2{ font-size:28px; line-height:36px; }
  .hero{ padding-top:80px; padding-bottom:64px; }
  .manifesto-grid,
  .framework-row,
  .advisory-entry{ grid-template-columns:1fr; gap:32px; }
  .stats-strip{ grid-template-columns:repeat(2, 1fr); }
  .stat:nth-child(2){ border-right:none; }
  .stat:nth-child(1), .stat:nth-child(2){ border-bottom:1px solid var(--color-border); padding-bottom:24px; }
  .pillar-cards-grid,
  .triggers-grid,
  .testimonials-grid,
  .insights-grid{ grid-template-columns:1fr; }
  .architecture-diagram{ grid-template-columns:1fr; }
  .architecture-pane + .architecture-pane{ border-left:none; border-top:1px solid var(--color-border); }
  .sector-matrix{ grid-template-columns:1fr; }
  .matrix-cell, .matrix-row-header{ border-right:none; }
  .matrix-row-header{ border-bottom:1px solid var(--color-border-strong); }
  .matrix-header{ display:none; }
  .lifecycle-track, .lifecycle-pins{ grid-template-columns:repeat(2, 1fr); }
  .lifecycle-stage:nth-child(2n){ border-right:none; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand{ grid-column:1 / -1; }
  .nav-menu{ gap:20px; }
  .nav-menu a:not(.btn){ display:none; }
  .nav-menu .nav-item{ display:none; }
}

@media (max-width: 600px){
  .stats-strip{ grid-template-columns:1fr; }
  .stat{ border-right:none; border-bottom:1px solid var(--color-border); padding:24px; }
  .stat:last-child{ border-bottom:none; }
  .triggers-grid,
  .testimonials-grid,
  .insights-grid,
  .footer-top{ grid-template-columns:1fr; }
}

/* ============================================================
   PHASE 2 — navbar hardening
   Ensures our navbar renders consistently on top of Astra and
   the CTA button label is always visible. Astra's own header is
   already overridden by our header.php; this guards layout only.
   ============================================================ */
.navbar .nav-menu { display:flex; align-items:center; gap:32px; }
.navbar .nav-menu > a { white-space:nowrap; }
.navbar .btn-primary, .navbar .btn-primary:visited { color:var(--color-text-on-dark); }
.nav-toggle { display:none; }
@media (max-width:900px){
  .nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
  .nav-toggle span{ width:22px; height:2px; background:var(--color-navy); display:block; }
  .navbar .nav-menu{ display:none; }
  .navbar .nav-menu.is-open{ display:flex; flex-direction:column; position:absolute; top:72px; left:0; right:0; background:var(--color-bg); padding:24px; border-bottom:var(--border-default); gap:20px; }
  /* When the mobile menu is open, restore the links the collapsed state hides. */
  .navbar .nav-menu.is-open a:not(.btn),
  .navbar .nav-menu.is-open .nav-item{ display:flex; }
}

/* ============================================================
   PILLARS DROPDOWN (nav-item--has-dropdown)
   Desktop: hover/focus reveals the submenu.
   Mobile: the submenu sits inline inside the open menu column.
   ============================================================ */
.nav-item{ display:flex; align-items:center; position:relative; }
/* The trigger is a <button>; Astra + browser defaults give buttons a border,
   background, box-shadow and focus outline (the faint oval). Scope to .navbar
   to raise specificity above Astra's button rules and null every box property
   in all states. The element must read as plain nav text, identical to the
   sibling <a> links. */
.navbar .nav-item .nav-parent{
  color:var(--color-text-primary);
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  line-height:inherit;
  margin:0;
  padding:0;
  background:none;
  background-color:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
.navbar .nav-item .nav-parent:hover{ color:var(--color-gold); background:none; }
/* Remove the focus oval entirely; keyboard focus is signalled by gold text. */
.navbar .nav-item .nav-parent:focus,
.navbar .nav-item .nav-parent:focus-visible,
.navbar .nav-item .nav-parent:active{
  outline:none;
  box-shadow:none;
  background:none;
  border:0;
}
.navbar .nav-item .nav-parent:focus-visible{ color:var(--color-gold); }

.nav-dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:300px;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card-hover);
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity var(--motion-fast) var(--easing), transform var(--motion-fast) var(--easing), visibility var(--motion-fast);
  z-index:101;
}
/* small hover bridge so the menu doesn't close in the gap */
.nav-item--has-dropdown::after{
  content:"";
  position:absolute;
  top:100%; left:0; right:0;
  height:12px;
}
/* Desktop reveal triggers:
   - :hover  → mouse users (unchanged)
   - .is-open → click + keyboard, driven by theme.js Module 1b
   :focus-within is intentionally NOT a trigger: it auto-opened on Tab and
   fought the JS toggle (Esc/click couldn't close while focus stayed inside).
   Keyboard support is now fully handled by the JS toggling .is-open. */
.nav-item--has-dropdown:hover .nav-dropdown,
.nav-item--has-dropdown.is-open .nav-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-dropdown a{
  display:block;
  padding:10px 14px;
  font-size:14px;
  line-height:1.3;
  color:var(--color-text-secondary);
  border-radius:var(--radius-sm);
  white-space:normal;
  transition:background var(--motion-fast) var(--easing), color var(--motion-fast) var(--easing);
}
.nav-dropdown a:hover{
  background:var(--color-bg-alt);
  color:var(--color-navy);
}

@media (max-width:900px){
  /* In the open mobile column, the dropdown is always expanded inline. */
  .nav-item{ flex-direction:column; align-items:flex-start; width:100%; }
  .nav-dropdown{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border:none;
    padding:8px 0 0 12px;
    min-width:0;
    border-left:2px solid var(--color-border);
    margin-top:8px;
  }
  .nav-item--has-dropdown::after{ display:none; }
  .nav-dropdown a{ padding:8px 10px; }
}

/* ============================================================
   MOBILE RESPONSIVENESS — Phase 2 fix (v4, structural)
   Coordinated pass: real class names, no patches.
   ============================================================ */
/* NOTE: do NOT use overflow-x:hidden on html/body — it silently breaks
   position:sticky for all descendants (the pillar sub-nav). Use overflow
   clipping only where needed at the component level instead. */
body { max-width: 100%; }
img, svg, table { max-width: 100%; height: auto; }

/* Sector cards: hidden on desktop, shown on mobile (replaces matrix) */
.sector-cards { display: none; }

@media (max-width: 900px) {
  /* Single-column collapse for stack-friendly layouts.
     NOTE: framework-ROW (not framework-grid — wrong class name in older versions) */
  .stats-strip,
  .framework-row,
  .pillar-cards-grid,
  .triggers-grid,
  .testimonials-grid,
  .insights-grid,
  .manifesto-grid,
  .architecture-diagram,
  .advisory-entry {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
  }

  /* Section 4 framework: text first, SVG below — DOM order is already correct */
  .framework-text { order: 1; }
  .framework-visual { order: 2; }
  .framework-text p.body-large { max-width: 100% !important; }

  /* Manifesto inner */
  .manifesto-left,
  .manifesto-right { max-width: 100% !important; }

  /* Architecture panes: stack vertically */
  .architecture-pane + .architecture-pane {
    border-left: 0 !important;
    border-top: 1px solid var(--color-border);
  }
  .architecture-pane { padding: 24px 20px !important; }

  /* Section 5 lifecycle ruler — horizontal scroll WITHOUT vertical stage borders
     (the borders are what created the unpolished incomplete-line look) */
  .lifecycle-ruler {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-2xl) -20px var(--space-md);
    padding: 24px 20px 0;
  }
  .lifecycle-track,
  .lifecycle-pins { min-width: 560px; }
  .lifecycle-stage {
    border-right: 0 !important;     /* removes the stub vertical dividers */
    padding-bottom: 12px !important;
  }
  .lifecycle-baseline { margin: 8px 0 0 !important; }
  .lifecycle-caption {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start !important;
    padding: 18px 4px !important;
  }

  /* Section 6 sector matrix: HIDE on mobile, show .sector-cards instead.
     Structural change — flat 25-child grid cannot be made readable
     by CSS tricks alone. Cards are a clean mobile-native form. */
  .sector-matrix { display: none !important; }
  .sector-cards {
    display: block;
    margin-top: var(--space-2xl);
  }
  .sector-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px 20px;
    margin-bottom: 16px;
  }
  .sector-card h4 {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-divider);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .sector-card dl { margin: 0; }
  .sector-card dt {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-top: 14px;
  }
  .sector-card dt:first-child { margin-top: 0; }
  .sector-card dt span {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--color-text-tertiary);
    font-size: 13px;
  }
  .sector-card dd {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-secondary);
  }

  /* Section padding tighter */
  section { padding: 48px 0; }

  /* Type scaled down */
  .display-hero { font-size: 36px; line-height: 1.15; }
  h1 { font-size: 32px; line-height: 1.2; }
  h2 { font-size: 26px; line-height: 1.25; }
  .body-large { font-size: 16px; line-height: 1.6; }

  /* Hero CTAs stack */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
}

/* ============================================================
   ASTRA HEADER SUPPRESSION
   ============================================================ */
.ast-above-header, .ast-below-header, .site-above-header-wrap,
.site-header.ast-primary-header,
.ast-mobile-header-wrap,
header.site-header:not(.navbar) { display: none !important; }

/* ============================================================
   SITE-WIDE LINK / BUTTON HARDENING
   Defends against the browser's default :visited purple/pink
   leaking through wherever a specific colour wasn't set.
   ============================================================ */
a:not(.btn), a:not(.btn):visited { color: inherit; }
.btn, .btn:visited { color: inherit; }
.btn-primary, .btn-primary:visited { color: var(--color-text-on-dark); }
.btn-primary:hover, .btn-primary:focus { color: var(--color-text-on-dark); }
.btn-secondary, .btn-secondary:visited { color: var(--color-navy); }
.btn-secondary:hover, .btn-secondary:focus {
  color: var(--color-navy);
  background: var(--color-bg-alt);
  border-color: var(--color-navy);
}

/* Hero hover safety on both homepage and pillar pages */
.hero-ctas a, .hero-ctas a:visited { text-decoration: none; }

/* ============================================================
   HIDE ASTRA SCROLL-TO-TOP
   The default Astra arrow renders as a blue square. We replace it
   with nothing — pillar pages have the sticky pillar nav as their
   navigation aid; homepage doesn't need it for a single-screen scroll.
   ============================================================ */
#ast-scroll-top, .ast-scroll-top-icon { display: none !important; }

/* ============================================================
   CUSTOM SCROLL-TO-TOP BUTTON
   Replaces Astra's default (which rendered as an unstyled blue
   square). Hidden until the user scrolls down 400px; JS toggles
   .is-visible.
   ============================================================ */
.scroll-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-navy);
  color: var(--color-text-on-dark);
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-md);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms, transform 200ms, background 200ms;
  z-index: 95;
}
/* ID-level specificity on the visible state so neither Astra nor a
   LiteSpeed-combined stylesheet can override it back to hidden. */
#scrollTop.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--color-navy-hover); }
@media (max-width: 600px) {
  .scroll-top { bottom: 18px; right: 18px; width: 40px; height: 40px; }
}

/* ============================================================
   BREADCRUMBS (RankMath trail — pillar / cluster / insight)
   Output via provenience_breadcrumbs(). RankMath emits the inner
   <a> links + separator; we style the wrapper to design tokens.
   ============================================================ */
.breadcrumbs{
  padding:18px 0;
  font-size:11px;
  line-height:18px;
  background:var(--color-bg);
}
/* On pillar/cluster pages the trail follows the sticky sub-nav, so it needs
   breathing room from the nav's bottom border and the hero below it. The
   background matches the hero so the trail and hero read as one continuous band. */
.pillar-page .breadcrumbs,
.cluster-page .breadcrumbs{ padding:20px 0 8px; background:var(--color-bg); }
.breadcrumbs .rank-math-breadcrumb p,
.breadcrumbs p{
  margin:0;
  color:var(--color-text-tertiary);
  letter-spacing:.01em;
}
.breadcrumbs a{
  color:var(--color-text-secondary);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.breadcrumbs a:hover{
  color:var(--color-gold);
  border-bottom-color:var(--color-gold);
}
/* Separator — gold. RankMath wraps it in .separator; the attribute selector is
   a fallback in case a build outputs it differently. */
.breadcrumbs .separator,
.breadcrumbs [class*="separator"]{
  margin:0 8px;
  color:var(--color-gold);
}
/* Last crumb (current page) — RankMath marks it without an <a>. */
.breadcrumbs .last,
.breadcrumbs strong{
  color:var(--color-text-primary);
  font-weight:500;
}
/* Insight single uses a narrow column — align the trail to it. */
.insight-single .breadcrumbs .container{ max-width:820px; }

/* ============================================================
   ANCHOR SCROLL OFFSET (sticky-header compensation)
   In-page anchor jumps (hero "See the Framework" → #sec-framework,
   pillar sub-nav links, etc.) otherwise land with the target heading
   hidden behind the sticky navbar (+ sticky pillar sub-nav on interior
   pages). scroll-margin-top stops the jump a comfortable distance below
   the sticky stack. 96px clears the 76px navbar site-wide; pillar /
   cluster / standalone pages add the sub-nav, so they get more.
   ============================================================ */
[id^="sec-"],
#framework {
  scroll-margin-top: 96px;
}
.pillar-page [id^="sec-"],
.cluster-page [id^="sec-"],
.standalone-page [id^="sec-"] {
  scroll-margin-top: 140px;
}

/* ============================================================
   REDUCED MOTION
   Honour the OS "reduce motion" accessibility setting: collapse all
   transitions/animations to effectively instant and disable CSS
   smooth-scroll. Only affects users who have opted in; everyone else
   is unchanged. (theme.js applies the same preference to its
   programmatic scrollTo calls.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ============================================================
   Search form (footer + search results + 404 recovery)
   Scoped to Insights via hidden post_type field. theme.css is
   loaded site-wide, so a single definition styles all surfaces.
   ============================================================ */
.prov-search-form{ display:flex; align-items:stretch; gap:14px; margin-top:20px; max-width:360px; }
.prov-search-input{
  flex:1 1 auto; min-width:0; font-family:var(--font-body); font-size:14px;
  color:var(--color-text-primary); background:var(--color-bg);
  border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:10px 14px; transition:border-color var(--motion-base) var(--easing);
}
.prov-search-input::placeholder{ color:var(--color-text-tertiary); }
.prov-search-input:focus{ outline:none; border-color:var(--color-gold); }
/* In the dark footer: legible input field; and the brand primary button shifts
   to the gold accent so it reads on navy (matches the footer CTA). These hang
   off existing theme classes — no search-specific button class needed. */
footer .prov-search-input{ background:rgba(255,255,255,0.06); border-color:var(--color-border-dark); color:var(--color-text-on-dark); }
footer .prov-search-input::placeholder{ color:rgba(255,255,255,0.55); }
footer .prov-search-input:focus{ border-color:var(--color-gold); }
footer .prov-search-form .btn-primary{
  background:var(--color-gold); border-color:var(--color-gold); color:var(--color-navy);
}
footer .prov-search-form .btn-primary:hover,
footer .prov-search-form .btn-primary:focus{
  background:var(--color-gold-hover); border-color:var(--color-gold-hover); color:var(--color-navy);
}
.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}