/*
 * Homey Flow Library — front-end stijlen.
 *
 * Alles is geschaald binnen de wrapper ".hfl-flow-library" en gebruikt de
 * "hfl-" prefix, zodat het thema van homeycornelisse.nl niet wordt
 * beïnvloed. Kleuren zijn CSS custom properties zodat ze eenvoudig
 * aangepast kunnen worden (o.a. via de instellingenpagina).
 */

/*
 * Vangnet tegen horizontale paginascroll door de "width:100vw"-uitbreektruc
 * hieronder (".hfl-flow-library") en in ".hfl-archive-header"/".hfl-filters"
 * verderop in dit bestand: "100vw" telt de breedte van een eventuele
 * verticale scrollbalk NIET mee, terwijl de werkelijk zichtbare
 * paginabreedte dat wel doet. Op een breed scherm mét zichtbare scrollbalk
 * steekt de "volledige breedte"-hero daardoor net iets voorbij de
 * rechterrand van de pagina uit — zichtbaar als de blauwe/roze
 * decoratiecirkels die buiten de pagina-inhoud lijken te vallen zodra het
 * venster breder wordt. "html" (niet "body": robuuster tegen eventuele
 * eigen margin/positionering van het thema op body) krijgt daarom een
 * expliciete overflow-x:hidden, ongeacht wat het thema zelf instelt.
 */
html {
	overflow-x: hidden;
}

.hfl-flow-library {
	--hfl-color-accent: #e8720c;
	--hfl-color-accent-contrast: #ffffff;
	--hfl-color-text: #1b1b1f;
	--hfl-color-text-muted: #5b5f66;
	--hfl-color-bg: #ffffff;
	--hfl-color-bg-subtle: #f7f7f8;
	--hfl-color-border: #e4e4e7;
	--hfl-radius-md: 10px;
	--hfl-radius-lg: 16px;
	--hfl-shadow-sm: 0 1px 3px rgba(20, 20, 22, 0.06), 0 1px 2px rgba(20, 20, 22, 0.05);
	--hfl-shadow-md: 0 6px 20px rgba(20, 20, 22, 0.08);
	--hfl-space-1: 0.5rem;
	--hfl-space-2: 1rem;
	--hfl-space-3: 1.5rem;
	--hfl-space-4: 2.5rem;
	--hfl-font-size-sm: 14px;
	--hfl-transition-fast: 150ms ease;

	color: var(--hfl-color-text);
	box-sizing: border-box;

	/*
	 * Expliciete basis-tekstgrootte in px, onafhankelijk van het thema. Het
	 * thema van homeycornelisse.nl gebruikt zelf een kleinere root-lettergrootte
	 * (rem-schaling), waardoor alle "rem"-waarden in dit bestand veel kleiner
	 * uitvielen dan bedoeld. Door hier alles vast in px te zetten (en deze
	 * basiswaarde als vangnet voor tekst zonder eigen font-size) is de
	 * weergave altijd voorspelbaar, ongeacht het thema.
	 */
	font-size: 16px;

	/*
	 * Pagina-breed weergeven, ook wanneer het thema de pagina-inhoud in een
	 * smallere kolom plaatst. "width: 100vw" + "left: 50%" met
	 * "transform: translateX(-50%)" breekt uit die kolom, terwijl
	 * "max-width" zorgt dat de inhoud op zeer brede schermen niet
	 * eindeloos doorloopt. translateX (i.p.v. een negatieve margin)
	 * centreert correct t.o.v. de werkelijke, afgetopte breedte.
	 */
	width: 100vw;
	max-width: none;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding-inline: clamp(1rem, 4vw, 3rem);
}

.hfl-flow-library * {
	box-sizing: border-box;
}

.hfl-flow-library img {
	max-width: 100%;
	height: auto;
	display: block;
}

