/* OKC — Video Slider
 * ---------------------------------------------------------------------------
 * Port of the .vp-slider-* / .vp-slide-* block of
 * wp-content/plugins/appaza-video-popup/assets/css/video-popup.css
 * (the slider half, roughly lines 210-470 of that file).
 *
 * Every geometry and colour value below is copied from that source. What has
 * changed is only the plumbing:
 *
 *   1. CLASS NAMES. The source's names are not reused. The appaza plugin's own
 *      JS does `document.querySelectorAll('.vp-slider-container')` with no
 *      scoping whatsoever, so a page running both plugins would have the appaza
 *      controller adopt this widget's track and fight the OKC one over the same
 *      transform. Prefixed .okc-vslider__* names make that impossible, and no
 *      rule here can leak onto appaza's own markup either.
 *
 *   2. TOKENS. The values live in custom properties on .okc-vslider__slider so
 *      the Elementor Style tab can move them. The defaults ARE the legacy
 *      values, so an untouched widget is pixel-identical to the shortcode.
 *
 *   3. SPECIFICITY. Two layers on purpose:
 *        - defaults and anything an Elementor control can set are declared on a
 *          bare single class (0,1,0), so Elementor's `{{WRAPPER}} .okc-…`
 *          (0,2,0) always wins;
 *        - anything that has to beat okc-base.css is declared under the widget
 *          root (0,2,0 / 0,3,0). okc-base.css scopes a Tailwind-Preflight-ish
 *          reset to `.okc-w`, and three of its rules would otherwise wreck this
 *          slider: `.okc-w button:hover {transform: translateY(-2px)}` (would
 *          knock the vertically-centred arrows off their axis),
 *          `.okc-w img:hover {transform: scale(1.02)}` (would beat the card's
 *          own 1.05 zoom) and `.okc-w button {transition: all .3s ease}`.
 *
 * RESPONSIVE / BREAKPOINTS — read this before touching a media query.
 *
 * Two systems are in play and they are NOT the same widths:
 *
 *   - the SLIDE COUNT steps at max-width 768 and 480, because those are the
 *     source controller's breakpoints and the brief asked for them verbatim;
 *   - every Style-tab value is emitted by Elementor under ITS breakpoints
 *     (tablet max-width 1024, mobile max-width 767 by default).
 *
 * The token step-downs at the bottom of this file are declared at (0,1,0),
 * while Elementor writes `.elementor-element-<id> .okc-vslider__slider` at
 * (0,2,0) with no media query — so a desktop Style value would flatten them.
 * The widget therefore ships explicit per-device DEFAULTS for arrow size, play
 * size and side gutter (see class-okc-video-slider.php), which makes Elementor
 * emit the ramp itself, at its own specificity, on the device tabs where the
 * user can see it. The media queries here are the fallback for a render where
 * Elementor's post CSS is missing, plus the 1024 / 480 stops Elementor's
 * default device set cannot express.
 */

/* ==========================================================================
   ROOT
   --------------------------------------------------------------------------
   Flex column, for one reason: adjacent-sibling margins do not collapse
   between flex items. The heading block and the slider are siblings, and while
   they were plain blocks the heading's margin-bottom collapsed with the
   slider's 40px margin-top — so the "Gap Below Heading" control did nothing at
   all anywhere under 40px. (`display: flow-root` would NOT have fixed that: a
   BFC stops parent/child collapsing, not sibling collapsing.)
   ========================================================================== */
.okc-vslider {
	display: flex;
	flex-direction: column;
}

/* ==========================================================================
   TOKENS  —  the legacy values, overridable from the Style tab
   ========================================================================== */
