/*
 * pcl-audio.css — looks for [ep_player].
 *
 * Lived in theme.json (styles.css) until 2026-07-23, in one long line among
 * unrelated theme rules. Moved here so the player carries its own appearance,
 * and expanded into readable CSS on the way.
 *
 * Colours come from the theme's custom properties where they exist
 * (exzellent-2026 defines them via theme.json) with the exzellent values as
 * fallbacks, so the player also looks right on a theme that defines nothing.
 * Same approach as pcl-video.css.
 *
 * No @font-face and no external URL: nothing is pulled from elsewhere, which
 * is the whole point of building this instead of embedding a ready-made player.
 */

.ep-player {
    --epa-base: var(--wp--preset--color--base, #fff);
    --epa-accent: var(--wp--preset--color--accent, #92dadd);
    --epa-accent-deep: var(--wp--preset--color--accent-deep, #6fc4c8);
    --epa-contrast: var(--wp--preset--color--contrast, #3f3f3f);
    --epa-petrol: var(--wp--preset--color--petrol, #225c5e);
    --epa-mist: var(--wp--preset--color--mist, #f0f7f7);
    --epa-line: var(--wp--preset--color--line, #dce8e8);
    --epa-ink-soft: var(--wp--preset--color--ink-soft, #5f6b6b);

    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 1.5rem 0;
    padding: 1.15rem 1.3rem;
    border: 1px solid var(--epa-line);
    border-radius: 14px;
    background: var(--epa-base);
}

/* ---- transport ---- */

.ep-player__transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
}

.ep-player__play {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    background: var(--epa-accent);
    color: var(--epa-contrast);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ep-player__play:hover { background: var(--epa-accent-deep); }
.ep-player__play svg { width: 24px; height: 24px; fill: currentColor; }

.ep-player .icon-pause { display: none; }
.ep-player.is-playing .icon-play { display: none; }
.ep-player.is-playing .icon-pause { display: block; }

.ep-player__back,
.ep-player__fwd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--epa-line);
    border-radius: 50%;
    background: transparent;
    color: var(--epa-petrol);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ep-player__back:hover,
.ep-player__fwd:hover { background: var(--epa-mist); }

.ep-player__back svg,
.ep-player__fwd svg { width: 30px; height: 30px; fill: currentColor; }
.ep-player__back text,
.ep-player__fwd text { fill: currentColor; }

/* ---- timeline ---- */
/* 28px hit area around an 8px visible rail: thumbs are wider than a hairline.
   The rail is a child element rather than a background, so both of its ends
   can be rounded — a background gradient inside a taller box cannot be. */

.ep-player__barrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.ep-player__cur,
.ep-player__dur {
    min-width: 2.9em;
    font-size: 0.82rem;
    color: var(--epa-ink-soft);
    font-variant-numeric: tabular-nums;
}

.ep-player__dur { text-align: right; }

.ep-player__bar {
    position: relative;
    flex: 1;
    height: 28px;
    padding: 10px 0;
    box-sizing: border-box;
    cursor: pointer;
    touch-action: none;
}

.ep-player__bar::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 0;
    border-radius: 4px;
    background: var(--epa-mist);
}

.ep-player__buffer,
.ep-player__progress {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 0;
    border-radius: 4px;
    pointer-events: none;
}

.ep-player__buffer { background: var(--epa-line); }
.ep-player__progress { background: var(--epa-petrol); }

.ep-player__progress::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--epa-petrol);
}

/* ---- title and bottom row ---- */

.ep-player__title {
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-player__ctrlrow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.8rem;
}

.ep-player__ctrlrow .ep-player__dl { justify-self: start; }
.ep-player__ctrlrow .ep-player__share { justify-self: center; }

.ep-player__right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.ep-player__dl {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.ep-player__dl svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }

.ep-player__share,
.ep-player__rate {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.28rem 0.8rem;
    border: 1px solid var(--epa-line);
    border-radius: 50px;
    background: transparent;
    color: var(--epa-petrol);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ep-player__share:hover,
.ep-player__rate:hover { background: var(--epa-mist); }
.ep-player__share svg { width: 14px; height: 14px; fill: currentColor; }
.ep-player__rate { font-variant-numeric: tabular-nums; }

.ep-player__vol { display: flex; align-items: center; }
.ep-player__vol input { width: 80px; accent-color: var(--epa-petrol); }

@media (prefers-reduced-motion: reduce) {
    .ep-player__play,
    .ep-player__back,
    .ep-player__fwd,
    .ep-player__share,
    .ep-player__rate { transition: none; }
}

/* ---- narrow screens ---- */

@media (max-width: 781px) {
    .ep-player__vol { display: none; }
    .ep-player__play { width: 54px; height: 54px; }
    .ep-player__back,
    .ep-player__fwd { width: 48px; height: 48px; }
    .ep-player__title { white-space: normal; }
    .ep-player__ctrlrow {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.7rem;
    }
}