.hfl-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Focusstatus — zichtbaar en consistent voor alle interactieve elementen */
/* ------------------------------------------------------------------ */
.hfl-flow-library a:focus-visible,
.hfl-flow-library button:focus-visible,
.hfl-flow-library input:focus-visible,
.hfl-flow-library select:focus-visible,
.hfl-flow-library textarea:focus-visible {
	outline: 3px solid var(--hfl-color-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Archiefkop. Ruime Soundboard-achtige hero met zachte kleurvormen.   */
/* ------------------------------------------------------------------ */
.hfl-archive-header {
	--hfl-blob-blue: #c9efff;
	--hfl-blob-pink: #ffd2f6;
	position: relative;
	isolation: isolate;
	min-height: 520px;
	display: flex;
	align-items: center;
	margin-block-end: 2rem;
	padding-block: clamp(4rem, 8vw, 7rem);
}

.hfl-archive-header__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

.hfl-archive-header__decor::before,
.hfl-archive-header__decor::after {
	content: "";
	position: absolute;
	border-radius: 50%;
}

.hfl-archive-header__decor::before {
	width: clamp(180px, 19vw, 300px);
	height: clamp(180px, 19vw, 300px);
	top: -110px;
	left: clamp(-150px, -8vw, -75px);
	background: var(--hfl-blob-blue);
}

.hfl-archive-header__decor::after {
	width: clamp(210px, 21vw, 340px);
	height: clamp(210px, 21vw, 340px);
	right: clamp(-170px, -8vw, -80px);
	bottom: -150px;
	background: var(--hfl-blob-pink);
}

.hfl-archive-header__inner {
	width: 100%;
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
	align-items: center;
	gap: clamp(3rem, 7vw, 7rem);
	padding-inline: clamp(0rem, 1.5vw, 1.5rem);
}

.hfl-archive-header__content {
	max-width: 700px;
}

.hfl-archive-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #159fe6;
	margin: 0 0 1.15rem;
}

.hfl-archive-title {
	font-size: clamp(44px, 4.2vw, 68px);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.98;
	max-width: 760px;
	margin: 0 0 1.5rem;
}

.hfl-archive-intro {
	color: #687286;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.55;
	max-width: 650px;
	margin: 0 0 1.8rem;
}

.hfl-archive-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 2rem;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14px;
	color: #778195;
}

.hfl-archive-stats strong {
	color: var(--hfl-color-text);
	font-weight: 750;
	margin-right: 0.2rem;
}

.hfl-archive-preview {
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 26px;
	box-shadow: 0 24px 65px rgba(24, 39, 75, 0.14);
	padding: 2rem;
}

.hfl-archive-preview__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.hfl-archive-preview__label {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: #e1f5ff;
	color: #159fe6;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hfl-archive-preview__icon {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: #101e3a;
	color: #fff;
}

.hfl-archive-preview__icon svg {
	width: 22px;
	height: 22px;
}

.hfl-archive-preview h2 {
	font-size: 26px;
	line-height: 1.15;
	margin: 0 0 0.6rem;
}

.hfl-archive-preview > p {
	color: #6c7689;
	font-size: 14px;
	margin: 0 0 1.5rem;
}

.hfl-archive-preview__items {
	display: grid;
	gap: 0.75rem;
}

.hfl-archive-preview__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 66px;
	padding: 0.7rem 0.9rem;
	border: 1px solid #dfe6ef;
	border-radius: 13px;
	background: #fff;
}

.hfl-archive-preview__number {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #e2f6ff;
	color: #169fe6;
	font-weight: 800;
}

.hfl-archive-preview__item span:last-child {
	display: grid;
	gap: 0.1rem;
}

.hfl-archive-preview__item strong {
	font-size: 14px;
}

.hfl-archive-preview__item small {
	color: #8891a3;
	font-size: 12px;
}

