/* Hamburger menu below 68rem. Only applies when JavaScript runs (html.js);
   without it the menu stays visible as wrapped links (see layout.css). */

.nav__toggle {
  display: none;
}

@media (max-width: 68rem) {
  .js .site-header {
    position: relative;
  }

  .js .nav {
    justify-content: space-between;
    gap: var(--space-3);
  }

  .js .logo-svg {
    flex: none;
  }

  .js .logo__name {
    white-space: nowrap;
  }

  .js .logo__tagline {
    max-width: 32ch;
  }

  .js .nav__toggle {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
  }

  .js .nav__toggle:hover,
  .js .nav__toggle:focus-visible,
  .js .nav__toggle[aria-expanded="true"] {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /* Three lines: the span is the middle one, ::before and ::after the outer ones */
  .nav__toggle span[aria-hidden],
  .nav__toggle span[aria-hidden]::before,
  .nav__toggle span[aria-hidden]::after {
    display: block;
    width: 1.25rem;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform var(--duration-base) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
  }

  .nav__toggle span[aria-hidden] {
    position: relative;
  }

  .nav__toggle span[aria-hidden]::before,
  .nav__toggle span[aria-hidden]::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .nav__toggle span[aria-hidden]::before {
    transform: translateY(-6px);
  }

  .nav__toggle span[aria-hidden]::after {
    transform: translateY(6px);
  }

  .nav__toggle[aria-expanded="true"] span[aria-hidden] {
    background-color: transparent;
  }

  .nav__toggle[aria-expanded="true"] span[aria-hidden]::before {
    transform: rotate(45deg);
  }

  .nav__toggle[aria-expanded="true"] span[aria-hidden]::after {
    transform: rotate(-45deg);
  }

  /* Dropdown panel */
  .js .nav__list {
    position: absolute;
    top: calc(100% - var(--space-1));
    left: var(--space-3);
    right: var(--space-3);
    z-index: var(--z-overlay);
    flex-direction: column;
    gap: .15rem;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-l);
    background: var(--color-surface);
    box-shadow: 0 24px 48px -16px rgba(0,0,0,.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
    transition:
      opacity var(--duration-base) var(--ease-standard),
      transform var(--duration-base) var(--ease-standard),
      visibility 0s linear var(--duration-base);
  }

  .js .nav__toggle[aria-expanded="true"] + .nav__list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .js .nav__list a {
    display: block;
    padding: .75rem 1rem;
    border-radius: var(--radius-m);
    font-size: var(--font-size-m);
  }

  /* Rows get a background on hover (layout.css), so drop the link underline */
  .js .nav__list a:not([aria-current])::after {
    display: none;
  }

  /* Current page: accent bar on the left instead of the underline */
  .js .nav__list a[aria-current]::after {
    top: .7rem;
    bottom: .7rem;
    left: .35rem;
    right: auto;
    width: 3px;
    height: auto;
    transform: none;
  }

  html.js[data-theme="light"] .nav__list {
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.25);
  }
}

/* Smallest phones: a slightly smaller mark and name so the name stays on one line */
@media (max-width: 22.5rem) {
  .js .logo {
    gap: .55rem;
  }

  .js .logo-svg {
    width: 40px;
    height: 40px;
  }

  .js .logo__name {
    font-size: .95rem;
  }
}

@media (max-width: 68rem) and (prefers-reduced-motion: reduce) {
  .js .nav__list,
  .nav__toggle span[aria-hidden],
  .nav__toggle span[aria-hidden]::before,
  .nav__toggle span[aria-hidden]::after {
    transition: none;
  }
}