/* ============================================================
   .uk-sidebar-nav — proposed canonical sidebar TOC nav (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the privacy-page table-of-contents nav in
   `public/css/privacy.css`:

     .privacy-sidebar        -> wrap with .uk-sidebar-nav-sticky          (sticky positioning)
     .privacy-nav            -> .uk-sidebar-nav                            (vertical card-shell with link list)
     .privacy-nav-link       -> .uk-sidebar-nav-link
     .privacy-nav-link.active-> .uk-sidebar-nav-link.is-active             (state class)
     .privacy-nav-link::before-> .uk-sidebar-nav-link::before              (left accent bar, scaleY 0 → 1)
     .nav-icon               -> .uk-sidebar-nav-link-icon                  (small inline svg slot)

   Distinct from the uk-docs-layout sidebar nav (`uk-docs-layout.css`):
     – `.docs-sidebar` is a fixed full-height left rail with section
       headings and grouped links (the IDE-style layout).
     – `.uk-sidebar-nav` is the in-content sticky TOC card you tile
       beside long-form prose — privacy policy, future blog posts,
       tutorials. Card chrome, accent bar on active, optional icon slot.

   Composes with: nothing — leaf primitive. Active state is signalled with
   the `.is-active` class (toggle from JS based on scroll position) rather
   than `aria-current` so consumers don't have to choose between style and
   semantics — they can apply both.
   ============================================================ */

/* ============================================
   Sticky wrapper — optional positioning helper
   ============================================
   Wrap the nav in `.uk-sidebar-nav-sticky` to pin it under the global
   nav while the prose scrolls past. `top` resolves to `--layout-hero-top`
   so the nav clears the fixed top bar.
   ============================================ */
.uk-sidebar-nav-sticky {
    position: sticky;
    top: var(--layout-hero-top);
    z-index: 10;
}

/* ============================================
   Root — vertical card with link list
   ============================================ */
.uk-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-sm);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* ============================================
   Link — single nav row
   ============================================
   Hover and active state both pull the row to `--color-bg-card-hover`;
   active also lifts the text colour to `--color-primary` and reveals the
   left accent bar (scaleY 0 → 1 transition).
   ============================================ */
.uk-sidebar-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    overflow: hidden;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-md);
    font-weight: 500;
    line-height: var(--line-snug);
    text-decoration: none;
    transition:
        background-color var(--transition-base),
        color var(--transition-base);
}

.uk-sidebar-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--color-primary);
    transform: scaleY(0);
    transition: transform var(--transition-base);
}

.uk-sidebar-nav-link:hover {
    background: var(--color-bg-card-hover);
    color: var(--color-text);
}

.uk-sidebar-nav-link.is-active,
.uk-sidebar-nav-link[aria-current="true"] {
    background: var(--color-bg-card-hover);
    color: var(--color-primary);
}

.uk-sidebar-nav-link.is-active::before,
.uk-sidebar-nav-link[aria-current="true"]::before {
    transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
    .uk-sidebar-nav-link::before {
        transition: none;
    }
}

/* ============================================
   Icon slot — small inline svg before the label
   ============================================
   Optional. Drop a 16-px svg inside `.uk-sidebar-nav-link-icon`. Icon
   inherits the link's `color`, so it follows the hover / active tone
   transitions automatically through `currentColor`.
   ============================================ */
.uk-sidebar-nav-link-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.uk-sidebar-nav-link-icon svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: currentColor;
    stroke: currentColor;
}

/* ============================================
   Section heading — optional group divider
   ============================================
   For longer TOCs that benefit from sectioning. Rendered as a quiet
   uppercase eyebrow above a group of links.
   ============================================ */
.uk-sidebar-nav-heading {
    margin: var(--space-sm) var(--space-md) 4px;
    color: var(--color-text-muted);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.uk-sidebar-nav-heading:first-child {
    margin-top: 4px;
}