/* OKC — Video Carousel
 * ---------------------------------------------------------------------------
 * Source: themes/okc/page-templates/sundays_t.php lines 137-156
 * (identical block in kids-template.php lines 122-141).
 *
 * IMPORTANT — there is no legacy rendering to copy for the carousel itself.
 * The legacy template printed:
 *
 *     <div class="text-center mt-10 video-title">
 *       <h3 class="text-lg md:text-3xl lg:text-4xl font-black text-[#003049]
 *                  mb-2 uppercase"
 *           style="font-family: 'Pragmatica',font-wieght:normal, PT Sans">…</h3>
 *     </div>
 *     <?php echo do_shortcode('[video_slider urls="…" titles="…"]'); ?>
 *
 * `[video_slider]` is registered NOWHERE in the theme or in any plugin, so on
 * the live site it rendered as the literal string "[video_slider urls=… ]".
 * Only the heading above it ever painted. This stylesheet therefore splits in
 * two:
 *
 *   1. HEADING + BAND — a literal, value-for-value resolution of the Tailwind
 *      v3 utilities the legacy markup used. Pixel-faithful.
 *   2. CARDS / CAROUSEL / NAV — new work. Built from the visual language the
 *      rest of the theme already uses on this very page: the Location Card's
 *      cream #F5E6D3 fill, 4px #0A3B5C border, rounded-3xl (1.5rem) corners and
 *      #C41E3A hover, Pragmatica for body type, Tailwind's own shadow ramp.
 *
 * The heading's inline font-family is invalid CSS — `font-wieght:normal` is a
 * bogus declaration inside a font-family value, so browsers dropped the whole
 * thing and the heading inherited the theme's `body { font-family:"Poppins" }`.
 * That is reproduced faithfully below, including the fact that the theme only
 * ever loaded Poppins 300/400/500/700 (see themes/okc/inc/enqueue.php line 9),
 * so `font-black` (900) was synthesised by the browser rather than a real cut.
 * Change it from Style > Heading > Typography if Pragmatica was the intent.
 *
 * Breakpoints: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px.
 *
 * Selectors are two classes deep (0,2,0) so they outrank the okc-base.css reset
 * (`.okc-w img`, `.okc-w button:hover` = 0,1,1) while still losing to
 * Elementor's own {{WRAPPER}} Style-tab rules.
 * ------------------------------------------------------------------------- */

/* Exactly the weights themes/okc/inc/enqueue.php loaded. */
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&display=swap");

/* ==========================================================================
   TOKENS
   Every one of these is driven by an Elementor control; the fallbacks here are
   the legacy / theme values so the widget is correct before anything is set.
   ========================================================================== */
.okc-video-carousel {
	--okc-vc-gap: 1.5rem;              /* gap-6 */
	--okc-vc-per: 1;                   /* cards per view, set by the --sm/md/lg-N classes */

	--okc-vc-stage-bg: #0a3b5c;
	--okc-vc-card-bg: #f5e6d3;         /* Location Card cream */
	--okc-vc-card-border: #0a3b5c;
	--okc-vc-card-border-width: 4px;   /* border-4 */
	--okc-vc-card-radius: 1.5rem;      /* rounded-3xl */

	--okc-vc-card-title-color: #0a3b5c;

	--okc-vc-play-bg: #0a3b5c;
	--okc-vc-play-bg-hover: #c41e3a;   /* the Location Card button hover */
	--okc-vc-play-color: #ffffff;
	--okc-vc-play-ring: #f5e6d3;
	--okc-vc-play-size: 4.5rem;

	--okc-vc-arrow-bg: #0a3b5c;
	--okc-vc-arrow-bg-hover: #c41e3a;
	--okc-vc-arrow-color: #f5e6d3;

	--okc-vc-dot: rgba(10, 59, 92, 0.35);
	--okc-vc-dot-active: #0a3b5c;

	--okc-vc-focus: #c41e3a;
}

/* ==========================================================================
   BAND — the tail of the legacy <section class="py-12 md:py-16 bg-[#B8D4E8]">
   The heading carried mt-10 (2.5rem); the section supplied pb-12 / md:pb-16.
   Margin-collapse would push a margin-top straight out of a padding-less
   section and leave the band colour behind it, so the 2.5rem is applied as the
   section's own padding-top instead — identical result, no collapse.
   ========================================================================== */
.okc-video-carousel {
	padding-top: 2.5rem;               /* mt-10 on .video-title */
	padding-bottom: 3rem;              /* pb-12 */
	background-color: #b8d4e8;
}

