/**
 * ROOX Slides
 *
 * Every component selector starts with .roox-slides on purpose: Elementor ships
 * `.elementor img { height: auto }` and kits style `.elementor-kit-N button`, both
 * (0,1,1). A lone class (0,1,0) loses to them; two classes (0,2,0) win.
 *
 * Every selector matches markup present in the served HTML: inactive slides carry
 * aria-hidden="true", the current dot aria-current="true". slides.js only flips
 * those attributes and writes inline styles, so "Remove Unused CSS" can't strip
 * anything the slideshow needs.
 */

.roox-slides {
	--roox-kb: 1;
	--roox-kb-zoom: 1.15;
	--roox-slides-arrow: 48px;
	--roox-slides-arrow-offset: 16px;
	--roox-slides-dot: 8px;
	/* Arrows next to the title: 0 = at the side edges, 1 = flanking the title (set per device). */
	--roox-flank: 0;
	--roox-flank-gap: 28px;
	--roox-flank-span: 420px;
	--roox-flank-dy: 0px;
	position: relative;
	height: clamp(420px, 75vh, 820px);
	overflow: hidden;
	isolation: isolate;
	color: #fff;
}

/* "Fill the parent container's height": the widget stretches inside its flex
   container and the slideshow covers it, whatever height the container has. */
.roox-slides-fill-yes {
	position: relative;
	flex-grow: 1;
	align-self: stretch;
	min-height: 320px;
}

.roox-slides-fill-yes .roox-slides {
	position: absolute;
	inset: 0;
	height: auto;
}

.roox-slides .roox-slides__viewport {
	position: absolute;
	inset: 0;
	touch-action: pan-y; /* vertical page scroll stays native; horizontal swipes are ours */
}

.roox-slides .roox-slides__slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.roox-slides .roox-slides__slide[aria-hidden="true"] {
	/* opacity, not visibility: Chrome frees the paint of images inside
	   visibility:hidden elements and sometimes doesn't redraw them when the slide
	   comes back (the photo stayed blank until the next transition). aria-hidden +
	   inert already keep hidden slides away from screen readers and the keyboard. */
	opacity: 0;
	pointer-events: none;
}

/* ───────── Media ───────── */

.roox-slides .roox-slides__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.roox-slides .roox-slides__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transform-origin: center;
}

/* "Zoom out" slides rest zoomed in, so nothing jumps before slides.js starts the zoom.
   --roox-kb is 0 on devices where Ken Burns is off, which makes this scale(1). */
.roox-slides .roox-slides__img[data-kb="out"] {
	transform: scale(calc(1 + (var(--roox-kb-zoom, 1.15) - 1) * var(--roox-kb)));
}

.roox-slides .roox-slides__overlay {
	position: absolute;
	inset: 0;
	display: var(--roox-ov-display, block);
	background-color: var(--roox-ov-solid, rgba(20, 16, 50, .45));
	pointer-events: none;
}

/* Gradient overlay. Every part comes from a variable written by the widget's controls
   (Style → Overlay, or a slide's own overlay): color, direction, how far it reaches and
   its strength. The element is present in the served HTML, so nothing here depends on
   classes added by JS. */
.roox-slides .roox-slides__overlay--gradient {
	background-color: transparent;
	background-image: linear-gradient(
		var(--roox-ov-dir, 0deg),
		var(--roox-ov-color, #000) 0%,
		transparent var(--roox-ov-end, 60%)
	);
	opacity: var(--roox-ov-strength, .85);
}

/* Eased version (no visible band where the gradient starts). Only where color-mix exists;
   elsewhere the plain gradient above stays. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.roox-slides .roox-slides__overlay--gradient {
		background-image: linear-gradient(
			var(--roox-ov-dir, 0deg),
			var(--roox-ov-color, #000) 0%,
			color-mix(in srgb, var(--roox-ov-color, #000) 74%, transparent) calc(var(--roox-ov-end, 60%) * .1),
			color-mix(in srgb, var(--roox-ov-color, #000) 54%, transparent) calc(var(--roox-ov-end, 60%) * .2),
			color-mix(in srgb, var(--roox-ov-color, #000) 38%, transparent) calc(var(--roox-ov-end, 60%) * .3),
			color-mix(in srgb, var(--roox-ov-color, #000) 28%, transparent) calc(var(--roox-ov-end, 60%) * .4),
			color-mix(in srgb, var(--roox-ov-color, #000) 19%, transparent) calc(var(--roox-ov-end, 60%) * .5),
			color-mix(in srgb, var(--roox-ov-color, #000) 13%, transparent) calc(var(--roox-ov-end, 60%) * .6),
			color-mix(in srgb, var(--roox-ov-color, #000) 8%, transparent) calc(var(--roox-ov-end, 60%) * .7),
			color-mix(in srgb, var(--roox-ov-color, #000) 4%, transparent) calc(var(--roox-ov-end, 60%) * .8),
			color-mix(in srgb, var(--roox-ov-color, #000) 2%, transparent) calc(var(--roox-ov-end, 60%) * .9),
			transparent var(--roox-ov-end, 60%)
		);
	}
}

/* ───────── Content ───────── */

.roox-slides .roox-slides__inner {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 6vw, 96px);
	padding-bottom: calc(clamp(24px, 6vw, 96px) + 28px); /* leave room for dots */
	color: inherit;
	text-decoration: none;
}

