/* sidebar-nav — @tokens: --sidebar-nav-link-pad-y, --sidebar-nav-link-pad-x */

/* Reusable vertical in-page / app navigation (wayfinding). Distinct from
   the overlay mobile-menu and the doc-specific doc-toc: a plain nestable
   link list with an optional group label and a brand accent on the
   current item. Batch E (navigation/wayfinding). */
.hzo-sidebar-nav {
    display: block;
    width: 100%;
}

/* Groups stack with breathing room between them. */
.hzo-sidebar-nav__group + .hzo-sidebar-nav__group {
    margin-top: var(--space-sm);
}

/* Small uppercase section heading above a list. */
.hzo-sidebar-nav__label {
    margin: 0;
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--fs-50);
    font-weight: var(--fw-600);
    line-height: var(--lh-normal);
    letter-spacing: 0.04em;   /* structural micro-tracking for the uppercase label */
    text-transform: uppercase;
    color: var(--text-muted);
}

.hzo-sidebar-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

/* Nested child list — indented under its parent link. */
.hzo-sidebar-nav__list--nested {
    padding-left: var(--space-sm);
    margin-top: var(--space-2xs);
}

.hzo-sidebar-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--sidebar-nav-link-pad-y, 8px) var(--sidebar-nav-link-pad-x, 12px);
    border-radius: var(--radius-control);
    color: var(--text-body);
    text-decoration: none;
    font-size: var(--fs-100);
    line-height: var(--lh-normal);
    transition: background var(--transition-base) ease, color var(--transition-base) ease;
}

.hzo-sidebar-nav__link:hover {
    background: var(--bg-alt);
    color: var(--text-heading);
}

/* Current item — brand-pale surface + a left brand accent bar. Both the
   .is-active class and [aria-current="page"] resolve to the same state. */
.hzo-sidebar-nav__link.is-active,
.hzo-sidebar-nav__link[aria-current="page"] {
    background: var(--brand-pale);
    color: var(--brand-text);
    font-weight: var(--fw-600);
    box-shadow: inset 3px 0 0 var(--brand);   /* structural: 3px accent bar width */
}

.hzo-sidebar-nav__link:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-sidebar-nav__link {
        transition: none;
    }
}