/* ===================================================================
 * wtpp-site-header.css — RUNTIME canonical site header CSS
 *
 * DEPLOYED v3.7.333. Mirrored from _templates/site-header.css.
 *
 * This file is loaded BEFORE per-page inline styles in the head section
 * so existing inlined header CSS continues to win in the cascade
 * (transitional state — no behavior change at deployment time).
 *
 * Forward migration: when a future iteration touches a header CSS rule
 * inlined on multiple pages, remove the inlined version and rely on this
 * external file. Over multiple iterations the inlined header CSS is
 * progressively retired and this file becomes the sole authoritative
 * source.
 *
 * Source of truth for header CSS authoring. Do NOT edit inlined header
 * rules on pages — edit this file.
 * =================================================================== */

page-nav rules
 * per-page. Edit this file or the template at
 * _templates/site_header_template.html.
 *
 * Generated v3.7.104 from index.html canonical block (which was
 * established in v3.7.101 after the orphan-mobile-rules debacle).
 * =================================================================== */

.skip-link { position: absolute; top: -40px; left: 12px; z-index: 1000; padding: 8px 16px; background: var(--ink); color: var(--paper); text-decoration: none; border-radius: 4px; }

.skip-link:focus { top: 12px; }

.page-sticky-wrap { position: sticky; top: 0; z-index: 50; background: var(--surface-card); }

.site-header-main {
  background-image: url('flag-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.site-header-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--glass-surface) 0%, var(--glass-surface) 100%);
  pointer-events: none;
  z-index: 0;
}

.site-header-main > * { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 32px; }

.header-brand-row {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 6px; padding-top: 24px; padding-bottom: 16px;
}

.header-title {
  font-family: 'UnifrakturCook', 'Old English Text MT', 'Goudy Text MT', serif;
  font-weight: 700; font-size: 50px; line-height: 1.0; letter-spacing: 0.005em;
  color: var(--ink, var(--ink)); margin: 0; white-space: nowrap;
}

.header-title em { font-style: normal; font-weight: 700; color: inherit; }

/* v3.7.506: document pages inline a generic content-heading rule
   `h1 { border-bottom: 2px solid var(--red); padding-bottom: 12px }`. Because
   the site brand is itself an <h1 class="header-title">, that rule also drew a
   stray red underline beneath "We The People" in the document-page header --
   drift no other page shows. Neutralize it for the header brand specifically;
   real content h1s keep their intended underline. Lives in the linked header
   CSS, which loads after the inlined copy and wins on specificity. */
.header-title { border-bottom: none; padding-bottom: 0; }

.header-title-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
}

.header-tagline { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-soft); font-weight: 400; line-height: 1.4; }

.header-tagline-eyebrow {
  font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--navy); font-weight: 500; margin-left: 6px;
}

.header-meta { display: flex; gap: 18px; flex-shrink: 0; margin-top: 6px; }

.header-meta-item { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); white-space: nowrap; }

.header-meta-item em { font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }

.header-meta-item strong { color: var(--ink); font-family: var(--serif); font-weight: 700; font-size: 13px; }

@media (max-width: 720px) {
  .header-title { font-size: 38px; white-space: normal; }
  .header-title-row { flex-direction: column; gap: 8px; align-items: flex-start; }
}

.page-nav { display: flex; gap: 8px; padding: 10px 0; font-family: "Inconsolata", "Courier New", Consolas, monospace; font-size: 12px; position: relative; z-index: 1; }

/* v3.7.500: document pages still carry pre-v3.7.342 header chrome that bakes the
   inline page-nav links (Home / Documents / … / a "Close") directly into
   .page-nav. v3.7.342 removed those from root-page markup when site navigation
   moved to the header hamburger menu, but the document pages drifted and kept
   them, so on desktop they rendered across the header and overlapped the
   tagline. Hide the inline links on desktop: root pages have no direct
   .page-nav-link children (they use .page-nav-body), so this affects only the
   stale doc-page links; the icon strip and search box are not .page-nav-link
   and remain. The hamburger menu in the icon strip is the canonical nav. */
