/* Burger and mobile menu for header.nav: the site pages link this file, the 3D viewer inlines it
   (web/viewer/build_viewer.py). Markup comes from site/navlinks.py, behaviour from site/nav.js. */
.burger { display: none; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; background: none;
  cursor: pointer; position: relative; color: var(--ink); }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.burger span:nth-child(1) { top: 13px; } .burger span:nth-child(2) { top: 19px; } .burger span:nth-child(3) { top: 25px; }
header.nav.open .burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
header.nav.open .burger span:nth-child(2) { opacity: 0; }
header.nav.open .burger span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .burger { display: block; }
  header.nav { z-index: 10; }
  header.nav #site-nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; padding: 6px 16px 18px; background: var(--bg);
    border-bottom: 1px solid var(--line); box-shadow: 0 24px 48px -12px rgb(0 0 0 / .6);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
  header.nav.open #site-nav { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
  header.nav #site-nav a { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px;
    font: 14px var(--mono); color: var(--ink); text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  header.nav #site-nav a:last-child { border-bottom: 0; }
  header.nav #site-nav a::after { content: "\2192"; color: var(--ink-3, var(--ink2)); transition: transform .15s, color .15s; }
  header.nav #site-nav a:hover::after, header.nav #site-nav a[aria-current="page"]::after { color: var(--accent); transform: translateX(3px); }
  html.menu-open body::after { content: ""; position: fixed; inset: 0; z-index: 9; background: rgb(2 4 10 / .55); }
}