/*
 * Homepage v2 (voorstel MINDS, oktober 2026)
 * Aanvulling op styles.css, alleen classes met prefix hp-
 */

/* HERO */

.hp-hero h1 {
	font-size:44px;
	line-height:60px;
}

.hp-hero h1 .hp-light {
	font-weight:400;
}

.hp-hero-ctas {
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	margin:10px 0 30px 0;
}

/* #000 op oranje haalt 5.52:1, de standaard #1e1e1e maar 4.38:1 */
.hp-hero-ctas .button-primary,
.hp-cta-buttons .button-primary {
	color:#000;
}

.hp-hero-ctas .button-primary:hover,
.hp-cta-buttons .button-primary:hover {
	color:var(--orange);
}

.hp-quicklinks {
	font-size:14px;
	font-weight:600;
}

.hp-quicklinks a {
	font-size:14px;
	color:var(--black);
	white-space:nowrap;
	display:inline-block;
	padding:12px 0;
}

.hp-quicklinks a:hover {
	color:var(--orange);
	text-decoration:none;
}

.hp-quicklinks .hp-sep {
	font-size:14px;
	color:var(--grey-dark);
	margin:0 10px;
}

/* TRUSTBAR */

.hp-trustbar {
	background:#fff;
	border-bottom:1px solid var(--grey);
	padding:22px 0;
}

.hp-trust-items {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px 36px;
}

.hp-trust-items li {
	list-style:none;
	font-size:14px;
	font-weight:600;
	white-space:nowrap;
}

.hp-trust-items li i {
	color:var(--orange);
	font-size:14px;
	margin-right:6px;
}

.hp-trust-label {
	text-align:center;
	font-size:13px;
	font-weight:600;
	margin:22px 0 4px 0;
}

.hp-trust-logos {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:8px 40px;
}

.hp-trust-logos a {
	display:inline-flex;
	align-items:center;
	min-height:44px;
	min-width:44px;
}

.hp-trust-logos img {
	height:36px;
	width:auto;
}

/* OPLOSSING */

.hp-solution {
	height:800px;
}

.hp-solution .home-service-block {
	height:500px;
}

/* Zwart op oranje haalt 5.52:1, wit op oranje maar 3.80:1 */
.hp-on-orange {
	color:#000;
}

/* CTA */

.hp-steps {
	margin:10px 0 30px 0!important;
	counter-reset:hp-step;
}

.hp-steps li {
	list-style:none;
	counter-increment:hp-step;
	padding:6px 0;
}

.hp-steps li::before {
	content:counter(hp-step) ".";
	color:var(--orange);
	font-weight:700;
	display:inline-block;
	width:28px;
}

/* FOCUS: jasmine geeft alleen een 1px dotted outline */

.hp-hero a:focus-visible,
.hp-trustbar a:focus-visible,
.section-content a:focus-visible {
	outline:3px solid #000;
	outline-offset:3px;
}

@media(max-width:960px) {

	.hp-hero h1 {
		font-size:28px!important;
		line-height:38px!important;
	}

	.hp-hero-ctas a {
		white-space:normal;
		text-align:center;
	}

	.hp-trust-items {
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:10px 16px;
		padding:0 20px!important;
	}

	.hp-trust-items li {
		white-space:normal;
		font-size:13px;
		line-height:1.4em;
		display:flex;
		align-items:baseline;
	}

	.hp-trust-logos {
		gap:4px 24px;
		padding:0 20px;
	}

	.hp-trust-logos img {
		height:28px;
	}

	.hp-solution {
		height:auto;
	}

	/* jasmine zet width-medium-1-3 al vanaf 768px op 3 kolommen */
	.hp-solution .grid > .width-medium-1-3 {
		width:100%;
	}

	.hp-solution .home-service-block {
		height:auto;
		padding-bottom:110px;
	}

	.hp-cta-buttons a {
		margin-bottom:12px;
	}
}