/**
 * WPP Base — Player Styles
 *
 * Styles for:
 * 1. Stream drawer (dropdown under Radio Streams button)
 * 2. Progress bar for article audio
 * 3. Playing state animations
 * 4. Article inline audio button
 *
 * All colors use CSS custom properties from site-config.json.
 */

/* =================================================================
   STREAM DRAWER
   ================================================================= */

.player-streams-wrap {
    position: relative;
    display: inline-block;
}
.player-streams-drawer {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1000;
    min-width: 260px;
    background: var(--dark-navy, #101820);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: drawerSlideDown 0.2s ease-out;
}

@keyframes drawerSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.persistent-player {
    position: relative;
}

.streams-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.streams-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.15s ease;
}

.streams-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.streams-item.is-active {
    color: #fff;
    font-weight: 700;
}

.streams-item.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.streams-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.streams-indicator svg {
    width: 12px;
    height: 12px;
    fill: rgba(255, 255, 255, 0.7);
}

.streams-item:hover .streams-indicator {
    background: rgba(255, 255, 255, 0.25);
}
.streams-item:hover .streams-indicator svg {
    fill: #fff;
}

.streams-item.is-active .streams-indicator {
    background: var(--yellow, #E0E721);
}
.streams-item.is-active .streams-indicator svg {
    fill: var(--dark-navy, #101820);
}

.streams-name {
    flex: 1;
}

.streams-unavailable {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

.streams-empty {
    padding: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    text-align: center;
}

/* Streams button active state */
.player-streams-btn.is-open {
    background: var(--yellow, #E0E721);
    color: var(--dark-navy, #101820);
}

.player-streams-btn.is-open svg {
    fill: var(--dark-navy, #101820);
}


/* =================================================================
   SCRUBBER (on-demand article audio)
   Sits inline in the middle of the bar, in the slot the "NEXT UP"
   schedule text uses for live streams. Native <input type=range> so
   drag, touch and keyboard seeking all work without custom handlers.
   ================================================================= */

.player-scrubber {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0 24px;
}

.persistent-player.is-article-audio .player-scrubber { display: flex; }
.persistent-player.is-article-audio .player-schedule { display: none; }

.player-scrubber-time {
    font-size: 12px;
    font-variant-numeric: tabular-nums; /* digits change without jitter */
    color: rgba(255, 255, 255, 0.85);
    min-width: 38px;
    white-space: nowrap;
}
.player-scrubber-current { text-align: right; }

.player-scrubber-range {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    min-width: 80px;
    height: 20px;             /* generous hit target; the track is 4px */
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    --bsm-scrub-pct: 0%;      /* set by player.js; fills the played side */
}
.player-scrubber-range:disabled { cursor: default; opacity: 0.55; }
.player-scrubber-range:focus { outline: none; }
.player-scrubber-range:focus-visible {
    outline: 2px solid var(--yellow, #E0E721);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Track. WebKit gets the fill via a two-stop gradient (the only cross
   browser way to color the played side of a native range); Firefox has
   a real ::-moz-range-progress pseudo. */
.player-scrubber-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.9) var(--bsm-scrub-pct),
        rgba(255, 255, 255, 0.25) var(--bsm-scrub-pct)
    );
}
.player-scrubber-range::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
}
.player-scrubber-range::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.9);
}

/* Thumb */
.player-scrubber-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;         /* (14 - 4) / 2: center on the 4px track */
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.12s ease;
}
.player-scrubber-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transition: transform 0.12s ease;
}
.player-scrubber-range:not(:disabled):hover::-webkit-slider-thumb,
.player-scrubber-range:focus-visible::-webkit-slider-thumb { transform: scale(1.2); }
.player-scrubber-range:not(:disabled):hover::-moz-range-thumb,
.player-scrubber-range:focus-visible::-moz-range-thumb { transform: scale(1.2); }


/* =================================================================
   PLAY BUTTON STATES
   ================================================================= */

.player-play-btn {
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.player-play-btn:active {
    transform: scale(0.92);
}

.player-play-btn.is-playing {
    background: var(--yellow, #E0E721);
}

.player-play-btn.is-playing svg {
    fill: var(--dark-navy, #101820);
}

/* Subtle pulse animation on play button when playing */
@keyframes playerPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(108, 172, 228, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(108, 172, 228, 0); }
}

.persistent-player.is-playing .player-play-btn {
    animation: playerPulse 2s ease-in-out infinite;
}


/* =================================================================
   ARTICLE INLINE AUDIO BUTTON
   ================================================================= */

/* Bare wrapper: the button IS the control. The old gray bar added a full
   -width slab around a small button; the client asked for just the pill. */
.article-audio {
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none;
    border-radius: 0;
}

.article-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: var(--navy, #003865);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--font-condensed);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.article-audio-btn:hover {
    background: var(--blue, #6CACE4);
}

.article-audio-btn.is-playing {
    background: var(--blue, #6CACE4);
}

.article-audio-icon {
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    width: 14px;
    text-align: center;
}

.article-audio-label {
    user-select: none;
}

/* Duration lives INSIDE the pill ("LISTEN . 12:52"). Hidden until player.js
   reads it, so the separator never dangles on its own. */
.article-audio-duration {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}
.article-audio-duration[hidden] { display: none; }
.article-audio-duration::before {
    content: "\00B7";
    margin-right: 7px;
    color: rgba(255, 255, 255, 0.55);
}

/* The old rule painted a left border on the gray bar that no longer exists;
   the playing state now reads off the button itself. */
.article-audio.is-playing { border-left: 0; }


/* =================================================================
   RESPONSIVE
   ================================================================= */

@media (max-width: 768px) {
    .player-streams-drawer {
        right: 0;
        left: 0;
        min-width: unset;
        border-radius: 0;
    }

    /* Play/volume/title + Radio Streams already fill the row on a phone,
       so the scrubber wraps onto its own line under them. Only while
       article audio is loaded - the stream layout is untouched. */
    .persistent-player.is-article-audio .container { flex-wrap: wrap; }
    .persistent-player.is-article-audio .player-scrubber {
        flex-basis: 100%;
        order: 10;
        margin: 8px 0 0;
    }

    .player-schedule {
        display: none;
    }

    .player-info {
        max-width: 120px;
    }

    .player-show {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .article-audio {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .player-streams-btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    .player-streams-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* Compact Listen button on list/grid cards (category lists, episode
   feeds, promo lists) — same data-bsm-audio plumbing as article pages */
.PromoA .article-audio,
.page-promo-card .article-audio {
    margin: 8px 0 0;
    padding: 0;
    background: transparent;
    gap: 8px;
}
.PromoA .article-audio-btn,
.page-promo-card .article-audio-btn {
    padding: 5px 14px;
    font-size: 12px;
    gap: 6px;
}
.PromoA .article-audio-duration,
.page-promo-card .article-audio-duration {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}