@media (min-width: 721px) {
  .page-nav > .page-nav-link { display: none !important; }
}

.page-nav-link { padding: 5px 12px; color: var(--ink-soft); text-decoration: none; border-radius: 3px; font-weight: 500; background: var(--ov-white-50); letter-spacing: 0.05em; }

.page-nav-link:hover { color: var(--ink); background: var(--ov-white-92); }

.page-nav-link.active { background: var(--ink); color: var(--paper); }

.tricolor-band { display: flex; height: 4px; position: relative; z-index: 2; }

.tricolor-band span { flex: 1; }

.tricolor-band span:nth-child(1) { background: var(--flag-red); }

.tricolor-band span:nth-child(2) { background: var(--pure-white); }

.tricolor-band span:nth-child(3) { background: var(--flag-blue); }

.header-tagline-eyebrow {
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 500;
  margin-left: 6px;
}

.header-meta-item { font-family: "Inconsolata", "Courier New", Consolas, monospace; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }

.page-nav-link {
  padding: 3px 12px;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 3px;
  font-weight: 500;
  background: var(--ov-white-50);
  letter-spacing: 0.05em;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .header-title { font-size: 38px; white-space: normal; }
  .header-title-row { flex-direction: column; gap: 8px; align-items: flex-start; }
  .header-brand-row { flex-direction: column; align-items: flex-start; }
  .site-header-main > * { padding-left: 16px; padding-right: 16px; }
  .header-meta { flex-wrap: wrap; gap: 12px; }
}

.header-tagline {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1.4;
}

.header-tagline-eyebrow {
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-left: 6px;
}

