/*
 * Jesus 101 - audio player enhancements
 *
 * Styles for the scrub hint and the draggable play head. Kept as a standalone
 * stylesheet (enqueued from functions.php) rather than a SCSS partial so it
 * does not depend on the WP-SCSS compile step.
 */


/* SCRUB HINT --------------------------------------------------------------
   Positioned absolutely inside the fixed-height controls box so it can never
   reflow the buttons above it or the timeline below it. */

#audio-player .audio-controls {
    position: relative;
}

#audio-player .scrub-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    text-align: center;
    font-family: 'Lato', 'Helvetica Neue', 'Neue Helvetica', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #999999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .8s ease-out, visibility 0s linear .8s;
    -moz-transition: opacity .8s ease-out, visibility 0s linear .8s;
    transition: opacity .8s ease-out, visibility 0s linear .8s;
}

#audio-player .scrub-hint.visible {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .3s ease-in;
    -moz-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in;
}

@media (max-width: 768px) {
    #audio-player .scrub-hint {
        font-size: 14px;
    }
}


/* DRAGGABLE PLAY HEAD ----------------------------------------------------- */

/* The time labels sit above the bar at z-index 5 and would otherwise swallow
   pointer events when the play head is near the start or end of the track. */
#audio-player .audio-timeline .text {
    pointer-events: none;
}

/* Invisible grab strip, centred on the boundary between the elapsed and
   remaining regions. Hidden until the duration is known, since there is
   nothing to seek within before then. */
#audio-player .audio-timeline .playhead-handle {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    height: 100%;
    width: 28px;
    margin-left: -14px;
    cursor: -webkit-grab;
    cursor: grab;
    -ms-touch-action: none;
    touch-action: none;
}

#audio-player .audio-timeline.seekable .playhead-handle {
    display: block;
}

#audio-player .audio-timeline.dragging .playhead-handle {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/* Hold the grabbing cursor while the pointer ranges outside the strip
   mid-drag. */
body.j101-scrubbing,
body.j101-scrubbing * {
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important;
}

/* The bar is half as tall on phones, so widen the target to stay thumb-sized. */
@media (max-width: 768px) {
    #audio-player .audio-timeline .playhead-handle {
        width: 44px;
        margin-left: -22px;
    }
}


/* TIME LABELS -------------------------------------------------------------
   The labels are a fixed 84px box (style.css), sized when every value was a
   six-character 'MM:SS'. An hours-long episode reads '-3:47:41', which at the
   30px desktop font is roughly 140px wide -- it overflows the box and the
   timeline's overflow:hidden clips the tail. Let the box grow with its
   content instead. min-width holds the original geometry for short values,
   and because .status is anchored left and .time right, each one grows
   inward, away from the edge of the bar. */

#audio-player .audio-timeline .text {
    width: auto;
    min-width: 84px;
    white-space: nowrap;
}