/* Homepage: "Hoe kan ik een fiets leasen?" als genummerd stappenplan + Sumura-blok. */

/* ---------- Stappen (toggles in rij .cv-stappen) ---------- */
.cv-stappen .toggles { counter-reset: cv-stap; }
.cv-stappen .toggles .toggle {
	counter-increment: cv-stap;
	--cv-stap-kleur: var(--cv-yellow);
	background: #fff;
	border-radius: 16px;
	margin-bottom: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.cv-stappen .toggles .toggle:nth-child(2) { --cv-stap-kleur: var(--cv-red); }
.cv-stappen .toggles .toggle:nth-child(3) { --cv-stap-kleur: var(--cv-grey); }
.cv-stappen .toggles .toggle:nth-child(4) { --cv-stap-kleur: var(--cv-blue); }

.cv-stappen .toggles .toggle > .toggle-title { margin: 0 !important; }
html body .cv-stappen .toggles .toggle > .toggle-title a {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 18px;
	padding: 16px 64px 16px 16px !important;
	background: #fff !important;
	color: #000 !important;
	font-size: 22px;
	line-height: 28px;
	border-left: 6px solid var(--cv-stap-kleur);
	transition: background-color .2s ease;
}
.cv-stappen .toggles .toggle > .toggle-title a:hover { background: #fffaf0 !important; }
.cv-stappen .toggles .toggle > .toggle-title a i { display: none !important; }
.cv-stappen .toggles .toggle > .toggle-title a::before {
	content: counter(cv-stap, decimal-leading-zero);
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cv-stap-kleur);
	color: #000;
	font-family: Syne, sans-serif;
	font-weight: 800;
	font-size: 17px;
	line-height: 1;
}
.cv-stappen .toggles .toggle > .toggle-title a::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-family: Arial, sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1;
	transition: transform .2s ease;
}
.cv-stappen .toggles .toggle.open > .toggle-title a::after { transform: translateY(-50%) rotate(45deg); }
.cv-stappen .toggles .toggle.open > .toggle-title a { background: #fffaf0 !important; }
/* Antwoordtekst uitgelijnd met de titel (na het nummer) */
html body .cv-stappen .toggles .toggle > div {
	padding: 0 !important;
	background: #fffaf0;
	border-left: 6px solid var(--cv-stap-kleur);
}
html body .cv-stappen .toggles .toggle > div > .inner-toggle-wrap { padding: 0 24px 22px 82px !important; }
.cv-stappen .toggles .toggle > div p { margin-bottom: 0; }

@media only screen and (max-width: 690px) {
	html body .cv-stappen .toggles .toggle > .toggle-title a { font-size: 17px !important; line-height: 22px !important; gap: 12px; padding: 12px 48px 12px 12px !important; }
	.cv-stappen .toggles .toggle > .toggle-title a::before { width: 38px; height: 38px; font-size: 14px; }
	.cv-stappen .toggles .toggle > .toggle-title a::after { right: 16px; font-size: 26px; }
	html body .cv-stappen .toggles .toggle > div > .inner-toggle-wrap { padding: 0 16px 18px 56px !important; }
}

/* ---------- Sumura-blok op de homepage (hergebruikt de Sumura-hero, maar midden op de pagina) ---------- */
.cv-sumura-hero--home > .row_col_wrap_12 { min-height: 0 !important; }
html body .cv-sumura-hero--home .wpb_column.cv-sumura-hero__text { padding: 96px 0 96px !important; }
.cv-sumura-hero--home .cv-sumura-hero__copy h2 {
	color: var(--cvs-cream) !important;
	font-size: clamp(40px, 4.4vw, 64px);
	line-height: 1.063;
	margin-bottom: 19.2px;
}
.cv-sumura-hero--home .cv-sumura-hero__media { align-self: flex-end; padding-top: 64px; }
@media (max-width: 999px) {
	html body .cv-sumura-hero--home .wpb_column.cv-sumura-hero__text { padding: 64px 0 0 !important; }
	.cv-sumura-hero--home .cv-sumura-hero__copy h2 { font-size: 34px; }
	.cv-sumura-hero--home .cv-sumura-hero__media { padding-top: 0; }
}
@media (max-width: 690px) {
	.cv-sumura-hero--home .cv-sumura-hero__copy h2 { font-size: 28px; }
}