/*
 * Yalari video player: styles
 * ===========================
 * File:      wp-content/themes/astra-child/css/yalari-video.css
 * Used by:   the [yalari_video] shortcode (functions.php #26). Loaded only on
 *            pages that use the shortcode, never site-wide.
 * Pairs with: js/yalari-video.js (behaviour) and functions.php 1.0.35.
 * Source:    the <style> block of the approved Elementor HTML widget
 *            yalari-churchie-video.html (widget revision 1.6.0, 2026-11-04),
 *            copied across unchanged apart from removing the indent.
 *
 * Yalari revision: 1.0.0 (2026-11-04) - first version, ported from widget
 * 1.6.0 so every video on the site shares one stylesheet. A fix here now
 * updates every video at once.
 *
 * Don't remove the "Theme-proofing" block: the site theme styles every
 * <button> as a maroon pill, and these rules force the player's buttons back
 * to transparent white icons.
 */

/* LIFT: two soft shadows, a tight one for an edge and a wide one for depth.
   To make it subtler or stronger, change the last number in each rgba (.08 and .22).
   To remove it, delete the box-shadow line. Corners are kept square on purpose. */
.yv {
  position: relative; max-width: 100%; background: #000; border-radius: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 14px 36px -10px rgba(0, 0, 0, .22);
}
.yv__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0 !important; }
.yv__player, .yv__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Theme-proofing ----
   The site theme gives every <button> a maroon fill, pill shape and padding, and
   changes them on hover/focus. Everything below is forced back to transparent with
   !important, including hover, focus and active states. Don't remove these. */
.yv .yv__overlay, .yv .yv__overlay:hover, .yv .yv__overlay:focus, .yv .yv__overlay:active,
.yv .yv__ctl, .yv .yv__ctl:hover, .yv .yv__ctl:focus, .yv .yv__ctl:active {
  background: transparent !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  margin: 0 !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important;
  color: #fff !important; font-size: 0 !important; line-height: 0 !important;
  text-transform: none !important; letter-spacing: 0 !important; text-shadow: none !important;
  transform: none !important; transition: none !important; outline: none;
  -webkit-appearance: none !important; appearance: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Tap target over the whole video */
.yv .yv__overlay {
  position: absolute !important; inset: 0 !important; z-index: 2;
  width: 100% !important; height: 100% !important; cursor: pointer;
}
.yv .yv__overlay:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: -2px; }

/* Big white icon + small help text. Lower third while muted, so it doesn't
   cover opening text cards; centred when paused. */
.yv__hint {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: #fff; pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6)); /* readable over light footage */
}
.yv__icon { width: 64px; height: 64px; display: none; }
.yv .yv__label { font: 400 13px/1.2 Arial, sans-serif; letter-spacing: .02em; color: #fff; }
.yv__label:empty { display: none; }
.yv[data-state="muted"] .yv__icon--muted,
.yv[data-state="paused"] .yv__icon--play { display: block; }
.yv[data-state="paused"] .yv__hint { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.yv[data-state="playing"] .yv__hint { display: none; }

/* Control bar: icons float over a soft fade, no boxes or fills */
.yv__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 28px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .45));
  color: #fff; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.yv--bar-on .yv__bar { opacity: 1; visibility: visible; }
.yv .yv__ctl {
  flex: none; width: 36px !important; height: 36px !important;
  display: grid !important; place-items: center; cursor: pointer;
}
.yv .yv__ctl[hidden] { display: none !important; }
.yv__ctl svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); opacity: .92; }
.yv .yv__ctl:hover svg { opacity: 1; }
.yv .yv__ctl:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 0; }
.yv__cc[aria-pressed="false"] svg { opacity: .4; }

/* Progress bar: thin translucent track, white fill. Thickens and shows a small
   dot on hover or while dragging. The 28px-tall box is the touch area. */
.yv__seek {
  position: relative; flex: 1; min-width: 0; height: 28px; margin: 0 6px;
  cursor: pointer; touch-action: none; outline: none;
}
.yv__track {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%);
  background: rgba(255, 255, 255, .3); border-radius: 3px; overflow: hidden;
  transition: height .15s;
}
.yv__fill { height: 100%; width: 0; background: rgba(255, 255, 255, .95); }
.yv__thumb {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transform: translateY(-50%) scale(0); transition: transform .15s;
}
.yv__seek:hover .yv__track, .yv__seek.is-dragging .yv__track, .yv__seek:focus-visible .yv__track { height: 5px; }
.yv__seek:hover .yv__thumb, .yv__seek.is-dragging .yv__thumb, .yv__seek:focus-visible .yv__thumb { transform: translateY(-50%) scale(1); }
.yv .yv__time {
  flex: none; font: 400 12px/1 Arial, sans-serif; color: rgba(255, 255, 255, .9);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.yv .i-novol, .yv .i-exit { display: none; }
.yv__mute[aria-pressed="true"] .i-novol { display: block; }
.yv__mute[aria-pressed="true"] .i-vol { display: none; }
.yv--is-fs .i-exit { display: block; }
.yv--is-fs .i-enter { display: none; }

/* Full screen: real (computers, Android, iPad) and fill-the-screen fallback (iPhone).
   Kept as separate rules because one unsupported selector would cancel a combined rule. */
.yv:fullscreen { width: 100%; height: 100%; box-shadow: none; }
.yv:fullscreen .yv__frame { position: absolute; inset: 0; aspect-ratio: auto; }
.yv:-webkit-full-screen { width: 100%; height: 100%; box-shadow: none; }
.yv:-webkit-full-screen .yv__frame { position: absolute; inset: 0; aspect-ratio: auto; }
.yv.yv--fs { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh; box-shadow: none; }
.yv.yv--fs .yv__frame { position: absolute; inset: 0; aspect-ratio: auto; }
html.yv-lock, html.yv-lock body { overflow: hidden; }

@media (min-width: 768px) { .yv__icon { width: 80px; height: 80px; } }
@media (max-width: 380px) { .yv__time { display: none; } }