/*
 * nav.css — ShadowDark DM Companion
 * Grouped section nav (2026-06-04 regroup): the dropdown menus
 * (Oracle / Lore / Maps) plus the persistent header Torch control.
 * The standalone Forge button and base .mode-btn styling live in layout.css;
 * this file only adds the dropdown + torch chrome. Colors via base.css tokens.
 *
 * Stacking: the mode-bar is z-index 50 (layout.css). The open dropdown panel
 * must sit above following page content, so it uses z-index 60 — still below
 * the torch widget (100) and modals (1000).
 */

/* ============================================================
   Dropdown menu — trigger + panel
   ============================================================ */

.nav-menu {
  position: relative;
  display: flex;
}

/* The trigger reuses .mode-btn; the caret is a small downward glyph that
   rotates when the menu is open. */
.nav-menu__caret {
  margin-left: 0.15em;
  font-size: 0.7em;
  line-height: 1;
  transition: transform var(--transition-ui);
}

.nav-menu.is-open .nav-menu__caret {
  transform: rotate(180deg);
}

/* Panel — hidden by default, revealed when the parent .nav-menu is open.
   Absolutely positioned beneath the trigger, left-aligned to it. */
.nav-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: none;
  min-width: 12rem;
  margin-top: -1px;                 /* overlap the mode-bar bottom border */
  padding: var(--space-xs) 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

.nav-menu.is-open .nav-menu__panel {
  display: block;
}

/* Menuitems — full-width rows, left-aligned, Cinzel caps to match the nav. */
.nav-menu__item {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;

  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-sm) var(--space-lg);

  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-text-muted);

  border-left: 3px solid transparent;
  transition:
    color var(--transition-ui),
    background-color var(--transition-ui),
    border-color var(--transition-ui);
}

.nav-menu__item:hover {
  color: var(--color-text);
  background-color: var(--color-surface-hover);
}

/* Active child — torchlight accent on a left rule (the dropdown analogue of the
   top-level bottom-border active state). */
.nav-menu__item.is-active,
.nav-menu__item[aria-current="page"] {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

.nav-menu__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* ============================================================
   Persistent Torch control (header)
   ============================================================ */

.torch-launch {
  appearance: none;
  background: none;
  border: 1px solid var(--color-border);
  cursor: pointer;

  /* Push the torch to the right edge of the left-anchored header row. */
  margin-left: auto;
  align-self: center;

  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);

  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-text-muted);

  transition:
    color var(--transition-ui),
    border-color var(--transition-ui);
}

.torch-launch:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.torch-launch:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.torch-launch__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ============================================================
   Responsive — prevent horizontal overflow below ~820px.
   The old 8-button flat row overflowed; the 5 grouped triggers fit, but we
   still let the bar wrap on small screens and shrink padding so the triggers
   never push past the viewport. Dropdown panels stay anchored to their trigger.
   ============================================================ */

@media (max-width: 820px) {
  .mode-bar__inner {
    flex-wrap: wrap;
  }

  .mode-btn {
    padding: var(--space-md) var(--space-md);
  }
}