.header-meta-item {
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.header-meta-item em {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.header-meta-item strong {
  color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-weight: 700;
  font-size: 13px;
}

.page-nav-link {
  padding: 3px 12px;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: 3px;
  font-weight: 500;
  background: var(--ov-white-50);
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.page-nav-link:hover { color: var(--ink); background: var(--ov-white-92); }

.page-nav-link.active { background: var(--ink); color: var(--paper); }

.tricolor-band span:nth-child(1) { background: var(--flag-red); }

.tricolor-band span:nth-child(2) { background: var(--pure-white); }

.tricolor-band span:nth-child(3) { background: var(--flag-blue); }

.tricolor-band-footer { max-width: 1400px; margin: 0 auto; }

.tricolor-band-footer { max-width: none !important; width: 100% !important; flex-shrink: 0; }

.header-search-wrap {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;
  position: relative !important;
  width: 280px !important;
  max-width: 100% !important;
}

.header-search-icon {
  position: absolute !important;
  left: 10px !important;
  width: 14px !important;
  height: 14px !important;
  color: var(--ink-muted, var(--ink-muted)) !important;
  pointer-events: none !important;
}

.header-search-input {
  width: 100% !important;
  padding: 6px 12px 6px 30px !important;
  font-family: var(--mono, "Inconsolata", "Courier New", monospace) !important;
  font-size: 12px !important;
  color: var(--ink, var(--ink)) !important;
  background: var(--search-input-bg) !important;
  border: 1px solid var(--rule, var(--paper-83)) !important;
  border-radius: 3px !important;
  outline: none !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.header-search-input::placeholder {
  color: var(--ink-muted, var(--ink-muted)) !important;
  font-style: italic !important;
}

.header-search-input:focus {
  border-color: var(--red, var(--red)) !important;
  background: var(--search-input-bg-focus) !important;
  box-shadow: 0 0 0 2px var(--blue, var(--blue)) !important;
}

.page-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

@media (max-width: 760px) {
  .header-search-wrap { width: 100% !important; margin-top: 8px !important; }
}

.site-header-main > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.site-header-main > * {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

.tricolor-band, .tricolor-band-footer {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* v3.7.337 (CX-4): More-dropdown styling. Uses native <details>/<summary>
 * so no JS required. Summary styled identically to other nav links (the
 * wtpp-btn--subtle classes carry the look); the inner panel positions
 * absolutely below the summary when [open]. */

.page-nav-more {
  position: relative;
  display: inline-block;
}

.page-nav-more > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.page-nav-more > summary::-webkit-details-marker { display: none; }
.page-nav-more > summary::marker { display: none; }

.page-nav-more[open] > summary {
  background: var(--paper-deep, var(--ov-black-06));
}

.page-nav-more-items {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--paper);
  border: 1px solid var(--border, var(--ov-black-10));
  border-radius: 4px;
  box-shadow: 0 6px 20px var(--ov-black-10);
  padding: 6px 0;
  z-index: 100;
}

.page-nav-more-link {
  display: block;
  padding: 8px 14px;
  color: var(--ink, var(--ink));
  text-decoration: none;
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-size: 13px;
  line-height: 1.4;
}

.page-nav-more-link:hover,
.page-nav-more-link:focus {
  background: var(--paper-shade, var(--ov-black-06));
  outline: none;
}

.page-nav-more-link.active {
  font-weight: 700;
  color: var(--red, var(--red));
}

/* On narrow viewports, the More dropdown panel goes full-width left-aligned
 * with the nav rather than absolutely positioned (avoids overflow off-screen). */
@media (max-width: 760px) {
  .page-nav-more {
    width: 100%;
  }
  .page-nav-more-items {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border, var(--ov-black-10));
    border-radius: 0;
    margin-top: 4px;
  }
}

/* v3.7.341 (CX-23, CX-24): base rules for classes used in markup but
 * previously without dedicated CSS — flagged 7 OBS findings of class
 * HTML-CLASS-NO-CSS on calc/arch pages and contact.html. */

/* site-footer-stat group — used in the right-column footer meta on
 * every page. Default rendering: stats are inline, separated by
 * subtle dots, each stat-line is a flow block. Canonical pages already
 * have additional media-query rules layered on top; these are the
 * always-present base defaults that the audit was missing. */
.site-footer-stat { display: inline; }
.site-footer-stat-line { display: block; line-height: 1.4; }
.site-footer-stat-line + .site-footer-stat-line { margin-top: 2px; }
.site-footer-stat-sep { display: inline; opacity: 0.6; padding: 0 2px; }

/* sla-summary-table — used on sla.html (where it has full styling) and
 * on contact.html (where it was unstyled — audit flag). Base styling
 * mirrors the sla.html rules so the contact-page table renders with
 * the same look. */
.sla-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 14.5px;
}
.sla-summary-table thead { background: var(--paper-shade, var(--paper-shade)); }
.sla-summary-table th {
  text-align: left;
  padding: 12px 16px;
  font-family: var(--mono, "Inconsolata", monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink, var(--ink));
  font-weight: 700;
  border-bottom: 2px solid var(--ink, var(--ink));
}
.sla-summary-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule, var(--paper-83));
  line-height: 1.5;
  color: var(--ink, var(--ink));
}
.sla-summary-table tbody tr:hover { background: var(--ov-red-04); }

/* v3.7.342: header navigation menu (the hamburger icon added to the
 * icon strip right of the history icon). The inline page-nav buttons
 * were removed this iteration; all navigation now lives in this
 * popover. Styling mirrors the other header popovers. */
.wtpp-popover-nav-menu { min-width: 200px; }
.wtpp-nav-menu-list { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.wtpp-nav-menu-link {
  display: block;
  padding: 9px 12px;
  color: var(--ink, var(--ink));
  text-decoration: none;
  font-family: "Inconsolata", "Courier New", Consolas, monospace;
  font-size: 13px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.wtpp-nav-menu-link:hover,
.wtpp-nav-menu-link:focus {
  background: var(--paper-shade, var(--ov-black-06));
  outline: none;
}
.wtpp-nav-menu-link.active {
  color: var(--red, var(--red));
  font-weight: 700;
}

/* v3.7.342: the old mobile nav-toggle button is replaced by the header
 * menu icon. Hidden from view but kept in the DOM so the scroll-collapse
 * script (which queries #nav-toggle) keeps functioning. */
.nav-toggle { display: none !important; }

/* v3.7.342: with the inline nav buttons removed, the page-nav row holds
 * only the icon strip. Tighten its vertical padding to remove the empty
 * space between the tagline/slogan and the tricolor (RWB) band, reducing
 * the overall header footprint. */
.page-nav { padding-top: 4px !important; padding-bottom: 6px !important; }

/* v3.7.343: reduce header vertical footprint. With the inline nav
 * buttons gone (v3.7.342), the brand-row's generous padding plus the
 * page-nav (icon) row left a band of empty flag between the tagline
 * and the tricolor (RWB) line. Tighten both so the icon strip and the
 * RWB line move up, shrinking the header. Supersedes the v3.7.342
 * page-nav padding values. */
.header-brand-row { padding-top: 14px !important; padding-bottom: 4px !important; }
.page-nav { padding-top: 2px !important; padding-bottom: 4px !important; }

/* v3.7.344: pull the icon strip up under the meta block. With the nav
 * buttons gone (v3.7.342), the .page-nav row holds only the right-
 * aligned icon strip, sitting in its own row below the brand-row and
 * leaving an empty band of flag. On desktop, pull that row up with a
 * negative top margin so the icons land in the empty right-side space
 * directly beneath the platform-info meta block. Because the strip then
 * fits within the brand-row's vertical extent, the header collapses to
 * the brand-row height and the tricolor (RWB) band rises to just under
 * the tagline/slogan. Desktop-only (min-width: 721px): on mobile the
 * strip is absolutely positioned in .site-header-main (v3.7.313), not
 * in .page-nav, so this does not affect mobile. Value is tunable. */
@media (min-width: 721px) {
  .page-nav { margin-top: -40px !important; }
}

/* v3.7.345: move the platform-info meta block up to the top of the
 * header so there is clear space between it and the icon strip below.
 * After v3.7.344 pulled the icons up under the meta, the two sat close
 * together. Lifting the meta toward the top edge opens a gap beneath it
 * before the icons. Desktop-only (the meta + icon stacking is a desktop
 * concern; mobile positions the strip absolutely). Value tunable. */
@media (min-width: 721px) {
  .header-meta { margin-top: -10px !important; }
}

/* v3.7.349: Accent-Left popover treatment (Mockup C) — SITE MENU LINKS.
 * Transparent left border that turns red on hover (label nudges right);
 * red active rail + a faint red-tinted background. Replaces the prior
 * flat hover-background row style. */
.wtpp-nav-menu-link {
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
  transition: border-color .12s ease, background .12s ease,
              padding-left .12s ease, color .12s ease;
}
.wtpp-nav-menu-link:hover,
.wtpp-nav-menu-link:focus {
  border-left-color: var(--red, var(--red));
  background: var(--paper-shade, var(--ov-black-06));
  padding-left: 15px;
  outline: none;
}
.wtpp-nav-menu-link.active {
  border-left: 3px solid var(--red, var(--red));
  color: var(--red, var(--red));
  font-weight: 700;
  background: var(--paper-shade, var(--ov-black-06));
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--red) 9%, transparent), transparent);
}

/* v3.7.467: Open Questions count links match the adjacent value color (no underline; underline on hover only).
   html-prefixed + dark-scoped for specificity so they beat the global `html[data-theme="dark"] a { color: var(--red) }`
   rule and any inline header rules, across static, document, and calculator pages. */
html .header-meta-item a, html .site-footer-stat a { color: inherit; text-decoration: none; }
html .header-meta-item a:hover, html .site-footer-stat a:hover { text-decoration: underline; }
/* v3.7.470: the site title links to Home; the link inherits the title color (no underline) and is
   dark-scoped at higher specificity so the global dark `a { color: var(--red) }` rule does not recolor it. */
html .header-title a, html .header-title a:visited { color: inherit; text-decoration: none; }
html[data-theme="dark"] .header-title a, html[data-theme="dark"] .header-title a:visited { color: inherit; }
html[data-theme="dark"] .header-meta-item a, html[data-theme="dark"] .header-meta-item a:visited,
html[data-theme="dark"] .site-footer-stat a, html[data-theme="dark"] .site-footer-stat a:visited { color: inherit; }