@media (min-width: 768px) {
	.okc-video-carousel {
		padding-bottom: 4rem;          /* md:pb-16 */
	}
}

/* container mx-auto px-6 */
.okc-video-carousel .okc-video-carousel__container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;              /* px-6 */
	padding-right: 1.5rem;
}

@media (min-width: 640px) {
	.okc-video-carousel .okc-video-carousel__container {
		max-width: 640px;
	}
}

@media (min-width: 768px) {
	.okc-video-carousel .okc-video-carousel__container {
		max-width: 768px;
	}
}

@media (min-width: 1024px) {
	.okc-video-carousel .okc-video-carousel__container {
		max-width: 1024px;
	}
}

@media (min-width: 1280px) {
	.okc-video-carousel .okc-video-carousel__container {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.okc-video-carousel .okc-video-carousel__container {
		max-width: 1536px;
	}
}

/* ==========================================================================
   HEADING — text-center / text-lg md:text-3xl lg:text-4xl font-black
             text-[#003049] mb-2 uppercase
   The legacy wrapper was a direct child of the section and so had NO
   horizontal padding: on a narrow phone the words touched the viewport edge.
   px-6 (1.5rem) is added here to match every other block on the page — a
   deliberate, documented correction rather than a faithful reproduction.
   ========================================================================== */
.okc-video-carousel .okc-video-carousel__head {
	text-align: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.okc-video-carousel .okc-video-carousel__title {
	font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
	font-size: 1.125rem;               /* text-lg */
	line-height: 1.75rem;
	font-weight: 900;                  /* font-black */
	color: #003049;
	margin: 0 0 0.5rem;                /* mb-2 */
	text-transform: uppercase;
}

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

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

/* Gap between the heading block and the cards. */
.okc-video-carousel .okc-video-carousel__head + .okc-video-carousel__viewport {
	margin-top: 2rem;
}

/* ==========================================================================
   TRACK
   Carousel: a native overflow-x scroller with scroll-snap — touch swipe and
   trackpad scroll come free, the arrows/dots just drive scrollLeft.
   Grid: the same flex basis, wrapped instead of scrolled.
   ========================================================================== */
.okc-video-carousel .okc-video-carousel__viewport {
	position: relative;
}

.okc-video-carousel .okc-video-carousel__track {
	display: flex;
	gap: var(--okc-vc-gap);
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.okc-video-carousel .okc-video-carousel__track--carousel {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* Room for the hover lift (5px) and the card shadow, which an overflow
	   scroller would otherwise clip. shadow-2xl reaches ~38px below the card
	   (25px offset + half of the 50px blur, less the 12px negative spread). */
	padding: 0.5rem 0 2.5rem;
}

/* The scrollbar is only hidden once the script has wired up the arrows and
   dots. If the JS never runs, the native scrollbar stays visible and the track
   is still usable with a mouse. */
.okc-video-carousel[data-okc-vc-ready="1"] .okc-video-carousel__track--carousel {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.okc-video-carousel[data-okc-vc-ready="1"] .okc-video-carousel__track--carousel::-webkit-scrollbar {
	display: none;
}

.okc-video-carousel .okc-video-carousel__track--grid {
	flex-wrap: wrap;
}

.okc-video-carousel .okc-video-carousel__track:focus-visible {
	outline: 3px solid var(--okc-vc-focus);
	outline-offset: 4px;
}

/* Cards per view. The classes only set the custom property; the width maths
   lives once, on the card. */
.okc-video-carousel .okc-video-carousel__track--sm-1 { --okc-vc-per: 1; }
.okc-video-carousel .okc-video-carousel__track--sm-2 { --okc-vc-per: 2; }

@media (min-width: 768px) {
	.okc-video-carousel .okc-video-carousel__track--md-1 { --okc-vc-per: 1; }
	.okc-video-carousel .okc-video-carousel__track--md-2 { --okc-vc-per: 2; }
	.okc-video-carousel .okc-video-carousel__track--md-3 { --okc-vc-per: 3; }
	.okc-video-carousel .okc-video-carousel__track--md-4 { --okc-vc-per: 4; }
}

@media (min-width: 1024px) {
	.okc-video-carousel .okc-video-carousel__track--lg-1 { --okc-vc-per: 1; }
	.okc-video-carousel .okc-video-carousel__track--lg-2 { --okc-vc-per: 2; }
	.okc-video-carousel .okc-video-carousel__track--lg-3 { --okc-vc-per: 3; }
	.okc-video-carousel .okc-video-carousel__track--lg-4 { --okc-vc-per: 4; }
}

/* ==========================================================================
   CARD
   bg cream, border-4 #0A3B5C, rounded-3xl, shadow-xl — the Location Card
   recipe, one size down.
   ========================================================================== */
.okc-video-carousel .okc-video-carousel__card {
	flex: 0 0 calc(
		(100% - (var(--okc-vc-per) - 1) * var(--okc-vc-gap)) / var(--okc-vc-per)
	);
	max-width: calc(
		(100% - (var(--okc-vc-per) - 1) * var(--okc-vc-gap)) / var(--okc-vc-per)
	);
	min-width: 0;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	background-color: var(--okc-vc-card-bg);
	border: var(--okc-vc-card-border-width) solid var(--okc-vc-card-border);
	border-radius: var(--okc-vc-card-radius);
	overflow: hidden;
	/* shadow-xl */
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.okc-video-carousel .okc-video-carousel__card:hover {
	transform: translateY(-5px);
	/* shadow-2xl */
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Nothing should move under the pointer once a video is actually playing. */
.okc-video-carousel .okc-video-carousel__card.is-playing:hover {
	transform: none;
}

/* ==========================================================================
   STAGE — the 16:9 box that holds the poster and, after a click, the iframe
   ========================================================================== */
.okc-video-carousel .okc-video-carousel__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--okc-vc-stage-bg);
}

@supports not (aspect-ratio: 16 / 9) {
	.okc-video-carousel .okc-video-carousel__stage {
		height: 0;
		padding-top: 56.25%;
	}
}

/* Poster button: the whole thumbnail is one control. */
.okc-video-carousel .okc-video-carousel__poster {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	overflow: hidden;
}

/* The UA `[hidden] { display:none }` is (0,0,0) and would lose to the rule
   above once JS swaps the poster out for the iframe. */
.okc-video-carousel .okc-video-carousel__poster[hidden] {
	display: none;
}

/* okc-base.css lifts every button on hover; the poster is a full-bleed
   surface, not a button-looking thing, so that is cancelled here. */
.okc-video-carousel .okc-video-carousel__poster:hover,
.okc-video-carousel .okc-video-carousel__poster:focus,
.okc-video-carousel .okc-video-carousel__poster:focus-visible {
	transform: none;
	box-shadow: none;
}

.okc-video-carousel .okc-video-carousel__poster:focus-visible {
	outline: 3px solid var(--okc-vc-focus);
	outline-offset: -5px;
}

/* Thumbnail. object-cover crops YouTube's 4:3 hqdefault letterbox bars away. */
.okc-video-carousel .okc-video-carousel__thumb {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: none;
	transition: transform 0.4s ease;
}

.okc-video-carousel .okc-video-carousel__card:hover .okc-video-carousel__thumb {
	transform: scale(1.05);
}

.okc-video-carousel .okc-video-carousel__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		rgba(10, 59, 92, 0.5),
		rgba(10, 59, 92, 0) 60%
	);
	transition: opacity 0.3s ease;
}

.okc-video-carousel .okc-video-carousel__card:hover .okc-video-carousel__scrim {
	opacity: 0.6;
}

/* Play badge */
.okc-video-carousel .okc-video-carousel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--okc-vc-play-size);
	height: var(--okc-vc-play-size);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: var(--okc-vc-play-bg);
	border: 3px solid var(--okc-vc-play-ring);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.25);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.okc-video-carousel .okc-video-carousel__play svg {
	display: block;
	width: 42%;
	height: 42%;
	fill: var(--okc-vc-play-color);
	/* Optical centring: a triangle's visual centre sits left of its box. */
	transform: translateX(8%);
}

