/*
 * Video player and transcript. Markup from lib/video-embeds.mjs, behavior from
 * assets/js/ee-video.js. Loaded by base.njk only on pages with a player.
 *
 * The transcript gets its scroll box only once the script has made the lines
 * focusable (.is-enhanced). Without the script it is plain text at full height,
 * because a scrollable region with nothing focusable in it cannot be scrolled
 * from the keyboard.
 */

.ee-video {
    margin: 1.5rem 0 2rem;
    font-family: 'Lato', sans-serif;
    font-size: 1rem; /* .entry-content computes to ~29px, which labels and inputs would inherit */
    scroll-margin-top: 1rem;
}

.ee-video__player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* On a song page, over the player once ee-video.js has taken YouTube's
   controls out: a click plays or pauses. */
.ee-video__toggle {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

.ee-video__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---- Transcript ---- */

.ee-transcript {
    margin-top: 0.75rem;
    background: #fff;
    border: 2px solid var(--ee-black);
    border-radius: 4px;
}

.ee-transcript > summary {
    padding: 0.75rem 1rem;
    font-family: 'Lato', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
}

.ee-transcript[open] > summary {
    border-bottom: 1px solid var(--ee-gray);
}

.ee-transcript > summary:focus-visible,
.ee-transcript p.ee_caption:focus-visible {
    outline: none;
    box-shadow: var(--focus-border-inset);
}

.ee-transcript__list {
    position: relative; /* offsetTop of each cue is measured from here */
    padding: 1rem 0.75rem;
}

.ee-video.is-enhanced .ee-transcript__list {
    max-height: min(70vh, 40rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Song lyrics are a few dozen lines and were always shown in full on the
   album pages, so they are not boxed in. With no scroll box, axe can also
   measure every line, which it cannot for lines scrolled out of view. */
.ee-video.is-enhanced[data-kind="lyrics"] .ee-transcript__list {
    max-height: none;
    overflow-y: visible;
}

/*
 * Paragraph spacing follows WCAG 1.4.8 (Visual Presentation), the same as the
 * article body in ee-post.css: line spacing of 1.5, paragraph spacing 1.5
 * times that (2.25em), and about 80 characters per line at most. Size and
 * measure follow the article body (--ee-post-text, --ee-post-measure).
 */
.ee-transcript p.ee_caption {
    max-width: var(--ee-post-measure, 36rem);
    margin: 0 0 2.25em;
    padding: 0.25rem 0.75rem;
    font-family: 'Lato', sans-serif;
    font-size: var(--ee-post-text, 1.125rem);
    line-height: 1.5;
    border-left: 4px solid transparent;
    /* A long unbroken word ("MM/DD/YYYY" on /album/3-3-2/) wraps instead of
       pushing the page sideways; Safari will not break at the slashes. */
    overflow-wrap: anywhere;
}

/* A song's sections are short verses, not prose, so the gap between them
   is one blank line rather than the transcript's paragraph spacing. */
.ee-video[data-kind="lyrics"] .ee-transcript p.ee_caption {
    margin-bottom: 1em;
}

.ee-transcript p.ee_caption:last-child {
    margin-bottom: 0;
}

/* A translation printed under a lyric line sung in another language. */
.ee-transcript .ee-lyric-translation {
    font-style: italic;
}

.ee-transcript__speaker {
    font-weight: 900;
}

.ee-video.is-enhanced .ee-cue {
    cursor: pointer;
}

.ee-video.is-enhanced .ee-cue:hover {
    background: var(--bg-light-gray);
}

/* The paragraph playing now gets a bar (so it is findable without relying on
   color), and the sentence playing now gets a background. */
.ee-transcript p.ee_caption.is-current {
    border-left-color: var(--ee-blue);
}

.ee-transcript .ee-cue.highlighted {
    background: #E3E7F8;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.ee-transcript mark.ee_search_result {
    padding: 0;
    color: inherit;
    background: var(--bright-yellow);
}

.ee-transcript mark.ee_search_result.ee_active_search_result {
    background: #FFB54D;
    outline: 2px solid var(--ee-black);
}

/* ---- Search, download, help ---- */

.ee-transcript__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ee-gray);
}

.ee-transcript__search {
    flex: 1 1 22rem;
    min-width: 0;
}

.ee-transcript__search label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.ee-transcript__search-row,
.ee-transcript__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ee-transcript__search-row input[type="search"] {
    flex: 1 1 10rem;
    font-size: 1rem;
    width: auto;
    min-width: 0;
    border: 2px solid var(--ee-dark-gray);
    border-radius: 4px;
}

.ee-transcript__search-row input[type="search"]:focus-visible {
    outline: none;
    box-shadow: var(--focus-border);
}

.ee-transcript__search-row input[type="search"].not_found {
    border-color: #B3261E;
    background: #FDECEA;
}

.ee-transcript__count {
    min-height: 1.5em;
    margin: 0.25rem 0 0;
    font-size: 1rem;
    font-weight: 700;
}

.ee-video-button {
    padding: 0.5rem 0.875rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: var(--ee-blue);
    border: 2px solid var(--ee-blue);
    border-radius: 4px;
}

.ee-video-button:hover:not([disabled]),
.ee-video-button:active:not([disabled]) {
    color: var(--ee-blue);
    background: #fff;
    border: 2px solid var(--ee-blue);
}

/* --focus-border-2, not --focus-border: these are blue buttons on a white
   surface, and a blue inner ring hugging a blue button showed nothing, which
   is why Meryl could not tell the dialog's Close button already had focus
   (issue #31). */
.ee-video-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring); /* the button rule, components/ee-btn.css */
}

/* ---- Keyboard shortcuts dialog ---- */

.ee-video-help {
    max-width: min(36rem, calc(100vw - 2rem));
    padding: 1.5rem;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ee-black);
    border: 2px solid var(--ee-black);
    border-radius: 6px;
}

.ee-video-help::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.ee-video-help h2 {
    margin: 0 0 0.75rem;
    font-size: 1.375rem;
}

.ee-video-help p {
    margin: 0 0 0.75rem;
}

.ee-video-help dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
}

.ee-video-help dt {
    font-weight: 700;
}

.ee-video-help dd {
    margin: 0;
}

@media (max-width: 34em) {
    .ee-video-help dl {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .ee-video-help dd {
        margin-bottom: 0.5rem;
    }
}