/* The live stream bar under the navigation, on every page. */
.live-bar {
    position: relative;
    z-index: 4;
    width: 100%;
    background: var(--c-accent);
    color: var(--c-cream);
}

.live-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    max-width: calc(1180px + 2 * var(--gutter));
    margin: 0 auto;
    padding: 10px var(--gutter);
}

.live-bar__text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 14px;
    min-width: 0;
    margin: 0;
}

.live-bar__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.live-bar__status--upcoming {
    display: inline;
    color: var(--c-cream-2);
    letter-spacing: normal;
    text-transform: none;
    font-size: 15px;
}

.live-bar__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF4D4D;
    animation: live-bar-pulse 1.6s ease-out infinite;
}

@keyframes live-bar-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, .7); }
    100% { box-shadow: 0 0 0 10px rgba(255, 77, 77, 0); }
}

.live-bar__title {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.live-bar__countdown {
    flex: none;
    margin: 0;
    padding: 8px 18px;
    border: 1px solid rgba(244, 233, 220, .5);
    border-radius: 999px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.live-bar__link {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--c-cream);
    color: var(--c-accent);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s ease;
}

.live-bar__link:hover { background: #fff; }
.live-bar__link:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 2px; }
.live-bar__link svg { width: 16px; height: 16px; }

/* a little more room on the home page */
.live-bar--home .live-bar__inner { padding-block: 16px; }
.live-bar--home .live-bar__title { font-size: 20px; }
.live-bar + .hero-main { margin-top: clamp(16px, 2.4vw, 32px); }

@media (max-width: 600px) {
    .live-bar__link { width: 100%; justify-content: center; }
    .live-bar__countdown { width: 100%; text-align: center; }
}