.nav-toggle,
.nav-backdrop {
  display: none;
}

.site-header nav {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  position: relative;
}

.site-header nav > a,
.site-header nav > details > summary,
.site-header .nav-button {
  align-items: center;
  display: inline-flex;
  min-block-size: var(--target-minimum);
  white-space: nowrap;
}

.nav-resources {
  position: relative;
}

.nav-resources summary {
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 650;
  list-style: none;
  padding-inline: var(--space-1);
}

.nav-resources summary::-webkit-details-marker {
  display: none;
}

.nav-resources summary::after {
  content: ' ▾';
}

.nav-resources[open] summary::after {
  content: ' ▴';
}

.nav-resources-menu {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(1rem);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  display: grid;
  gap: var(--space-1);
  min-inline-size: 14rem;
  padding: var(--space-2);
  position: absolute;
  inset: calc(100% + var(--space-2)) 0 auto auto;
  z-index: var(--layer-menu);
}

.nav-ledger .nav-resources-menu {
  inset-inline: 0 auto;
}

.nav-resources-menu a {
  border-radius: var(--radius-sm);
  min-block-size: var(--target-comfortable);
  padding-inline: var(--space-3);
  white-space: nowrap;
}

.nav-resources-menu a:hover,
.nav-resources-menu a:active,
.button-link:hover,
.button-link:active,
.nav-button:hover,
.nav-button:active {
  background: var(--interactive-muted);
  color: var(--teal-dark);
  transform: none;
}

.button-secondary:hover,
.button-secondary:active {
  background: var(--interactive-muted-strong);
  color: var(--teal-dark);
  transform: none;
}

.button-danger:hover,
.button-danger:active {
  background: var(--danger-muted-strong);
  color: var(--danger-strong);
  transform: none;
}

@media (max-width: 47.999rem) {
  .site-header {
    position: sticky;
  }

  .nav-toggle {
    background: var(--interactive-muted);
    box-shadow: none;
    color: var(--teal-dark);
    display: inline-flex;
    min-block-size: var(--target-comfortable);
    padding-inline: var(--space-3);
  }

  .nav-toggle:hover,
  .nav-toggle:active {
    background: var(--interactive-muted-strong);
    color: var(--teal-dark);
    transform: none;
  }

  .nav-backdrop {
    background: color-mix(in srgb, var(--ink) 42%, transparent);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
    inset: 0;
    min-block-size: 100%;
    padding: 0;
    position: fixed;
    z-index: var(--layer-backdrop);
  }

  .nav-backdrop[hidden] {
    display: none;
  }

  .site-header nav {
    align-items: stretch;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(1rem);
    block-size: 100dvh;
    box-shadow: var(--shadow-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    contain: layout paint;
    inset-block: 0;
    inset-inline: auto 0;
    inline-size: min(22rem, calc(100vw - var(--space-5)));
    max-inline-size: 100vw;
    overscroll-behavior: contain;
    overflow-y: auto;
    padding: calc(var(--header-height) + var(--space-3)) var(--space-4) var(--space-6);
    position: fixed;
    transform: translate3d(100%, 0, 0);
    transition: transform var(--motion-standard);
    visibility: hidden;
    z-index: var(--layer-drawer);
  }

  .site-header nav.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  .site-header nav a:not(.button),
  .site-header nav form,
  .site-header nav .nav-button,
  .site-header nav .nav-resources {
    display: flex;
    inline-size: 100%;
  }

  .nav-resources summary {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-block-size: var(--target-comfortable);
    padding-inline: var(--space-3);
    inline-size: 100%;
  }

  .nav-resources-menu {
    border: 0;
    box-shadow: none;
    margin: 0 0 var(--space-1) var(--space-3);
    min-inline-size: 0;
    padding: var(--space-1);
    position: static;
  }

  .nav-resources-menu a {
    white-space: normal;
  }

  .site-header nav a,
  .site-header nav .nav-button {
    border-radius: var(--radius-sm);
    justify-content: flex-start;
    min-block-size: var(--target-comfortable);
    padding-inline: var(--space-3);
  }

  .site-header nav a:hover,
  .site-header nav a:active,
  .site-header nav .nav-button:hover,
  .site-header nav .nav-button:active {
    background: var(--interactive-muted);
    color: var(--teal-dark);
    transform: none;
  }

  .site-header nav .button {
    justify-content: center;
  }

  .site-header nav form {
    margin: 0;
  }

  body.navigation-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header nav {
    transition: none;
  }
}