/*
 * nav-menu.css: the narrow-screen menu for nav.site-nav.
 *
 * At 880px and below, each page hides .nav-links. This file shows a menu
 * button (details.nav-menu > summary) in its place. The button opens a
 * dropdown panel with the same links. The menu is a <details> element, so
 * it opens and closes without JavaScript; nav-menu.js only adds closing on
 * Escape, on a tap outside, and on a link tap.
 *
 * Shared by the home page (inline styles) and the docs.css pages (docs,
 * privacy, beta-terms). Both define the same colour tokens; the fallbacks
 * keep the menu readable if a page does not.
 */

.nav-menu { display: none; }

@media (max-width: 880px) {
  .site-nav .nav-links { display: none; }
  .nav-menu { display: block; }
  /* docs.css pages: the waitlist button sits right, next to the menu. */
  .site-nav > .nav-cta { margin-left: auto; margin-right: 0.6rem; }
}
@media (max-width: 520px) {
  /* docs.css pages: no room for the button; the menu carries it instead. */
  .site-nav > .nav-cta { display: none; }
}

/* The button: same size and border as the home page GitHub button. */
.nav-menu > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid rgba(185, 214, 210, 0.28);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-muted, #B9D6D2);
  cursor: pointer; list-style: none;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::marker { content: ""; }
.nav-menu > summary:hover,
.nav-menu[open] > summary {
  color: var(--ink, #F3F8F8);
  border-color: rgba(2, 195, 154, 0.65);
  background-color: rgba(2, 195, 154, 0.08);
}
.nav-menu > summary:focus-visible,
.nav-menu-panel a:focus-visible {
  outline: 2px solid var(--mint, #02C39A);
  outline-offset: 2px;
}

/* Three bars that turn into an X when the menu is open. */
.nav-menu-icon { position: relative; width: 16px; height: 12px; }
.nav-menu-icon span {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform 0.2s, opacity 0.2s;
}
.nav-menu-icon span:nth-child(1) { top: 0; }
.nav-menu-icon span:nth-child(2) { top: 5px; }
.nav-menu-icon span:nth-child(3) { top: 10px; }
.nav-menu[open] .nav-menu-icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-menu[open] .nav-menu-icon span:nth-child(2) { opacity: 0; }
.nav-menu[open] .nav-menu-icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/*
 * The panel. nav.site-nav is position: fixed, so it is the containing
 * block: the panel hangs below the nav bar, at its right edge.
 */
.nav-menu-panel {
  position: absolute; top: calc(100% + 0.5rem); right: 1.25rem;
  min-width: 12rem; max-width: calc(100vw - 2.5rem);
  display: flex; flex-direction: column;
  padding: 0.5rem;
  background: rgba(7, 23, 30, 0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 168, 150, 0.25);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}
.nav-menu-panel a {
  display: block; padding: 0.7rem 0.9rem; border-radius: 10px;
  font-size: 0.95rem; color: var(--ink-muted, #B9D6D2);
}
.nav-menu-panel a:hover,
.nav-menu-panel a[aria-current="page"] {
  color: var(--ink, #F3F8F8);
  background: rgba(2, 195, 154, 0.08);
}

/* The waitlist button joins the menu when the nav bar hides it (520px). */
.nav-menu-panel .nav-menu-cta { display: none; }
@media (max-width: 520px) {
  .nav-menu-panel .nav-menu-cta {
    display: block; margin-top: 0.35rem; text-align: center;
    border: 2px solid var(--teal, #00A896); color: var(--teal, #00A896);
    font-weight: 600;
  }
  .nav-menu-panel { right: 1rem; }
}