/*!
 * ZIC navigation — shell variable mapping and the desktop rail control
 * ============================================================================
 * Materio owns the navigation. The rail's width, item geometry, hover and
 * active states, the submenu animation, the mobile drawer, the scrim and the
 * hamburger all come from `vendor/css/core.css` + `js/menu.js` + `js/main.js`,
 * and are not restated here.
 *
 * Two things the shell cannot supply are left in this file:
 *
 *   1. The variable mapping that points the shell's menu tokens at the ZIC
 *      palette, so the rail re-themes through the token layer with no
 *      per-element colour rules.
 *   2. The desktop rail collapse control. Materio ships the collapsed *styles*
 *      (`.layout-menu-collapsed .layout-menu`, `--bs-menu-collapsed-width`) but
 *      nothing that writes the class on desktop — `Helpers.toggleCollapsed()`
 *      returns early unless `isSmallScreen()`, where it drives the drawer
 *      instead. `js/nav.js` writes it and remembers the choice.
 *
 * Everything that used to restyle a Materio layout class from here was removed
 * by the Materio restoration; the removed rules are inventoried in
 * docs/MATERIO_DRIFT_AUDIT.md §7.7 (Prompt 2 of
 * docs/prompts/MATERIO_RESTORE_BULK_PROMPTS.md).
 */

/* ===========================================================================
 * 1. Shell menu variables → ZIC tokens
 * ======================================================================== */
:root,
[data-bs-theme="light"],
html.light-style {
  --bs-menu-width: var(--zic-nav-width);
  --bs-menu-collapsed-width: var(--zic-nav-width-collapsed);
}

/* ===========================================================================
 * 2. Desktop rail control
 *
 * Its own class, never `.layout-menu-toggle`: main.js resolves that selector
 * with `querySelector`, so an earlier match would take over the top bar
 * hamburger's hover-reveal binding.
 * ======================================================================== */
.zic-nav-collapse {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-end: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--zic-text-secondary);
  background-color: var(--zic-surface-tertiary);
  border: 1px solid var(--zic-border-default);
  border-radius: var(--zic-radius-sm);
  cursor: pointer;
}

.zic-nav-collapse:hover,
.zic-nav-collapse:focus-visible {
  transition:
    color var(--zic-transition-fast),
    background-color var(--zic-transition-fast),
    border-color var(--zic-transition-fast);
}

.zic-nav-collapse:hover,
.zic-nav-collapse:focus-visible {
  color: var(--zic-primary-text);
  border-color: var(--zic-border-strong);
  background-color: var(--zic-surface-primary);
  outline: none;
}

.layout-menu-collapsed .zic-nav-collapse {
  inset-inline-end: 50%;
  transform: translateX(50%);
}

/* The rail control has no meaning while the menu is an overlay drawer. */
@media (max-width: 1199.98px) {
  .zic-nav-collapse {
    display: none;
  }
}

/* ===========================================================================
 * 3. Theme integration
 * ======================================================================== */
/* The shell derives the menu ink from `--bs-base-color`; on the dark canvas the
   token layer is the source of truth for both the label and its icon.

   Both rules are scoped to `:not(.active)`: the flat fill on the active leaf
   carries its own contrast pair (`--zic-primary-contrast`), and an unscoped
   rule here wins on source order alone — `zic/nav.css` is the last stylesheet
   loaded — which measured 4.33:1 on the dark canvas. */
[data-bs-theme="dark"] .menu-vertical .menu-item:not(.active) > .menu-link,
html.dark-style .menu-vertical .menu-item:not(.active) > .menu-link {
  color: var(--zic-text-primary);
}

[data-bs-theme="dark"] .menu-vertical .menu-item:not(.active) > .menu-link .menu-icon,
html.dark-style .menu-vertical .menu-item:not(.active) > .menu-link .menu-icon {
  color: var(--zic-text-secondary);
}

/* The shell's scroll shadow is a multi-stop gradient built from `--bs-menu-bg`;
   one token either side of the fade keeps it in step with the palette. */
.layout-menu .menu-inner-shadow {
  background: linear-gradient(var(--zic-surface-primary), transparent);
}