/* ════════════════════════════════════════════════════════════════════════
   navbar_demo.css — a ONE-OFF reskinned nav bar (opt in: zBrush [page, leaf, demo.navbar_demo]).
   Proof of how far a bar reskins purely through your OWN class + the canonical
   navbar surface Bifrost writes (.zNavbar / .zNav-item / .zNav-link). Here: a
   glassy gradient "pill" with glowing, uppercase links and an underline that
   sweeps in on hover — a look nothing like the stock bar.

   NOTE — an inline bar renders with a fixed class (.zNavbar-inblock) and never
   carries an author _zClass on the <nav> itself (unlike a zTable). So the brush
   is scoped through a WRAPPER class on the demo block: _zClass: nav-fancy on the
   block, and every rule reads `.nav-fancy .zNavbar…`. That isolates this one bar
   and leaves the page's other bars stock. Bifrost-only — zCLI prints a plain menu.
   ════════════════════════════════════════════════════════════════════════ */

/* the bar — a floating glass pill with a gradient rim and a soft glow */
.nav-fancy .zNavbar {
    --nf-a:          #6366f1;
    --nf-b:          #ec4899;
    display:         inline-flex;
    gap:             0.4rem;
    padding:         0.45rem 0.9rem;
    border:          1px solid transparent;
    border-radius:   999px;
    background:
        linear-gradient(#0c0c1a, #0c0c1a) padding-box,
        linear-gradient(90deg, var(--nf-a), var(--nf-b)) border-box;
    box-shadow:      0 12px 36px rgba(99, 102, 241, 0.30);
    backdrop-filter: blur(8px);
}

/* drop the inline bar's default item spacing — the pill controls its own gaps */
.nav-fancy .zNavbar-nav {
    display:     flex;
    gap:         0.25rem;
    align-items: center;
    margin:      0;
    padding:     0;
    list-style:  none;
}
.nav-fancy .zNav-item { margin: 0; }

/* the links — uppercase, spaced, with a sweep-in underline */
.nav-fancy .zNav-link {
    position:        relative;
    padding:         0.35rem 0.85rem;
    border-radius:   999px;
    color:           #e9e9ff;
    font-size:       0.78rem;
    font-weight:     700;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    text-decoration: none;
    transition:      color 0.2s ease, background 0.2s ease;
}
.nav-fancy .zNav-link::after {
    content:          "";
    position:         absolute;
    left:             0.85rem;
    right:            0.85rem;
    bottom:           0.2rem;
    height:           2px;
    background:       linear-gradient(90deg, var(--nf-a), var(--nf-b));
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform 0.3s ease;
}

/* hover — light up, fill faintly, draw the underline across */
.nav-fancy .zNav-link:hover {
    color:      #ffffff;
    background: rgba(255, 255, 255, 0.06);
}
.nav-fancy .zNav-link:hover::after { transform: scaleX(1); }

/* keyboard focus — a clear ring on the pill */
.nav-fancy .zNav-link:focus-visible {
    outline:        2px solid var(--nf-a);
    outline-offset: 2px;
}

/* respect reduced-motion — hold the underline still */
@media (prefers-reduced-motion: reduce) {
    .nav-fancy .zNav-link::after { transition: none; }
}