/* The header's menu (templates/nav-menu.html): the words as the
   header's links with a chevron that turns, one solid panel under them
   that slides and resizes from word to word, and the same links in the
   phone's sheet. Tokens from tailwind/input.css. */

.nm-trigger {
  gap: 0.25rem;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.nm-trigger[aria-expanded="true"] { background: var(--marketing-surface-hover-muted); color: var(--marketing-foreground); }
.nm-chevron { opacity: 0.6; transition: rotate 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.nm-trigger[aria-expanded="true"] .nm-chevron { rotate: 180deg; }

/* The viewport hangs from the list of words, not from its own item. */
.lp-header-sections li.nm-slot { position: static; }
.nm-viewport {
  --nm-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: absolute;
  top: calc(100% + 0.625rem);
  left: var(--nm-left, 0);
  z-index: 2;
  width: var(--nm-width, 0);
  height: var(--nm-height, 0);
  overflow: hidden;
  border: 1px solid var(--solid-border);
  border-radius: 1rem;
  background: var(--solid-surface);
  box-shadow: var(--solid-shadow), 0 16px 40px -12px rgb(20 40 34 / 0.18);
  opacity: 0;
  scale: 0.96;
  transform-origin: top left;
  pointer-events: none;
  transition:
    left 260ms var(--nm-ease),
    width 260ms var(--nm-ease),
    height 260ms var(--nm-ease),
    opacity 150ms ease,
    scale 150ms var(--nm-ease);
}
.nm-viewport[data-open] { opacity: 1; scale: 1; pointer-events: auto; }
/* A bridge over the gap, so the pointer crossing it keeps the panel. */
.nm-viewport::before { content: ""; position: absolute; inset: -0.75rem 0 auto; height: 0.75rem; }

.nm-panel {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  gap: 0.25rem;
  width: 22rem;
  padding: 0.5rem;
}
/* The header's list rule (one row, the header's height) is not the
   panel's. */
.lp-header-sections .nm-links { display: grid; gap: 0.125rem; height: auto; }
.nm-wide { grid-template-columns: 13rem 1fr; width: 40rem; }
.lp-header-sections .nm-wide .nm-links { grid-template-columns: 1fr 1fr; }

.nm-lead {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.375rem;
  min-height: 100%;
  padding: 1rem;
  border-radius: 0.625rem;
  background: var(--solid-inset);
  transition: background-color 150ms ease;
}
.nm-lead-name {
  font-family: var(--blog-serif, "Newsreader", Georgia, serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--marketing-foreground);
}

.nm-link {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  transition: background-color 150ms ease;
}
.nm-link .mark { margin-top: 0.0625rem; flex: none; }
.nm-link-text { display: grid; gap: 0.125rem; min-width: 0; }
.nm-name { font-size: 0.875rem; font-weight: 500; color: var(--marketing-foreground); }
.nm-desc { font-size: 0.8125rem; line-height: 1.4; color: var(--muted-foreground); }
@media (hover: hover) and (pointer: fine) {
  .nm-link:hover, .nm-lead:hover { background: var(--marketing-surface-hover-muted); }
}
.nm-link:focus-visible, .nm-lead:focus-visible { outline: 2px solid var(--marketing-accent); outline-offset: -2px; }

/* The phone's sheet: each panel a labelled group, then the plain words. */
.nm-sheet { display: grid; gap: 1.25rem; padding: 0.75rem 1rem 0; }
.nm-group ul, .nm-plain { display: grid; gap: 0.125rem; }
.nm-group-label {
  padding-inline: 0.75rem;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.nm-sheet-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  border-radius: 0.625rem;
}
.nm-sheet .nm-name { font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .nm-sheet-link:hover { background: var(--marketing-surface-hover-muted); }
}

/* The stage's page under the header. */
.nm-demo { max-width: 40rem; margin: 0 auto; padding: 9rem 1.5rem 120vh; }
.nm-demo h1 { margin: 0.5rem 0 1rem; font-family: "Newsreader", Georgia, serif; font-size: 2.25rem; font-weight: 500; color: var(--marketing-foreground); }
.nm-demo p + p { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .nm-viewport, .nm-chevron { transition: none; }
}