/*
 * HIZ – Studio, makers en Editions (mobile-first, 375 px basis).
 *
 * Aanvullend op assets/css/hiz.css. De basisklassen (.hiz-button, .hiz-field, .hiz-notice,
 * .hiz-grid, .hiz-card) horen bij het basis-CSS van het theme; zolang dat nog niet volledig is
 * uitgewerkt staan hier minimale vormen in @layer hiz-fallback. Een cascade-laag verliest altijd
 * van ongelaagde regels, dus zodra hiz.css deze klassen zelf stijlt wint hiz.css vanzelf en kan
 * de fallback-laag hieronder in één keer weg.
 */

@layer hiz-fallback {

	.hiz-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--hiz-space-2, 8px);
		min-height: var(--hiz-touch, 44px);
		padding: var(--hiz-space-3, 12px) var(--hiz-space-5, 24px);
		border: 1px solid transparent;
		border-radius: var(--hiz-radius-pill, 999px);
		background: var(--hiz-color-forest, #3B4497);
		color: var(--hiz-color-paper, #EBE5D3);
		font: inherit;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
	}
	.hiz-button--accent {
		/* Pow Orange met witte tekst haalt 3,87:1; deze diepere variant komt op 4,9:1 (zie hiz.css). */
		background: var(--hiz-color-lemon-tekst, #C9430F);
		color: var(--hiz-color-white, #fff);
	}
	.hiz-button--outline {
		background: transparent;
		border-color: var(--hiz-color-forest, #3B4497);
		color: var(--hiz-color-forest, #3B4497);
	}
	.hiz-button--ghost {
		background: transparent;
		color: var(--hiz-color-forest, #3B4497);
		text-decoration: underline;
	}
	.hiz-button--small {
		min-height: var(--hiz-touch, 44px);
		padding: var(--hiz-space-2, 8px) var(--hiz-space-4, 16px);
		font-size: var(--hiz-text-sm, 0.875rem);
	}
	.hiz-button[disabled] {
		opacity: 0.55;
		cursor: progress;
	}

	.hiz-field {
		margin: 0 0 var(--hiz-space-5, 24px);
	}
	.hiz-field__label {
		display: block;
		margin-bottom: var(--hiz-space-2, 8px);
		font-weight: 600;
		font-size: var(--hiz-text-md, 1rem);
	}
	.hiz-field__hint {
		margin: 0 0 var(--hiz-space-2, 8px);
		color: var(--hiz-color-muted, #545A7E);
		font-size: var(--hiz-text-sm, 0.875rem);
	}
	.hiz-field__input {
		box-sizing: border-box;
		width: 100%;
		min-height: var(--hiz-control, 48px);
		padding: var(--hiz-space-3, 12px) var(--hiz-space-4, 16px);
		border: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
		border-radius: var(--hiz-radius-small, 14px);
		background: var(--hiz-color-white, #fff);
		color: inherit;
		font: inherit;
		font-size: var(--hiz-text-md, 1rem); /* 16 px: iOS zoomt dan niet in bij focus. */
	}
	.hiz-field__textarea {
		/* Ruim tekstvak: ongeveer zes regels, zodat een toelichting past. */
		min-height: 10rem;
		resize: vertical;
	}
	.hiz-field__error {
		margin: var(--hiz-space-2, 8px) 0 0;
		color: #8c2f1d;
		font-size: var(--hiz-text-sm, 0.875rem);
		font-weight: 600;
	}
	.hiz-field--invalid .hiz-field__input {
		border-color: #8c2f1d;
		border-width: 2px;
	}

	.hiz-notice {
		padding: var(--hiz-space-4, 16px) var(--hiz-space-4, 16px);
		border-radius: var(--hiz-radius-medium, 24px);
		background: var(--hiz-color-mint, #D3D9EB);
	}
	.hiz-notice--fout {
		background: #f7e2dd;
	}
	.hiz-notice--succes {
		background: var(--hiz-color-sage, #D3D9EB);
	}
	.hiz-notice__titel {
		margin: 0 0 var(--hiz-space-2, 8px);
		font-size: var(--hiz-h4, 1.0625rem);
	}

	.hiz-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--hiz-space-5, 24px);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.hiz-eyebrow {
		display: block;
		font-family: "Barlow Condensed", var(--wp--preset--font-family--code, ui-sans-serif), sans-serif;
		font-size: var(--hiz-text-sm, 0.875rem);
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.hiz-section__title {
		margin: 0 0 var(--hiz-space-3, 12px);
		font-size: var(--hiz-h2, clamp(1.625rem, 3vw, 2.25rem));
		line-height: 1.15;
	}
	.hiz-visually-hidden {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

/* ------------------------------------------------------------------ gedeelde vormen (mijn deel) */

.hiz-field__opties {
	display: grid;
	gap: var(--hiz-space-2, 8px);
}
.hiz-field__optie {
	display: flex;
	align-items: flex-start;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch, 44px);
	padding: var(--hiz-space-2, 8px) var(--hiz-space-4, 16px);
	border: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
	border-radius: var(--hiz-radius-small, 14px);
	background: var(--hiz-color-white, #fff);
	cursor: pointer;
	line-height: 1.4;
}
.hiz-field__optie input {
	width: 22px;
	height: 22px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--hiz-color-forest, #3B4497);
}
.hiz-field__optie:has(input:checked) {
	border-color: var(--hiz-color-forest, #3B4497);
	background: var(--hiz-color-mint, #D3D9EB);
}
.hiz-field__optie--akkoord {
	align-items: flex-start;
}
.hiz-field__groep {
	margin: 0;
	padding: 0;
	border: 0;
}
/*
 * Ronde 3: niet het verplichte veld krijgt een markering maar het optionele, met één
 * uitleg boven het formulier (NN/g, "Website Form Design"). .hiz-field__vereist blijft
 * gestyled voor formulieren die het nog gebruiken.
 */
.hiz-field__vereist {
	color: var(--hiz-color-lemon-tekst, #C9430F);
}
.hiz-field__optioneel {
	color: var(--hiz-color-muted, #545A7E);
	font-weight: 400;
	font-size: var(--hiz-text-sm, 0.875rem);
}
.hiz-form__uitleg {
	margin: 0 0 var(--hiz-space-5, 24px);
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}

/* Tekenteller onder een lang tekstvak. */
.hiz-field__teller {
	margin: var(--hiz-space-2, 8px) 0 0;
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
	text-align: right;
}
.hiz-field__teller--vol {
	color: var(--hiz-color-lemon-tekst, #C9430F);
	font-weight: 600;
}

/* Wat je vooraf moet weten: staat boven het eerste veld. */
.hiz-form__vooraf {
	margin: 0 0 var(--hiz-space-5, 24px);
	padding: var(--hiz-space-4, 16px) var(--hiz-space-4, 16px) var(--hiz-space-4, 16px) var(--hiz-space-6, 32px);
	border-radius: var(--hiz-radius-medium, 24px);
	background: var(--hiz-color-mint, #D3D9EB);
	font-size: var(--hiz-text-md, 1rem);
}
.hiz-form__vooraf li + li {
	margin-top: var(--hiz-space-2, 8px);
}

/* Foutsamenvatting boven de zichtbare stap. */
.hiz-form__fouten {
	margin: 0 0 var(--hiz-space-5, 24px);
}
.hiz-form__fouten-kop {
	margin: 0 0 var(--hiz-space-2, 8px);
	font-weight: 700;
}
.hiz-form__fouten-lijst {
	margin: 0;
	padding-left: var(--hiz-space-5, 24px);
}
.hiz-form__fouten-lijst li + li {
	margin-top: var(--hiz-space-1, 4px);
}
.hiz-form__fouten-link {
	padding: var(--hiz-space-1, 4px) 0;
	border: 0;
	background: none;
	color: #8c2f1d;
	font: inherit;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

/* Bevestiging na verzenden: nummer, termijn en wat er nu gebeurt. */
.hiz-bevestiging__termijn {
	margin: var(--hiz-space-3, 12px) 0;
}
.hiz-bevestiging__kop {
	margin: var(--hiz-space-4, 16px) 0 var(--hiz-space-2, 8px);
	font-size: var(--hiz-text-md, 1rem);
}
.hiz-bevestiging__stappen {
	margin: 0 0 var(--hiz-space-3, 12px);
	padding-left: var(--hiz-space-5, 24px);
}
.hiz-bevestiging__stappen li + li {
	margin-top: var(--hiz-space-2, 8px);
}
.hiz-bevestiging__mail {
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}
.hiz-bevestiging__links {
	margin: var(--hiz-space-3, 12px) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px) var(--hiz-space-5, 24px);
}

/* Maten-tabel: op 375 px vier kolommen, daarboven alle zeven naast elkaar. */
.hiz-maten {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--hiz-space-2, 8px);
}
@media (min-width: 560px) {
	.hiz-maten {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
}
.hiz-maten__label {
	display: block;
	margin-bottom: var(--hiz-space-1, 4px);
	font-family: "Barlow Condensed", ui-sans-serif, sans-serif;
	font-size: var(--hiz-text-sm, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
}
.hiz-maten__input {
	padding-inline: var(--hiz-space-2, 8px);
	text-align: center;
}
.hiz-maten__totaal {
	margin: var(--hiz-space-2, 8px) 0 0;
	font-weight: 600;
}

/* Uploads. */
.hiz-upload__lijst {
	margin: var(--hiz-space-3, 12px) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--hiz-space-2, 8px);
}
.hiz-upload__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	padding: var(--hiz-space-2, 8px) var(--hiz-space-4, 16px);
	border-radius: var(--hiz-radius-small, 14px);
	background: var(--hiz-color-mint, #D3D9EB);
}
.hiz-upload__naam {
	font-weight: 600;
	overflow-wrap: anywhere;
}
.hiz-upload__grootte {
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}
.hiz-upload__weg {
	margin-left: auto;
}
.hiz-upload__status {
	margin: var(--hiz-space-2, 8px) 0 0;
	min-height: 1.4em;
	font-size: var(--hiz-text-sm, 0.875rem);
}
.hiz-upload__status--fout {
	color: #8c2f1d;
	font-weight: 600;
}

/* ------------------------------------------------------------------------ Studio-aanvraagblok */

.hiz-studio {
	--hiz-studio-gap: var(--hiz-space-5, 24px);
}
.hiz-form__progress {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px);
	margin: 0 0 var(--hiz-space-6, 32px);
	padding: 0;
	list-style: none;
}

/* Compacte stappenindicator: chips van 36 px (mobiel 40), radius pill (standaard §Componenten). */
.hiz-form__progress-item {
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-chip, 36px);
	padding: 0 var(--hiz-space-3, 12px);
	border: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-white, #fff);
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
	line-height: 1.3;
}

.hiz-form__progress-item.is-done {
	border-color: var(--hiz-color-fern, #4C56AE);
	color: var(--hiz-color-fern, #4C56AE);
}

.hiz-form__progress-item.is-current {
	border-color: var(--hiz-color-forest, #3B4497);
	background: var(--hiz-color-forest, #3B4497);
	color: var(--hiz-color-paper, #EBE5D3);
	font-weight: 600;
}

.hiz-form__progress-nr {
	font-family: var(--hiz-font-code, "Barlow Condensed", sans-serif);
	font-size: var(--hiz-text-sm, 0.875rem);
	letter-spacing: 0.08em;
}

/* Op 375 px past alleen het nummer; vanaf 480 px staat het label erbij. */
.hiz-form__progress-label {
	display: none;
}

@media (min-width: 480px) {
	.hiz-form__progress-label {
		display: block;
	}
}

.hiz-form__step {
	margin: 0 0 var(--hiz-studio-gap);
	padding: 0;
	border: 0;
}
/* Zonder JavaScript staan alle stappen onder elkaar, met een duidelijke scheiding. */
.hiz-form__step + .hiz-form__step {
	padding-top: var(--hiz-space-5, 24px);
	border-top: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
}
.hiz-studio--js .hiz-form__step + .hiz-form__step {
	padding-top: 0;
	border-top: 0;
}
.hiz-form__step-titel {
	margin: 0 0 var(--hiz-space-2, 8px);
	padding: 0;
	font-size: var(--hiz-h3, clamp(1.1875rem, 1.8vw, 1.375rem));
	font-weight: 700;
	line-height: 1.2;
}
.hiz-form__step-uitleg {
	margin: 0 0 var(--hiz-space-5, 24px);
	color: var(--hiz-color-muted, #545A7E);
}

.hiz-form__summary {
	margin: 0 0 var(--hiz-space-5, 24px);
	padding: var(--hiz-space-5, 24px);
	border-radius: var(--hiz-radius-medium, 24px);
	background: var(--hiz-color-mint, #D3D9EB);
}
.hiz-form__summary-titel {
	margin: 0 0 var(--hiz-space-3, 12px);
	font-size: var(--hiz-h4, 1.0625rem);
}
.hiz-form__summary-lijst {
	margin: 0;
}
.hiz-form__summary-regel {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: var(--hiz-space-2, 8px) 0;
	border-bottom: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
}
.hiz-form__summary-regel:last-child {
	border-bottom: 0;
}
.hiz-form__summary-regel dt {
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}
.hiz-form__summary-regel dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}
@media (min-width: 560px) {
	.hiz-form__summary-regel {
		grid-template-columns: 40% 1fr;
		gap: var(--hiz-space-4, 16px);
		align-items: baseline;
	}
}
.hiz-form__voorbehoud {
	margin: 0 0 var(--hiz-space-5, 24px);
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}
.hiz-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-3, 12px);
}
.hiz-form__actions .hiz-button {
	flex: 1 1 100%;
}
@media (min-width: 560px) {
	.hiz-form__actions .hiz-button {
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------------------------- Studio-pagina */

/*
 * Ronde 5: de kaartvormen van de Studio- en makerspagina (`.hiz-tiers`, `.hiz-doelgroepen`,
 * `.hiz-proces` en hun items) staan sinds de visuele standaard in assets/css/paginas.css,
 * samen met `.hiz-kaarten` van de winkelpagina. Eén kaartvorm, één set tokens; hier stond
 * dezelfde vorm met eigen pixelmaten (padding 20/24, radius 24/28) en dat liep uiteen.
 */

/* -------------------------------------------------------------------------- makers en Editions */

.hiz-grid--makers,
.hiz-grid--editions {
	grid-template-columns: 1fr;
}
@media (min-width: 560px) {
	.hiz-grid--makers,
	.hiz-grid--editions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 900px) {
	.hiz-grid--makers,
	.hiz-grid--editions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.hiz-card--maker .hiz-card__media,
.hiz-card--edition .hiz-card__media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--hiz-radius-medium, 24px);
	background: var(--hiz-color-sage, #D3D9EB);
	aspect-ratio: var(--hiz-ratio, 1/1);
}
.hiz-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hiz-card__media-leeg {
	display: block;
	width: 100%;
	height: 100%;
}
.hiz-card__tekst {
	margin: var(--hiz-space-2, 8px) 0 0;
	color: var(--hiz-color-muted, #545A7E);
}
.hiz-card__placeholder,
.hiz-placeholder {
	display: inline-block;
	margin-top: var(--hiz-space-2, 8px);
	padding: 2px 10px;
	border: 1px dashed var(--hiz-color-fern, #4C56AE);
	border-radius: var(--hiz-radius-pill, 999px);
	color: var(--hiz-color-fern, #4C56AE);
	font-size: var(--hiz-eyebrow-size, 0.75rem);
	letter-spacing: 0.04em;
	text-transform: lowercase;
}
.hiz-makers__groep + .hiz-makers__groep {
	margin-top: var(--hiz-space-7, 48px);
}
.hiz-makers__groep-titel {
	margin: 0 0 var(--hiz-space-4, 16px);
}
.hiz-card__status,
.hiz-card__looptijd,
.hiz-card__oplage,
.hiz-card__maker {
	margin: var(--hiz-space-1, 4px) 0 0;
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}
.hiz-card--edition-lopend .hiz-card__status {
	color: var(--hiz-color-fern, #4C56AE);
	font-weight: 700;
}

/* Profiel van één maker en detail van één Edition. */
.hiz-maker__meta,
.hiz-edition__meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-4, 16px);
	margin: 0 0 var(--hiz-space-5, 24px);
	padding: var(--hiz-space-5, 24px);
	border-radius: var(--hiz-radius-medium, 24px);
	background: var(--hiz-color-mint, #D3D9EB);
}
@media (min-width: 640px) {
	.hiz-maker__meta,
	.hiz-edition__meta {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.hiz-maker__meta dt,
.hiz-edition__meta dt {
	margin: 0 0 2px;
	color: var(--hiz-color-muted, #545A7E);
	font-family: "Barlow Condensed", ui-sans-serif, sans-serif;
	font-size: var(--hiz-text-sm, 0.875rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.hiz-maker__meta dd,
.hiz-edition__meta dd {
	margin: 0;
	font-weight: 600;
}
.hiz-maker__kanalen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.hiz-edition__producten {
	margin-top: var(--hiz-space-6, 32px);
}

/* Zichtbare focus, ook binnen mijn eigen componenten. */
.hiz-studio :focus-visible,
.hiz-maker-aanmelding :focus-visible,
.hiz-makers :focus-visible,
.hiz-editions :focus-visible {
	outline: 2px solid var(--hiz-color-forest, #3B4497);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.hiz-studio *,
	.hiz-maker-aanmelding * {
		transition: none !important;
	}
}


/* --------------------------------------------------- Ronde 3: bewaren, vertrouwen, terugspringen */

/* "Je invoer is bewaard" – klein en rustig; verdwijnt vanzelf. */
.hiz-form__bewaard {
	min-height: 1.5em; /* vaste hoogte: geen sprong als de melding verschijnt */
	margin: var(--hiz-space-2, 8px) 0 0;
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}

/* Feitelijke geruststellingen naast de verzendknop. Geen badges, geen keurmerken. */
.hiz-form__vertrouwen {
	margin: var(--hiz-space-5, 24px) 0 0;
	padding: 0;
	list-style: none;
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}
.hiz-form__vertrouwen li {
	position: relative;
	padding-left: var(--hiz-space-5, 24px);
	line-height: 1.5;
}
.hiz-form__vertrouwen li::before {
	/* Livegang (LQ): hier stond een kapot teken (U+0081 + "3", zichtbaar als "■3"); nu als
	   CSS-escape, zodat de codering het niet opnieuw kan breken. */
	content: "\2013"; /* en-streepje: rustiger dan een bolletje of een vinkje-icoon */
	position: absolute;
	left: 0;
}
.hiz-form__vertrouwen li + li {
	margin-top: var(--hiz-space-2, 8px);
}

/*
 * Vangnet voor het hidden-attribuut. `.hiz-button` en `.hiz-notice` zetten zelf een
 * display-waarde, en die wint van de standaard `[hidden] { display: none }` van de browser.
 * Daardoor bleven een verborgen knop en een lege foutsamenvatting gewoon staan.
 */
.hiz-studio [hidden],
.hiz-maker-aanmelding [hidden] {
	display: none !important;
}

/* Terug naar een eerdere stap vanuit de samenvatting. */
.hiz-form__summary-wijzig {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	margin: var(--hiz-space-3, 12px) 0 0;
	font-size: var(--hiz-text-sm, 0.875rem);
}

/* Met JavaScript is een afgeronde stap in de voortgangsbalk aanklikbaar. */
.hiz-studio--js .hiz-form__progress-item.is-done {
	cursor: pointer;
}