/**
 * Nieuwsbriefformulier — eigen formulier, verving de Klaviyo-embeds (21-08-2026).
 *
 * Staat op twee plekken met heel verschillende breedtes: de homepage-sectie
 * (breed) en de sidebar (smal). Daarom geen vaste tweekolomsopzet maar flex met
 * wrap: naast elkaar als het past, onder elkaar als het niet past.
 *
 * Tokens uit global.css (--taw-brand, --taw-ink, --taw-line).
 *
 * @package voltvast
 */

.ta-nieuwsbrief {
	container-type: inline-size;
	/* auto-marges: op de brede homepage-sectie centreert dit het formulier onder de
	   tekst; in de smalle sidebar is de container smaller dan de max-width, dus
	   daar verandert er niets. */
	margin: 0 auto;
	max-width: 520px;
}

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

.ta-nieuwsbrief__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

form.ta-nieuwsbrief .ta-nieuwsbrief__input {
	flex: 1 1 200px;
	min-width: 0;
	box-sizing: border-box;
	height: 46px;
	margin: 0;
	padding: 0 16px;
	font-size: 15px;
	line-height: 46px;
	font-family: inherit;
	color: var(--taw-ink, #1f2937);
	background: #fff;
	border: 1px solid var(--taw-line, #e5e7eb) !important;
	border-radius: 8px !important;
	text-align: left;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ta-nieuwsbrief__input::placeholder {
	color: var(--taw-muted, #6b7280);
}

.ta-nieuwsbrief__input:focus {
	outline: none;
	border-color: var(--taw-brand, #FF6610);
	box-shadow: 0 0 0 3px rgba(255, 102, 16, .15);
}

form.ta-nieuwsbrief .ta-nieuwsbrief__knop {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 24px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--taw-brand, #FF6610);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s ease;
}

.ta-nieuwsbrief__knop:hover,
.ta-nieuwsbrief__knop:focus-visible {
	background: var(--taw-brand-dark, #e55a0e);
	outline: none;
}

.ta-nieuwsbrief__knop:disabled {
	opacity: .65;
	cursor: progress;
}

/* Honeypot: weg voor mensen, vindbaar voor bots. */
.ta-nieuwsbrief__hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ta-nieuwsbrief__melding {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--taw-muted, #6b7280);
	min-height: 1em;
}

.ta-nieuwsbrief__melding--fout {
	color: #b42318;
}

/* Bevestiging: het invulveld verdwijnt, hier blijft een groen kaartje staan. */
.ta-nieuwsbrief--klaar .ta-nieuwsbrief__melding {
	color: var(--taw-green, #15803d);
	background: var(--taw-green-bg, #f0fdf4);
	border: 1px solid var(--taw-green-line, #bbf7d0);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0;
}

/* In de smalle sidebar past niets naast elkaar. Container query en geen media
   query: de sidebar is smal terwijl het browservenster breed is, dus kijken naar
   de vensterbreedte hielp hier niet. */
@container (max-width: 480px) {
	/* Selector even specifiek als de basisregels hierboven; een container query
	   wint niet vanzelf van een specifiekere selector. */
	form.ta-nieuwsbrief .ta-nieuwsbrief__input,
	form.ta-nieuwsbrief .ta-nieuwsbrief__knop {
		flex: 1 1 100%;
	}
	/* Staat het veld op volle breedte met een knop eronder waarvan de tekst
	   gecentreerd is, dan oogt een linkse placeholder scheef. */
	form.ta-nieuwsbrief .ta-nieuwsbrief__input {
		text-align: center;
	}
}

/* De meldingsregel reserveert hoogte zodat de layout niet springt zodra er een
   melding komt. Zolang hij leeg is hoort die ruimte er niet te zijn. */
.ta-nieuwsbrief__melding:empty {
	min-height: 0;
	margin-top: 0;
}