/* ================================================================
   Stappen Storyline Carousel
   ================================================================ */

/* ── Wrapper ──────────────────────────────────────────────────── */
.sc-wrapper {
	position: relative;
}

/* ── Header: titel + intro + pijlen ──────────────────────────── */
.sc-header {
	display: flex;
	align-items: center;
	justify-content: left;
	gap: 16px 32px;
	margin-bottom: 0;
}

.sc-header-text {
	flex: 1;
	min-width: 0;
}

.sc-titel {
	color: #154a8f;
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	margin: 0;
	line-height: 1.3;
}

.sc-intro-text {
	color: #154a8f;
	margin: 0;
	line-height: 1.6;
	font-size: 1rem;
}

/* ── Navigatiepijlen (overlay-cirkels op de carousel) ─────────── */
.sc-prev,
.sc-next {
	position: absolute;
	/* Verticaal gecentreerd op de video; --sc-video-center wordt door
	   JS gezet (halve videohoogte). Fallback vóór JS laadt. */
	top: var(--sc-video-center, 160px);
	transform: translateY(-50%);
	z-index: 5;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #e2007a;            /* merk-magenta */
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
	transition: background 0.2s, transform 0.15s, opacity 0.2s;
	font-family: inherit;
}

/* Prev: buiten de carousel in de linkermarge. Schaalt mee met de
   beschikbare marge en wordt geclampt zodat hij nooit voorbij de
   schermrand valt (geen horizontale scrollbalk). Op smalle schermen
   met weinig marge schuift hij vanzelf richting de videorand. */
.sc-prev { left: max( -64px, calc( -1 * ( ( 100vw - 100% ) / 2 ) + 4px ) ); }

/* Next: overlay tegen de rechterrand van de carousel */
.sc-next { right: 12px; }

.sc-prev svg,
.sc-next svg {
	width: 26px;
	height: 26px;
	display: block;
}

.sc-prev:hover,
.sc-next:hover {
	background: #c5006a;           /* donkerdere merk-magenta */
	color: #fff;
	transform: translateY(-50%) scale(1.06);
}

.sc-prev:disabled,
.sc-next:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Mobiel: compactere cirkels, dichter op de rand */
@media (max-width: 767px) {
	.sc-prev,
	.sc-next {
		width: 42px;
		height: 42px;
	}
	.sc-prev svg,
	.sc-next svg {
		width: 20px;
		height: 20px;
	}
	/* Weinig marge op mobiel: clamp dichter op de rand (kleinere knop) */
	.sc-prev { left: max( -48px, calc( -1 * ( ( 100vw - 100% ) / 2 ) + 4px ) ); }
	.sc-next { right: 8px; }
}

/* ── Carousel buitenste wrapper: knipt rechts ─────────────────── */
.sc-carousel-outer {
	overflow: hidden;
	position: relative;
	/* Bleeding right edge: breek uit de Elementor container naar de schermrand */
	margin-right: calc((100vw - 100%) / -2);
}


/* ── Track (de schuivende rij slides) ───────────────────────────*/
.sc-track {
	display: flex;
	gap: 20px;
	transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
	will-change: transform;
	/* Padding rechts zodat de "peek" van de volgende slide zichtbaar is */
	padding-right: 48px;
	align-items: flex-start;
}

/* ── Slide ───────────────────────────────────────────────────── */
/* Breedte wordt door JS gezet via setSlideWidths() op basis van de
   werkelijke outer-breedte. Deze fallback is zichtbaar vóór JS laadt. */
.sc-slide {
	flex: 0 0 80vw;
	min-width: 0;
}

/* Gap-aanpassingen per breakpoint (slide-breedte via JS) */
@media (min-width: 768px) {
	.sc-track { gap: 24px; }
}

@media (min-width: 1200px) {
	.sc-track { gap: 28px; }
}

/* ── Video wrapper: verhouding 16:9 ─────────────────────────── */
.sc-video-wrapper {
	position: relative;
	aspect-ratio: 1 / 1;
	/*aspect-ratio: 16 / 9;*/
	background: #c8d5e4;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 14px;
}

.sc-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: none;
}

