/* ============================================================
   SECTION RAIL — scroll-spy "on this page" nav
   ------------------------------------------------------------
   Plain CSS on purpose. assets/css/redesign.css is COMPILED
   Tailwind output, so any new utility class written in markup
   is inert — these rules have to be hand-written.

   Two presentations, one item list (partials/section-rail.php):
     .bl-rail      floating vertical rail   >= 1280px
     .bl-rail-bar  horizontal sticky bar    <  1280px
   Exactly one is visible at any width.
   ============================================================ */

:root {
    /* Every px here comes straight off the content column on these two pages
       (gutter = rail + gap + 24px base padding). Slimmed 230->176 / 32->24 on
       2026-08-12 to give ~62px back to the text at ~1300px viewports. */
    --bl-rail-w:   176px;   /* rail column width                       */
    --bl-rail-gap: 24px;    /* gap between rail and content            */
    --bl-nav-h:    80px;    /* fixed site header height (navbar.js)    */

    /* MUST live on :root, not on .bl-rail. The rail positions itself from
       --bl-rail-max while `.container-x` sizes itself from the same value, and
       a custom property set on .bl-rail does NOT inherit to a sibling — the
       container would silently fall back to its literal default and drift out
       of alignment with the rail. That drift was invisible while the fallback
       happened to equal the real value; changing the rail width exposed it as
       a -7px overlap at >=1512px. */
    --bl-rail-gutter: calc(var(--bl-rail-w) + var(--bl-rail-gap));
    --bl-rail-max:    calc(1280px + var(--bl-rail-w) + var(--bl-rail-gap));

    /* Distance from viewport top to the first usable pixel of content.
       --bl-cd-h is defined in countdown-banner.css and only exists while a
       cohort countdown is live; 0px otherwise. */
    --bl-rail-top:    calc(var(--bl-nav-h) + var(--bl-cd-h, 0px));
}

/* ---------- Hidden by default; media queries opt each one in ---------- */
.bl-rail     { display: none; }
.bl-rail-bar { display: none; }

/* ============================================================
   >= 1280px — FLOATING RAIL
   ============================================================ */
