/* Hardloopfeest theme
 * Vormtaal: gekantelde foto's, schuine sectieranden, brede zware koppen,
 * knoppen met harde schaduw, handgeletterde uitroepen (Hore).
 */

:root {
	--hlf-slant: clamp(28px, 5vw, 80px);
	--hlf-radius: 18px;
	--hlf-ink: var(--wp--preset--color--asfalt);
	--hlf-shadow: 5px 5px 0 var(--hlf-ink);
	--hlf-icon-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 38c6 0 8-6 14-6s6 8 12 8 6-10 0-14-14-2-16-8 4-10 10-10h8'/%3E%3Ccircle cx='8' cy='38' r='3'/%3E%3Cpath d='M36 4v10M36 4h7l-2 3 2 3h-7'/%3E%3C/svg%3E");
	--hlf-icon-muziek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 36V10l22-5v26'/%3E%3Cellipse cx='12' cy='36' rx='6' ry='5'/%3E%3Cellipse cx='34' cy='31' rx='6' ry='5'/%3E%3Cpath d='M18 17l22-5'/%3E%3C/svg%3E");
	--hlf-icon-publiek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20v8l6 1 22 9V10L12 19z'/%3E%3Cpath d='M12 29l3 11h6l-3-10'/%3E%3Cpath d='M40 18c2 2 2 10 0 12M44 14c3 4 3 16 0 20'/%3E%3C/svg%3E");
	--hlf-icon-borrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12h22v26a4 4 0 0 1-4 4H14a4 4 0 0 1-4-4z'/%3E%3Cpath d='M32 18h4a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4h-4'/%3E%3Cpath d='M10 12c0-4 4-6 7-5 2-3 7-3 9 0 3-1 6 1 6 5'/%3E%3Cpath d='M17 20v14M25 20v14'/%3E%3C/svg%3E");
	--hlf-doodle-schoen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 48c0-10 4-24 10-30 4 6 14 8 22 4 8 10 22 16 40 18 16 2 32 6 32 16v4H12a4 4 0 0 1-4-4z'/%3E%3Cpath d='M8 54h104M44 30l6-4M52 36l6-4M60 41l6-4'/%3E%3Cpath d='M-4 30h14M-8 38h14' /%3E%3C/svg%3E");
	--hlf-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.5l4 4 8-9'/%3E%3C/svg%3E");
}

/* ---------- Typografie ---------- */

h1, h2, h3,
.wp-block-post-title {
	text-wrap: balance;
}
p, li { text-wrap: pretty; }

.hlf-hand {
	font-family: var(--wp--preset--font-family--hore);
	font-size: clamp(1.35rem, 2.4vw, 1.9rem);
	line-height: 1.1;
	display: inline-block;
	rotate: -3deg;
	letter-spacing: 0.01em;
	font-variant-ligatures: none; /* huisstijl: Hore altijd zonder ligatures */
	font-feature-settings: "liga" 0, "clig" 0, "dlig" 0;
}

/* Kop als sticker: wit met harde schaduw, voor op oranje en groen */
.hlf-sticker,
.hlf-sticker.wp-block-heading {
	color: var(--wp--preset--color--wit);
	text-shadow: 3px 3px 0 var(--hlf-ink), 5px 5px 0 var(--hlf-ink);
}

.hlf-lead { font-size: var(--wp--preset--font-size--l); line-height: 1.45; }

a:where(:not(.wp-element-button)):hover { text-decoration-thickness: 3px; }

:where(a, button, summary):focus-visible {
	outline: 3px solid var(--hlf-ink);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Knoppen ---------- */

.wp-element-button,
.wp-block-button__link {
	box-shadow: 4px 4px 0 var(--hlf-ink);
	transition: transform .15s ease, box-shadow .15s ease;
	display: inline-flex;
	align-items: center;
	gap: .5em;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--hlf-ink);
}
.wp-element-button:active,
.wp-block-button__link:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--hlf-ink);
}
.wp-block-button__link::after {
	content: "»";
	font-weight: 900;
	font-size: 1.35em;
	line-height: 0;
	translate: 0 -.04em;
}
.wp-block-button.is-style-wit .wp-block-button__link {
	background: var(--wp--preset--color--wit);
	color: var(--hlf-ink);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--hlf-ink);
	border: 2px solid var(--hlf-ink);
	padding: .85rem 1.25rem;
}

/* ---------- Header ---------- */