@media (max-width: 980px) {
	.hfl-archive-header {
		min-height: 0;
		padding-block: 4rem;
	}

	.hfl-archive-header__inner {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.hfl-archive-preview {
		max-width: 560px;
	}
}

@media (max-width: 600px) {
	.hfl-archive-header {
		padding-block: 3.25rem;
	}

	.hfl-archive-title {
		font-size: clamp(38px, 12vw, 52px);
	}

	.hfl-archive-preview {
		padding: 1.25rem;
		border-radius: 20px;
	}
}

/* ------------------------------------------------------------------ */
/* Compact zoeken met optioneel uitklapbare filters.                   */
/* ------------------------------------------------------------------ */
.hfl-filters {
	width: 100%;
	margin: 0 auto var(--hfl-space-3);
}

.hfl-filters__toolbar {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.hfl-filters__search-wrap {
	position: relative;
	flex: 1 1 auto;
	max-width: none;
	display: flex;
	align-items: center;
	min-height: 62px;
	padding: 0.35rem 0.45rem 0.35rem 3.1rem;
	border: 1px solid #d9e1eb;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(26, 44, 77, 0.08);
}

.hfl-filters__search-icon {
	position: absolute;
	left: 1.25rem;
	width: 20px;
	height: 20px;
	color: #69758a;
	pointer-events: none;
}

.hfl-filters__input {
	min-width: 0;
	width: 100%;
	border: 0;
	outline: 0;
	padding: 0.75rem 0.5rem;
	background: transparent;
	color: var(--hfl-color-text);
	font-size: 16px;
}

.hfl-filters__input::placeholder {
	color: #929cad;
}

.hfl-filters__search-submit,
.hfl-filters__toggle {
	min-height: 42px;
	border: 1px solid #dce3ec;
	border-radius: 9px;
	background: #f7f9fb;
	color: #5f6b7e;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.hfl-filters__search-submit {
	padding: 0.65rem 1rem;
}

.hfl-filters__details {
	position: relative;
	flex: 0 0 auto;
}

.hfl-filters__toggle {
	list-style: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.65rem 1rem;
	white-space: nowrap;
	box-shadow: 0 10px 28px rgba(26, 44, 77, 0.06);
}

.hfl-filters__toggle::-webkit-details-marker {
	display: none;
}

.hfl-filters__toggle svg {
	width: 19px;
	height: 19px;
}

.hfl-filters__active-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff00bb;
}

.hfl-filters__panel {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	z-index: 20;
	width: min(1040px, calc(100vw - 2rem));
	padding: 1.25rem;
	border: 1px solid #dfe5ed;
	border-radius: 16px;
	background: rgba(255,255,255,0.98);
	box-shadow: 0 22px 60px rgba(24, 39, 75, 0.16);
}

.hfl-filters__row--selects {
	display: grid;
	grid-template-columns: repeat(5, minmax(145px, 1fr));
	gap: 0.85rem;
}

.hfl-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.hfl-filters__label {
	font-size: 13px;
	font-weight: 700;
	color: #303747;
}

.hfl-filters__select {
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 0.75rem;
	border: 1px solid #dce3ec;
	border-radius: 10px;
	background: #fff;
	color: var(--hfl-color-text);
	font-size: 14px;
}

.hfl-filters__row--actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
}