@media (max-width: 600px) {
  .mode-btn {
    padding: var(--space-sm) var(--space-sm);
    font-size: var(--text-sm);
    gap: var(--space-xs);
  }

  /* On the narrowest screens a dropdown panel could exceed the viewport if its
     trigger sits near the right edge — clamp its width and let it scroll. */
  .nav-menu__panel {
    min-width: 10rem;
    max-width: calc(100vw - 2 * var(--space-md));
  }

  .torch-launch__label {
    /* Keep the icon; drop the word to save width in the stacked header. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ============================================================
   Mobile nav — hamburger + accordion drawer
   Phase 1 mobile optimization (KDL 2026-06-27, 2026-06-14).

   BREAKPOINT: --bp-tab = 700px. Chosen to match the app's existing tablet/phone
   tier (the gear-float panel already reflows at <=700px, and the audit named
   700px as --bp-tab). Above it, the flat desktop menubar is unchanged. At or
   below it, the menubar is hidden and the hamburger reveals the off-canvas
   drawer. One consistent value across this whole phase.
   ============================================================ */

/* The hamburger toggle is desktop-hidden by default; revealed below the bp.
   Styled to match the manuscript .mode-btn chrome (Cinzel caps, accent on
   active), so it reads as part of KDL 2026-06-27's header, not a foreign control. */
.mode-nav-toggle {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: none;             /* shown only <= --bp-tab */
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-heading-ui);
  font-size: var(--text-h5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-text-muted);
  border-bottom: 3px solid transparent;
  transition: color var(--transition-ui), border-color var(--transition-ui);
}

.mode-nav-toggle:hover { color: var(--color-text); }

.mode-nav-toggle[aria-expanded="true"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.mode-nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.mode-nav-toggle__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

/* Scrim — full-page dim behind the open drawer. Mirrors the modal scrim
   (rgba(0,0,0,0.72)) so the drawer reads as the same overlay family. z-index
   sits just below modals (1000) but above the torch widget (100). */
.mode-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 900;
  background-color: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity var(--transition-ui);
}

.mode-drawer-scrim.is-open { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mode-drawer-scrim { transition: none; }
}

/* Drawer — slide-in panel from the left. Off-canvas until .is-open. Surface +
   accent left edge to match the dropdown panel chrome. */
.mode-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 950;
  width: min(20rem, 86vw);
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border-right: 3px solid var(--color-accent);
  box-shadow: 6px 0 22px rgba(0, 0, 0, 0.6);
  transform: translateX(-100%);
  transition: transform var(--transition-ui);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mode-drawer.is-open { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .mode-drawer { transition: none; }
}

.mode-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.mode-drawer__title {
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-text-muted);
}

/* Close X reuses the shared .modal-close--icon look; bump to a 44px hit area. */
.mode-drawer__close {
  min-width: 44px;
  min-height: 44px;
}

.mode-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) 0 var(--space-lg);
}

/* Direct destination link (standalone sections + accordion children). */
.mode-drawer__link {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-text-muted);
  border-left: 3px solid transparent;
  transition: color var(--transition-ui), background-color var(--transition-ui),
    border-color var(--transition-ui);
}

.mode-drawer__link:hover {
  color: var(--color-text);
  background-color: var(--color-surface-hover);
}

.mode-drawer__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Accordion group header — toggles its child panel. */
.mode-drawer__group-header {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  min-height: 44px;
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-heading-ui);
  font-size: var(--text-h5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-ui), background-color var(--transition-ui);
}

.mode-drawer__group-header:hover { background-color: var(--color-surface-hover); }

.mode-drawer__group-header:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.mode-drawer__caret {
  font-size: 0.7em;
  line-height: 1;
  transition: transform var(--transition-ui);
}

.mode-drawer__group-header[aria-expanded="true"] .mode-drawer__caret {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .mode-drawer__caret { transition: none; }
}

/* Accordion child panel — indented links under the group. */
.mode-drawer__group-panel {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
}

.mode-drawer__group-panel .mode-drawer__link {
  padding-left: calc(var(--space-lg) + var(--space-md));
  font-size: var(--text-sm);
}

/* Active drawer destinations: torchlight accent left rule (mirrors the desktop
   dropdown active state). app.js does not currently mark these per-build, but
   the hook is here for future highlight parity. */
.mode-drawer__link.is-active,
.mode-drawer__link[aria-current="page"] {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

/* ----- The breakpoint switch ----- */
@media (max-width: 700px) {
  /* Hide the flat desktop menubar; the hamburger replaces it. */
  .mode-bar__inner { display: none; }

  /* Reveal the hamburger. [hidden] is removed implicitly by display here, but
     keep the attribute off in markup once shown so AT sees it; the toggle
     starts [hidden] and is unhidden by this rule taking effect. */
  .mode-nav-toggle {
    display: inline-flex;
  }
}

/* Above the breakpoint the drawer + scrim must never show, even if a stale
   .is-open lingers after a resize (belt-and-suspenders alongside the JS guard). */
@media (min-width: 701px) {
  .mode-drawer,
  .mode-drawer-scrim {
    display: none !important;
  }
}