.okc-vslider__slider {
	/* Frame */
	--okc-vs-gutter: 50px;              /* .vp-slider-container padding: 0 50px  */
	--okc-vs-gap: 16px;                 /* .vp-slider-slide padding: 0 8px       */
	--okc-vs-viewport-radius: 16px;     /* .vp-slider-viewport border-radius     */

	/* Slides in view. PHP writes these three inline, already clamped to the
	   number of videos, so the FIRST paint uses the width the controller is
	   about to apply rather than a hard-coded 3 / 2 / 1 that then snaps. */
	--okc-vs-per-desktop: 3;
	--okc-vs-per-tablet: 2;
	--okc-vs-per-mobile: 1;

	/* Card */
	--okc-vs-card-radius: 14px;         /* .vp-slide-inner border-radius         */
	--okc-vs-card-bg: #0a0a0a;          /* .vp-slide-inner background            */
	--okc-vs-overlay: rgba(0, 0, 0, 0.45);

	/* Play button */
	--okc-vs-play-size: 40px;
	--okc-vs-play-bg: rgba(255, 0, 0, 0.85);
	--okc-vs-play-bg-hover: rgb(255, 0, 0);
	--okc-vs-play-icon: #ffffff;

	/* Title */
	--okc-vs-title-color: #ffffff;
	--okc-vs-title-scrim: rgba(0, 0, 0, 0.8);

	/* Arrows */
	--okc-vs-arrow-size: 44px;
	--okc-vs-arrow-icon: 24px;
	--okc-vs-arrow-color: #1a1a1a;
	--okc-vs-arrow-bg: rgba(255, 255, 255, 0.95);
	--okc-vs-arrow-bg-hover: #ffffff;

	/* Dots */
	--okc-vs-dot: #d0d0d0;
	--okc-vs-dot-hover: #999999;
	--okc-vs-dot-active: #ff0000;
	--okc-vs-dot-size: 10px;
	--okc-vs-dots-gap: 20px;

	position: relative;
	width: 100%;
	max-width: 1200px;
	/* Top margin comes through a variable rather than a competing
	   declaration: the heading block sets it to 0 from the ROOT at (0,1,0),
	   so the Style tab's Margin control (a `margin:` shorthand at (0,2,0))
	   still wins outright instead of tying with it. */
	margin: var(--okc-vs-margin-top, 40px) auto 40px;
	padding: 0 var(--okc-vs-gutter);
	-webkit-user-select: none;
	user-select: none;
}

/* ==========================================================================
   HEADING  (optional; the legacy .video-title band above the shortcode)
   --------------------------------------------------------------------------
   Sizing lives on the wrapper, not the heading element, because okc-base.css
   forces `font-size: inherit; font-weight: inherit` onto every h1-h6 inside
   .okc-w. Putting it here means the heading inherits the legacy ramp, and an
   Elementor typography group set directly on .okc-vslider__heading still wins.
   These are Tailwind's own min-width breakpoints (md / lg), matching the
   legacy `text-lg md:text-3xl lg:text-4xl font-black uppercase`, and the
   line-heights are Tailwind's paired leadings for those steps (1.75rem /
   2.25rem / 2.5rem) rather than a flat unitless ratio — the heading wraps to
   two lines on a phone, where a 1.25 ratio read 5.5px tighter per line than
   the templates did.

   Margins reproduce the templates' `mt-10 mb-2` — but note the legacy gap
   BELOW the heading was not 0.5rem: mb-2 collapsed with the shortcode
   container's 40px margin-top, so what shipped was 40px. Sibling collapsing is
   off here (flex root), so the 40px is stated outright and the slider's own
   top margin is zeroed whenever a heading is present.
   ========================================================================== */
.okc-vslider__head {
	margin-top: 2.5rem;    /* mt-10 */
	margin-bottom: 2.5rem; /* the collapsed value the templates actually showed */
	font-size: 1.125rem;   /* text-lg */
	font-weight: 900;      /* font-black */
	line-height: 1.75rem;
	text-transform: uppercase;
	text-align: center;
}

@media (min-width: 768px) {
	.okc-vslider__head {
		font-size: 1.875rem;  /* md:text-3xl */
		line-height: 2.25rem;
	}
}

@media (min-width: 1024px) {
	.okc-vslider__head {
		font-size: 2.25rem;   /* lg:text-4xl */
		line-height: 2.5rem;
	}
}

