/* v3.7.124: Responsive navigation — hamburger menu at small viewports.
   Breakpoint matches the existing 720px header breakpoint. */

/* v3.7.174: metric-matched font fallback for UnifrakturCook. The Google-
   Fonts-loaded UnifrakturCook renders with specific ascent/descent metrics;
   when the page is loading and the font hasn't arrived yet, the browser
   uses the generic serif fallback chain (Old English Text MT → Goudy Text
   MT → serif), which has slightly different metrics. When UnifrakturCook
   finally swaps in (display=swap behavior), the title height shifts by a
   few pixels — and the "Twelve Pillars. One Foundation." tagline directly
   below shifts with it. This @font-face declares a virtual font that wraps
   the local Old English Text MT (or Goudy Text MT) with overridden metrics
   matching UnifrakturCook, so the title takes the same vertical space
   before AND after the swap. Result: no tagline shift when navigating
   between pages where the font cache differs. */
@font-face {
  font-family: 'UnifrakturCookFallback';
  src: local('Old English Text MT'), local('Goudy Text MT');
  font-weight: 700;
  font-style: normal;
  size-adjust: 105%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* v3.7.155: page-nav-body wrapper is transparent for layout purposes on
   desktop (display:contents). This is the cross-cutting baseline; the
   mobile media query below switches it to a real flex child that does
   the scroll work. Browsers without display:contents support fall back
   gracefully because the wrapper is a plain div with no styling. */
.page-nav-body { display: contents; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--ov-white-92);
  border: 1px solid var(--border, var(--ov-black-10));
  border-radius: 3px;
  padding: 8px 12px;
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  z-index: 2;
  margin: 10px 0;
}
.nav-toggle:hover, .nav-toggle:focus-visible {
  background: var(--ink);
  color: var(--paper-99);
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.nav-toggle:hover .nav-toggle-bar,
.nav-toggle:focus-visible .nav-toggle-bar {
  background: var(--paper-99);
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  margin: 3px 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bar { transition: none; }
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}
.nav-toggle-bars-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 720px) {
  /* v3.7.155: REORDER header on mobile — title, then tagline, then meta strip.
     Uses `display: contents` on .header-title-row to flatten its children
     (.header-title and .header-meta) into the .header-brand-row flex column,
     making them siblings of .header-tagline for layout purposes. Then `order`
     positions all three: title (1), tagline (2), meta (3). Desktop layout
     is unaffected because this rule only applies inside the 720px media
     query — desktop still sees .header-title-row as a real flex row
     containing title + meta side-by-side. */
  .header-title-row { display: contents; }
  .header-title { order: 1; }
  .header-tagline { order: 2; margin-top: 2px; }
  .header-meta { order: 3; margin-top: 8px; }

  /* v3.7.158: stack each platform stat on its own line on mobile.
     Previously the meta strip was a wrapping flex row; now it's a flex
     column with one item per line. Visual gap between tagline and meta
     (16px margin-top) provides the "empty line" separation Jason
     specified. */
  .header-meta {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 16px;
  }

  /* v3.7.158: tagline eyebrow ("AN ARCHITECTURE FOR SHARED PROSPERITY")
     renders on its own line below the main slogan on mobile. Previously
     inline (with margin-left: 6px), it now drops below the main tagline
     text and gets its own line treatment. */
  .header-tagline-eyebrow {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }

  /* v3.7.141: when nav drawer is open in column flow, search appears first.
     Desktop keeps margin-left:auto right-alignment via the @media (min-width:721px) rule below. */
  .header-search-wrap { order: -1; margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 4px !important; border-top: none !important; }
  /* v3.7.143: hide hamburger bars; just the 'Menu' text remains. */
  .nav-toggle-bar { display: none !important; }

  /* v3.7.160: Menu button left/right margin set to 16px to match the
     container's standard padding (.site-header-main > * applies
     `padding: 0 16px` on mobile). With this margin, the Menu button's
     left border aligns with the brand row content (title, tagline,
     meta items) which sit at 16px from the viewport edge via the
     same container padding. v3.7.158 had used 8px (matching the
     desktop .page-nav `gap: 8px`) but that put the button 8px outside
     the brand row alignment — visually short on breathing room.
     16px is the consistent left-edge offset on mobile. */
  .site-header-main > .nav-toggle {
    padding: 3px 12px;
    margin: 10px 16px;
    background: var(--ov-white-50);
    border: none;
    border-radius: 3px;
    font-family: "Inconsolata", "Courier New", Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .site-header-main > .nav-toggle:hover,
  .site-header-main > .nav-toggle:focus-visible {
    color: var(--ink);
    background: var(--ov-white-92);
    outline: none;
  }
  .site-header-main > .nav-toggle[aria-expanded="true"] {
    background: var(--ink);
    color: var(--paper);
  }

  /* v3.7.155: page-nav-body wrapper. On desktop it's transparent
     (display:contents); on mobile it becomes the scrollable flex child
     within the outer .page-nav frame, mirroring the .filter-bar-inner +
     .filter-bar-body pattern that's been working reliably since v3.7.143. */
  .page-nav.nav-open > .page-nav-body {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    gap: 4px;
    padding: 8px 0 24px;
    width: 100%;
  }
  /* Defense: prevent the drawer from causing horizontal page scroll */
  .page-nav.nav-open { overflow-x: hidden; box-sizing: border-box; }
  /* v3.7.146 (preserved for v3.7.155): flex-shrink:0 so links retain
     natural height and overflow the body's scrollable area instead of
     compressing to fit. Applied to body children now since they live
     in .page-nav-body, not directly in .page-nav. */
  .page-nav.nav-open > .page-nav-body > * { max-width: 100%; box-sizing: border-box; flex-shrink: 0; }

  /* v3.7.369: nav-toggle hidden on mobile. Since v3.7.342 the inline page-nav
     drawer has been empty (all nav links moved to the wtpp-nav-menu hamburger
     in the header icon strip), so tapping the visible "Menu" button on mobile
     opened an empty drawer, making the menu look broken. The new hamburger
     icon (top-right of header strip) is the canonical menu. The dead button's
     inline JS handler is left intact (also runs scroll-collapse for
     body.header-collapsed); hiding the button is enough to prevent the broken
     interaction without disturbing other behavior. */
  .nav-toggle {
    display: none !important;
  }
  .page-nav {
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0; /* gap moved to .page-nav-body */
    padding: 0; /* padding moved to .page-nav-body */
    background: var(--ov-white-92);
    border-radius: 4px;
    border: 1px solid var(--border, var(--ov-black-06));
    margin-bottom: 10px;
  }
  /* v3.7.155: outer nav frame uses overflow:hidden (was overflow-y:auto).
     The scroll behavior moved to .page-nav-body. This is the two-layer
     pattern that makes the filter drawer scroll reliably across iOS
     Safari and Android browsers — the outer container provides the
     fixed-position bounding box; the inner body actually scrolls. */
  .page-nav.nav-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    /* top, bottom set inline by JS in nav-toggle setOpen */
    left: 0;
    right: 0;
    z-index: 101;
    margin: 0;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--border, var(--ov-black-10));
    /* v3.7.387: switched from rgba(255,255,255,0.98) to var(--paper) so the
       drawer uses the theme token (auto-flips correctly in dark mode without
       the v240 override). The previous hardcoded white still showed faint
       transparency at 0.98 alpha; opaque background prevents any bleed
       through of body content per Jason's review. */
    background: var(--paper, var(--paper));
    box-shadow: 0 6px 16px var(--ov-black-10);
    overflow: hidden; /* outer doesn't scroll; inner body does */
    /* Smooth fade-in matching .filter-bar-inner.is-open */
    animation: nav-fade-in 0.2s ease;
  }
  @keyframes nav-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* v3.7.148: when nav drawer is open, hide .header-brand-row and .page-filters
     (mirrors v3.7.146 filter-drawer pattern) and force the entire sticky-wrap
     to viewport top:0. Only the nav-toggle button and tricolor band remain
     visible above the drawer. The drawer below fills the rest of the viewport. */
  body.nav-open .header-brand-row {
    display: none !important;
  }
  body.nav-open .page-filters {
    display: none !important;
  }
  body.nav-open .page-sticky-wrap {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }
  /* v3.7.149: mobile nav links rendered as full-width outlined buttons.
     Matches .filter-pill aesthetic (1px border, white fill, active = filled
     with var(--ink)) but with mobile-sized tap targets. Horizontal margin
     gives breathing room from drawer edges so the borders read cleanly. */
  .page-nav-link {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 5px 14px;
    background: var(--surface-card);
    border: 1px solid var(--border, var(--ov-black-15));
    border-radius: 4px;
    text-align: left;
    font-weight: 500;
    color: var(--ink);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .page-nav-link:hover,
  .page-nav-link:focus-visible {
    background: var(--surface-card);
    border-color: var(--ink-soft);
    color: var(--ink);
  }
  .page-nav-link.active {
    background: var(--ink);
    color: var(--paper-99);
    border-color: var(--ink);
  }
  /* override base .page-nav-link's border-bottom on the last child */
  .page-nav-link:last-of-type {
    border-bottom: 1px solid var(--border, var(--ov-black-15));
  }
  .header-search-wrap {
    padding: 10px 14px;
    margin-top: 4px;
    border-top: 1px solid var(--border, var(--ov-black-06));
  }
}