.okc-video-carousel .okc-video-carousel__poster:hover .okc-video-carousel__play,
.okc-video-carousel .okc-video-carousel__poster:focus-visible .okc-video-carousel__play {
	background-color: var(--okc-vc-play-bg-hover);
	transform: translate(-50%, -50%) scale(1.08);
}

/* Iframe injected on click. */
.okc-video-carousel .okc-video-carousel__iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
}

/* ==========================================================================
   CARD BODY / TITLE
   Pragmatica, per the theme's body-copy convention.
   ========================================================================== */
.okc-video-carousel .okc-video-carousel__body {
	padding: 1.25rem 1.5rem;           /* py-5 px-6 */
	flex: 1 1 auto;
	display: flex;
	align-items: center;
}

.okc-video-carousel .okc-video-carousel__card-title {
	font-family: "Pragmatica", "PT Sans", sans-serif;
	font-size: 1.125rem;               /* text-lg */
	line-height: 1.5rem;
	font-weight: 700;                  /* font-bold */
	color: var(--okc-vc-card-title-color);
	margin: 0;
	text-align: left;
}

@media (min-width: 768px) {
	.okc-video-carousel .okc-video-carousel__card-title {
		font-size: 1.25rem;            /* md:text-xl */
		line-height: 1.75rem;
	}
}

