/* =====================================================================
 * jukebox.css — Jukebox page-specific styles (jukeBox.html only)
 * =====================================================================
 * Requires: style.css loaded first (uses :root custom properties,
 * .nav-social-link, .video-container--iframe from style.css).
 *
 * TABLE OF CONTENTS
 * -----------------
 * 1. Header Row  (title + playlist link)
 * 2. Page-level Scrollbar Fix  (class="page-jukebox")
 * 3. Jukebox Cards  (class="jukebox-card")
 * 4. YouTube Facade  (click-to-load thumbnail, class="youtube-facade")
 * 5. Custom Player Controls  (always-visible play/pause + seek bar)
 * 6. Mobile Breakpoint @640px
 * ===================================================================== */



/* ===================================================================== */
/* 1. Header Row  (title left-aligned, subtitle right-aligned on Desktop) */
/* ===================================================================== */

.jukebox-title {
    text-align: left;
}

/* .jukebox-subtitle is applied to an <a> that also has .nav-social-link
   (display:flex). Since a flex box with width:auto stretches to fill its
   parent (.column), margin-left:auto has no free space to consume —
   justify-content:flex-end instead pushes the flex content (icon + text)
   to the right edge within that already-full-width box. */
.jukebox-subtitle {
    justify-content: flex-end;
}

/* Wraps the playlist link on Desktop: turns the column itself into a flex
   container so the link (now a flex child, sized to its content instead of
   filling the column) can be positioned within the column: align-items
   centers it vertically, justify-content pushes it to the right edge.
   Selector specificity must beat Milligram's ".row .column { display:block; }"
   (0,2,0) — ".row .column.jukebox-link-column" has specificity (0,3,0). */
.row .column.jukebox-link-column {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* ===================================================================== */
/* 2. Page-level Scrollbar Fix  (body class="page-jukebox")              */
/* ===================================================================== */

/* Reserve permanent space for the vertical scrollbar on the jukebox page.
   Prevents a horizontal layout shift (visible as a thin gray stripe between
   the card and the iframe on real Android/Firefox) that occurs when the
   page grows just past the scroll threshold once a YouTube iframe replaces
   a facade. */
.page-jukebox {
    scrollbar-gutter: stable;
}


/* ===================================================================== */
/* 3. Jukebox Cards  (class="jukebox-card")                              */
/* ===================================================================== */

.jukebox-card {
    padding: 0.5rem;
    margin-bottom: 1.5rem;

    background-color: var(--background-mid);
    color: var(--text-color-light);
    /* border-width fixed so only the color changes on play/stop —
       avoids layout shift from a width change */
    border: 3px solid transparent;
    /* Offset for sticky header when navigating via anchor links */
    scroll-margin-top: 5.5rem;
}

/* Currently playing video: highlight its card with an accent border.
   Toggled via JS in jukeBox.html (attachFacadeClick / stopActiveVideo). */
.jukebox-card--playing {
    border-color: var(--accent-color-light);
}

/* Currently playing video: brighten the iframe itself (mirrors the
   .youtube-facade:hover img brightness effect, but applied while playing). */
.jukebox-card--playing .video-container--iframe iframe {
    filter: brightness(1.8);
}

/* Overrides style.css's .video-container { margin-bottom: 0.75rem; }
   (shared with index.html) — jukebox.css loads after style.css, so this
   wins the cascade at equal specificity, without affecting index.html. */
.video-container {
    margin-bottom: 0.25rem;
}

.jukebox-card img {

    max-width: 100%;
    /* aspect-ratio reserves space before lazy-load — eliminates layout shift.
       Adjust ratio to match actual image dimensions if needed. */
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 3px;
}

.jukebox-card audio {
    display: block;
    /* Chromium-Engine based browsers require a set height - 44 is good  */
    height: 44px;
    width: 100%;
    border-radius: 3px;
    /* Force dark theme on native audio player UI (Shadow DOM) */
    color-scheme: dark;
}


/* ===================================================================== */
/* 4. YouTube Facade  (thumbnail + play button, loads iframe on click)   */
/* ===================================================================== */

.youtube-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.youtube-facade img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    transition: filter 0.2s ease;
}

.youtube-facade:hover img {
    filter: brightness(1.4);
}

.youtube-facade__play {
    position: relative;     /* above the img */
    z-index: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 0;
    transition: transform 0.15s ease;
}

.youtube-facade__play svg {
    width: 44px;
    height: 34px;
    /* filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) grayscale(1) brightness(1.9); */
}

.youtube-facade:hover .youtube-facade__play {
    transform: scale(1.1);
}