.okc-vslider__heading {
	display: block;
	color: #003049;
}

/* With a heading above it the gap is owned by .okc-vslider__head's
   margin-bottom (the "Gap Below Heading" control), so the slider's own top
   margin has to get out of the way or it would be added on top. PHP puts
   this modifier on the root whenever a heading actually renders. */
.okc-vslider--has-heading {
	--okc-vs-margin-top: 0px;
}

/* ==========================================================================
   VIEWPORT + TRACK
   ========================================================================== */
.okc-vslider__viewport {
	overflow: hidden;
	border-radius: var(--okc-vs-viewport-radius);
}

.okc-vslider .okc-vslider__track {
	display: flex;
	/* The controller rewrites this inline on every move; it is here so the
	   first paint (and a no-JS page) is not left with a bare flex row. */
	transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

/* Slide width is written inline by the controller as 100/slidesToShow %.
   These are the no-JS / pre-init fallbacks. They read the per-device counts
   PHP emitted, so first paint already matches what the controller will write
   — including the clamp to the number of videos. */
.okc-vslider .okc-vslider__slide {
	flex: 0 0 auto;
	width: calc(100% / var(--okc-vs-per-desktop, 3));
	padding: 0 calc(var(--okc-vs-gap) / 2);
}

@media (max-width: 768px) {
	.okc-vslider .okc-vslider__slide {
		width: calc(100% / var(--okc-vs-per-tablet, 2));
	}
}

@media (max-width: 480px) {
	.okc-vslider .okc-vslider__slide {
		width: calc(100% / var(--okc-vs-per-mobile, 1));
	}
}

/* Clones (.okc-vslider__slide--clone) need no styling of their own — they are
   deep copies of real slides. The controller gives them aria-hidden and takes
   their button out of the tab order so nothing is announced or tabbed twice;
   it does the same to REAL slides that are currently outside the window, which
   also stops a Tab press from scrolling this overflow:hidden viewport out from
   under the track's transform. Everything stays clickable, and the shared
   lightbox picks it all up by delegation. */

/* ==========================================================================
   CARD
   --------------------------------------------------------------------------
   The card is a <button> rather than the source's clickable <div>, so a
   keyboard user can open the video with Enter or Space and it is announced as
   a control. All the button chrome has to be unwound by hand, and the rules
   sit under .okc-vslider so they outrank okc-base.css's `.okc-w button`.
   ========================================================================== */
.okc-vslider .okc-vslider__inner {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--okc-vs-card-radius);
	overflow: hidden;
	background: var(--okc-vs-card-bg);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	/* The source used `transition: all .35s`, which also fired transitionend
	   for properties nobody animates. Naming the two that actually change is
	   visually identical and keeps the track's transitionend handler clean. */
	transition:
		transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.okc-vslider .okc-vslider__inner:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* Focus deliberately does NOT lift the card, and the ring is drawn INSIDE it.
   The viewport is overflow:hidden (as in the source) and the track is exactly
   one card tall, so a card's top and bottom edges sit flush with the clip box:
   a lifted card loses its top 6px and an outline at +3px is clipped away
   entirely along its horizontal runs. Clipping a hover flourish is harmless
   and source-faithful; clipping the focus indicator is not. */
.okc-vslider .okc-vslider__inner:focus-visible {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	outline: 3px solid var(--okc-vs-play-bg-hover);
	outline-offset: -3px;
}

.okc-vslider .okc-vslider__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	/* hqdefault.jpg is 4:3 with letterbox bars; cover crops them away. This is
	   exactly what the source did. */
	object-fit: cover;
	transition: transform 0.5s;
}

/* Two selectors, because okc-base.css's `.okc-w img:hover {transform:
   scale(1.02)}` would otherwise win when the pointer is over the image
   itself rather than the card's padding. */
.okc-vslider .okc-vslider__inner:hover .okc-vslider__img,
.okc-vslider .okc-vslider__inner:focus-visible .okc-vslider__img,
.okc-vslider .okc-vslider__img:hover {
	transform: scale(1.05);
}

