/* 06-components/_menubar.css */
/* ── c-menubar — the MC top menu. Fixed row, items with one lit hotkey letter each. */
.c-menubar {
  grid-row: 1;
  position: relative;            /* positioning context for its dropdowns */
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--bar-h);
  padding-inline: var(--space-xs);
  background: var(--panel);                   /* matches mcurses menu_bar_bg #202020-ish */
  border-bottom: var(--bw) solid var(--line);
  font-size: var(--text-sm);
  user-select: none;
}
.c-menubar__brand {
  color: var(--text-bright);
  font-weight: var(--fw-bold);
  padding-inline: var(--space-sm) var(--space-md);
  letter-spacing: var(--tracking-wide);
}
/* a group wraps a toggle button + its dropdown, and is the positioning context for the panel */
.c-menubar__group { position: relative; display: inline-flex; align-items: center; height: 100%; }
.c-menubar__item {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--space-sm);
  color: var(--text);
  cursor: pointer;
  background: none; border: 0;
  font: inherit;
}
.c-menubar__item:hover,
.c-menubar__item.is-open { background: var(--panel-hi); color: var(--text-bright); }
/* current-page cue — amber ink + a ▸ glyph, never colour alone (mirrors c-toc__link.is-current).
   Set on the active item, and on its parent group title so closed dropdowns still read as current.
   The ▸ is placed absolutely inside the item's own left padding, hugging its label — it adds no
   width, so lighting an item up neither widens its anchor nor shoves the items after it along the
   bar, and it points at its word rather than floating in the gap (mirrors the dropdown cue). */
.c-menubar__item { position: relative; }
.c-menubar__item.is-current { color: var(--accent); }
.c-menubar__item.is-current .c-menubar__key { color: var(--accent); }
.c-menubar__item.is-current::before {
  content: "▸";
  position: absolute;
  left: calc(var(--space-sm) - 1.35ch);   /* a hair of gap between the ▸ and its label */
  top: 50%;
  transform: translateY(-60%);   /* the glyph sits low in its cell; lift it onto the text's optical centre */
  color: var(--accent);
}
.c-menubar__key { color: var(--accent); }            /* the lit hotkey letter */
.c-menubar__item:hover .c-menubar__key { color: var(--accent-bright); }
.c-menubar__spacer { flex: 1; }

/* The ⋯ overflow toggle. Wide screens show every item inline and have no use for it, so the
   group is absent until the breakpoint below turns it on. It never takes .is-current, because its
   menu holds every page and so would light on all of them — the lit item in the open menu is the
   cue. The dots are three U+2022 BULLETs, not an ellipsis: a "…" hangs its dots on the baseline,
   so centring the element still leaves them sitting low, and correcting that means nudging by a
   font-dependent magic number. A bullet is defined at mid-height, so the font's own metrics do
   the centring and the flex row above only has to centre the line box — and it carries far more
   ink than the mono "·", which sets as a speck at any size the bar can afford. */
.c-menubar__group--overflow { display: none; }
.c-menubar__item--dots {
  padding-inline: var(--space-sm);
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: 0.1em;    /* mono cells already space them; this is the optical gap */
  text-indent: 0.1em;       /* letter-spacing trails the last dot — re-centre the group */
}

/* Narrow screens — keep the bar a single, non-scrolling line by showing only the core three
   (Build, Ideas, Download) inline and folding the rest into the … menu at the right edge. The
   spacer before it pushes it there; its dropdown hangs from the right so it stays on screen. */
@media (max-width: 40rem) {
  .c-menubar { overflow: visible; padding-inline: 0; }
  .c-menubar__brand { padding-inline: var(--space-xs) var(--space-sm); }
  .c-menubar__item { padding-inline: var(--space-xs); }
  .c-menubar__item--overflow { display: none; }
  .c-menubar__group--overflow { display: inline-flex; }
}