@media (min-width: 1280px) {

    /* Reserve a left gutter for the rail on rail pages only.
       Scoped to `body > section` so the header and footer — which use
       .container-x too — are untouched. Backgrounds stay full-bleed;
       only the inner container shifts. */
    body.bl-rail-page > section > .container-x,
    body.bl-rail-page > section .container-x {
        /* No literal fallbacks here on purpose — a fallback that disagrees
           with :root silently misaligns the container against the rail. */
        max-width:    var(--bl-rail-max);
        padding-left: calc(var(--bl-rail-w) + var(--bl-rail-gap) + 1.5rem);
    }

    .bl-rail {
        display: block;
        position: fixed;
        z-index: 25;
        width: var(--bl-rail-w);
        /* Align with the shifted container's left edge, then inset by its padding */
        left: max(1.5rem, calc((100vw - var(--bl-rail-max)) / 2 + 1.5rem));
        top: calc(var(--bl-rail-top) + 2.5rem);
        max-height: calc(100vh - var(--bl-rail-top) - 5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;

        /* Fades in once the reader is past the hero — js/section-rail.js
           toggles .is-visible */
        opacity: 0;
        visibility: hidden;
        transform: translateX(-8px);
        transition: opacity .28s ease, transform .28s ease, visibility .28s;
    }

    .bl-rail.is-visible {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .bl-rail__eyebrow {
        margin: 0 0 1rem;
        padding-left: 13px;
        font-family: "Space Mono", ui-monospace, monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: #ff6b1a;
    }

    .bl-rail__list {
        list-style: none;
        margin: 0;
        padding: 0;
        border-left: 1px solid rgba(26, 26, 26, .12);
    }

    .bl-rail__link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0 8px 11px;
        margin-left: -1px;
        font-size: 14px;
        line-height: 1.3;
        color: rgba(26, 26, 26, .55);
        text-decoration: none;
        transition: color .18s ease;
        /* 176px is tight for "What You'll Build" — let it wrap to a second
           line rather than overflow the rail or clip. */
        overflow-wrap: break-word;
    }

    .bl-rail__marker {
        position: absolute;
        left: 0;
        width: 2px;
        height: 0;
        background: #ff6b1a;
        transition: height .22s ease;
    }

    .bl-rail__list li {
        position: relative;
    }

    .bl-rail__link:hover {
        color: rgba(26, 26, 26, .95);
    }

    .bl-rail__link.is-active {
        color: #1a1a1a;
        font-weight: 600;
    }

    .bl-rail__link.is-active .bl-rail__marker {
        height: 100%;
        top: 0;
    }

    .bl-rail__cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 1.25rem;
        margin-left: 13px;
        padding: 10px 16px;
        background: #ff6b1a;
        color: #fff;
        border-radius: 6px;
        font-family: "Space Mono", ui-monospace, monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-decoration: none;
        transition: opacity .18s ease;
    }

    .bl-rail__cta:hover { opacity: .9; }

    /* Dark sections: the rail floats over whatever band it happens to be
       beside, so js/section-rail.js sets .on-dark from the active section's
       background. */
    .bl-rail.on-dark .bl-rail__list  { border-left-color: rgba(255, 255, 255, .18); }
    .bl-rail.on-dark .bl-rail__link  { color: rgba(255, 255, 255, .58); }
    .bl-rail.on-dark .bl-rail__link:hover,
    .bl-rail.on-dark .bl-rail__link.is-active { color: #fff; }
}

/* ============================================================
   < 1280px — HORIZONTAL STICKY BAR
   (the pre-2026-08 #bl-applied-subnav design, kept intact)
   ============================================================ */
@media (max-width: 1279.98px) {

    .bl-rail-bar {
        display: block;
        position: sticky;
        top: var(--bl-rail-top);
        z-index: 30;
        background: rgba(26, 26, 26, .95);
        color: #f5f5f5;
        border-bottom: 1px solid rgba(245, 245, 245, .1);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .bl-rail-bar__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .375rem 0;
    }

    .bl-rail-bar__links {
        display: flex;
        align-items: center;
        gap: .25rem;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        font-family: "Space Mono", ui-monospace, monospace;
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
        /* Fade the trailing edge so it reads as scrollable — only 1–2 of 8
           labels fit on a phone, and a hard cut looks like the list ends. */
        -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
                mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    }

    .bl-rail-bar__links::-webkit-scrollbar { display: none; }

    .bl-rail-bar__link {
        flex: none;
        display: inline-flex;
        align-items: center;
        /* 44px floor = iOS minimum tap target; these were 29px */
        min-height: 44px;
        padding: 6px 12px;
        border-radius: 6px;
        color: inherit;
        text-decoration: none;
        transition: background-color .18s ease, color .18s ease;
    }

    .bl-rail-bar__link:hover { background: rgba(245, 245, 245, .1); }

    .bl-rail-bar__link.is-active {
        background: rgba(255, 107, 26, .18);
        color: #ff6b1a;
    }

    .bl-rail-bar__cta {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 8px 16px;
        background: #ff6b1a;
        color: #fff;
        border-radius: 6px;
        font-family: "Space Mono", ui-monospace, monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-decoration: none;
    }

    .bl-rail-bar__cta:hover { opacity: .9; }

    /* The full "Reserve Seat" label eats ~160px of a 360px bar, leaving one
       section link visible. Swap to the short label on narrow phones — the
       CTA stays, it just stops crowding out the nav it sits beside. */
    .bl-rail-bar__cta-short { display: none; }

    @media (max-width: 519.98px) {
        .bl-rail-bar__cta-long  { display: none; }
        .bl-rail-bar__cta-short { display: inline; }
        .bl-rail-bar__cta { padding: 8px 12px; gap: 6px; }
        .bl-rail-bar__link { padding: 6px 9px; }
    }

    /* Scroll progress hairline along the bottom edge */
    .bl-rail-bar__progress {
        display: block;
        height: 2px;
        width: 0;
        background: #ff6b1a;
        transition: width .12s linear;
    }
}

/* ============================================================
   Anchor offset — every rail target must clear the fixed header
   (and the countdown banner, when one is live)
   ============================================================ */
body.bl-rail-page [id] {
    scroll-margin-top: calc(
        var(--bl-nav-h, 80px) + var(--bl-cd-h, 0px) + var(--bl-bar-h, 0px) + 1rem
    );
}

@media (prefers-reduced-motion: reduce) {
    .bl-rail,
    .bl-rail__marker,
    .bl-rail__link,
    .bl-rail-bar__link,
    .bl-rail-bar__progress {
        transition: none !important;
    }
}