/* v3.7.155: body scroll-lock for the nav drawer. Mirrors filter-drawer's
   `body.filter-open { overflow: hidden }` pattern. Replaces the v3.7.148
   approach where setOpen() applied `position: fixed` to body via inline
   styles — that approach worked on desktop but on iOS Safari and some
   Android browsers it prevented the drawer's own inner content from
   scrolling (the bug Jason reported: drawer expanded but hidden menu
   options below the fold could not be reached). The CSS overflow:hidden
   approach locks page scroll without breaking inner scroll. */
body.nav-open { overflow: hidden; }

@media (min-width: 721px) {
  .nav-toggle {
    display: none !important;
  }
  .page-nav {
    display: flex !important;
  }
}

/* v3.7.160: scroll-collapse the platform statistics strip when the page
   is scrolled past the top. Header stays sticky (page-sticky-wrap), Menu
   button and nav row stay visible for navigation consistency, but the
   5 meta items (documents, pillars, foundation, version, tracked issues)
   collapse smoothly to give the viewer more screen for content. When the
   user scrolls back to the top (scrollY <= 30px), the strip expands back.
   
   v3.7.162: the scroll-collapse only applies on mobile (max-width: 720px).
   On desktop the meta strip is a single row (~24px tall) and hiding it
   doesn't meaningfully gain content space — but the meta items provide
   useful at-a-glance context, so they stay visible. The JavaScript still
   adds/removes the body.header-collapsed class regardless of viewport,
   but the CSS rule that actually animates the collapse is now wrapped
   in a max-width: 720px media query.
   
   Uses max-height + opacity + margin-top transitions for a smooth slide-
   collapse. max-height: 200px is a safe ceiling that accommodates both
   the mobile stacked-column layout (~120px) and the desktop wrapping row
   (~24px). The actual rendered height is whatever the content takes; we
   just animate to/from that natural size via max-height.
   
   The body.nav-open guard preserves drawer behavior: when the drawer is
   open, the header-brand-row is already hidden (display:none), so the
   meta collapse state doesn't visually matter there. */
