/* Sticky Slider for Elementor */

/* The widget is its own scroll container, one slide tall (height comes from the Slide
   height control). The slides stack sticky inside it, so N slides give N × height of
   internal scroll while the widget still occupies exactly one slide in the page.

   Deliberately NO `overscroll-behavior: contain` here. That single declaration is what
   stops the browser handing the scroll back to the page at the last slide, which reads
   as the page being frozen. The default (`auto`) chains to the page once this scroller
   is at its end — which is the behaviour we want. */
.stsl-slider {
	position: relative;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.stsl-slider::-webkit-scrollbar {
	width: 0;
	height: 0;
	background: transparent;
}

.stsl-slider:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Scoped to this scrollport, not the document, so snapping cannot affect the page. */
.stsl-slider--snap {
	scroll-snap-type: y mandatory;
}

.stsl-slider--snap .stsl-slide {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* ---- Slides ---- */
.stsl-slide {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	box-sizing: border-box;
	overflow: hidden;
	/* Sane defaults for the Background → Image control. Elementor's own Size /
	   Position / Repeat sub-controls outrank these (two classes vs one), so setting
	   them in the panel still wins. */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.stsl-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: transparent;
	pointer-events: none;
}

/* Editor-only hint when a slide has neither an image nor a background. */
.stsl-slide__notice {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 4;
	padding: 10px 16px;
	background-color: #b32d2e;
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}

/* Whole-slide link. Sits above the overlay (1) so it is clickable, below the content
   (3) so the button and any text links keep their own targets. */
.stsl-slide__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
}

/* Let clicks on the heading and paragraph fall through to the slide link, while real
   interactive children still take their own clicks. Only when the slide is linked, so
   unlinked slides keep normal text selection. */
.stsl-slide--linked .stsl-slide__inner {
	pointer-events: none;
}

.stsl-slide--linked .stsl-slide__inner a,
.stsl-slide--linked .stsl-slide__inner button {
	pointer-events: auto;
}

/* z-index 3 keeps the heading, text and button above the background image, the
   overlay (1) and the whole-slide link (2). */
.stsl-slide__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 760px;
	color: #fff;
	text-align: center;
}

.stsl-slide__title {
	margin: 0 0 16px;
	color: inherit;
	font-size: 3rem;
	line-height: 1.1;
}

.stsl-slide__text {
	color: inherit;
}

.stsl-slide__text > *:last-child {
	margin-bottom: 0;
}

.stsl-slide__btn {
	display: inline-block;
	margin-top: 24px;
	padding: 14px 28px;
	border-radius: 999px;
	background-color: #fff;
	color: #111;
	text-decoration: none;
	transition: transform .25s ease, opacity .25s ease;
}

.stsl-slide__btn:hover,
.stsl-slide__btn:focus {
	transform: translateY(-2px);
	text-decoration: none;
}

/* ---- Dots ----
   height:0 + justify-content:center makes the column overflow symmetrically
   around the 50% line, so the dots stay perfectly centred and take up no
   space in the flow (no negative-margin hack needed on the first slide). */
.stsl-dots {
	position: sticky;
	top: 50%;
	z-index: 100;
	height: 0;
	width: -moz-fit-content;
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	pointer-events: none;
	--stsl-dots-offset: 22px;
}

.stsl-dots--right {
	margin-inline-start: auto;
	margin-inline-end: var(--stsl-dots-offset);
}

.stsl-dots--left {
	margin-inline-start: var(--stsl-dots-offset);
	margin-inline-end: auto;
}

.stsl-dot {
	flex: 0 0 auto;
	display: block;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, .45);
	cursor: pointer;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	transition: height .35s ease, width .35s ease, background-color .35s ease;
}

.stsl-dot.is-active {
	height: 30px;
	background-color: #fff;
}

.stsl-dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.stsl-dot,
	.stsl-slide__btn {
		transition: none;
	}
}