/**
 * WCPC Sermon Manager — Plyr theme bridge.
 *
 * Maps Plyr's CSS variable surface onto the plugin's design tokens
 * (--pl-color-*, --pl-surface-*, --pl-text-*) so audio and video
 * players automatically inherit the site's accent color, focus ring,
 * and control rhythm without per-skin styling.
 *
 * Loaded after plyr.css. Hex literals after each token are fallbacks
 * for contexts where the design-tokens.css file isn't enqueued (e.g.,
 * non-Elementor pages or RSS preview).
 *
 * @see assets/css/design-tokens.css for the source palette
 * @package WCPC_Sermons
 * @since   1.51.0
 */

.wcpc-sermons .plyr,
.plyr.plyr-wcpc {
    /* ============================================================
       Brand color — drives accents, range fill, focus ring
       ============================================================ */
    --plyr-color-main:                          var(--pl-color-primary, #34657F);
    --plyr-focus-visible-color:                 var(--pl-color-primary, #34657F);

    /* ============================================================
       Typography & spacing
       ============================================================ */
    --plyr-font-family:                         inherit;
    --plyr-font-size-base:                      14px;
    --plyr-font-size-small:                     12px;
    --plyr-font-size-time:                      12px;
    --plyr-font-weight-regular:                 400;
    --plyr-font-weight-bold:                    600;

    --plyr-control-icon-size:                   18px;
    --plyr-control-spacing:                     10px;
    --plyr-control-radius:                      4px;

    /* ============================================================
       Audio surface — sits over the LISTEN background image
       ============================================================ */
    --plyr-audio-controls-background:           var(--pl-surface-overlay, rgba(0, 0, 0, 0.65));
    --plyr-audio-control-color:                 var(--pl-color-white, #ffffff);
    --plyr-audio-control-color-hover:           var(--pl-color-white, #ffffff);
    --plyr-audio-control-background-hover:      var(--pl-color-primary, #34657F);
    --plyr-audio-progress-buffered-background:  rgba(255, 255, 255, 0.25);

    /* ============================================================
       Video surface
       ============================================================ */
    --plyr-video-background:                    #000000;
    --plyr-video-control-color:                 var(--pl-color-white, #ffffff);
    --plyr-video-control-color-hover:           var(--pl-color-white, #ffffff);
    --plyr-video-control-background-hover:      var(--pl-color-primary, #34657F);
    --plyr-video-progress-buffered-background:  rgba(255, 255, 255, 0.25);

    /* ============================================================
       Range slider (progress, volume, scrub)
       ============================================================ */
    --plyr-range-fill-background:               var(--pl-color-primary, #34657F);
    --plyr-range-thumb-background:              var(--pl-color-white, #ffffff);
    --plyr-range-thumb-shadow:                  0 1px 2px rgba(0, 0, 0, 0.3);
    --plyr-range-thumb-active-shadow-width:     3px;

    /* ============================================================
       Menus (settings dropdown, captions selector)
       ============================================================ */
    --plyr-menu-background:                     var(--pl-surface-card, #ffffff);
    --plyr-menu-color:                          var(--pl-text-strong, #54595F);
    --plyr-menu-shadow:                         0 1px 2px rgba(0, 0, 0, 0.15);
    --plyr-menu-radius:                         6px;

    /* ============================================================
       Tooltips
       ============================================================ */
    --plyr-tooltip-background:                  var(--pl-surface-overlay, rgba(0, 0, 0, 0.85));
    --plyr-tooltip-color:                       var(--pl-color-white, #ffffff);
    --plyr-tooltip-radius:                      4px;

    /* ============================================================
       Captions
       ============================================================ */
    --plyr-captions-background:                 rgba(0, 0, 0, 0.7);
    --plyr-captions-text-color:                 var(--pl-color-white, #ffffff);
    --plyr-font-size-captions-base:             16px;
}

/* ----------------------------------------------------------------
   Focus ring — match WCPC primary at 35% (mirrors --pl-focus-ring)
   ---------------------------------------------------------------- */
.wcpc-sermons .plyr .plyr__control:focus-visible,
.plyr.plyr-wcpc .plyr__control:focus-visible {
    box-shadow: 0 0 0 3px rgba(52, 101, 127, 0.35);
    outline: 0;
}