.hfl-filters__submit {
	min-height: 42px;
	background: linear-gradient(135deg, #ff00bb, #e600a9);
	color: #fff;
	border: 0;
	border-radius: 9px;
	padding: 0.65rem 1.1rem;
	font-size: 14px;
	font-weight: 750;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(255, 0, 187, 0.18);
}

.hfl-filters__clear {
	color: #69758a;
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
}

.hfl-filters__clear:hover {
	text-decoration: underline;
}

.hfl-results-count {
	width: 100%;
	margin: 0 auto var(--hfl-space-2);
	color: var(--hfl-color-text-muted);
	font-size: var(--hfl-font-size-sm);
}

.hfl-no-results {
	background: var(--hfl-color-bg-subtle);
	border: 1px dashed var(--hfl-color-border);
	border-radius: var(--hfl-radius-lg);
	padding: var(--hfl-space-3);
	text-align: center;
	color: var(--hfl-color-text-muted);
}

@media (max-width: 1050px) {
	.hfl-filters__row--selects {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.hfl-filters__toolbar {
		flex-wrap: wrap;
	}

	.hfl-filters__search-wrap {
		flex-basis: 100%;
		min-height: 56px;
	}

	.hfl-filters__details {
		width: 100%;
	}

	.hfl-filters__toggle {
		width: 100%;
	}

	.hfl-filters__panel {
		position: static;
		width: 100%;
		margin-top: 0.75rem;
	}
}

@media (max-width: 520px) {
	.hfl-filters__search-wrap {
		padding-left: 2.75rem;
	}

	.hfl-filters__search-submit {
		padding-inline: 0.75rem;
	}

	.hfl-filters__row--selects {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* Kaartenraster */
/* ------------------------------------------------------------------ */
.hfl-flow-grid {
	--hfl-columns: 3;
	display: grid;
	grid-template-columns: repeat(var(--hfl-columns), minmax(0, 1fr));
	gap: var(--hfl-space-4);
	margin-block-end: var(--hfl-space-3);
}

/*
 * Aantal kolommen wordt via een class ingesteld (geen inline stijl in de
 * templates). "default_columns"/shortcode-attributen kiezen hier één van.
 */
.hfl-flow-grid.hfl-columns-1 {
	--hfl-columns: 1;
}

.hfl-flow-grid.hfl-columns-2 {
	--hfl-columns: 2;
}

.hfl-flow-grid.hfl-columns-3 {
	--hfl-columns: 3;
}

.hfl-flow-grid.hfl-columns-4 {
	--hfl-columns: 4;
}

@media (max-width: 900px) {
	.hfl-flow-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.hfl-flow-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ */
/* Flowkaart */
/* ------------------------------------------------------------------ */
.hfl-flow-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--hfl-color-bg);
	border: 1px solid var(--hfl-color-border);
	border-radius: var(--hfl-radius-lg);
	box-shadow: var(--hfl-shadow-sm);
	overflow: hidden;
	transition: transform var(--hfl-transition-fast), box-shadow var(--hfl-transition-fast);
}

.hfl-flow-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--hfl-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
	.hfl-flow-card,
	.hfl-flow-card__link,
	.hfl-filters__submit {
		transition: none !important;
		transform: none !important;
	}
}

.hfl-flow-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--hfl-color-bg-subtle);
}

.hfl-flow-card__image {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.hfl-flow-card__image--placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--hfl-color-bg-subtle), var(--hfl-color-border));
}

.hfl-flow-card__badge {
	position: absolute;
	top: var(--hfl-space-1);
	right: var(--hfl-space-1);
}

.hfl-flow-card__body {
	padding: var(--hfl-space-3);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

.hfl-flow-card__category {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 13px;
	font-weight: 700;
	color: var(--hfl-color-accent);
	margin: 0;
}

.hfl-flow-card__title {
	font-size: 24px;
	line-height: 1.3;
	margin: 0;
}

.hfl-flow-card__summary {
	color: var(--hfl-color-text-muted);
	font-size: 17px;
	margin: 0;
	flex: 1;
}

.hfl-flow-card__meta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin: 0.25rem 0 0;
	font-size: 15px;
	color: var(--hfl-color-text-muted);
}

.hfl-flow-card__meta-item {
	background: var(--hfl-color-bg-subtle);
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
}

.hfl-flow-card__link {
	position: relative;
	align-self: flex-start;
	margin-top: 0.75rem;
	display: inline-block;
	background: var(--hfl-color-accent);
	color: var(--hfl-color-accent-contrast);
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	padding: 0.7rem 1.4rem;
	border-radius: var(--hfl-radius-md);
}

/* Maakt de hele kaart klikbaar, met behoud van één focusbare link. */
.hfl-flow-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.hfl-flow-card {
	isolation: isolate;
}

/* ------------------------------------------------------------------ */
/* Statusbadges — nooit alleen op kleur gebaseerd, altijd met tekstlabel */
/* ------------------------------------------------------------------ */
.hfl-official-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--hfl-color-text-muted);
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.hfl-official-badge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: 50%;
	background: #30b3ff;
	color: #ffffff;
	font-size: 11px;
	line-height: 1;
}

/*
 * Subtiele "sticker" op de linkerbovenhoek van de kaartafbeelding — bewust
 * klein en rustig gehouden (vergelijkbaar met een geverifieerd-vinkje),
 * in plaats van een opvallende balk die de aandacht van de kaart afleidt.
 */