.hlf-header {
	padding-block: .75rem;
	position: relative;
	z-index: 20;
}
.hlf-header__logo img { rotate: -4deg; transition: rotate .2s ease; }
.hlf-header__logo a:hover img { rotate: 3deg; }
.hlf-nav a { text-decoration: none; }
.hlf-nav .wp-block-navigation-item__content { padding: .35rem .15rem; border-bottom: 3px solid transparent; }
.hlf-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--hlf-ink); }
.hlf-nav .wp-block-navigation-item__content { font-size: 1.1rem; }
/* Actieve pagina: wit met harde schaduw (net als de koppen) en een witte streep eronder */
.hlf-nav .is-actief > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--wit);
	text-shadow: 2px 2px 0 var(--hlf-ink);
	border-bottom-color: var(--wp--preset--color--wit);
	box-shadow: 0 2px 0 var(--hlf-ink);
}
.hlf-nav .wp-block-navigation__container { gap: clamp(1rem, 2.4vw, 2.25rem); }
.hlf-nav .wp-block-navigation__responsive-container-open svg,
.hlf-nav .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }
.hlf-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.6rem;
	font-weight: 900;
	font-family: var(--wp--preset--font-family--archivo);
}

/* ---------- Secties ---------- */

.hlf-page { padding-inline: 0; }
.hlf-page > .wp-block-post-content > *,
.hlf-page > * { margin-block: 0; }
.hlf-page > .wp-block-post-content { margin-block: 0; }

.hlf-sec {
	position: relative;
	padding-block: var(--wp--preset--spacing--60);
}

/* Schuine bovenrand, schuift over de vorige sectie heen */
.hlf-slant,
.hlf-slant-rev {
	margin-top: calc(-1 * var(--hlf-slant)) !important;
	padding-top: calc(var(--hlf-slant) + var(--wp--preset--spacing--60));
}
.hlf-slant { clip-path: polygon(0 var(--hlf-slant), 100% 0, 100% 100%, 0 100%); }
.hlf-slant-rev { clip-path: polygon(0 0, 100% var(--hlf-slant), 100% 100%, 0 100%); }

/* Lijntekening van een hardloopschoen als versiering */
.hlf-doodle::before {
	content: "";
	position: absolute;
	width: clamp(90px, 12vw, 170px);
	aspect-ratio: 12 / 7;
	right: 4vw;
	top: calc(var(--hlf-slant) + 1.5rem);
	background: currentColor;
	-webkit-mask: var(--hlf-doodle-schoen) center / contain no-repeat;
	mask: var(--hlf-doodle-schoen) center / contain no-repeat;
	opacity: .3;
	rotate: -14deg;
	pointer-events: none;
}
.hlf-doodle--links::before { right: auto; left: 3vw; rotate: 12deg; scale: -1 1; }

/* Enorme vervaagde tekst achter een sectie */
.hlf-ghost {
	position: absolute;
	inset-inline: 0;
	bottom: -0.12em;
	margin: 0 !important;
	text-align: center;
	font-size: clamp(6rem, 26vw, 24rem);
	font-weight: 900;
	font-family: var(--wp--preset--font-family--archivo);
	line-height: .8;
	letter-spacing: -0.03em;
	color: var(--hlf-ink);
	opacity: .06;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.hlf-sec > :not(.hlf-ghost) { position: relative; z-index: 1; }

/* ---------- Hero ---------- */

.hlf-hero {
	overflow: hidden;
	min-height: min(88vh, 860px);
	display: flex;
	align-items: center;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.hlf-hero > .hlf-hero__tekst {
	width: 100%;
	margin-inline: auto;
}
.hlf-hero__tekst > * { max-width: min(640px, 52%); }
.hlf-hero h1 {
	margin-top: .5rem;
	font-size: var(--wp--preset--font-size--reus);
	line-height: .95;
}
.hlf-hero .hlf-hand { color: var(--hlf-ink); }
.hlf-hero__datum {
	font-weight: 900;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xl);
	margin-top: .75rem !important;
}

.hlf-checks {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	font-weight: 600;
	font-size: .95rem;
}
.hlf-checks li { display: flex; align-items: center; gap: .4rem; }
.hlf-checks li::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--hlf-check) center / contain no-repeat;
	mask: var(--hlf-check) center / contain no-repeat;
}

/* Twee kolommen gekantelde foto's die langzaam omhoog schuiven */
.hlf-strook {
	position: absolute !important;
	top: -20%;
	bottom: -20%;
	right: clamp(-2rem, 2vw, 3rem);
	width: min(46%, 640px);
	display: flex !important;
	gap: 1.1rem;
	rotate: 7deg;
	margin: 0 !important;
	z-index: 0 !important;
}
.hlf-strook__kolom {
	flex: 1;
	display: flex !important;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0 !important;
	animation: hlf-omhoog 35s linear infinite;
}
.hlf-strook__kolom:nth-child(2) {
	animation-duration: 28s;
	animation-direction: reverse;
	margin-top: -30% !important;
}
.hlf-strook__kolom > * { margin: 0 !important; }
.hlf-strook img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--hlf-radius);
	display: block;
}
@keyframes hlf-omhoog {
	to { transform: translateY(-50%); }
}

/* ---------- Logobalk sponsoren ---------- */

.hlf-logos {
	overflow: hidden;
	padding-block: 1.5rem !important;
	border-block: 3px solid var(--hlf-ink);
}
.hlf-logos__rij {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem) !important;
	width: max-content;
	max-width: none !important;
	animation: hlf-links 45s linear infinite;
}
.hlf-logos__rij > * { margin: 0 !important; flex: none; }
.hlf-logos img {
	height: 58px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
}
.hlf-logos:hover .hlf-logos__rij { animation-play-state: paused; }
@keyframes hlf-links {
	to { transform: translateX(-50%); }
}