.header-meta {
  overflow: hidden;
  max-height: 200px;
  opacity: 1;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease;
  /* v3.7.172: ensure .header-meta-line children stack vertically on ALL
     viewports (was previously rendering inline on desktop because parent
     was `display: flex` with default row direction). This forces the 2
     stat lines to display as 2 lines on every screen size, matching the
     footer layout exactly. */
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: flex-end;
}

/* v3.7.173: when the nav collapses to the Menu button (at ≤1023px, the
   .nav-toggle breakpoint), left-align the stats. The desktop default
   stays right-aligned (full nav visible). Covers both the tablet range
   (721-1023px) AND the mobile range (≤720px) in one rule per user Q3
   answer "a AND b". */
@media (max-width: 1023px) {
  .header-meta {
    align-items: flex-start !important;
  }
}
/* v3.7.169: .header-meta-line wraps each row of stats so they render on
   two distinct lines (line 1: docs/pillars/foundation, line 2: version/
   tracked issues). Lines stay close together with a 2px gap. Items
   within a line remain inline with the existing margin-right separator. */
.header-meta-line {
  display: block;
  line-height: 1.4;
}
.header-meta-line + .header-meta-line {
  margin-top: 2px;
}
/* v3.7.170: dot separator between header stats — matches footer look. */
.header-meta-sep {
  color: var(--ink-muted, var(--tone-54));
  font-family: var(--mono, "Inconsolata", "Courier New", monospace);
  font-size: 11px;
  letter-spacing: 0;
}
@media (max-width: 720px) {
  body.header-collapsed:not(.nav-open) .header-meta {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    pointer-events: none;
  }
}
/* prefers-reduced-motion: skip transitions for users who request it */
@media (prefers-reduced-motion: reduce) {
  .header-meta {
    transition: none;
  }
}

/* v3.7.174: reserve the scrollbar gutter on all pages so navigation
   between short pages (no scrollbar) and long pages (scrollbar) does
   not cause a 15-17px horizontal layout shift. Placed in canonical
   header template (auto-propagates everywhere). */
html { scrollbar-gutter: stable; }

/* v3.7.170: on mobile (≤720px), don't stretch main element to fill the
   viewport. Desktop keeps the existing flex pin-to-bottom behavior (per
   user spec the desktop footer is correct). On mobile, this eliminates
   the large empty gap between short page content and the footer that
   appears on home page and other short pages. Placed in the canonical
   header template so it propagates to all main pages automatically. */
@media (max-width: 720px) {
  body { min-height: 0 !important; }
  main { flex: 0 0 auto !important; }
}

/* v3.7.171: reduce intrinsic padding on mobile so content sits closer to
   the footer. main has padding-bottom:80px and .landing-section has 48px
   top/bottom which add ~150-200px of visible whitespace on short pages.
   Placed in the canonical header template (alongside v3.7.170 rule above)
   so it propagates automatically to all main pages. */
@media (max-width: 720px) {
  main { padding-bottom: 16px !important; padding-left: 20px !important; padding-right: 20px !important; }
  .landing-section { padding: 24px 0 !important; }
  .landing-hero { padding: 8px 0 20px !important; }
}