/* ActionBoard.ai — grouped top nav + mobile slide-down panel.
 *
 * Shared by index.html and the sub-pages (Blog*, Journal). Loaded AFTER each
 * page's inline <style> so these rules win on equal specificity without having
 * to edit the nav rules already sitting in five separate files.
 *
 * Tokens come from each page's :root (--ink, --line, --bg-gray, --violet-2 …)
 * per CLAUDE.md — nothing new is introduced here.
 */

/* ---------- desktop: grouped dropdowns ---------- */

/* The bar mixes <button> triggers with plain <a>; without this they
   stretch to different heights inside the flex row. */
.nav-links { align-items: center; }

.nav-group { position: relative; }

.nav-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--ink-2);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-trigger:hover { color: var(--ink); }
.nav-trigger svg { width: 10px; height: 10px; opacity: .55; transition: transform .18s; }

.nav-group.open .nav-trigger { color: var(--ink); }
.nav-group.open .nav-trigger svg { transform: rotate(180deg); }

/* Bridges the gap between trigger and panel so moving the pointer down
   doesn't cross dead space and close the menu. */
.nav-group::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}

.nav-panel {
  position: absolute; top: calc(100% + 12px); left: -14px; min-width: 190px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.04);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.nav-group.open > .nav-panel { opacity: 1; visibility: visible; transform: none; }

.nav-panel a {
  padding: 7px 10px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.nav-panel a:hover { background: var(--bg-gray); color: var(--ink); }

/* Hover-to-open only where there is a real pointer. On touch the same
   trigger is a click target, handled in nav.js. */
@media (pointer: fine) {
  .nav-group:hover > .nav-panel { opacity: 1; visibility: visible; transform: none; }
  .nav-group:hover .nav-trigger { color: var(--ink); }
  .nav-group:hover .nav-trigger svg { transform: rotate(180deg); }
}

/* ---------- burger ---------- */

.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-right: -6px;
  background: none; border: 0; border-radius: 9px; cursor: pointer;
  color: var(--ink);
}
.nav-burger:hover { background: var(--bg-gray); }
.nav-burger svg { width: 18px; height: 18px; display: block; }
.nav-burger .bar { transition: transform .2s, opacity .15s;
  transform-box: fill-box; transform-origin: center; }
.nav-burger[aria-expanded="true"] .bar-t { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .bar-m { opacity: 0; }
.nav-burger[aria-expanded="true"] .bar-b { transform: translateY(-5px) rotate(-45deg); }

/* ---------- mobile slide-down panel ---------- */

/* Sits UNDER the sticky bar (which is z-index 80) so the bar stays put. */
.nav-scrim {
  position: fixed; inset: 52px 0 0; z-index: 70;
  background: rgba(9,9,11,.28); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s;
}

.nav-mobile {
  position: fixed; top: 52px; left: 0; right: 0; z-index: 75;
  max-height: calc(100dvh - 52px); overflow-y: auto;
  padding: 18px 24px 24px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  opacity: 0; transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
}

.nav-mobile[hidden], .nav-scrim[hidden] { display: none !important; }
body.nav-open .nav-mobile,
body.nav-open .nav-scrim { opacity: 1; transform: none; }
body.nav-open { overflow: hidden; }

.m-group { margin-bottom: 16px; }
.m-label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 2px;
}
.nav-mobile a {
  display: block; padding: 10px 0;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  border-bottom: 1px solid var(--bg-gray);
}
.nav-mobile a:hover { color: var(--ink); }
.m-flat a { font-weight: 600; color: var(--ink); }
.m-flat a:last-of-type { border-bottom: 0; }
.nav-mobile .pill {
  width: 100%; justify-content: center;
  margin-top: 16px; padding: 12px 16px; font-size: 14px;
  border-bottom: 0;
}

/* ---------- breakpoint ---------- */

/* 860px matches widths already used elsewhere in these pages. Grouping takes
   the desktop bar from ~1030px of content down to ~680px, so there is real
   headroom above this. */
@media (max-width: 860px) {
  .nav-links { display: none !important; }
  .nav-burger { display: inline-flex; }
}
@media (min-width: 861px) {
  .nav-mobile, .nav-scrim { display: none !important; }
}

/* ---------- a11y ---------- */

.nav-trigger:focus-visible,
.nav-burger:focus-visible,
.nav-panel a:focus-visible,
.nav-mobile a:focus-visible {
  outline: 2px solid var(--violet-2); outline-offset: 3px; border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-mobile, .nav-scrim,
  .nav-trigger svg, .nav-burger .bar { transition: none !important; }
}