.hfl-official-sticker {
	position: absolute;
	top: var(--hfl-space-1);
	left: var(--hfl-space-1);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.hfl-official-sticker__icon {
	width: 28px;
	height: 28px;
	filter: drop-shadow(0 1px 3px rgba(20, 20, 22, 0.3));
}

.hfl-official-sticker__label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #ffffff;
	background: rgba(20, 20, 22, 0.55);
	padding: 1px 6px;
	border-radius: 999px;
	line-height: 1.5;
}

.hfl-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: var(--hfl-color-bg);
	border: 1px solid var(--hfl-color-border);
	color: var(--hfl-color-text);
}

.hfl-badge--experimenteel {
	border-color: #f2b705;
	color: #7a5b00;
	background: #fff6da;
}

.hfl-badge--verouderd,
.hfl-badge--niet-ondersteund {
	border-color: #e0524d;
	color: #7a201d;
	background: #fdeceb;
}

/* ------------------------------------------------------------------ */
/* Paginering */
/* ------------------------------------------------------------------ */
.hfl-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0;
	margin: var(--hfl-space-2) 0 0;
}

.hfl-pagination a,
.hfl-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0 0.5rem;
	border-radius: var(--hfl-radius-md);
	border: 1px solid var(--hfl-color-border);
	text-decoration: none;
	color: var(--hfl-color-text);
}

.hfl-pagination .current {
	background: var(--hfl-color-accent);
	border-color: var(--hfl-color-accent);
	color: var(--hfl-color-accent-contrast);
}

/* ------------------------------------------------------------------ */
/* Detailpagina */
/* ------------------------------------------------------------------ */
.hfl-single-flow .hfl-back-link {
	font-size: 16px;
	position: relative;
	z-index: 50;
	margin-block: var(--hfl-space-3) var(--hfl-space-2);
	padding-block: 0.25rem;
}

.hfl-back-link a {
	position: relative;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--hfl-color-accent);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	pointer-events: auto;
}

.hfl-back-link a:hover {
	color: var(--hfl-color-text);
}

.hfl-flow-category a {
	color: var(--hfl-color-accent);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.hfl-flow-title {
	font-size: clamp(28px, 21px + 1.5vw, 44px);
	line-height: 1.15;
	margin: 0.5rem 0 var(--hfl-space-2);
}

.hfl-flow-summary {
	font-size: 18px;
	line-height: 1.6;
	color: var(--hfl-color-text-muted);
	max-width: 70ch;
	margin: 0 0 var(--hfl-space-2);
}

.hfl-flow-header {
	margin-block-end: var(--hfl-space-2);
}

.hfl-flow-hero {
	width: 100%;
	display: block;
	border-radius: var(--hfl-radius-lg);
	overflow: hidden;
	margin-block: var(--hfl-space-4);
	box-shadow: var(--hfl-shadow-sm);
	aspect-ratio: 21 / 9;
	max-height: 420px;
}

/*
 * !important is hier nodig: de algemene regel ".hfl-flow-library img" (met
 * twee selector-onderdelen) is specifieker dan een losse klasse als
 * ".hfl-flow-hero__image" en zou anders "height: auto" en "max-width: 100%"
 * afdwingen, waardoor de afbeelding zijn eigen beeldverhouding gebruikt in
 * plaats van de vaste bannerhoogte hierboven.
 */
.hfl-flow-hero__image {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

@media (max-width: 600px) {
	.hfl-flow-hero {
		aspect-ratio: 4 / 3;
		max-height: 280px;
	}
}

.hfl-flow-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--hfl-space-3);
	background: var(--hfl-color-bg-subtle);
	border-radius: var(--hfl-radius-lg);
	padding: var(--hfl-space-3) var(--hfl-space-4);
	margin: 0 0 var(--hfl-space-4);
}

.hfl-flow-meta__item {
	flex: 1 1 140px;
}

.hfl-flow-meta__item dt {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hfl-color-text-muted);
	margin: 0 0 0.2rem;
}

.hfl-flow-meta__item dd {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
}

.hfl-flow-status-notice {
	border: 1px solid #f2b705;
	background: #fff6da;
	color: #6b5000;
	border-radius: var(--hfl-radius-md);
	padding: var(--hfl-space-2) var(--hfl-space-3);
	margin-block-end: var(--hfl-space-3);
}

