/* ════════════════════════════════════════════════════════════════════════
   crumbs_demo.css — a ONE-OFF reskinned breadcrumb (opt in: zBrush [page, leaf, demo.crumbs_demo]).
   Proof of how far a crumb ribbon reskins purely through your OWN class + the
   canonical breadcrumb surface Bifrost writes (.zBreadcrumb / .zCrumb /
   .zCrumb-lead / .zCrumb-om / .zCrumb-ev). Here: a connected gradient "track"
   where the current crumb glows and ancestors fade back — a look nothing like
   the stock ribbon.

   NOTE — the ribbon renders with fixed classes and never carries an author
   _zClass on the <nav> itself (like the navbar). So the brush is scoped through
   a WRAPPER class on the demo block: _zClass: crumb-fancy on the block, and
   every rule reads `.crumb-fancy .zCrumb…`. That isolates this one ribbon and
   leaves the page's other crumbs stock. Bifrost-only — zCLI prints plain.
   ════════════════════════════════════════════════════════════════════════ */

/* the rail — a floating glass track with a gradient rim */
.crumb-fancy .zBreadcrumb {
    --cf-a:          #6366f1;
    --cf-b:          #ec4899;
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
    padding:         0.4rem 0.7rem;
    border:          1px solid transparent;
    border-radius:   999px;
    background:
        linear-gradient(#0c0c1a, #0c0c1a) padding-box,
        linear-gradient(90deg, var(--cf-a), var(--cf-b)) border-box;
    box-shadow:      0 12px 36px rgba(99, 102, 241, 0.30);
    backdrop-filter: blur(8px);
}

/* each crumb — a soft pill, uppercase, spaced */
.crumb-fancy .zCrumb {
    padding:         0.3rem 0.75rem;
    border-radius:   999px;
    color:           #b9b9d8;
    font-size:       0.74rem;
    font-weight:     700;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    text-decoration: none;
    transition:      color 0.2s ease, background 0.2s ease;
}

/* a clickable ancestor — lights up and fills faintly on hover */
.crumb-fancy .zCrumb-om:hover {
    color:      #ffffff;
    background: rgba(255, 255, 255, 0.06);
}

/* a plain (display-only) ancestor — quieter, no pointer */
.crumb-fancy .zCrumb-ev {
    color:  #8a8ab0;
    cursor: default;
}

/* the current crumb — a glowing gradient chip */
.crumb-fancy .zCrumb-lead {
    color:      #ffffff;
    background: linear-gradient(90deg, var(--cf-a), var(--cf-b));
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.35);
}

/* keyboard focus — a clear ring on the track */
.crumb-fancy .zCrumb:focus-visible {
    outline:        2px solid var(--cf-a);
    outline-offset: 2px;
}