/* 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-menubar);
  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);
}
/* The ⨝ mark carries the amber; the wordmark beside it stays bright text. */
.c-menubar__brand-mark { color: var(--accent); }
/* 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 — the bar carries no nav items at all: the ⨝ mark at the left edge, the Gantry
   wordmark centred in the viewport, and the … menu at the right edge holding the whole nav. The
   wordmark is taken out of flow and centred on the bar (the nav is the positioning context), so
   the mark on one side and the … on the other cannot pull it off centre; it is still inside the
   brand link, so tapping it goes home. The dropdown hangs from the right so it stays on screen,
   and is sized for a thumb: two-thirds of the viewport wide, at twice the bar's type size. */
@media (max-width: 40rem) {
  .c-menubar { overflow: visible; padding-inline: 0; }
  .c-menubar__brand { padding-inline: var(--space-xs) var(--space-sm); }
  .c-menubar__brand-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .c-menubar__item:not(.c-menubar__item--dots) { display: none; }
  .c-menubar__group--overflow { display: inline-flex; }

  .c-menubar__group--overflow .c-dropdown {
    width: 66.667vw;
    min-width: 0;         /* the 24ch floor is measured in the doubled type, and would overrun */
    font-size: 2em;
  }
  .c-menubar__group--overflow .c-dropdown__item {
    padding-block: var(--space-xs);
  }
}