/* Keep location links attached to the main header once they reach it. */
:root {
  --site-header-height: 106px;
  --section-nav-height: 69px;
  --section-anchor-gap: 16px;
}

/* Menu underlines draw in from the left; the current page stays marked. */
#site-nav > a:not(.button) { text-decoration: none; }
#site-nav > a:not(.button)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}
#site-nav > a:not(.button):hover::after,
#site-nav > a:not(.button):focus-visible::after,
#site-nav > a[aria-current="page"]:not(.button)::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  #site-nav > a:not(.button)::after { transition: none; }
}

html:has(.section-nav) {
  scroll-padding-top: calc(
    var(--site-header-height) + var(--section-nav-height) + var(--section-anchor-gap)
  );
}

/* The document's scroll padding supplies the offset once, for all anchors. */
html:has(.section-nav) #main [id] {
  scroll-margin-top: 0;
}

.section-nav {
  position: sticky;
  top: var(--site-header-height);
  z-index: 20;
  background: var(--bg);
  padding-top: 12px;
  padding-bottom: 12px;
  isolation: isolate;
}

.section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  #site-nav > a:not(.button) { width: fit-content; }
  :root {
    --site-header-height: 80px;
    --section-nav-height: 61px;
    --section-anchor-gap: 12px;
  }

  .section-nav {
    padding-top: 8px;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  /* The main menu overlays content; covered section links must not receive focus. */
  html[data-mobile-menu-open] .section-nav {
    visibility: hidden;
  }
}