.roox-slides .roox-slides__content {
	max-width: 46rem;
	text-align: center;
}

.roox-slides .roox-slides__heading {
	margin: 0 0 .35em;
	color: inherit;
	font-size: clamp(2rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.roox-slides .roox-slides__description {
	margin: 0 0 1.5em;
	color: inherit;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	opacity: .92;
	text-wrap: pretty;
}

.roox-slides .roox-slides__heading:last-child,
.roox-slides .roox-slides__description:last-child {
	margin-bottom: 0;
}

.roox-slides .roox-slides__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .85em 1.8em;
	border: 2px solid currentColor;
	border-radius: 999px;
	background-color: transparent;
	color: inherit;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.roox-slides .roox-slides__button:hover,
.roox-slides .roox-slides__button:focus-visible,
.roox-slides .roox-slides__inner:hover .roox-slides__button {
	background-color: #fff;
	border-color: #fff;
	color: #221c5a;
}

/* ───────── Text outline (simulated with text-shadow) ─────────
   Grows outward, unlike -webkit-text-stroke which eats into the letters.
   24 shadows: 16 around the full width + 8 at half width to fill the gaps. */

.roox-slides-title-fx-outline .roox-slides .roox-slides__heading,
.roox-slides-description-fx-outline .roox-slides .roox-slides__description {
	--w: var(--roox-stroke-w, 2px);
	--c: var(--roox-stroke-c, #e81c8f);
	text-shadow:
		calc(var(--w) * 1.0) 0 0 var(--c),
		calc(var(--w) * 0.924) calc(var(--w) * 0.383) 0 var(--c),
		calc(var(--w) * 0.707) calc(var(--w) * 0.707) 0 var(--c),
		calc(var(--w) * 0.383) calc(var(--w) * 0.924) 0 var(--c),
		0 calc(var(--w) * 1.0) 0 var(--c),
		calc(var(--w) * -0.383) calc(var(--w) * 0.924) 0 var(--c),
		calc(var(--w) * -0.707) calc(var(--w) * 0.707) 0 var(--c),
		calc(var(--w) * -0.924) calc(var(--w) * 0.383) 0 var(--c),
		calc(var(--w) * -1.0) 0 0 var(--c),
		calc(var(--w) * -0.924) calc(var(--w) * -0.383) 0 var(--c),
		calc(var(--w) * -0.707) calc(var(--w) * -0.707) 0 var(--c),
		calc(var(--w) * -0.383) calc(var(--w) * -0.924) 0 var(--c),
		0 calc(var(--w) * -1.0) 0 var(--c),
		calc(var(--w) * 0.383) calc(var(--w) * -0.924) 0 var(--c),
		calc(var(--w) * 0.707) calc(var(--w) * -0.707) 0 var(--c),
		calc(var(--w) * 0.924) calc(var(--w) * -0.383) 0 var(--c),
		calc(var(--w) * 0.5) 0 0 var(--c),
		calc(var(--w) * 0.354) calc(var(--w) * 0.354) 0 var(--c),
		0 calc(var(--w) * 0.5) 0 var(--c),
		calc(var(--w) * -0.354) calc(var(--w) * 0.354) 0 var(--c),
		calc(var(--w) * -0.5) 0 0 var(--c),
		calc(var(--w) * -0.354) calc(var(--w) * -0.354) 0 var(--c),
		0 calc(var(--w) * -0.5) 0 var(--c),
		calc(var(--w) * 0.354) calc(var(--w) * -0.354) 0 var(--c);
}

/* ───────── Arrows ───────── */

.roox-slides .roox-slides__arrow {
	position: absolute;
	/* --roox-flank is 0 (arrows at the side edges, vertically centered) or 1 (arrows beside
	   the title). slides.js writes --roox-flank-l / -r / -y from the title it measures; until
	   then, or with no title, the arrows sit --roox-flank-span apart, near the bottom. */
	top: calc(
		50% * (1 - var(--roox-flank)) +
		(var(--roox-flank-y, calc(100% - 120px)) + var(--roox-flank-dy)) * var(--roox-flank)
	);
	z-index: 3;
	display: var(--roox-slides-arrows, grid);
	place-items: center;
	width: var(--roox-slides-arrow);
	height: var(--roox-slides-arrow);
	margin: calc(var(--roox-slides-arrow) / -2) 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--roox-slides-arrow-bg, rgba(20, 16, 50, .28));
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .25s ease, opacity .25s ease;
}

.roox-slides .roox-slides__arrow--prev {
	left: calc(
		var(--roox-slides-arrow-offset) * (1 - var(--roox-flank)) +
		max(8px, var(--roox-flank-l, calc(50% - var(--roox-flank-span) / 2)) - var(--roox-flank-gap) - var(--roox-slides-arrow)) * var(--roox-flank)
	);
}

.roox-slides .roox-slides__arrow--next {
	right: calc(
		var(--roox-slides-arrow-offset) * (1 - var(--roox-flank)) +
		max(8px, var(--roox-flank-r, calc(50% - var(--roox-flank-span) / 2)) - var(--roox-flank-gap) - var(--roox-slides-arrow)) * var(--roox-flank)
	);
}

/* Beat kit button hover/focus styles on the "plain" look. */
.roox-slides .roox-slides__arrow:focus {
	background-color: var(--roox-slides-arrow-bg, rgba(20, 16, 50, .28));
}

.roox-slides .roox-slides__arrow:hover,
.roox-slides .roox-slides__arrow:focus-visible {
	background-color: var(--roox-slides-arrow-bg-hover, rgba(20, 16, 50, .55));
	opacity: var(--roox-slides-arrow-hover-opacity, 1);
}

.roox-slides .roox-slides__arrow svg {
	width: var(--roox-slides-arrow-icon, 45%);
	height: var(--roox-slides-arrow-icon, 45%);
	filter: var(--roox-slides-arrow-shadow, none);
}

.roox-slides .roox-slides__arrow[disabled] {
	opacity: .35;
	cursor: default;
}

/* ───────── Dots + pause ───────── */

.roox-slides .roox-slides__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	pointer-events: none; /* only the buttons catch clicks */
}

.roox-slides .roox-slides__dots {
	display: var(--roox-slides-dots, flex);
	align-items: center;
	gap: 8px;
}

.roox-slides .roox-slides__dot,
.roox-slides .roox-slides__pause {
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

/* The visible dot is small; the button around it is a comfortable 24px tap target. */
.roox-slides .roox-slides__dot {
	--roox-slides-dot-color: rgba(255, 255, 255, .5);
	--roox-slides-dot-active: #fff;
	position: relative;
	width: max(24px, calc(var(--roox-slides-dot) * 3));
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.roox-slides .roox-slides__dot:hover,
.roox-slides .roox-slides__dot:focus {
	background: none; /* beat kit button hover/focus styles */
}

.roox-slides .roox-slides__dot:hover {
	--roox-slides-dot-color: rgba(255, 255, 255, .85);
}

.roox-slides .roox-slides__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--roox-slides-dot);
	height: var(--roox-slides-dot);
	border-radius: 999px;
	background: var(--roox-slides-dot-color);
	transform: translate(-50%, -50%);
	transition: width .4s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}

.roox-slides .roox-slides__dot[aria-current="true"]::before {
	width: calc(var(--roox-slides-dot) * 3);
	background: var(--roox-slides-dot-active);
}

.roox-slides .roox-slides__pause {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 16, 50, .28);
	color: #fff;
	cursor: pointer;
	transition: background-color .25s ease;
}

