/* ============================================================================
 * navmenu — nav links that open a panel
 * ============================================================================
 *
 * The marketing navbar's links, with somewhere to go under each one. A trigger
 * reads as a nav link and behaves as one; pressing it hangs a panel of
 * destinations off the bar.
 *
 * ---- Using it --------------------------------------------------------------
 *
 *   <link rel="stylesheet" href="/shared/components/navmenu/navmenu.css">
 *   <script src="/shared/components/navmenu/navmenu.js" defer></script>
 *
 *   <ul class="navmenu">
 *     <li class="navmenu-item">
 *       <button class="navmenu-trigger" aria-expanded="false">Build</button>
 *       <div class="navmenu-panel">
 *         <a href="/docs/atomic/">Atomic</a>
 *       </div>
 *     </li>
 *   </ul>
 *
 * POSITIONING IS THE HOST'S, as with every component here. This file owns the
 * type, the states and the panel; where the row sits is the shelf's business.
 *
 * ---- Two things it deliberately copies --------------------------------------
 *
 * THE TRIGGER IS THE NAVBAR'S LINK. --muted at rest, --ink on hover — the same
 * weight and the same two colours `.navbar ul li` uses, so a reader who has used
 * the marketing header recognises this row. Its growing underline is left behind
 * deliberately; see the trigger's own note below.
 *
 * THE PANEL IS THE SEARCH RESULTS PANEL. Same fill, same 2px ink edge, same
 * hard 4px offset shadow, same row dividers, same green on the row under the
 * pointer. Two panels hanging off one bar should not be two designs.
 *
 * It is its own component wearing that style, deliberately, rather than the
 * searchbar's class applied to different markup. `.searchbar-results` carries
 * that component's drop offset and its open/closed state, so borrowing the class
 * would drag both along and tie a nav menu's behaviour to a search field's.
 *
 * The cost of the choice is the honest one: these declarations exist twice and
 * can drift. If a third panel ever hangs off a bar, that is the moment to
 * promote them to one primitive rather than copy them again.
 *
 * ---- Layer -----------------------------------------------------------------
 *
 * `component`, as every shared component is.
 * ========================================================================== */
@layer component {

.navmenu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navmenu-item {
  position: relative; /* the panel hangs off this */
  display: flex;
  align-items: center;
  height: 100%;
}

/* The navbar's link, as a button. Every property that makes a <button> look like
   a control is unset here rather than left to the host: a UA stylesheet's border
   and background are the difference between a nav link and a grey box, and this
   component is used on surfaces that reset neither.
   NO GROWING UNDERLINE, unlike `.navbar ul li`. That gesture belongs to a header
   with room around it; in a 40px shelf it draws a second moving line a few pixels
   under a row that already has a triad along its bottom edge. Colour carries the
   hover and the chevron carries the open state, which is what those two were
   already doing. */
.navmenu-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 0 0 2px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.25s ease;
}
.navmenu-trigger:hover,
.navmenu-trigger[aria-expanded="true"] { color: var(--ink); }

.navmenu-trigger:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 3px;
}

/* The chevron turns when the panel is open — the one moving part, and the same
   9px glyph the sidenav's branches use. */
.navmenu-trigger svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
  transition: transform 0.15s ease;
}
.navmenu-trigger[aria-expanded="true"] svg { transform: rotate(90deg); }

/* ---- The panel — see the mirror note above --------------------------------- */
.navmenu-panel {
  display: none;
  position: absolute;
  /* Hung off the BAR rather than off the trigger: the host says how far its own
     bottom edge is, and the default puts the panel just under this element. */
  top: var(--navmenu-drop, calc(100% + 8px));
  left: 0;
  z-index: 1002;
  min-width: 190px;
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.navmenu-item.open > .navmenu-panel { display: block; }

.navmenu-panel a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--bg);
}
.navmenu-panel a:last-child { border-bottom: none; }
/* Canvas green under the pointer, which is the results panel's highlight and
   carries the same meaning: this is the one you are about to open. Ink text on
   it rather than --muted, measured there at 5.8:1 against 2.1:1. */
.navmenu-panel a:hover,
.navmenu-panel a:focus-visible { background: var(--brand-3); outline: none; }

@media (prefers-reduced-motion: reduce) {
  .navmenu-trigger,
  .navmenu-trigger svg { transition: none; }
}

} /* @layer component */