/* ============================================================
   SITE SECTION RAIL — subnav.css  (shared)
   Sticky "light rail" section nav + scroll progress trail.
   Used by esc.html and products.html. Pair with subnav.js.

   Markup expected:
     <div id="esc-scroll-progress" aria-hidden="true"></div>
     <nav class="esc-subnav" id="esc-subnav" data-watch="#hero-id" ...>
         <div class="esc-subnav-inner">
             <a href="#section-id">Label</a> ...
             <span class="esc-subnav-indicator" aria-hidden="true"></span>
         </div>
     </nav>
   Give each scroll target class="subnav-target" (or its own
   scroll-margin-top) so it lands clear of the fixed bars.
   ============================================================ */

/* Anchor targets land clear of the fixed header + rail */
.subnav-target { scroll-margin-top: 130px; }

/* Screen-reader-only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Sticky light-rail section nav ── */
.esc-subnav {
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    z-index: 2010; /* above the header (2002) — the transparent desktop
                      header would otherwise swallow clicks on the rail */
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.esc-subnav.is-visible {
    opacity: 1;
    transform: none;
    /* pointer-events stay OFF on this full-width strip — otherwise its
       invisible flanks sit above the header and swallow clicks on the
       logo/cart. Only the capsule itself is interactive. */
}
.esc-subnav.is-visible .esc-subnav-inner {
    pointer-events: auto;
}

.esc-subnav-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-top: 10px;
    padding: 0.3rem 0.45rem;
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(5, 10, 18, 0.72);
    border: 1px solid rgba(0, 170, 255, 0.22);
    border-radius: 999px;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.35),
        0 0 14px color-mix(in srgb, var(--neon, #00eaff) 10%, transparent);
}
.esc-subnav-inner::-webkit-scrollbar { display: none; }

/* While the mobile menu is open, the rail and scroll trail get out of the way.
   (pointer-events must be nulled on the INNER capsule too — a child's own
   `auto` beats a parent's `none`.) */
html:has(#nav-toggle:checked) .esc-subnav,
html:has(#nav-toggle:checked) .esc-subnav .esc-subnav-inner,
html:has(#nav-toggle:checked) #esc-scroll-progress {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* Idle state — fades out fully after ~3s without scrolling; scrolling or
   moving the pointer to the top of the screen brings it straight back.
   pointer-events off while faded so the invisible bar can't block taps. */
.esc-subnav-inner { transition: opacity 0.25s ease; }          /* quick wake */
.esc-subnav.is-idle .esc-subnav-inner {
    opacity: 0;
    transition: opacity 1.2s ease;                              /* slow fade-out */
    pointer-events: none;                                       /* faded = untouchable */
}

.esc-subnav a {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    transition: color 0.25s;
}

.esc-subnav a:hover { color: #ffffff; }
.esc-subnav a.is-active { color: var(--neon, #00eaff); }

.esc-subnav a.esc-subnav-cta {
    background: var(--neon, #00eaff);
    color: #000;
    font-weight: 800;
    margin-left: 0.3rem;
    transition: box-shadow 0.25s;
}
.esc-subnav a.esc-subnav-cta:hover {
    box-shadow: 0 0 14px color-mix(in srgb, var(--neon, #00eaff) 55%, transparent);
}

/* sliding neon underline */
.esc-subnav-indicator {
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--neon, #00eaff);
    box-shadow:
        0 0 8px var(--neon, #00eaff),
        0 0 18px color-mix(in srgb, var(--neon, #00eaff) 50%, transparent);
    opacity: 0;
    transition: left 0.3s ease, width 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}
.esc-subnav-indicator.is-on { opacity: 1; }

@media (max-width: 768px) {
    .esc-subnav { top: 55px; }
}

/* Rail items can swap between breakpoints (e.g. two booster links on
   desktop collapse to one combined "Boosters" link on mobile) */
.subnav-mobile-only { display: none; }
@media (max-width: 600px) {
    .subnav-desktop-only { display: none; }
    .subnav-mobile-only { display: block; }
}

/* Compact rail typography so five items fit small screens.
   Real Orbitron runs ~1.2em per capital — physically unfittable at five
   items on a 360px screen — so phones switch the rail to Raleway and
   the Orbitron identity holds from tablet width up. */
@media (max-width: 600px) {
    .esc-subnav-inner { gap: 0; padding: 0.25rem 0.35rem; }
    .esc-subnav a {
        font-family: 'Raleway', sans-serif;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.04em;
        padding: 0.5rem 0.45rem;
    }
    .esc-subnav a.esc-subnav-cta { margin-left: 0.15rem; font-weight: 700; }
}
@media (max-width: 400px) {
    .esc-subnav a {
        font-size: 10px;
        letter-spacing: 0.03em;
        padding: 0.45rem 0.4rem;
    }
}

/* ── Desktop handover: the global pill nav gives way to the rail ──
   The rail slides into the pill's own berth (top 12px) while the pill
   fades out; the cart button is docked into the rail by JS. */
@media (min-width: 1025px) {
    .esc-subnav { top: 12px; }
    .esc-subnav-inner { margin-top: 0; }

    .desktop-pill {
        transition: opacity 0.32s ease, transform 0.32s ease;
    }
    body.esc-rail-active .desktop-pill {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
        pointer-events: none;
    }
}

/* Cart button while docked in the rail */
.esc-subnav .cart-header-btn {
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 14px;
    margin-left: 0.3rem;
    background: color-mix(in srgb, var(--neon, #00eaff) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--neon, #00eaff) 25%, transparent);
}
.esc-subnav #cart-count {
    font-size: 0.72rem;
    padding: 1px 6px;
}

/* (Reduced-motion handling and the divider glow moved to style.css —
   they are site-wide concerns, not rail concerns) */

/* ── Scroll progress light trail ── */
#esc-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 2005; /* rides above the header's top edge */
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--neon, #00eaff) 30%, transparent),
        var(--neon, #00eaff));
    box-shadow:
        0 0 8px color-mix(in srgb, var(--neon, #00eaff) 55%, transparent),
        0 0 20px color-mix(in srgb, var(--neon, #00eaff) 25%, transparent);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}