/* ==========================================================================
   OVERLAY + PLAY BUTTON  (always visible, as in the source)
   ========================================================================== */
.okc-vslider .okc-vslider__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, var(--okc-vs-overlay) 100%);
	opacity: 1;
	transition: opacity 0.35s;
}

.okc-vslider .okc-vslider__play {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--okc-vs-play-size);
	height: var(--okc-vs-play-size);
	border-radius: 50%;
	background: var(--okc-vs-play-bg);
	color: var(--okc-vs-play-icon);
	box-shadow: 0 2px 12px rgba(255, 0, 0, 0.35);
	transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
}

/* Source: 22px glyph in a 40px button. Kept as a ratio so the glyph tracks the
   Size control. At the mobile step-down that gives 34 * 0.55 = 18.7px where
   the source hard-coded 18px — a documented sub-pixel divergence, taken so the
   glyph does not stop scaling the moment anyone touches the control. */
.okc-vslider .okc-vslider__play svg {
	display: block;
	width: calc(var(--okc-vs-play-size) * 0.55);
	height: calc(var(--okc-vs-play-size) * 0.55);
	fill: currentColor;
}

.okc-vslider .okc-vslider__inner:hover .okc-vslider__play,
.okc-vslider .okc-vslider__inner:focus-visible .okc-vslider__play {
	transform: scale(1.15);
	background: var(--okc-vs-play-bg-hover);
	box-shadow: 0 4px 18px rgba(255, 0, 0, 0.5);
}

/* ==========================================================================
   SLIDE TITLE  (always visible when switched on)
   ========================================================================== */
.okc-vslider__title {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 12px 14px;
	background: linear-gradient(transparent, var(--okc-vs-title-scrim));
	color: var(--okc-vs-title-color);
	/* The source's own stack, from .vp-slider-container. The title is the only
	   text this widget owns, and without this it would inherit okc-base's
	   Poppins stack — which has no @font-face in okc-base.css, so it falls
	   through to ui-sans-serif unless the theme loads it. The Titles
	   typography group overrides this outright when a family is set there. */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

@media (max-width: 480px) {
	.okc-vslider__title {
		padding: 10px;
		font-size: 12px;
	}
}

/* ==========================================================================
   ARROWS
   ========================================================================== */
.okc-vslider .okc-vslider__arrow {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--okc-vs-arrow-size);
	height: var(--okc-vs-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--okc-vs-arrow-bg);
	color: var(--okc-vs-arrow-color);
	cursor: pointer;
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
	transform: translateY(-50%);
	transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
}

.okc-vslider .okc-vslider__arrow svg {
	display: block;
	width: var(--okc-vs-arrow-icon);
	height: var(--okc-vs-arrow-icon);
	fill: currentColor;
}

.okc-vslider .okc-vslider__arrow--prev { left: 4px; }
.okc-vslider .okc-vslider__arrow--next { right: 4px; }

/* Beats okc-base.css's `.okc-w button:hover {transform: translateY(-2px)}`,
   which would otherwise drop the arrow off its vertical centre on hover. */
.okc-vslider .okc-vslider__arrow:hover,
.okc-vslider .okc-vslider__arrow:focus-visible {
	background: var(--okc-vs-arrow-bg-hover);
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
	transform: translateY(-50%) scale(1.1);
}

.okc-vslider .okc-vslider__arrow:focus-visible {
	outline: 3px solid var(--okc-vs-dot-active);
	outline-offset: 2px;
}

/* Only reachable with Infinite Loop switched off. */
.okc-vslider .okc-vslider__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.okc-vslider .okc-vslider__arrow[disabled]:hover {
	transform: translateY(-50%);
	background: var(--okc-vs-arrow-bg);
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   DOTS
   ========================================================================== */
.okc-vslider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--okc-vs-dots-gap);
	padding: 8px 0;
}