/* ---------- Gekantelde fotorij ---------- */

.hlf-fotorij {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(.75rem, 2vw, 1.5rem) !important;
	margin-top: var(--wp--preset--spacing--50) !important;
}
.hlf-fotorij > * { margin: 0 !important; }
.hlf-fotorij img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--hlf-radius);
}
.hlf-fotorij > :nth-child(1) { rotate: -4deg; translate: 0 1.5rem; }
.hlf-fotorij > :nth-child(2) { rotate: 3deg; }
.hlf-fotorij > :nth-child(3) { rotate: -2deg; translate: 0 2rem; }
.hlf-fotorij > :nth-child(4) { rotate: 4deg; }

/* Losse foto of kaart met rand en harde schaduw */
.hlf-kader img,
.hlf-kader iframe,
.hlf-kader .wp-block-embed__wrapper {
	border: 3px solid var(--hlf-ink);
	border-radius: var(--hlf-radius);
	box-shadow: 8px 8px 0 var(--hlf-ink);
}
.hlf-kader .wp-block-embed__wrapper { overflow: hidden; }
.hlf-kader .wp-block-embed__wrapper iframe { border: 0; box-shadow: none; border-radius: 0; }
.hlf-kader--links { rotate: -2deg; }
.hlf-kader--rechts { rotate: 2deg; }

/* ---------- Wat kun je verwachten ---------- */

.hlf-features {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--50) clamp(2rem, 5vw, 4.5rem) !important;
	margin-top: var(--wp--preset--spacing--50) !important;
}
.hlf-features > * { margin: 0 !important; }
.hlf-feature {
	display: grid !important;
	grid-template-columns: 64px 1fr;
	column-gap: 1.25rem;
	align-items: start;
}
.hlf-feature > * { grid-column: 2; margin: 0 !important; }
.hlf-feature::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--creme);
	border: 3px solid var(--hlf-ink);
	box-shadow: 3px 3px 0 var(--hlf-ink);
}
.hlf-feature::after {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 38px;
	height: 38px;
	margin: 13px;
	background: var(--hlf-ink);
	-webkit-mask: var(--hlf-icoon) center / contain no-repeat;
	mask: var(--hlf-icoon) center / contain no-repeat;
}
.hlf-feature h3 { font-size: var(--wp--preset--font-size--xl); margin-bottom: .4rem !important; color: var(--hlf-ink); }
.hlf-ico-route { --hlf-icoon: var(--hlf-icon-route); }
.hlf-ico-muziek { --hlf-icoon: var(--hlf-icon-muziek); }
.hlf-ico-publiek { --hlf-icoon: var(--hlf-icon-publiek); }
.hlf-ico-borrel { --hlf-icoon: var(--hlf-icon-borrel); }

/* ---------- Programma (tijdlijn) ---------- */

.hlf-tijdlijn {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 3px solid var(--hlf-ink);
}
.hlf-tijdlijn li {
	display: grid;
	grid-template-columns: minmax(7.5rem, auto) 1fr;
	gap: 1rem;
	align-items: baseline;
	padding-block: .9rem;
	border-bottom: 3px solid var(--hlf-ink);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 600;
}
.hlf-tijdlijn strong {
	font-weight: 900;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1.15em;
	font-variant-numeric: tabular-nums;
}

/* ---------- Band met handgeletterde tekst ---------- */

.hlf-band { text-align: center; }
.hlf-band .hlf-hand { font-size: clamp(1.6rem, 4vw, 3rem); }

/* ---------- FAQ ---------- */