/* ==========================================================================
   NAVIGATION — arrows + dots, below the track so nothing overlaps a card
   ========================================================================== */
.okc-video-carousel .okc-video-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;                         /* gap-4 */
	margin-top: 1rem;                  /* mt-4; the track already pads 2.5rem
	                                      below the cards for their shadow */
}

.okc-video-carousel .okc-video-carousel__nav[hidden] {
	display: none;
}

.okc-video-carousel .okc-video-carousel__arrow {
	width: 3rem;                       /* w-12 */
	height: 3rem;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background-color: var(--okc-vc-arrow-bg);
	color: var(--okc-vc-arrow-color);
	cursor: pointer;
	/* shadow-lg */
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.okc-video-carousel .okc-video-carousel__arrow svg {
	display: block;
	width: 1.25rem;                    /* w-5 */
	height: 1.25rem;
	fill: currentColor;
}

.okc-video-carousel .okc-video-carousel__arrow:hover {
	background-color: var(--okc-vc-arrow-bg-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.okc-video-carousel .okc-video-carousel__arrow:focus-visible {
	outline: 3px solid var(--okc-vc-focus);
	outline-offset: 3px;
}

.okc-video-carousel .okc-video-carousel__arrow[disabled],
.okc-video-carousel .okc-video-carousel__arrow[disabled]:hover {
	opacity: 0.35;
	cursor: default;
	transform: none;
	background-color: var(--okc-vc-arrow-bg);
	box-shadow: none;
}

.okc-video-carousel .okc-video-carousel__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;                       /* gap-2 */
}

.okc-video-carousel .okc-video-carousel__dots[hidden] {
	display: none;
}

.okc-video-carousel .okc-video-carousel__dot {
	width: 0.625rem;                   /* w-2.5 */
	height: 0.625rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background-color: var(--okc-vc-dot);
	cursor: pointer;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.okc-video-carousel .okc-video-carousel__dot:hover,
.okc-video-carousel .okc-video-carousel__dot:focus,
.okc-video-carousel .okc-video-carousel__dot:focus-visible {
	transform: none;
	box-shadow: none;
	background-color: var(--okc-vc-dot-active);
}

.okc-video-carousel .okc-video-carousel__dot:focus-visible {
	outline: 3px solid var(--okc-vc-focus);
	outline-offset: 3px;
}

.okc-video-carousel .okc-video-carousel__dot.is-active {
	width: 1.75rem;                    /* w-7 */
	background-color: var(--okc-vc-dot-active);
}

/* ==========================================================================
   EDITOR-ONLY EMPTY STATE
   ========================================================================== */
.okc-video-carousel .okc-video-carousel__empty {
	font-family: "Pragmatica", "PT Sans", sans-serif;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 700;
	color: #0a3b5c;
	text-align: center;
	padding: 3rem 1.5rem;
	border: 2px dashed rgba(10, 59, 92, 0.4);
	border-radius: var(--okc-vc-card-radius);
}

/* ==========================================================================
   MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.okc-video-carousel .okc-video-carousel__track--carousel {
		scroll-behavior: auto;
	}

	.okc-video-carousel .okc-video-carousel__card,
	.okc-video-carousel .okc-video-carousel__thumb,
	.okc-video-carousel .okc-video-carousel__scrim,
	.okc-video-carousel .okc-video-carousel__play,
	.okc-video-carousel .okc-video-carousel__arrow,
	.okc-video-carousel .okc-video-carousel__dot {
		transition-duration: 0.01ms;
	}

	.okc-video-carousel .okc-video-carousel__card:hover {
		transform: none;
	}

	.okc-video-carousel .okc-video-carousel__card:hover .okc-video-carousel__thumb {
		transform: none;
	}

	.okc-video-carousel .okc-video-carousel__poster:hover .okc-video-carousel__play,
	.okc-video-carousel .okc-video-carousel__poster:focus-visible .okc-video-carousel__play {
		transform: translate(-50%, -50%);
	}

	.okc-video-carousel .okc-video-carousel__arrow:hover {
		transform: none;
	}
}