.hfl-flow-content {
	max-width: 75ch;
	line-height: 1.75;
	font-size: 16px;
	margin-block-end: var(--hfl-space-4);
}

.hfl-flow-content p {
	margin: 0 0 var(--hfl-space-2);
}

.hfl-flow-content a,
.hfl-flow-steps__explanation a {
	color: var(--hfl-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--hfl-transition-fast, 150ms ease);
}

.hfl-flow-content a:hover,
.hfl-flow-content a:focus-visible,
.hfl-flow-steps__explanation a:hover,
.hfl-flow-steps__explanation a:focus-visible {
	color: var(--hfl-color-text);
	text-decoration-thickness: 2px;
}

.hfl-flow-requirements {
	margin-block-end: var(--hfl-space-4);
}

.hfl-flow-requirements h2,
.hfl-flow-steps h2,
.hfl-related-flows h2 {
	font-size: 22px;
	margin-block-end: var(--hfl-space-2);
}

.hfl-flow-requirements ul {
	margin: 0;
	padding-left: 1.4rem;
	line-height: 1.9;
}

.hfl-flow-requirements li {
	margin-block-end: 0.3rem;
}

/* ------------------------------------------------------------------ */
/* Installatiestappen */
/* ------------------------------------------------------------------ */
.hfl-flow-steps__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hfl-space-3);
}

.hfl-flow-steps__item {
	border: 1px solid var(--hfl-color-border);
	border-radius: var(--hfl-radius-lg);
	padding: var(--hfl-space-3);
}

.hfl-flow-steps__title {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 18px;
	margin: 0 0 0.7rem;
}

.hfl-flow-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--hfl-color-accent);
	color: var(--hfl-color-accent-contrast);
	font-size: 14px;
	font-weight: 700;
}

.hfl-flow-steps__explanation {
	color: var(--hfl-color-text);
	line-height: 1.7;
	margin: 0 0 0.75rem;
}

.hfl-flow-steps__explanation p,
.hfl-flow-steps__explanation ul,
.hfl-flow-steps__explanation ol {
	margin: 0 0 0.6rem;
}

.hfl-flow-steps__explanation ul,
.hfl-flow-steps__explanation ol {
	padding-left: 1.4rem;
}

.hfl-flow-steps__explanation h2,
.hfl-flow-steps__explanation h3,
.hfl-flow-steps__explanation h4 {
	margin: 0.6rem 0 0.4rem;
	line-height: 1.3;
}

.hfl-flow-steps__explanation blockquote {
	margin: 0 0 0.6rem;
	padding-left: 0.75rem;
	border-left: 3px solid var(--hfl-color-accent);
	color: var(--hfl-color-text-muted);
}

.hfl-flow-steps__explanation :last-child {
	margin-bottom: 0;
}

.hfl-flow-steps__image {
	border-radius: var(--hfl-radius-md);
	margin-block: 0.5rem;
}

.hfl-flow-steps__warning,
.hfl-flow-steps__tip {
	border-radius: var(--hfl-radius-md);
	padding: 0.5rem 0.75rem;
	font-size: var(--hfl-font-size-sm);
	margin: 0.4rem 0 0;
}

.hfl-flow-steps__warning {
	background: #fdeceb;
	color: #7a201d;
}

.hfl-flow-steps__tip {
	background: #e9f6ee;
	color: #1e5c36;
}

/* ------------------------------------------------------------------ */
/* Acties, video, GitHub */
/* ------------------------------------------------------------------ */
.hfl-flow-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hfl-space-2);
	margin-block-end: var(--hfl-space-4);
}

.hfl-flow-actions__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.4rem;
	border-radius: var(--hfl-radius-md);
	text-decoration: none;
	font-weight: 600;
	border: 1px solid var(--hfl-color-border);
	color: var(--hfl-color-text);
}

.hfl-flow-actions__button--primary {
	background: var(--hfl-color-accent);
	border-color: var(--hfl-color-accent);
	color: var(--hfl-color-accent-contrast);
}

.hfl-video-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: var(--hfl-radius-lg);
	overflow: hidden;
	margin-block-end: var(--hfl-space-4);
}