.hlf-faq .wp-block-details {
	border-bottom: 2px solid color-mix(in srgb, var(--hlf-ink) 25%, transparent);
	padding-block: 1.1rem;
	margin: 0 !important;
}
.hlf-faq .wp-block-details:first-child { border-top: 2px solid color-mix(in srgb, var(--hlf-ink) 25%, transparent); }
.hlf-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--l);
}
.hlf-faq summary::-webkit-details-marker { display: none; }
.hlf-faq summary::after {
	content: "";
	flex: none;
	width: 34px;
	height: 34px;
	border: 2px solid var(--hlf-ink);
	border-radius: 50%;
	background: var(--wp--preset--color--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232E2E2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / 16px no-repeat;
	transition: rotate .2s ease, background-color .2s ease;
}
.hlf-faq details[open] > summary::after {
	rotate: 180deg;
	background-color: var(--wp--preset--color--licht-oranje);
}
.hlf-faq details > :not(summary) { margin-top: .75rem; max-width: 62ch; }

/* ---------- Sponsorpakketten ---------- */

.hlf-pakketten {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem) !important;
	align-items: start;
	margin-top: var(--wp--preset--spacing--50) !important;
}
.hlf-pakketten > * { margin: 0 !important; }
.hlf-pakket {
	position: relative;
	background: var(--wp--preset--color--wit);
	border: 3px solid var(--hlf-ink);
	border-radius: var(--hlf-radius);
	box-shadow: 8px 8px 0 var(--hlf-ink);
	padding: clamp(1.5rem, 3vw, 2.25rem) !important;
}
.hlf-pakket:nth-child(1) { rotate: -1.5deg; }
.hlf-pakket:nth-child(2) { rotate: 1deg; translate: 0 1.5rem; }
.hlf-pakket:nth-child(3) { rotate: -.75deg; }
.hlf-pakket h3 { color: var(--hlf-ink); margin-bottom: 0 !important; }
.hlf-pakket__prijs {
	font-weight: 900;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1;
	color: var(--wp--preset--color--groen-donker);
	margin-top: .5rem !important;
}
.hlf-pakket .hlf-checks { flex-direction: column; font-weight: 500; font-size: 1rem; }
.hlf-pakket .hlf-checks li { align-items: flex-start; }
.hlf-pakket .hlf-checks li::before { margin-top: .3em; color: var(--wp--preset--color--groen-donker); }
.hlf-pakket__stempel {
	position: absolute;
	top: -1.1rem;
	right: -1rem;
	margin: 0 !important;
	padding: .4rem .9rem;
	background: var(--wp--preset--color--oranje);
	border: 3px solid var(--hlf-ink);
	border-radius: 999px;
	rotate: 6deg;
	font-size: 1.15rem;
}
.hlf-pakket--vol { color: #545454; }
.hlf-pakket--vol h3,
.hlf-pakket--vol .hlf-checks li::before { color: #545454; }
.hlf-pakket--vol .hlf-pakket__prijs { color: #545454; text-decoration: line-through; text-decoration-thickness: 3px; }

/* ---------- Tekstpagina's ---------- */

.hlf-titelband { padding-block: var(--wp--preset--spacing--50) calc(var(--hlf-slant) + var(--wp--preset--spacing--50)); }
.hlf-titelband h1 { margin: 0; }
.hlf-tekstpagina h2 { font-size: var(--wp--preset--font-size--xl); margin-top: 2.5rem; }
.hlf-tekstpagina h3 { font-size: var(--wp--preset--font-size--l); margin-top: 2rem; }

/* ---------- Footer ---------- */

.hlf-footer {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	margin-top: 0 !important;
}
.hlf-footer a { color: inherit; }
.hlf-footer__kop,
.hlf-footer h2.wp-block-heading {
	color: var(--wp--preset--color--licht-oranje);
	font-size: var(--wp--preset--font-size--l);
}
.hlf-footer__hand { color: var(--wp--preset--color--oranje); font-size: 1.9rem; margin-top: 1rem !important; }
.hlf-footer__links { list-style: none; padding: 0; }
.hlf-footer__links li + li { margin-top: .35rem; }

/* ---------- Mobiel ---------- */

@media (max-width: 900px) {
	.hlf-hero { flex-direction: column; min-height: 0; padding-bottom: 0; }
	.hlf-hero__tekst > * { max-width: none; }
	.hlf-strook {
		position: relative !important;
		inset: auto;
		width: 115%;
		height: 360px;
		margin: var(--wp--preset--spacing--50) -7.5% -2rem !important;
		rotate: -5deg;
		overflow: visible;
	}
	.hlf-strook__kolom:nth-child(2) { margin-top: -20% !important; }
	.hlf-fotorij { grid-template-columns: repeat(2, 1fr); }
	.hlf-features,
	.hlf-pakketten { grid-template-columns: 1fr; }
	.hlf-pakket:nth-child(2) { translate: none; }
}

@media (max-width: 600px) {
	.hlf-feature { grid-template-columns: 52px 1fr; column-gap: 1rem; }
	.hlf-feature::before { width: 52px; height: 52px; }
	.hlf-feature::after { width: 30px; height: 30px; margin: 11px; }
	.hlf-tijdlijn li { grid-template-columns: 5.5rem 1fr; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.hlf-strook__kolom,
	.hlf-logos__rij { animation: none; }
	.hlf-logos__rij { flex-wrap: wrap !important; width: auto; justify-content: center; }
	.hlf-logos__rij > [aria-hidden="true"] { display: none; }
	.wp-element-button, .wp-block-button__link, .hlf-faq summary::after { transition: none; }
}

.hlf-checks--lijst { flex-direction: column; font-weight: 500; font-size: 1rem; gap: .5rem; }
.hlf-checks--lijst li { align-items: flex-start; }
.hlf-checks--lijst li::before { margin-top: .3em; }

/* Geen horizontale scroll door gekantelde of overmaatse elementen */
html, body { overflow-x: clip; }
.hlf-sec { overflow-x: clip; }
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }

.hlf-video {
	aspect-ratio: 16 / 9;
	border: 3px solid var(--hlf-ink);
	border-radius: var(--hlf-radius);
	box-shadow: 8px 8px 0 var(--hlf-ink);
	overflow: hidden;
	background: var(--hlf-ink);
	rotate: -2deg;
	margin: 0;
}
.hlf-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Secties sluiten naadloos aan op header en footer */
.wp-site-blocks > * + * { margin-block-start: 0; }

.hlf-hero__datum {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--l);
	font-weight: 600;
	line-height: 1.35;
}

/* Vinkjes absoluut, zodat links en vet in een regel gewoon doorlopen */
.hlf-checks li,
.hlf-checks--lijst li,
.hlf-pakket .hlf-checks li {
	display: block;
	position: relative;
	padding-left: 1.45em;
}
.hlf-checks li::before,
.hlf-checks--lijst li::before,
.hlf-pakket .hlf-checks li::before {
	position: absolute;
	left: 0;
	top: .3em;
	margin: 0;
}

@media (max-width: 900px) {
	/* Strook afknippen zodat schuivende foto's niet over de tekst komen */
	.hlf-strook {
		width: 100%;
		height: 380px;
		margin: var(--wp--preset--spacing--50) 0 0 !important;
		rotate: none;
		overflow: hidden;
		border-radius: var(--hlf-radius) var(--hlf-radius) 0 0;
	}
	.hlf-strook__kolom:nth-child(2) { margin-top: 0 !important; }
	.hlf-strook__kolom > :nth-child(odd) { rotate: -2deg; }
	.hlf-strook__kolom > :nth-child(even) { rotate: 2deg; }
	.hlf-doodle::before { display: none; }
}

/* Logobalk onderaan de footer: partners en eigen merk */
.hlf-footer { padding-bottom: 0; }
.hlf-footer__logos {
	margin-top: var(--wp--preset--spacing--50) !important;
	padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 4vw, 2.5rem) !important;
	gap: clamp(1.75rem, 5vw, 4.5rem) !important;
	align-items: center !important;
	border-top: 3px solid var(--hlf-ink);
}
.hlf-footer__logos > * { margin: 0 !important; }
.hlf-footer__logos img {
	height: clamp(56px, 7vw, 84px);
	width: auto;
	max-width: 100%;
	display: block;
}
.hlf-footer__logos .hlf-footer__logo--breed img { height: clamp(40px, 5vw, 58px); }
.hlf-footer__logos .hlf-footer__logo--hoog img { height: clamp(76px, 9vw, 112px); }

/* Logo linksboven: groot en speels, op mobiel iets kleiner */
.hlf-header__logo img { width: 184px; height: auto; }
@media (max-width: 600px) {
	.hlf-header__logo img { width: 128px; }
}

/* Strepen (huisstijl-tegel) achter menu en hero (home) en de titelband (overige pagina's) */
.hlf-header,
.hlf-hero,
.hlf-titelband {
	background-image: url("../img/strepen.png");
	background-repeat: repeat;
	background-position: left top;
	background-size: 104px 8px; /* banen van 52px */
}
@media (max-width: 600px) {
	.hlf-header,
	.hlf-hero,
	.hlf-titelband { background-size: 48px 8px; } /* banen van 24px */
}

/* Groene strepen achter de band "Rennen, vliegen, dansen", zelfde maat als de oranje */
.hlf-band {
	background-image: url("../img/strepen-groen.png");
	background-repeat: repeat;
	background-position: left top;
	background-size: 104px 8px; /* banen van 52px */
}
@media (max-width: 600px) {
	.hlf-band { background-size: 48px 8px; } /* banen van 24px */
}

/* Footer: groene strepen, schuine bovenrand, contact en links in een witte kaart */
.hlf-footer {
	background-image: url("../img/strepen-groen.png");
	background-repeat: repeat;
	background-size: 104px 8px; /* banen van 52px, gelijk aan de band */
	margin-top: calc(-1 * var(--hlf-slant)) !important;
	padding-top: calc(var(--hlf-slant) + var(--wp--preset--spacing--60));
	clip-path: polygon(0 0, 100% var(--hlf-slant), 100% 100%, 0 100%);
	position: relative;
}
.hlf-footer__hand {
	color: var(--wp--preset--color--wit);
	text-shadow: 3px 3px 0 var(--hlf-ink);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.05;
	margin-top: 0 !important;
}
.hlf-footer__kaart {
	border: 3px solid var(--hlf-ink);
	border-radius: var(--hlf-radius);
	box-shadow: 8px 8px 0 var(--hlf-ink);
	padding: clamp(1.5rem, 3vw, 2.25rem) !important;
	rotate: 1deg;
}
.hlf-footer__kaart .wp-block-columns { gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0; }
.hlf-footer__kaart h2.wp-block-heading.hlf-footer__kop {
	color: var(--wp--preset--color--groen-donker);
	margin-top: 0;
}
.hlf-footer__kaart a { color: var(--hlf-ink); }
@media (max-width: 600px) {
	.hlf-footer { background-size: 48px 8px; }
	.hlf-footer__kaart { rotate: none; }
}

/* Hero: fotoknoppen onder elkaar in de tweede kolom (uitslag | Jordy, daaronder Anita) */
@media (min-width: 601px) {
	.hlf-hero .wp-block-buttons {
		display: grid;
		grid-template-columns: max-content max-content;
		justify-content: start;
	}
	.hlf-hero .wp-block-buttons > .wp-block-button:nth-child(n+3) { grid-column: 2; }
}


/* Video: eigen thumbnail met afspeelknop, YouTube laadt pas na een klik */
.hlf-video { background: none; }
.hlf-video__knop {
	all: unset;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.hlf-video__knop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hlf-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--wp--preset--color--licht-oranje);
	border: 3px solid var(--hlf-ink);
	box-shadow: 4px 4px 0 var(--hlf-ink);
	transition: transform .15s ease, box-shadow .15s ease;
}
.hlf-video__play::after {
	content: "";
	position: absolute;
	left: 32px;
	top: 24px;
	border-style: solid;
	border-width: 16px 0 16px 26px;
	border-color: transparent transparent transparent var(--hlf-ink);
}
.hlf-video__knop:hover .hlf-video__play { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hlf-ink); }
.hlf-video__knop:focus-visible { outline: 3px solid var(--hlf-ink); outline-offset: -6px; }
.hlf-video figcaption.hlf-video__uitleg {
	position: absolute;
	right: .6rem;
	bottom: .5rem;
	margin: 0;
	padding: .15rem .5rem;
	font-size: .75rem;
	color: var(--wp--preset--color--wit);
	background: rgba(46, 46, 46, .75);
	border-radius: 6px;
	pointer-events: none;
}
.hlf-video { position: relative; }

