/* ============================================================
   Header nav tabs — CyberButton look (vanilla port of
   cyber-button.tsx): brutalist slab + glowing scanline edge
   frame (22px overhang), dotted edge texture, hover halo, and
   the PixelCanvas shimmer inside. All decorative layers are
   aria-hidden / pointer-events-none; without JS the markup is
   inert and the links work normally.
   Layer order (bottom→top): halo ::after, scanlines ::before,
   texture .rsb-cyber-tex + pixel-canvas, label .rsb-pc-label.
   ============================================================ */

/* The slab — transparent, faint inset ring, glow on hover,
   1px press on :active (mirrors the component). */
#mainNav > li > a.dropdown-item {
    --rsb-cyber-glow: #0088cc;
    --rsb-cyber-halo-dot: rgba(0, 136, 204, .30);
    --rsb-cyber-tex-dot: rgba(0, 80, 140, .14);
    --rsb-cyber-ring: rgba(0, 60, 110, .10);
    position: relative;
    isolation: isolate;
    box-shadow: inset 0 0 0 1px var(--rsb-cyber-ring);
    transition: box-shadow .3s ease, transform .12s ease;
}
[data-theme="dark"] #mainNav > li > a.dropdown-item {
    --rsb-cyber-glow: #2997ff;
    --rsb-cyber-halo-dot: rgba(41, 151, 255, .32);
    --rsb-cyber-tex-dot: rgba(255, 255, 255, .16);
    --rsb-cyber-ring: rgba(255, 255, 255, .10);
}
#mainNav > li > a.dropdown-item:hover {
    box-shadow:
        inset 0 0 0 1px var(--rsb-cyber-ring),
        0 0 30px -6px var(--rsb-cyber-glow);
}
#mainNav > li > a.dropdown-item:active {
    transform: translateY(1px);
}
/* Keyboard focus ring (component's focus-visible ring) */
#mainNav > li > a.dropdown-item:focus-visible {
    outline: 2px solid var(--rsb-cyber-glow);
    outline-offset: 2px;
}

/* Hover halo — dotted field fading in around the slab
   (component's HALO: -inset-16, 3px dot grid, radial mask). */
#mainNav > li > a.dropdown-item::after {
    content: "";
    position: absolute;
    inset: -64px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
    background-image: radial-gradient(var(--rsb-cyber-halo-dot) 1px, transparent 1.4px);
    background-size: 3px 3px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 55%);
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 55%);
}
#mainNav > li > a.dropdown-item:hover::after {
    opacity: 1;
}

/* Scanline edge frame — 4 glowing gradient bars overhanging the
   slab by 22px on every side (component's EDGE spans). Drawn as
   four positioned 1px background gradients on one ::before; the
   drop-shadow filter supplies their glow. */
#mainNav > li > a.dropdown-item::before {
    content: "";
    position: absolute;
    inset: -22px;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    transition: opacity .3s ease;
    background:
        linear-gradient(to bottom, transparent, var(--rsb-cyber-glow), transparent) 22px 0 / 1px 100%,
        linear-gradient(to bottom, transparent, var(--rsb-cyber-glow), transparent) calc(100% - 22px) 0 / 1px 100%,
        linear-gradient(to right, transparent, var(--rsb-cyber-glow), transparent) 0 22px / 100% 1px,
        linear-gradient(to right, transparent, var(--rsb-cyber-glow), transparent) 0 calc(100% - 22px) / 100% 1px;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 7px var(--rsb-cyber-glow));
}
#mainNav > li > a.dropdown-item:hover::before {
    opacity: 1;
}

/* Dotted texture concentrated at the slab edges (component's
   TEXTURE: 4px dot grid, masked so the centre stays clear). */
#mainNav .rsb-cyber-tex {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .7;
    background-image: radial-gradient(var(--rsb-cyber-tex-dot) 1px, transparent 1.4px);
    background-size: 4px 4px;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 35%, black 100%);
    mask-image: radial-gradient(ellipse at center, transparent 35%, black 100%);
}

/* Pixel shimmer layer — above the frame layers, below the text.
   The anchor is no longer overflow:hidden (the frame needs to
   overhang), so the canvas clips itself to the pill's radius. */
#mainNav pixel-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
}

/* Label/content on top of every decorative layer. */
#mainNav > li > a .rsb-pc-label {
    position: relative;
    z-index: 2;
}