/* Hidden until the controller fills it, so an empty 36px-tall strip never
   flashes under the slider on a slow first paint. */
.okc-vslider__dots:empty {
	display: none;
}

.okc-vslider .okc-vslider__dot {
	width: var(--okc-vs-dot-size);
	height: var(--okc-vs-dot-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--okc-vs-dot);
	cursor: pointer;
	transition: width 0.3s, background-color 0.3s, border-radius 0.3s;
}

.okc-vslider .okc-vslider__dot:hover {
	background: var(--okc-vs-dot-hover);
	/* Cancels okc-base.css's generic button lift. */
	transform: none;
	box-shadow: none;
}

.okc-vslider .okc-vslider__dot:focus-visible {
	outline: 2px solid var(--okc-vs-dot-active);
	outline-offset: 3px;
}

/* Source: 10px dot stretching to 28x10 with a 14px radius — kept as ratios so
   the pill still reads right at any dot size. */
.okc-vslider .okc-vslider__dot--active,
.okc-vslider .okc-vslider__dot--active:hover {
	width: calc(var(--okc-vs-dot-size) * 2.8);
	border-radius: calc(var(--okc-vs-dot-size) * 1.4);
	background: var(--okc-vs-dot-active);
}

/* ==========================================================================
   EDITOR-ONLY EMPTY STATE
   ========================================================================== */
.okc-vslider__empty {
	margin: 24px auto;
	max-width: 640px;
	padding: 16px 20px;
	border: 1px dashed #9aa5b1;
	border-radius: 8px;
	background: #f6f7f9;
	color: #52606d;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* ==========================================================================
   RESPONSIVE  (the source's own max-width breakpoints)
   --------------------------------------------------------------------------
   Fallback layer — see the header. The same ramp ships as per-device control
   defaults, which Elementor emits at (0,2,0) under its own breakpoints; these
   rules cover a render with no post CSS, plus the 1024 / 480 stops Elementor's
   default device set has no tab for.
   ========================================================================== */
@media (max-width: 1024px) {
	.okc-vslider__slider { --okc-vs-gutter: 44px; }
}

@media (max-width: 768px) {
	.okc-vslider__slider {
		--okc-vs-gutter: 40px;
		--okc-vs-arrow-size: 36px;
		--okc-vs-play-size: 34px;
		margin: var(--okc-vs-margin-top, 24px) auto 24px;
	}

	.okc-vslider .okc-vslider__arrow--prev { left: 2px; }
	.okc-vslider .okc-vslider__arrow--next { right: 2px; }
}

@media (max-width: 480px) {
	.okc-vslider__slider { --okc-vs-gutter: 36px; }
}

/* ==========================================================================
   REDUCED MOTION
   --------------------------------------------------------------------------
   The controller also refuses to autoplay and jumps rather than slides; this
   is the CSS half. `!important` on the track because the controller writes
   `transition` inline, and this has to hold even before it runs.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.okc-vslider .okc-vslider__track {
		transition: none !important;
		will-change: auto;
	}

	.okc-vslider .okc-vslider__inner,
	.okc-vslider .okc-vslider__img,
	.okc-vslider .okc-vslider__overlay,
	.okc-vslider .okc-vslider__play,
	.okc-vslider .okc-vslider__arrow,
	.okc-vslider .okc-vslider__dot {
		transition: none;
	}

	.okc-vslider .okc-vslider__inner:hover {
		transform: none;
	}

	.okc-vslider .okc-vslider__inner:hover .okc-vslider__img,
	.okc-vslider .okc-vslider__inner:focus-visible .okc-vslider__img,
	.okc-vslider .okc-vslider__img:hover {
		transform: none;
	}

	.okc-vslider .okc-vslider__inner:hover .okc-vslider__play,
	.okc-vslider .okc-vslider__inner:focus-visible .okc-vslider__play {
		transform: none;
	}

	.okc-vslider .okc-vslider__arrow:hover,
	.okc-vslider .okc-vslider__arrow:focus-visible {
		transform: translateY(-50%);
	}
}