/* Cookiebanner (Complianz) in huisstijl: klein kaartje linksonder */
body .cmplz-cookiebanner {
	--cmplz_banner_width: 360px;
	left: 16px !important;
	right: auto !important;
	bottom: 16px !important;
	top: auto !important;
	transform: none !important;
	width: min(360px, calc(100vw - 32px)) !important;
	max-height: calc(100vh - 32px);
	padding: 16px 18px 14px !important;
	grid-template-columns: 1fr !important;
	grid-template-areas: "body" "buttons" "links" !important;
	gap: 10px !important;
	background: var(--wp--preset--color--wit) !important;
	border: 3px solid var(--hlf-ink) !important;
	border-radius: var(--hlf-radius) !important;
	box-shadow: 6px 6px 0 var(--hlf-ink) !important;
	font-family: var(--wp--preset--font-family--montserrat) !important;
	color: var(--hlf-ink) !important;
}
body .cmplz-cookiebanner .cmplz-header { position: absolute !important; top: 10px !important; right: 12px !important; left: auto !important; width: auto !important; display: block !important; z-index: 1; }
body .cmplz-cookiebanner .cmplz-close { outline-color: var(--hlf-ink) !important; }
body .cmplz-cookiebanner .cmplz-title,
body .cmplz-cookiebanner .cmplz-logo,
body .cmplz-cookiebanner .cmplz-divider { display: none !important; }
body .cmplz-cookiebanner .cmplz-close svg { width: 12px; height: 12px; color: var(--hlf-ink); }
body .cmplz-cookiebanner .cmplz-body { grid-area: body; }
body .cmplz-cookiebanner .cmplz-body,
body .cmplz-cookiebanner .cmplz-message,
body .cmplz-cookiebanner .cmplz-buttons,
body .cmplz-cookiebanner .cmplz-links { width: auto !important; min-width: 0 !important; max-width: 100% !important; }
body .cmplz-cookiebanner .cmplz-message {
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--hlf-ink) !important;
	padding-right: 24px !important;
	margin: 0 !important;
}
body .cmplz-cookiebanner .cmplz-buttons {
	grid-area: buttons;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 8px !important;
}
body .cmplz-cookiebanner .cmplz-btn {
	margin: 0 !important;
	height: auto !important;
	min-height: 40px;
	padding: 9px 10px !important;
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--hlf-ink) !important;
	background: var(--wp--preset--color--licht-oranje) !important;
	border: 2px solid var(--hlf-ink) !important;
	border-radius: 10px !important;
	box-shadow: 3px 3px 0 var(--hlf-ink);
	width: 100% !important;
}
body .cmplz-cookiebanner .cmplz-btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--hlf-ink); }
body .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
body .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	grid-column: 1 / -1;
	min-height: 0;
	padding: 2px !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none;
	font-family: var(--wp--preset--font-family--montserrat) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-decoration: underline;
}
body .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	background: var(--wp--preset--color--licht-oranje) !important;
	border: 2px solid var(--hlf-ink) !important;
	box-shadow: 3px 3px 0 var(--hlf-ink);
	padding: 9px 10px !important;
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-decoration: none;
}
body .cmplz-cookiebanner .cmplz-links { grid-area: links; margin: 0 !important; }
body .cmplz-cookiebanner .cmplz-links ul { justify-content: flex-start !important; gap: 12px; margin: 0 !important; }
body .cmplz-cookiebanner .cmplz-link { font-size: 11px !important; color: var(--hlf-ink) !important; margin: 0 !important; }
body .cmplz-cookiebanner .cmplz-categories .cmplz-category { background: var(--wp--preset--color--creme) !important; border-radius: 10px !important; }
@media (max-width: 600px) {
	body .cmplz-cookiebanner { left: 12px !important; bottom: 12px !important; width: calc(100vw - 24px) !important; }
}

