/* ==========================================================================
   Formulieren
   Alleen het aanmeldblok voor de nieuwsbrief; verder heeft de site niets waar
   iemand iets in typt.
   ========================================================================== */

.aanmeld { margin-top: 1.25rem; max-width: 30rem; }

/* Het valstrikveld hoort onzichtbaar te zijn maar wél invulbaar te blijven —
   display:none slaan sommige robots juist over. Vandaar wegschuiven in plaats
   van verbergen. */
.valstrik {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aanmeld__regel { display: grid; gap: 0.35rem; margin-bottom: 0.9rem; }

.aanmeld__label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--inkt-zacht);
}

.aanmeld__veld {
	width: 100%;
	min-height: 2.875rem;
	padding: 0.6rem 0.9rem;
	font: inherit;
	font-size: 1rem;   /* onder 16px zoomt Safari op iOS het formulier in */
	color: var(--inkt);
	background: var(--vlak);
	border: 1.5px solid var(--rand-sterk);
	border-radius: var(--ronding-s);
}
.aanmeld__veld::placeholder { color: var(--inkt-zacht); opacity: 0.75; }
.aanmeld__veld:focus-visible { border-color: var(--groen); }

.aanmeld__akkoord {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.875rem;
	color: var(--inkt-zacht);
	margin-bottom: 1rem;
}
/* 24x24 is de ondergrens van WCAG 2.5.8; 20x20 haalt dat net niet. */
.aanmeld__akkoord input[type='checkbox'] {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.05rem 0 0;
	accent-color: var(--groen);
}
.aanmeld__akkoord label { cursor: pointer; }

.aanmeld__knop { margin: 0; }

/* --- Terugkoppeling na het aanmelden ------------------------------------- */

.melding {
	display: flex;
	gap: 0.6rem;
	padding: 0.8rem 1rem;
	border-radius: var(--ronding-s);
	border: 1px solid var(--rand);
	font-size: 0.9375rem;
	margin-bottom: 1rem;
	max-width: 33rem;
}
.melding--goed { border-left: 3px solid var(--groen); background: var(--groen-was); }
.melding--mis  { border-left: 3px solid var(--rood); background: var(--vlak); }