/* ===================================================================== */
/* 5. Custom Player Controls  (always-visible play/pause + seek bar)     */
/* ===================================================================== */

/* Replaces YouTube's own control bar (hidden via playerVars.controls=0
   in jukeBox.html), which auto-hides after a few seconds and cannot be
   forced to stay visible — the player iframe is cross-origin, so neither
   CSS nor JS on this page can reach its internal auto-hide behavior.
   Built once per card during page init (not on video start) so its
   height is reserved immediately — this avoids a layout shift when
   playback later begins. Enabled/reset dynamically by startVideo()/
   stopActiveVideo() in jukeBox.html, right below .video-container--iframe. */
.jukebox-player__controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    padding: 0.1rem 0.3rem;
    background-color: transparent;
    border-radius: 3px;
}



/* Dimmed appearance while no video is loaded in this card yet (buttons
   are also given the disabled attribute in JS, which already blocks
   interaction — this is purely the visual cue). */
.jukebox-player__controls--disabled {
    opacity: 0.15;
}

.jukebox-player__controls--disabled .jukebox-player__playpause,
.jukebox-player__controls--disabled .jukebox-player__progress {
    cursor: default;
}

/* Extra dimming for the slider specifically (on top of the bar's overall
   opacity above): swaps the bright accent color for a muted gray on both
   the track and the thumb, so the not-yet-active seek bar reads as clearly
   inert rather than just "the same slider, slightly faded". */
.jukebox-player__controls--disabled .jukebox-player__progress {
    accent-color: var(--text-color-light);
}

.jukebox-player__controls--disabled .jukebox-player__progress::-webkit-slider-thumb {
    background-color: var(--text-color-light);
}

.jukebox-player__controls--disabled .jukebox-player__progress::-moz-range-thumb {
    background-color: var(--text-color-light);
}



.jukebox-player__playpause {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-color-light);
    opacity: 0.75;
    cursor: pointer;
    /* override milligram */
    margin-bottom: 0;
}

.jukebox-player__playpause svg {
    width: 18px;
    height: 18px;
}

.jukebox-player__time {
    flex-shrink: 0;
    min-width: 2.2rem;
    font-size: 1rem;
    color: var(--text-color-light);
    opacity: 0.75;
    /* Tabular figures keep the time label from jittering in width
       as digits change (e.g. "0:09" -> "0:10"). */
    font-variant-numeric: tabular-nums;
    /* override milligram */
    margin-bottom: 0;
}


/* Native range input, restyled to match the dark jukebox theme.
   Cross-browser: WebKit/Blink and Firefox use different pseudo-elements
   for the track and thumb, so both are declared separately.
   -webkit-appearance/appearance:none strips the browser's own control
   chrome from the *outer* input box (its native default height/padding
   would otherwise override our height:4px, throwing off vertical
   centering against .jukebox-player__playpause and .jukebox-player__time
   in the flex row). */
.jukebox-player__progress {
    -webkit-appearance: none;
    appearance: none;
    flex-grow: 1;
    height: 4px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    accent-color: var(--accent-color-light);
    align-self: center;
}


.jukebox-player__progress::-webkit-slider-runnable-track {
    height: 4px;
    /* background-color: var(--text-color-light); */
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.jukebox-player__progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Centers the thumb vertically on the 4px track: WebKit positions the
       thumb's top edge at the track's top edge by default, so we shift it
       up by half the height difference: -(10px thumb - 4px track) / 2. */
    margin-top: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--accent-color-light);
}


.jukebox-player__progress::-moz-range-track {
    height: 4px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

.jukebox-player__progress::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background-color: var(--accent-color-light);
}



/* ===================================================================== */
/* 6. Mobile Breakpoint @640px                                           */
/* ===================================================================== */


@media (max-width: 640px) {

    /* Jukebox header row: columns stack on mobile, title + link centered.

       - .jukebox-header-row .column is centered via flex (text-align has no
         effect on the .jukebox-subtitle <a>, which is display:flex itself)
       - Overrides column's own margin and Milligram's default h1/p margin-bottom */
    .jukebox-header-row .column {
        display: flex;
        justify-content: center;
        margin-bottom: 0;
    }

    .jukebox-title {
        margin-bottom: 0;
    }

    .jukebox-subtitle {
        margin-left: 0;
        margin-bottom: 1rem;
    }

    /* Override Desktop's justify-content:flex-end (see .row .column.jukebox-link-column
       above) — same specificity (0,3,0), so this later rule wins the cascade tie
       and re-centers the link horizontally within its column on mobile. */
    .jukebox-header-row .column.jukebox-link-column {
        justify-content: center;
    }
}