body .cmplz-cookiebanner .cmplz-message i,
body .cmplz-cookiebanner .cmplz-message em { font-style: normal; }

/* Beweging stopt bij muis erboven of toetsenbordfocus (geen zichtbare pauzeknop, op verzoek) */
.hlf-strook:hover .hlf-strook__kolom,
.hlf-hero:focus-within .hlf-strook__kolom,
.hlf-logos:focus-within .hlf-logos__rij { animation-play-state: paused; }
/* Tekstblok van de hero laat de muis door naar de fotostrook, behalve op de tekst en knoppen zelf */
.hlf-hero__tekst { pointer-events: none; }
.hlf-hero__tekst > * { pointer-events: auto; }

/* Uitverkochte stempels weer donker (contrast op oranje) */
.hlf-pakket--vol .hlf-pakket__stempel { color: var(--hlf-ink); }

/* Footerlinks makkelijker aan te tikken */
.hlf-footer__links a { display: inline-block; padding-block: 4px; }

/* Kortere regels in de introtekst van de titelband */
.hlf-titelband p:not(.hlf-hand) { max-width: 68ch; }

/* Meer ruimte rond het YouTube-labeltje */
.hlf-video figcaption.hlf-video__uitleg { padding: .3rem .65rem; }

/* Handgeschreven kopjes met een eigen kleur (oranje, mint): donkere rand en schaduw voor leesbaarheid */
.hlf-hand.has-text-color:not(.has-asfalt-color) {
	text-shadow:
		-1px -1px 0 var(--hlf-ink), 1px -1px 0 var(--hlf-ink),
		-1px 1px 0 var(--hlf-ink), 1px 1px 0 var(--hlf-ink),
		3px 3px 0 var(--hlf-ink);
}

