/* Homepage/site promo bar. Generated markup lives in _partials/header.html
   (see scripts/build-banners.js); this file styles it site-wide.
   Night-sky navy so it separates from the blue hero rather than blending in. */
.promo-bar {
    background: #0a1a2b;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.promo-bar__link {
    max-width: var(--maxw, 1200px);
    margin: 0 auto;
    padding: 11px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: #fff;
    font: 400 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
}

.promo-bar__tag {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    background: #2E9BD6;
    color: #06243c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.promo-bar__text {
    color: rgba(255, 255, 255, .85);
    min-width: 0;
}

.promo-bar__text b {
    color: #fff;
    font-weight: 600;
}

.promo-bar__cta {
    flex: none;
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.promo-bar__link:hover .promo-bar__cta,
.promo-bar__link:focus .promo-bar__cta {
    border-bottom-color: #fff;
}

.promo-bar__link:focus-visible {
    outline: 2px solid #2E9BD6;
    outline-offset: -3px;
}

@media (max-width: 780px) {
    .promo-bar__link {
        flex-wrap: wrap;
        gap: 8px 12px;
        font-size: 14px;
        padding: 10px 20px;
    }

    .promo-bar__cta {
        margin-left: 0;
    }
}