/* ── Custom play/pause knop (overlay op video) ───────────────── */
.sc-play-btn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	outline: none;           /* verwijder roze focus-outline van het theme */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	transition: background 0.2s;
	padding: 0;
}

/* Hover: subtiele donkere overlay */
.sc-play-btn:hover {
	background: rgba(0, 0, 0, 0.08);
}

.sc-icon-play,
.sc-icon-pause {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
	transition: transform 0.15s, opacity 0.2s;
}

.sc-play-btn:hover .sc-icon-play,
.sc-play-btn:hover .sc-icon-pause {
	transform: translate(-50%, -50%) scale(1.1);
}

/* Standaard: pauze-icoon onzichtbaar (opacity ipv display,
   zodat hover-state het wél kan tonen) */
.sc-icon-pause {
	opacity: 0;
	pointer-events: none;
}

/* Video speelt: speel-icoon verdwijnt */
.sc-play-btn.is-playing .sc-icon-play {
	display: none;
}

/* Video speelt + hover: pauze-icoon zichtbaar */
.sc-play-btn.is-playing:hover .sc-icon-pause {
	opacity: 1;
	pointer-events: auto;
}

/* Play-knop: geen focus-stijlen (thema-override) */
.sc-play-btn:focus,
.sc-play-btn:focus-visible {
	outline: none;
	box-shadow: none;
	background: transparent;
}

/* Nav-pijlen: geen lelijke focus-outline, cirkelstijl behouden */
.sc-prev:focus,
.sc-next:focus {
	outline: none;
}

.sc-prev:focus-visible,
.sc-next:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Placeholder als er geen video is */
.sc-no-video {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #dde8f4;
}

.sc-no-video .dashicons {
	font-size: 3rem;
	width: 3rem;
	height: 3rem;
	color: #9ab2cc;
}

/* ── Stap label (bijv. "1. Aanmelding") ──────────────────────── */
.sc-step-label {
	font-size: 1rem;
	color: #555;
	margin-bottom: 10px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* ── Korte introtekst ────────────────────────────────────────── */
.sc-intro {
	color: #333;
	line-height: 1.6;
	margin: 0 0 12px;
	font-size: 1rem;
}

/* ── Meer info knop ──────────────────────────────────────────── */
.sc-meer-info-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	color: #154a8f;
	font-weight: 600;
	font-size: 1rem;
	padding: 0;
	font-family: inherit;
	line-height: 1.5;
	transition: color 0.15s;
}

.sc-meer-info-btn:hover {
	color: #0e3a74;
	background: none;
}

.sc-meer-info-btn:focus,
.sc-meer-info-btn:focus-visible,
.sc-meer-info-btn:active {
	outline: none;
	box-shadow: none;
	background: none;
	color: #154a8f;
}

.sc-meer-info-icon {
	display: inline-block;
	font-size: 1.1rem;
	line-height: 1;
	transition: transform 0.25s ease;
	font-style: normal;
}

.sc-meer-info-btn[aria-expanded="true"] .sc-meer-info-icon {
	transform: rotate(45deg);
}

/* ── Meer info uitklapbare content ───────────────────────────── */
.sc-meer-info-content {
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid #d0dcec;
	color: #444;
	line-height: 1.7;
	font-size: 1rem;
}

/* Overschrijf inline editor-stijlen (font-size, color, text-align) */
.sc-meer-info-content *,
.sc-meer-info-content span {
	font-size: 1rem !important;
	color: inherit !important;
}

.sc-meer-info-content p:first-child {
	margin-top: 0;
}

.sc-meer-info-content p {
	margin-top: 0;
	margin-bottom: 0.75em;
}

/* Spans uit de editor gedragen zich als blok als ze op eigen regel staan */
.sc-meer-info-content span {
	display: inline;
}

.sc-meer-info-content p:last-child {
	margin-bottom: 0;
}

.sc-meer-info-content ul,
.sc-meer-info-content ol {
	padding-left: 15px;
	margin-bottom: 0.75em;
}

.sc-meer-info-content ul:last-child,
.sc-meer-info-content ol:last-child {
	margin-bottom: 0;
}

/* ── Animatie meer info ──────────────────────────────────────── */
.sc-meer-info-content:not([hidden]) {
	animation: sc-fade-in 0.2s ease;
}

@keyframes sc-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}