/* The existing fixed header remains the default. Main measures this fallback. */
:root {
  --site-header-offset: var(--nav-bar-height, 8rem);
}

/* The story uses a canonical header now; its former 96px minimal-shell gap is insufficient. */
main[data-barba-namespace="cpec-roster-about"] .roster-preview.roster-about {
  padding-top: calc(var(--site-header-offset) + 1rem);
}

/* Inert/aria state and keyboard focus are owned by the shared navigation initializer. */
.header:not(.roster-header) .mobile-nav {
  visibility: hidden;
  pointer-events: none;
  transition: visibility var(--animation-default-slow, 1.2s ease);
}

body[data-navigation-status="active"] .header:not(.roster-header) .mobile-nav {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

@media (max-width: 991px) {
  .header:not(.roster-header) .mobile-nav .nav-link {
    min-height: 44px;
  }
}

/* An explicit review option; removing the attribute restores the current fixed shell. */
html[data-header-mode="static"] .header:not(.roster-header) {
  position: relative;
  inset: auto;
  overflow: visible;
}

html[data-header-mode="static"] .header:not(.roster-header) .mobile-nav {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

html[data-header-mode="static"] main[data-barba-namespace="cpec-roster-about"] .roster-preview.roster-about {
  padding-top: 1rem;
}

html[data-header-mode="static"] .cpec-interest-page .main-wrap {
  padding-top: 0;
}

/* Keep keyboard access visible if a later reviewed mode introduces header hiding. */
body:not(.is-home-loading) .header:not(.roster-header):focus-within {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

body:not(.is-home-loading) .header:not(.roster-header):focus-within
  :is(.nav-bar, .nav-logo, .desktop-nav, .btn-hamburger__wrap) {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .header:not(.roster-header) .mobile-nav,
  .header:not(.roster-header) .mobile-nav__inner {
    transition: none;
  }
}