/* ---------- Menu: wachtlijstknop ---------- */

.hlf-nav .hlf-nav__knop > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--wit);
	color: var(--hlf-ink);
	border: 2px solid var(--hlf-ink);
	border-radius: 999px;
	padding: .35rem 1rem;
	box-shadow: 3px 3px 0 var(--hlf-ink);
	font-weight: 700;
	transition: transform .15s ease, box-shadow .15s ease;
}
.hlf-nav .hlf-nav__knop > .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--hlf-ink);
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--hlf-ink);
}

/* ---------- Hero ---------- */

.hlf-hero__voorbehoud { font-size: 1rem; font-weight: 500; }

/* ---------- Formulieren ---------- */

.hlf-form {
	background: var(--wp--preset--color--wit);
	border: 3px solid var(--hlf-ink);
	border-radius: var(--hlf-radius);
	box-shadow: 8px 8px 0 var(--hlf-ink);
	padding: clamp(1.25rem, 3vw, 2rem);
	rotate: 1deg;
	display: grid;
	gap: 1rem;
}
.hlf-form > *, .hlf-form p { margin: 0; }
.hlf-form__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hlf-form__veld { display: grid; gap: .35rem; }
.hlf-form label, .hlf-form legend { font-weight: 700; }
.hlf-form label span { font-weight: 500; opacity: .75; }
.hlf-form input[type="text"],
.hlf-form input[type="email"],
.hlf-form input[type="tel"],
.hlf-form select,
.hlf-form textarea {
	font: inherit;
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .85rem;
	border: 2px solid var(--hlf-ink);
	border-radius: 10px;
	background: var(--wp--preset--color--creme);
	color: var(--hlf-ink);
}
.hlf-form textarea { resize: vertical; }
.hlf-form :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--oranje);
	outline-offset: 1px;
}
.hlf-form__keuze { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.hlf-form__keuze legend { margin-bottom: .4rem; }
.hlf-form__keuze label { font-weight: 500; display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.hlf-form__vink { font-weight: 500 !important; display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; font-size: .95rem; }
.hlf-form input[type="checkbox"], .hlf-form input[type="radio"] {
	width: 1.2rem; height: 1.2rem; flex: none; margin: .1rem 0 0; accent-color: var(--wp--preset--color--groen-donker);
}
.hlf-form__verstuur .wp-element-button {
	font: inherit;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 800;
	cursor: pointer;
	border: 0;
}
.hlf-form__verstuur .wp-element-button:disabled { opacity: .6; cursor: wait; }
.hlf-form__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hlf-form__melding:empty { display: none; }
.hlf-form__melding { font-weight: 700; }
.hlf-form__melding.is-gelukt {
	background: var(--wp--preset--color--mint);
	border: 2px solid var(--wp--preset--color--groen-donker);
	border-radius: 10px;
	padding: .75rem 1rem;
	color: var(--wp--preset--color--groen-donker);
}
.hlf-form__melding.is-fout { color: #B42318; }
.hlf-form.is-verstuurd > :not(.hlf-form__melding) { display: none; }
.hlf-form__alt { font-size: .95rem; }

.hlf-wachtlijst { padding-block: var(--wp--preset--spacing--60) !important; }

/* ---------- Quotes en cijfers ---------- */

.hlf-quotes {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 3vw, 2.25rem) !important;
	margin-top: var(--wp--preset--spacing--60) !important;
}
.hlf-quotes > * { margin: 0 !important; }
.hlf-quote.wp-block-quote {
	background: var(--wp--preset--color--wit);
	border: 3px solid var(--hlf-ink);
	border-radius: var(--hlf-radius);
	box-shadow: 6px 6px 0 var(--hlf-ink);
	padding: 1.5rem 1.5rem 1.25rem;
	margin: 0;
	position: relative;
}
.hlf-quotes > .hlf-quote:nth-child(1) { rotate: -1.5deg; }
.hlf-quotes > .hlf-quote:nth-child(2) { rotate: 1deg; translate: 0 1rem; }
.hlf-quotes > .hlf-quote:nth-child(3) { rotate: -.5deg; }
.hlf-quote.wp-block-quote::before {
	content: "“";
	position: absolute;
	top: -.35em;
	left: .4em;
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 900;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--wp--preset--color--oranje);
	text-shadow: 3px 3px 0 var(--hlf-ink);
}
.hlf-quote p { font-weight: 600; font-size: var(--wp--preset--font-size--l); line-height: 1.4; margin: 0; }
.hlf-quote cite { display: block; margin-top: .75rem; font-style: normal; font-size: .95rem; opacity: .8; }
.hlf-quote--groot p { font-size: var(--wp--preset--font-size--xl); }
.hlf-pers { margin-top: var(--wp--preset--spacing--50) !important; text-align: center; font-weight: 600; }

.hlf-cijfers {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 3vw, 2rem) !important;
	margin-block: var(--wp--preset--spacing--50) !important;
}
.hlf-cijfers > * { margin: 0 !important; }
.hlf-cijfer {
	background: var(--wp--preset--color--wit);
	border: 3px solid var(--hlf-ink);
	border-radius: var(--hlf-radius);
	box-shadow: 6px 6px 0 var(--hlf-ink);
	padding: 1.25rem !important;
}
.hlf-cijfer:nth-child(odd) { rotate: -1deg; }
.hlf-cijfer:nth-child(even) { rotate: 1deg; }
.hlf-cijfer > * { margin: 0 !important; }
.hlf-cijfer__getal {
	font-family: var(--wp--preset--font-family--archivo);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1;
	color: var(--wp--preset--color--groen-donker);
}
.hlf-cijfer__uitleg { margin-top: .4rem !important; font-weight: 600; }

