/* JA — pill rail (ARIA tablist switcher; behaviour in assets/js/ja.js)
 *
 * Figma draws an outlined pill container with bare text children (60px text
 * gap, 16px 40px container padding) plus an absolutely-positioned active
 * pill. Implemented as a flex row with padded children instead — same
 * visual, no overlay, real buttons. Active state is driven off
 * [aria-selected="true"] so ja.js needs no CSS hooks.
 */

.ja-pillrail-wrap {
    position: relative;
    text-align: center;
    margin-bottom: var(--ja-section-gap);
}

/* Without JS the buttons cannot switch panels — hide the rail. (All panel
   content stays reachable: FAQ renders every panel + group headings.) */
html:not(.ja-js) .ja-pillrail-wrap { display: none; }

.ja-pillrail {
    display: inline-flex;
    position: relative;
    border: 1px solid var(--ja-rule);
    border-radius: var(--ja-radius-pill);
    padding: 0 10px;
    max-width: 100%;
}

/* Sliding active-pill marker (JS-created; no-JS tabs have no chrome anyway). */
.ja-pillrail__ink {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: var(--ja-radius-pill);
    transition: left 0.25s ease, width 0.25s ease;
}
.ja-pillrail--light .ja-pillrail__ink { background: var(--ja-blue); }
.ja-pillrail--navy .ja-pillrail__ink { background: var(--ja-white); }
@media (prefers-reduced-motion: reduce) {
    .ja-pillrail__ink { transition: none; }
}

.ja-pillrail [role="tab"] {
    position: relative; /* above the ink */
    z-index: 1;
    padding: 16px 30px; /* 10px container + 30px item = Figma's 40px inset; 30+30 = the 60px text gap */
    border-radius: var(--ja-radius-pill);
    background: transparent;
    border: 0;
    color: var(--ja-rule);
    font-family: var(--ja-font-sans);
    letter-spacing: -0.04em;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Sizes — --lg (FAQ): 16+27+16 ≈ 59px; --sm (audiences): 11+23+11 ≈ 45px */
.ja-pillrail--lg [role="tab"] { font-size: 21px; font-weight: 400; }
.ja-pillrail--sm [role="tab"] { padding: 11px 30px; font-size: 16px; font-weight: 500; }

/* Active states per variant. The "active pill" is an ink element injected by
   ja.js (`.ja-pillrail__ink`) and positioned under the selected tab; the tab
   itself stays transparent and only flips ink colour. */
.ja-pillrail--light [role="tab"][aria-selected="true"] {
    color: var(--ja-white);
}
.ja-pillrail--navy [role="tab"][aria-selected="true"] {
    color: var(--ja-navy);
}

/* DEVIATION (WCAG AA): Figma's inactive navy-rail labels are #7B7984 on
   #03002F ≈ 3.1:1 — fails 4.5:1. Border keeps the Figma tone; inactive navy
   labels are lightened until they pass. */
.ja-pillrail--navy [role="tab"] { color: rgba(255, 255, 255, 0.75); }
.ja-pillrail--navy [role="tab"][aria-selected="true"] { color: var(--ja-navy); }

/* Scroll arrows — mobile-only overflow hint. JS (ja.js initRailArrows) hides
   the prev/next button at the start/end edges; both stay hidden when the
   rail fits without scrolling. Bare chevrons (no circle) sitting in the
   wrap's 28px mobile side-padding, so they never cover the rail's tabs.
   Desktop keeps the centred rail, no arrows. */
.ja-pillrail__arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 28px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.ja-pillrail-wrap--light .ja-pillrail__arrow { color: var(--ja-navy); }
.ja-pillrail-wrap--navy .ja-pillrail__arrow { color: var(--ja-white); }
.ja-pillrail__arrow svg { width: 16px; height: 16px; }
.ja-pillrail__arrow--prev { left: 0; }
.ja-pillrail__arrow--next { right: 0; }
.ja-pillrail__arrow.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.ja-pillrail__arrow:focus-visible { outline: 2px solid var(--ja-blue); outline-offset: 2px; }

/* Keyboard focus must be visible on both variants. */
.ja-pillrail [role="tab"]:focus-visible {
    outline: 2px solid var(--ja-blue);
    outline-offset: 3px;
}
.ja-pillrail--navy [role="tab"]:focus-visible {
    outline-color: var(--ja-gold);
}

/* Mobile — four 21px labels never fit 375px: horizontal scroll, no wrap. */
@media (max-width: 960px) {
    .ja-pillrail-wrap { text-align: left; padding: 0 28px; } /* room for the scroll arrows */
    .ja-pillrail__arrow { display: flex; }
    .ja-pillrail {
        display: flex;
        overflow-x: auto;
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* legacy Edge */
    }
    .ja-pillrail::-webkit-scrollbar { display: none; }
    .ja-pillrail [role="tab"] { scroll-snap-align: start; }
    .ja-pillrail--lg [role="tab"] { padding: 12px 22px; font-size: 17px; }
    .ja-pillrail--sm [role="tab"] { padding: 9px 20px; font-size: 14px; }
}