/**
 * AKAVA navigation — single source of truth.
 *
 * This file replaces every scattered .akava-nav* / .console drawer rule that
 * accumulated across system.css. Edit the menu here and nowhere else.
 *
 * Layout:
 *   Desktop (>900px): sticky top bar, horizontal menu, hover dropdowns.
 *   Mobile  (<=900px): a fixed drawer that spans from below the bar to the
 *                      bottom of the viewport, so the link list always scrolls.
 *
 * Loaded AFTER system.css, so it wins the cascade while the old duplicated
 * blocks are removed. See CHANGELOG for the removal ranges.
 */

/* =========================================================================
   Desktop bar
   ========================================================================= */
.akava-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--ak-z-nav);
  min-block-size: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 4vw, 52px);
  padding-inline: max(20px, calc((100vw - 1440px) / 2));
  border-block-end: 1px solid var(--ak-tint-strong);
  color: var(--ak-text);
  font: 700 var(--ak-step--1)/1.15 var(--ak-font-mono);
  transition: box-shadow 160ms ease;
  /* No background or backdrop-filter here on purpose - see ::before below. */
  background: transparent;
}

/*
 * ROOT-CAUSE FIX. The frosted bar surface lives on a pseudo-element.
 * backdrop-filter on .akava-nav itself makes it the CONTAINING BLOCK for the
 * position:fixed mobile drawer, so the drawer resolved its top/bottom against
 * the 64px bar and collapsed into a thin strip. A pseudo-element is a sibling
 * of the drawer, not an ancestor, so the effect is safe here.
 *
 * Never move backdrop-filter, filter, transform, perspective, contain:paint or
 * will-change back onto .akava-nav - any of them re-breaks the mobile menu.
 */
.akava-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ak-glass);
  backdrop-filter: blur(18px) saturate(125%);
  transition: background 160ms ease;
}

.admin-bar .akava-nav {
  inset-block-start: 32px;
}

.akava-nav.is-scrolled::before {
  background: var(--ak-glass-solid);
}

.akava-nav.is-scrolled {
  box-shadow: var(--ak-shadow-soft);
}

.akava-nav a {
  color: inherit;
  text-decoration: none;
}

.akava-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-block-size: 44px;
  letter-spacing: 0.13em;
}

.akava-nav__brand span {
  color: var(--ak-primary);
  font-size: 1.05rem;
}

/* Non-sticky variant used by full-bleed landings (e.g. Leadite). The mobile
   drawer below is position:fixed regardless, so it still works when open. */
.akava-nav--flow,
.admin-bar .akava-nav--flow {
  position: relative;
  inset-block-start: auto;
}

/* -------- Panel + horizontal menu -------- */
.akava-nav__panel {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 4vw, 52px);
  min-inline-size: 0;
}

.akava-nav__links,
.akava-nav__links .akava-menu {
  min-inline-size: 0;
}

.akava-menu,
.akava-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.akava-nav__links {
  display: block;
  inline-size: 100%;
}

.akava-nav__links > .akava-menu {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(16px, 3vw, 36px);
}

.akava-nav__links .menu-item {
  position: relative;
}

.akava-nav__links a,
.akava-nav__console {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--ak-muted);
}

.akava-nav__links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 2px;
  block-size: 2px;
  background: var(--ak-primary);
  scale: 0 1;
  transform-origin: inline-start;
  transition: scale 140ms ease;
}

.akava-nav__links a:hover,
.akava-nav__links a:focus-visible,
.akava-nav__links a[aria-current="page"],
.akava-nav__links .current-menu-item > a,
.akava-nav__links .current-menu-ancestor > a,
.akava-nav__links .current_page_item > a,
.akava-nav__console:hover,
.akava-nav__console:focus-visible {
  color: var(--ak-text-bright);
}

.akava-nav__links a:hover::after,
.akava-nav__links a:focus-visible::after,
.akava-nav__links a[aria-current="page"]::after,
.akava-nav__links .current-menu-item > a::after,
.akava-nav__links .current-menu-ancestor > a::after,
.akava-nav__links .current_page_item > a::after {
  scale: 1 1;
}

.akava-nav__console {
  justify-self: end;
  color: var(--ak-dim);
  font-size: 0.76rem;
}

/* -------- Desktop hover dropdowns -------- */
.akava-nav__links .sub-menu {
  position: absolute;
  inset-block-start: calc(100% - 2px);
  inset-inline-start: -14px;
  z-index: var(--ak-z-drawer);
  min-inline-size: 220px;
  padding: 8px;
  border: 1px solid var(--ak-border);
  background: var(--ak-panel-solid);
  box-shadow: var(--ak-shadow-hard);
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity 140ms ease, translate 140ms ease, visibility 140ms ease;
}

.akava-nav__links .menu-item:hover > .sub-menu,
.akava-nav__links .menu-item:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  translate: 0;
}

