/* ── Navbar / TOC active + inactive link styling ──────────────────────────
   Active link in the primary sidebar nav gets a "> " marker whose color
   shimmers slowly between two tones, picked at random once per page load
   from a small pastel palette (see custom.js
   `setupNavAccent`) — a single synchronous pick, not a per-frame cost.
   The shimmer itself is a compositor-only `background-position` animation
   (no layout/paint per frame). The TOC (secondary sidebar) gets no
   animation at all. Inactive links get a plain color transition on
   hover. */

.md-nav__link {
    transition: color 0.2s var(--ease-out-3);
    /* Material ships leaf links at 700 and active at 500, so "bold" on
       active is invisible. Keep leaves regular; bold only the selection. */
    font-weight: 400;
    font-synthesis: weight;
}

.md-nav__link:not(.md-nav__link--active):hover {
    color: var(--md-accent-fg-color);
}

/* Section toggles / dropdowns — the labels that expand or collapse a
   nested nav list — get bolded so they read as controls distinct from
   plain leaf links. */
.md-nav__item--nested > label.md-nav__link {
    font-weight: 700;
}

/* Hooks & Actions is a reference shelf rather than part of the reading
   sequence. Keep its long page list folded until someone opens it, while
   leaving the current hook visible when navigation lands inside it. */
.md-sidebar--primary
    li.xnano-hooks-nav
    > nav.md-nav {
    display: none;
}

.md-sidebar--primary
    li.xnano-hooks-nav
    > input.md-nav__toggle:checked
    ~ nav.md-nav,
.md-sidebar--primary
    li.xnano-hooks-nav:has(a.md-nav__link.md-nav__link--active)
    > nav.md-nav {
    display: block;
}

/* Hook subsection labels organize the long reference without introducing
   another layer of toggles inside the outer Hooks & Actions dropdown. */
.md-sidebar--primary li.xnano-hooks-subsection > label.md-nav__link {
    pointer-events: none;
}

.md-sidebar--primary
    li.xnano-hooks-subsection
    > label.md-nav__link
    > .md-nav__icon {
    display: none;
}

/* "> " marker before the active page's title in the primary sidebar nav
   only — the shimmer animates the marker's color, not the link text. */
.md-sidebar--primary .md-nav__link--active .md-ellipsis::before {
    content: "> ";
    background-image: linear-gradient(
        90deg,
        var(--xnano-nav-c1, var(--md-accent-fg-color)),
        var(--xnano-nav-c2, var(--md-accent-fg-color)),
        var(--xnano-nav-c1, var(--md-accent-fg-color))
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: xnano-nav-shimmer 14s ease-in-out infinite;
    will-change: background-position;
}

/* Current page title — link, TOC toggle label, and the ellipsis span
   Material wraps the title in (weight must hit the span, not only the
   anchor, or a single-weight body font can look unchanged). */
.md-sidebar--primary .md-nav__item--active > .md-nav__link,
.md-sidebar--primary .md-nav__link--active,
.md-sidebar--primary .md-nav__link--active .md-ellipsis {
    font-weight: 700 !important;
}

/* TOC (secondary): same bold active heading, no shimmer. */
.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link--active .md-ellipsis {
    font-weight: 700 !important;
}

@keyframes xnano-nav-shimmer {
    50% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .md-sidebar--primary .md-nav__link--active .md-ellipsis::before {
        animation: none;
    }
}