.roox-slides .roox-slides__pause:hover,
.roox-slides .roox-slides__pause:focus-visible {
	background: rgba(20, 16, 50, .55);
}

.roox-slides .roox-slides__pause svg[hidden] {
	display: none;
}

/* ───────── Progress bar ───────── */

.roox-slides .roox-slides__progress {
	--roox-slides-bar: 2px;
	--roox-slides-bar-offset: 0px;
	--roox-slides-bar-radius: 0px;
	--roox-slides-bar-track: rgba(255, 255, 255, .35);
	--roox-slides-bar-fill: rgba(255, 255, 255, .92);
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--roox-slides-bar-offset);
	z-index: 3;
	display: flex;
	gap: 6px;
	height: var(--roox-slides-bar);
	pointer-events: none;
}

/* Position (top/bottom, per device) is written by the widget's "Position" control. */

.roox-slides .roox-slides__track {
	position: relative;
	flex: 1 1 0;
	overflow: hidden;
	border-radius: var(--roox-slides-bar-radius);
	background: var(--roox-slides-bar-track);
}

/* Scaled with transform (not width) so it animates on the compositor thread. */
.roox-slides .roox-slides__fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--roox-slides-bar-fill);
	transform: scaleX(0);
	transform-origin: left center;
}

/* ───────── Focus ───────── */

.roox-slides :focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.roox-slides .roox-slides__inner:focus-visible {
	outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
	.roox-slides *,
	.roox-slides *::before {
		transition-duration: .01ms !important;
	}
}