/* Shared menu mechanics for every JUTTO surface.

   Every page carries the same bar: the same seven labels, the same dropdowns,
   the same cart, the same current-page pill. All of that lives here so it
   cannot drift page to page, which is what this file exists to prevent.

   One exception, and only one: index.html sits fixed and transparent over the
   hero photograph and turns frosted on scroll, so it keeps that positioning
   and colour switching in its own <style>. Every other page uses .topbar
   below, which is solid from the first pixel.

   Colour is left to the caller for the same reason: over the hero these sit on
   photography and need the page ground, everywhere else they are ink. Panels
   are the exception, since they carry their own solid ground on every surface.

   Pairs with assets/nav.js, which supplies the behaviours <details> has no
   opinion about plus the cart badge on pages with no drawer of their own.
   Depends on the shared tokens (--bg, --ink, --accent, --well, --line, --mid,
   --sh-3, --ease) being defined by the caller. */

/* ---------- the solid bar ----------
   Used by every page except the landing page, which has a hero photograph to
   sit over and supplies its own positioning and colour switching instead. */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg) 93%, transparent);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.topbar .nav-in { height: 68px; display: flex; align-items: center; gap: 26px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
/* The supplied lock-up, sized by height so the bar keeps the height it had when
   the mark was a 26px chip beside a word. Width follows the artwork's own
   ratio; `flex: none` stops the bar's flex layout squashing it. */
.brand-mark { height: 26px; width: auto; display: block; flex: none; }

.nav-links { display: flex; align-items: center; gap: 22px; }
/* inherit, so a plain link takes the bar's colour instead of the browser's
   link blue: these sit beside <summary> elements that already inherit it, and
   the two must not read as different kinds of thing. The bar still owns what
   that colour is — page ground over the hero photograph, ink everywhere else —
   and index.html's more specific `nav .nav-links > a` rule still wins. */
.nav-links > a { color: inherit; text-decoration: none; font-size: 14.5px; transition: opacity 0.2s; }
.nav-links > a:hover { opacity: 0.62; }

/* ---------- current page pill ----------
   Mixed from currentColor rather than a fixed ink, so the one rule reads
   correctly on both surfaces: light over the hero photograph, ink on every
   solid bar. Four layers do the work — a tint, an inset top highlight, a
   hairline ring, and two drop shadows that lift the pill off the bar.

   aria-current marks a link that IS the current page and is read out as such.
   .is-current is styling only, for a menu that merely contains the current
   page: a dropdown whose panel holds it, or the section a guide belongs to.
   Keeping those apart stops the bar telling assistive tech that a summary or a
   section link is a page the reader is already on. */
.nav-links > a[aria-current="page"],
.nav-links > a.is-current,
.nav-drop.is-current > summary {
  padding: 7px 15px;
  border-radius: 999px;
  background: color-mix(in oklab, currentColor 12%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, currentColor 22%, transparent),
    inset 0 0 0 1px color-mix(in oklab, currentColor 18%, transparent),
    0 1px 2px color-mix(in oklab, var(--ink) 10%, transparent),
    0 6px 16px color-mix(in oklab, var(--ink) 10%, transparent);
}
/* the pill already carries the emphasis; dimming it on hover reads as broken */
.nav-links > a[aria-current="page"]:hover,
.nav-links > a.is-current:hover,
.nav-drop.is-current > summary:hover { opacity: 1; }

/* the same pill inside the panels, where the ground is always solid page ink */
.nav-panel > a[aria-current="page"],
.nav-panel > a.is-current,
.drop-panel a[aria-current="page"],
.nav-panel .sub.is-current > summary {
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent),
    0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent);
  color: var(--ink);
}

/* ---------- desktop dropdowns ----------
   Each menu is a native <details>, so click, keyboard operation and the
   expanded state reported to assistive tech come for free. */
.nav-drop { position: relative; }
.nav-drop > summary {
  list-style: none; cursor: pointer;
  font-size: 14.5px; display: flex; align-items: center; gap: 7px;
  transition: opacity 0.2s;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary:hover { opacity: 0.62; }
/* caret drawn from two borders on a rotated box: no glyph, no asset */
.nav-drop > summary::after {
  content: ''; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease), margin-top 0.25s var(--ease);
}
.nav-drop[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }

/* ---------- burger ----------
   A native <details> disclosure: it opens with no JS at all and is keyboard
   operable for free. */
.nav-menu { display: none; position: relative; flex: none; }
.nav-menu > summary {
  list-style: none; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 8px;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:active { transform: scale(0.96); }
/* three bars that fold into a cross, drawn from one element */
.nav-menu .bars, .nav-menu .bars::before, .nav-menu .bars::after {
  width: 18px; height: 2px; background: currentColor; border-radius: 2px;
}
.nav-menu .bars { position: relative; }
.nav-menu .bars::before, .nav-menu .bars::after {
  content: ''; position: absolute; left: 0;
  transition: transform 0.28s var(--ease), top 0.28s var(--ease);
}
.nav-menu .bars::before { top: -6px; }
.nav-menu .bars::after { top: 6px; }
.nav-menu[open] .bars { background: transparent; }
.nav-menu[open] .bars::before { top: 0; transform: rotate(45deg); }
.nav-menu[open] .bars::after { top: 0; transform: rotate(-45deg); }

/* ---------- panels ---------- */
.nav-panel, .drop-panel {
  position: absolute; top: calc(100% + 14px);
  padding: 8px;
  /* solid, never frosted: this panel can sit over the hero photograph */
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--sh-3); display: grid;
}
.nav-panel { right: 0; min-width: min(272px, calc(100vw - 40px)); }
.drop-panel { left: 0; min-width: 254px; }
/* transparent bridge across the 14px gap, so travelling from the summary into
   the panel never crosses dead space and closes the menu under the cursor */
.drop-panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.nav-panel a, .drop-panel a {
  color: var(--ink); text-decoration: none; font-size: 15px;
  padding: 12px 14px; border-radius: 8px;
  min-height: 44px; display: flex; align-items: center;
}
.nav-panel a:hover, .drop-panel a:hover { background: var(--well); }

/* mobile: the same two levels, as an accordion inside the burger panel */
.nav-panel .sub > summary {
  list-style: none; cursor: pointer; color: var(--ink);
  font-size: 15px; padding: 12px 14px; border-radius: 8px;
  min-height: 44px; display: flex; align-items: center; gap: 8px;
}
.nav-panel .sub > summary::-webkit-details-marker { display: none; }
.nav-panel .sub > summary::after {
  content: ''; width: 6px; height: 6px; margin: -3px 0 0 auto;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.25s var(--ease);
}
.nav-panel .sub[open] > summary { background: var(--well); }
.nav-panel .sub[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-panel .sub a { padding-left: 28px; font-size: 14.5px; color: var(--mid); }

/* the seven Vietnamese labels plus brand and cart need about 930px, so the
   switch to the burger happens well above the point where they would collide */
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
  .nav-in { gap: 12px; }
}