/**
 * Hero video fix — full bundle.
 *
 * 1. Slideshow overlay play button (`.video_play`) — colour driven by the
 *    theme CSS variables --main_color / --main_color_associate.
 *
 * 2. Plyr custom theming — terracotta accent (#A36159) on the dark video
 *    background (#0A1317) used by the MGallery brand. Override the
 *    --plyr-* variables in your own stylesheet if a different site needs
 *    a different palette.
 *
 * 3. Self-hosted hero video behaviour — when the JS detects a
 *    <video class="player_video"> inside a .slideshow_container, it adds
 *    .has-self-hosted-video to that container and .is-playing to the
 *    <video> on the first `playing` event. The rules below then:
 *      a. hide the <picture> of every slide (no static "first frame
 *         image" before the video starts),
 *      b. paint a brand-coherent dark fallback while the video buffers,
 *      c. start the <video> invisible and fade it in once playback
 *         actually begins.
 *    The fallback background colour is exposed as --hero-video-fallback-bg
 *    for per-site override.
 *
 *    !important is required because the upstream slideshow template emits
 *    <video ... style="opacity: 1"> as an inline style.
 */

/* ─── Slideshow overlay play button ──────────────────────────────────── */
.video_play:after {
  border-color: transparent transparent transparent var(--main_color);
}
.video_play {
  background: var(--main_color_associate);
}

/* ─── Plyr theming ───────────────────────────────────────────────────── */
.plyr {
  /* Main accent: site's terracotta */
  --plyr-color-main: #A36159;

  /* Video */
  --plyr-video-background: #0A1317;
  --plyr-video-control-color: #fff;
  --plyr-video-control-color-hover: #fff;
  --plyr-video-control-background-hover: #A36159;

  /* Progress bar and range inputs (scrubber, volume) */
  --plyr-range-fill-background: #A36159;
  --plyr-range-thumb-background: #fff;
  --plyr-range-thumb-shadow-color: rgba(10, 19, 23, .35);
  --plyr-video-progress-buffered-background: rgba(255, 255, 255, .25);

  /* Audio player (if needed) */
  --plyr-audio-background: #0A1317;
  --plyr-audio-control-color: #fff;
  --plyr-audio-control-color-hover: #fff;
  --plyr-audio-control-background-hover: #A36159;

  /* Settings menu (quality, speed, etc.) */
  --plyr-menu-background: #0A1317;
  --plyr-menu-color: #fff;
  --plyr-menu-border-color: rgba(255, 255, 255, .1);
  --plyr-menu-arrow-color: #fff;

  /* Tooltip */
  --plyr-tooltip-background: #0A1317;
  --plyr-tooltip-color: #fff;
  --plyr-tooltip-radius: 4px;

  /* Captions */
  --plyr-captions-background: rgba(10, 19, 23, .8);
  --plyr-captions-text-color: #fff;

  /* Center play button (overlay) */
  --plyr-control-radius: 4px;

  /* Accessible focus ring */
  --plyr-focus-visible-color: #A36159;
}

/* Hide the native slideshow overlay controls; Plyr provides its own. */
.slideshow_container .ss_video_wrapper .controls {
  display: none;
}

/* ─── Self-hosted hero video: hide slide images, fade the video in ───── */
.slideshow_container.has-self-hosted-video .slide picture {
  opacity: 0 !important;
  transition: opacity 0ms;
}
.slideshow_container.has-self-hosted-video .ss_video_wrapper {
  background-color: var(--hero-video-fallback-bg, #0A1317);
}
.slideshow_container.has-self-hosted-video video.player_video {
  opacity: 0 !important;
  transition: opacity 600ms ease-in;
}
.slideshow_container.has-self-hosted-video video.player_video.is-playing {
  opacity: 1 !important;
}