/* ---------- Footer ---------- */

.hlf-footer__socials a { font-weight: 700; }

@media (max-width: 900px) {
	.hlf-quotes, .hlf-cijfers { grid-template-columns: 1fr 1fr; }
	.hlf-quotes > .hlf-quote:nth-child(2) { translate: none; }
	.hlf-quotes > .hlf-quote:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.hlf-quotes, .hlf-form__rij { grid-template-columns: 1fr; }
	.hlf-quotes > .hlf-quote:nth-child(3) { grid-column: auto; }
	.hlf-cijfer { padding: 1rem !important; }
	.hlf-cijfer__getal { font-size: var(--wp--preset--font-size--xl); }
	.hlf-cijfer__uitleg { font-size: .9rem; }
	.hlf-form { rotate: none; }
}

/* ---------- Fotogalerij ---------- */

.hlf-galerij.wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(.6rem, 1.5vw, 1.1rem) !important;
}
.hlf-galerij.wp-block-gallery > .wp-block-image {
	width: auto !important;
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	border: 3px solid var(--hlf-ink);
	border-radius: 12px;
	box-shadow: 4px 4px 0 var(--hlf-ink);
	overflow: hidden;
	transition: rotate .2s ease, transform .2s ease;
}
.hlf-galerij.wp-block-gallery > .wp-block-image:nth-child(3n+1) { rotate: -1deg; }
.hlf-galerij.wp-block-gallery > .wp-block-image:nth-child(3n+2) { rotate: .75deg; }
.hlf-galerij.wp-block-gallery > .wp-block-image:hover { rotate: 0deg; transform: scale(1.03); z-index: 2; }
.hlf-galerij.wp-block-gallery > .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
.hlf-credit { text-align: right; font-size: .95rem; margin-top: 1rem !important; }

@media (max-width: 1000px) {
	.hlf-galerij.wp-block-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.hlf-galerij.wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.hlf-galerij.wp-block-gallery > .wp-block-image { transition: none; }
}