.hfl-video-embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hfl-flow-github {
	margin-block-end: var(--hfl-space-3);
}

.hfl-related-flows {
	margin-block-start: var(--hfl-space-4);
	border-top: 1px solid var(--hfl-color-border);
	padding-top: var(--hfl-space-3);
}

.hfl-flow-comments {
	margin-block-start: var(--hfl-space-4);
	border-top: 1px solid var(--hfl-color-border);
	padding-top: var(--hfl-space-3);
}

/* ------------------------------------------------------------------ */
/* 1.1.5: hero en zoekbalk echt over de volledige viewportbreedte.    */
/* ------------------------------------------------------------------ */
.hfl-archive-header,
.hfl-filters {
	width: 100vw;
	max-width: none;
	position: relative;
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.hfl-archive-header {
	padding-inline: clamp(1rem, 4vw, 3rem);
	overflow: hidden;
}

.hfl-archive-header__inner {
	width: min(100%, 1500px);
	margin-inline: auto;
	padding-inline: 0;
}

.hfl-filters {
	padding-inline: clamp(1rem, 4vw, 3rem);
}

.hfl-filters__toolbar {
	width: min(100%, 1500px);
	margin-inline: auto;
}

.hfl-filters__search-submit {
	flex: 0 0 auto;
	min-width: 92px;
	min-height: 46px;
	padding: 0.75rem 1.25rem;
	white-space: nowrap;
	line-height: 1;
}

@media (max-width: 520px) {
	.hfl-filters__search-submit {
		min-width: 82px;
		padding-inline: 1rem;
	}
}

/* ------------------------------------------------------------------ */
/* 1.1.6: nette zoekbalk en gelijkvormige zoek- en filterknoppen.      */
/* ------------------------------------------------------------------ */
.hfl-filters__toolbar {
	align-items: stretch;
	gap: 12px;
}

.hfl-filters__search-wrap {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr) 110px;
	align-items: center;
	flex: 1 1 auto;
	height: 62px;
	min-height: 62px;
	padding: 0;
	overflow: hidden;
}

.hfl-filters__search-icon {
	position: static;
	display: block;
	justify-self: center;
	align-self: center;
	width: 20px;
	height: 20px;
	margin: 0;
}

.hfl-filters__input {
	display: block;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 16px;
	border: 0 !important;
	border-left: 1px solid #edf0f4 !important;
	border-radius: 0 !important;
	outline: none;
	background: transparent;
	box-shadow: none !important;
	line-height: 1.4;
}

.hfl-filters__input:focus {
	border-color: #edf0f4 !important;
	outline: none;
	box-shadow: none !important;
}

.hfl-filters__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	min-width: 110px;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-left: 1px solid #dce3ec;
	border-radius: 0;
	background: #f7f9fb;
	color: #44526a;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.hfl-filters__details {
	position: relative;
	flex: 0 0 110px;
	width: 110px;
	height: 62px;
}

.hfl-filters__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 110px;
	min-width: 110px;
	height: 62px;
	min-height: 62px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #d9e1eb;
	border-radius: 14px;
	background: #f7f9fb;
	color: #44526a;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 14px 34px rgba(26, 44, 77, 0.08);
}

.hfl-filters__toggle svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.hfl-filters__search-submit:hover,
.hfl-filters__toggle:hover {
	background: #eef4fa;
	color: #16233d;
}

.hfl-filters__search-submit:focus-visible,
.hfl-filters__toggle:focus-visible {
	outline: 3px solid rgba(25, 164, 235, 0.25);
	outline-offset: 2px;
}

@media (max-width: 700px) {
	.hfl-filters__toolbar {
		flex-wrap: wrap;
	}

	.hfl-filters__search-wrap {
		flex-basis: 100%;
		grid-template-columns: 48px minmax(0, 1fr) 96px;
	}

	.hfl-filters__search-submit {
		width: 96px;
		min-width: 96px;
	}

	.hfl-filters__details,
	.hfl-filters__toggle {
		width: 100%;
		min-width: 100%;
	}

	.hfl-filters__details {
		flex-basis: 100%;
	}
}