/* ===== SHARED RACE NAV BAR =====================================
   Sits directly below <header>, above the hero. Built dynamically by
   /js/race-nav.js — see RACE_NAV[] there. Update the array weekly.
   ============================================================== */

.race-nav-bar{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 16px;
    background:rgba(0,0,0,0.6);
    border-bottom:1px solid rgba(255,255,255,0.06);
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    max-width:100%;
    min-height:36px;
}
.race-nav-bar::-webkit-scrollbar{display:none}

.race-nav-pill{
    flex-shrink:0;
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    padding:6px 14px;
    border-radius:20px;
    border:1px solid transparent;
    background:transparent;
    font-family:'JetBrains Mono','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:0.02em;
    line-height:1.2;
    white-space:nowrap;
    text-decoration:none;
    transition:background .15s,border-color .15s,opacity .15s;
    /* --sport-color is set inline per pill */
}

/* Outlined (upcoming race, clickable, not current page) */
.race-nav-pill[href]{
    border-color:var(--sport-color);
    color:var(--sport-color);
}
.race-nav-pill[href]:hover,
.race-nav-pill[href]:focus-visible{
    background:color-mix(in srgb, var(--sport-color) 14%, transparent);
    outline:none;
}

/* Filled (current page) */
.race-nav-pill.active{
    background:var(--sport-color);
    border-color:var(--sport-color);
    color:#fff;
}
.race-nav-pill.active:hover{
    background:var(--sport-color);
}

/* Dimmed (sport has no upcoming race) */
.race-nav-pill.soon{
    opacity:0.65;
    border-color:var(--sport-color);
    color:var(--sport-color);
    cursor:default;
}

.race-nav-sport{
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
}
.race-nav-label{font-weight:500}
.race-nav-date{opacity:0.75;font-weight:400}
.race-nav-pill.active .race-nav-date{opacity:0.9}

/* Tighter typography on very narrow screens */
@media(max-width:380px){
    .race-nav-pill{padding:6px 12px;font-size:10.5px;gap:5px}
    .race-nav-bar{padding:6px 12px}
}

/* F1 red + MotoGP orange need brighter base color when dimmed. */
/* Set border-color/color directly because JS sets --sport-color as inline */
/* style on each pill, which would beat any CSS custom-property override. */
.race-nav-pill.soon[data-sport="f1"]{
    border-color:#FF4444;
    color:#FF4444;
    opacity:0.8;
}
.race-nav-pill.soon[data-sport="motogp"]{
    border-color:#FF9933;
    color:#FF9933;
    opacity:0.8;
}