/*Make sure these sync with anything in tailwind.config.js*/
:root {
    --primary: var(--bb-primary-color, #002663);
    --secondary: #00A0FF;
    --secondary-faded: #00A0FF4D;
    --tertiary: #22428B;
    --background: #F2F2F2;
    --highlight: #D00000;
    --highlight-hover: #C82722;
    --almost-white: #F0F0F1;
    --red: #D00000;
    --gray: #E7EBEE;
    --light-gray: #F6F7F9;
    --medium-light-gray: #999999;
    --medium-gray: #CCCCCC;
    --dark-gray: #636363;
    --navy: #081D4C;
    --midnight: #202533;
    --bright-blue: #00A0FF;
    --mid-blue: #007BC2;
    --dark-blue: #002663;
    --error: #992600;
    --success: #2D862D;
    --heading-color: #007acd;
}
/* ==========================================================================
   KOMANDO CLUB PLAYER SKIN

   A repaint only: the markup in template-parts/podcast/player.php and the
   behaviour in assets/js/frontend/conditional/podcast.js are untouched. This
   file plus the four SVGs in assets/img/podcasts/ are the whole reskin.

   ⚠ The icons are <img> elements, so CSS colour cannot reach them — three of
   the four shipped with stroke="currentColor", which inside an <img> resolves
   to the SVG document's own default (black) and would have been invisible on
   navy. Each SVG now carries an explicit stroke. Recolouring a button means
   editing the file in assets/img/podcasts/, not a rule here.

   --kc-* tokens are read with fallbacks because they are declared in the main
   stylesheet (components/komando-club.css) and this is a conditional bundle.
   Same convention as register.css.
   ========================================================================== */

.k4-audio-player-container {
    background: linear-gradient(135deg, var(--kc-navy, #002664), var(--kc-navy-deep, #001433));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--kc-radius-sm, 14px);
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    max-height: 120px;
    min-width: 300px;
    width: 100%;
}

.k4-audio-player-container .hidden {
        display: none;
    }

.k4-audio-player-container .show-768 {
        display: none;
    }

@media only screen and (min-width: 768px) {

.k4-audio-player-container .show-768 {
        display: block
    }
    }

.k4-audio-player-container .show-600 {
        display: none;
    }

@media only screen and (min-width: 600px) {

.k4-audio-player-container .show-600 {
        display: block
    }
    }

.k4-audio-player-container .audio-player-image-container {
        display: none;
    }

@media only screen and (min-width: 768px) {

.k4-audio-player-container .audio-player-image-container {
        display: block;
        height: 120px;
        min-width: 120px;
        overflow: hidden
    }
        .k4-audio-player-container .audio-player-image-container img {
            width: 100%;
        }
    }

.k4-audio-player-container .audio-player-controls-container {
        flex-grow: 1;
        padding: 1rem;
    }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-text {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

@media only screen and (min-width: 768px) {

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-text {
        font-size: 1.1rem
    }
    }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders .time {
        font-size: 0.8rem;
        /* Mono so the digits stop shuffling the seek bar sideways as the
           elapsed time ticks past 9:59. */
        font-family: var(--kc-font-mono, ui-monospace, monospace);
        color: rgba(255, 255, 255, 0.82);
    }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders .audio-player-controls-group {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        flex-grow: 1;
    }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders .audio-player-controls-group .audio-player-controls-column {
        display: flex;
        flex-direction: column;
    }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders .audio-player-controls-group .audio-player-controls-column.volume-controls {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         justify-content: space-between;
         align-items: center;
         gap: 8px;
         width: 100%;
    }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders .audio-player-controls-group .audio-player-controls-column.volume-controls .volume-slider {
    }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders .audio-player-controls-group .audio-player-controls-column button.controls-icon {
        border: 0;
        background: none;
        cursor: pointer;
        height: 2.5rem;
        min-width: 2.5rem;
        padding: 0;
    }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders .audio-player-controls-group .audio-player-controls-column button.controls-icon:focus-visible {
         outline: 2px solid var(--kc-cyan, #07D7FC);
         outline-offset: 2px;
     }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders .audio-player-controls-group .audio-player-controls-column button.controls-icon:hover img {
         opacity: 0.75;
     }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders .audio-player-controls-group .audio-player-controls-column .controls-text {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        font-size: 1.1rem;
    }

.k4-audio-player-container .audio-player-controls-container .audio-player-controls-container-buttons-and-sliders .audio-player-controls-group .audio-player-controls-column.slider-container {
         flex-grow: 1;
     }

/*Range styling adapted from CSS-Tricks article https://css-tricks.com/lets-create-a-custom-audio-player/*/

.k4-audio-player-container input[type="range"] {
        background-color: rgba(255, 255, 255, 0.16);
        border: 0;
        border-radius: 4px;
        position: relative;
        -webkit-appearance: none;
        width: 100%;
        min-width: 50px;
        padding: 0;
        height: 15px;
        float: left;
        outline: none;
    }

.k4-audio-player-container input[type=range]:focus-visible {
        outline: 2px solid var(--kc-cyan, #07D7FC);
        outline-offset: 3px;
    }

.k4-audio-player-container input[type="range"]::-webkit-slider-runnable-track {
        border-radius: 4px;
        height: 100%;
        width: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.16);
    }

.k4-audio-player-container input[type="range"]::before {
        border-radius: 4px;
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: var(--progressWidth,0); /*Needs adjusting as things move*/
        height: 100%;
        background-color: var(--kc-cyan, #07D7FC);
        cursor: pointer;
    }

.k4-audio-player-container input[type="range"]::-webkit-slider-thumb {
        position: relative;
        -webkit-appearance: none;
        height: 0;
        width: 0;
        cursor: pointer;
    }

.k4-audio-player-container input[type="range"]:active::-webkit-slider-thumb {
        background: var(--kc-cyan, #07D7FC);
    }

.k4-audio-player-container input[type="range"]::-moz-range-track {
        border-radius: 4px;
        width: 100%;
        height: 100%;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.16);
    }

.k4-audio-player-container input[type="range"]::-moz-range-progress {
        background-color: var(--kc-cyan, #07D7FC);
        border-radius: 4px;
        height: 15px;
    }

.k4-audio-player-container input[type="range"]::-moz-focus-outer {
        border: 0;
    }

.k4-audio-player-container input[type="range"]::-moz-range-thumb {
        border: 0;
        height: 0;
        width: 0;
        cursor: pointer;
    }

.k4-audio-player-container input[type="range"]:active::-moz-range-thumb {
        background: var(--kc-cyan, #07D7FC);
    }

.k4-audio-player-container input[type="range"]::-ms-track {
        width: 100%;
        height: 100%;
        cursor: pointer;
        background: transparent;
        border: solid transparent;
        color: transparent;
    }

.k4-audio-player-container input[type="range"]::-ms-fill-lower {
        background-color: var(--kc-cyan, #07D7FC);
        border-radius: 4px;
    }

.k4-audio-player-container input[type="range"]::-ms-fill-upper {
        background-color: rgba(255, 255, 255, 0.16);
        border-radius: 4px;
    }

.k4-audio-player-container input[type="range"]::-ms-thumb {
        height: 0;
        width: 0;
        cursor: pointer;
    }

.k4-audio-player-container input[type="range"]:active::-ms-thumb {
        background: var(--kc-cyan, #07D7FC);
    }
/* ==========================================================================
   SHOW SWITCHER + PAGINATION

   The four shows (/listen, /dtu, /dlh, /current) are one template with a
   different franchise on it, so both of these render on all four and on the
   [kc_podcast_show] shortcode. Nothing here is per-show: adding a fifth show is
   a Franchise term with a path on it, not a rule in this file.

   Pills rather than underlined text tabs, matching the membership subnav, so
   it reads as "pick a show" rather than as a row of links in the copy. Anchor
   selectors carry the border-bottom reset because the theme underlines every
   inline content link (#primary.kc-content a), which turns pills into
   underlined pills.
   ========================================================================== */

.kc-show-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 1.25rem;
}

.kc-show-nav-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 38, 100, 0.16);
    border-radius: 999px;
    color: var(--kc-navy, #002664);
    display: inline-block;
    font-family: var(--kc-font-body, inherit);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.5rem 0.95rem;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.kc-show-nav-item {
    border-bottom: 1px solid rgba(0, 38, 100, 0.16) !important;
}

a.kc-show-nav-item:hover,
a.kc-show-nav-item:focus-visible {
    background: rgba(7, 215, 252, 0.12);
    border-color: var(--kc-cyan, #07D7FC);
    border-bottom-color: var(--kc-cyan, #07D7FC) !important;
    color: var(--kc-navy, #002664);
}

.kc-show-nav-item.is-current {
    background: linear-gradient(135deg, var(--kc-navy, #002664), var(--kc-navy-deep, #001433));
    border-color: transparent;
    color: #fff;
}

/* The pager (.kc-podcast-pagination) is styled by the shared .kc-pagination
   block in components/komando-club.css since 2026-09-03, when /watch grew the
   same pager. The nav in show-page.php carries both classes. */