.akava-nav__links .sub-menu a {
  display: flex;
  min-block-size: 40px;
  padding-inline: 12px;
  white-space: nowrap;
}

.akava-nav__links .sub-menu a::after {
  display: none;
}

/* -------- Controls that only exist on mobile -------- */
.akava-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0 12px;
  border: 1px solid var(--ak-border);
  color: var(--ak-text);
  background: transparent;
  font: 700 0.76rem/1 var(--ak-font-mono);
  cursor: pointer;
}

.akava-nav__toggle svg {
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.akava-nav__mobile-bar {
  display: none;
}

/* The JS injects one disclosure button per parent item. It is only used in the
   mobile accordion, so it stays hidden on the desktop hover menu. */
.akava-submenu-toggle {
  display: none;
  inline-size: 32px;
  block-size: 32px;
  place-items: center;
  margin-inline-start: 2px;
  border: 1px solid var(--ak-border);
  color: var(--ak-primary);
  background: transparent;
  font: 800 1rem/1 var(--ak-font-mono);
  cursor: pointer;
}

.akava-submenu-toggle::before { content: "+"; }
.menu-item-has-children.is-submenu-open > .akava-submenu-toggle::before { content: "−"; }

html.akava-menu-open {
  overflow: hidden;
}

/* =========================================================================
   Mobile drawer  —  the ONE place this is defined
   ========================================================================= */
@media (max-width: 900px) {
  .akava-nav {
    grid-template-columns: auto auto;
  }

  .akava-nav.is-enhanced .akava-nav__toggle {
    display: inline-flex;
    justify-self: end;
  }

  /* Dimmed backdrop behind the open drawer. */
  html.akava-menu-open body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--ak-z-veil);
    background: var(--ak-veil);
    backdrop-filter: blur(3px);
  }

  /* Before JS enhances, the panel is just part of the flow. */
  .akava-nav__panel {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-block: 8px 12px;
  }

  /*
   * The drawer. position:fixed + top:var(--akava-panel-top) + bottom:0 gives a
   * bounded, viewport-relative height. grid-template-rows keeps the header and
   * the console link fixed while the middle link list scrolls. This is the fix
   * for "the menu is stuck at one block height and cannot scroll".
   */
  .akava-nav.is-enhanced .akava-nav__panel {
    position: fixed;
    inset-block-start: var(--akava-panel-top, calc(64px + env(safe-area-inset-top)));
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--ak-z-drawer);
    display: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--ak-primary);
    background: var(--ak-panel-solid);
    overflow: hidden;
  }

  .admin-bar .akava-nav.is-enhanced .akava-nav__panel {
    inset-block-start: var(--akava-panel-top, calc(110px + env(safe-area-inset-top)));
  }

  .akava-nav.is-enhanced.is-open .akava-nav__panel {
    display: grid;
  }

  /* Row 1: title + close button. */
  .akava-nav.is-enhanced .akava-nav__mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block-end: 10px;
    margin-block-end: 8px;
    border-block-end: 1px dashed var(--ak-border-strong);
    color: var(--ak-accent);
    font: 750 0.72rem/1 var(--ak-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .akava-nav__mobile-bar button {
    display: inline-grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    padding: 0;
    border: 1px solid var(--ak-border-strong);
    color: var(--ak-text-bright);
    background: transparent;
    font-size: 1.35rem;
    cursor: pointer;
  }

  /* Row 2: the scrollable list. */
  .akava-nav__links {
    min-block-size: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .akava-nav__links > .akava-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .akava-nav__links .menu-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
  }

  .akava-nav__links .menu-item:not(.menu-item-has-children) > a {
    grid-column: 1 / -1;
  }

  .akava-nav__links a,
  .akava-nav__console {
    justify-content: flex-start;
    min-block-size: 44px;
    padding: 8px 10px;
    border: 1px solid var(--ak-border);
    inline-size: 100%;
    overflow-wrap: anywhere;
  }

  .akava-nav__links a::after {
    display: none;
  }

  /* Disclosure button appears; accordion submenu is indented and collapsed. */
  .akava-nav__links .akava-submenu-toggle {
    display: inline-grid;
  }

  .akava-nav__links .sub-menu {
    grid-column: 1 / -1;
    position: static;
    min-inline-size: 0;
    margin-block-start: 4px;
    padding: 0 0 0 12px;
    border: 0;
    border-inline-start: 1px solid var(--ak-border);
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    translate: none;
    display: none;
  }

  .akava-nav__links .menu-item-has-children.is-submenu-open > .sub-menu {
    display: block;
  }

  .akava-nav__links .sub-menu a {
    white-space: normal;
  }

  /* Row 3: pinned "open console" link. */
  .akava-nav__console {
    color: var(--ak-primary);
    margin-block-start: 8px;
  }
}