/* Compact nav that slides in once the hero card has scrolled away. Toggled by nav.js. */

.sticky-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid #0000000f;
  background: var(--background);
  font-family: var(--font-display);
  opacity: 0;
  translate: 0 -100%;
  pointer-events: none;
  transition: opacity .15s var(--default-transition-timing-function),
    translate .15s var(--default-transition-timing-function);
}

.sticky-nav.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .sticky-nav { transition: opacity .15s; translate: 0 0; }
}

.sticky-nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  max-width: var(--breakpoint-2xl);
  height: calc(var(--spacing) * 14);
  margin: 0 auto;
  padding: 0 calc(var(--spacing) * 4);
}

/* Same as the hero's nav button but with the smaller lg corner. */
.sticky-nav .btn-nav { border-radius: var(--radius-lg); }

@media (min-width: 40rem) { .sticky-nav-inner { padding-inline: calc(var(--spacing) * 6); } }
@media (min-width: 64rem) { .sticky-nav-inner { padding-inline: calc(var(--spacing) * 12); } }
@media (min-width: 80rem) { .sticky-nav-inner { padding-inline: calc(var(--spacing) * 24); } }

/* In-page jumps land below the sticky nav instead of under it. */
section[id] { scroll-margin-top: calc(var(--spacing) * 14); }