/* Shared sticky navigation. The approved lockup and its coordinates stay intact. */
:root {
  --sticky-header-height: calc(var(--brand-lockup-top) + var(--brand-lockup-height) + var(--lockup-bottom-gap) + 1px);
  --mobile-menu-space: max(44px, calc(100svh - var(--sticky-header-height) - 16px));
  --home-header-delta: calc(var(--brand-lockup-top) + var(--brand-lockup-height) + var(--lockup-bottom-gap) - 104px);
}
html { scroll-padding-top: calc(var(--sticky-header-height) + 16px); }

/* Explicit menu-open and government selectors override the older mobile rules. */
html body .site-header,
html body .site-header.menu-open,
html body.government-page .site-header,
html body.government-page .site-header.menu-open {
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: visible;
  background: #111111;
  color: var(--page-text);
  border-bottom-color: transparent;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(181, 180, 172, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.site-header.header-scrolled::after { opacity: 1; }

/* The old home header was 104px tall with an overflowing logo. Enclose the
   entire lockup now, then deduct exactly that increase from the hero offsets. */
html body .site-header.home-header {
  height: calc(var(--brand-lockup-top) + var(--brand-lockup-height) + var(--lockup-bottom-gap));
}
@media (min-width: 701px) {
  .home-crawler { --ribbon-top: 0px; }
  .home-crawler .feature-identity {
    padding-top: calc(clamp(140px, 19svh, 210px) - var(--home-header-delta));
  }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .home-crawler .feature-identity { padding-top: calc(155px - var(--home-header-delta)); }
}

/* Keep the existing menu button and navigation handlers. Only the panel moves
   below the complete lockup, with its own scrolling on short/zoomed screens. */
@media (max-width: 1000px) {
  html body .site-header #mobile-nav:not([hidden]) {
    top: 100%;
    left: 24px;
    right: 24px;
    max-height: var(--mobile-menu-space);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #111111;
    border: 1px solid var(--rule);
    padding: 16px 20px;
    scroll-padding-block: 12px;
  }
}

/* The SEWP contents list is a separate sticky element below the shared header. */
@media (min-width: 1001px) {
  .document-toc {
    top: calc(var(--sticky-header-height) + 24px);
    max-height: max(96px, calc(100svh - var(--sticky-header-height) - 48px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
@media (min-width: 1001px) and (max-height: 420px) {
  /* Keep the main header sticky; let the secondary contents list use normal
     page scrolling when two stacked sticky regions would consume the view. */
  .document-toc { position: static; max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::after { transition: none; }
}