/**
 * Formulierblok — front-end styling.
 *
 * Net als bij het FAQ-blok loopt alles via CSS custom properties, zodat de huisstijl
 * per site aangepast kan worden zonder deze plugin aan te raken.
 */

.eqw-form {
	--eqw-form-gap: 1.25rem;

	--eqw-form-label-size: 0.9375rem;
	--eqw-form-label-weight: 600;
	--eqw-form-label-color: inherit;

	--eqw-form-input-bg: var(--wp--preset--color--base, #fff);
	--eqw-form-input-color: inherit;
	--eqw-form-input-border: #c9d0d8;
	--eqw-form-input-border-focus: var(--wp--preset--color--primary, #0b5fff);
	--eqw-form-input-radius: 6px;
	--eqw-form-input-padding: 0.625rem 0.75rem;
	--eqw-form-input-size: 1rem;

	--eqw-form-help-color: #5b6470;
	--eqw-form-help-size: 0.8125rem;

	--eqw-form-error-color: #b32d2e;
	--eqw-form-error-bg: #fcf0f1;

	--eqw-form-success-color: #0a6847;
	--eqw-form-success-bg: #edf7f2;

	--eqw-form-button-bg: var(--wp--preset--color--primary, #0b5fff);
	--eqw-form-button-color: #fff;
	--eqw-form-button-radius: 6px;
	--eqw-form-button-padding: 0.75rem 1.5rem;
	--eqw-form-button-weight: 600;

	--eqw-form-focus-width: 2px;
	--eqw-form-focus-offset: 2px;
}

.eqw-form__title {
	margin-block-end: 0.5rem;
}

.eqw-form__intro {
	margin-block-end: var(--eqw-form-gap);
	color: var(--eqw-form-help-color);
}

.eqw-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--eqw-form-gap);
}

/* --- Sectiekop ------------------------------------------------------------
   Een kop binnen het formulier, voor formulieren die zo lang zijn dat ze in
   secties uiteenvallen. Hij hoort ruimte BOVEN zich te hebben en niet eronder:
   de afstand tot het eerste veld van zijn sectie is de gewone veldafstand, want
   kop en veld horen bij elkaar. De eerste kop krijgt geen extra ruimte, anders
   staat er een gat tussen de intro en het formulier. */

.eqw-form__sectie {
	margin-block-start: 1.75rem;
}

.eqw-form__sectie:first-child {
	margin-block-start: 0;
}

.eqw-form__sectiekop {
	margin: 0;
	font-size: var(--eqw-form-sectiekop-size, 1.125rem);
	font-weight: 700;
	line-height: 1.3;
}

.eqw-form__sectie-uitleg {
	margin: 0.25rem 0 0;
	font-size: var(--eqw-form-help-size, 0.875rem);
	opacity: 0.85;
}

/* --- Velden -------------------------------------------------------------- */

.eqw-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.eqw-form__label {
	font-size: var(--eqw-form-label-size);
	font-weight: var(--eqw-form-label-weight);
	color: var(--eqw-form-label-color);
	line-height: 1.4;
}

.eqw-form__required {
	color: var(--eqw-form-error-color);
	margin-inline-start: 0.125rem;
}

.eqw-form__help {
	margin: 0;
	font-size: var(--eqw-form-help-size);
	color: var(--eqw-form-help-color);
	line-height: 1.5;
}

.eqw-form__field input[type="text"],
.eqw-form__field input[type="email"],
.eqw-form__field input[type="tel"],
.eqw-form__field input[type="url"],
.eqw-form__field input[type="number"],
.eqw-form__field input[type="date"],
.eqw-form__field textarea,
.eqw-form__field select {
	inline-size: 100%;
	box-sizing: border-box;
	padding: var(--eqw-form-input-padding);
	font-size: var(--eqw-form-input-size);
	font-family: inherit;
	line-height: 1.5;
	color: var(--eqw-form-input-color);
	background: var(--eqw-form-input-bg);
	border: 1px solid var(--eqw-form-input-border);
	border-radius: var(--eqw-form-input-radius);
	transition: border-color 0.15s ease;
}

.eqw-form__field textarea {
	resize: vertical;
	min-block-size: 8rem;
}

.eqw-form__field :is(input, textarea, select):focus-visible {
	outline: var(--eqw-form-focus-width) solid var(--eqw-form-input-border-focus);
	outline-offset: var(--eqw-form-focus-offset);
	border-color: var(--eqw-form-input-border-focus);
}

.eqw-form__field.has-error :is(input, textarea, select) {
	border-color: var(--eqw-form-error-color);
}

.eqw-form__error {
	margin: 0;
	font-size: var(--eqw-form-help-size);
	font-weight: 600;
	color: var(--eqw-form-error-color);
}

/* --- Keuzevelden --------------------------------------------------------- */

.eqw-form__group {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.eqw-form__choice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	line-height: 1.5;
}

.eqw-form__choice input {
	/* Uitlijnen met de eerste regel van het label, ook bij lange teksten. */
	margin-block-start: 0.25em;
	flex: 0 0 auto;
	/* WCAG 2.2 SC 2.5.8 vraagt 24 CSS-pixels. Een browservinkje is er 13,
	   en dat is op een toestemmingsveld precies het vinkje dat geraakt moet
	   worden. Gemeten op een testpagina: 13px, norm niet gehaald. */
	inline-size: 24px;
	block-size: 24px;
}

.eqw-form__choice label {
	cursor: pointer;
	/* Het label is het tapdoel samen met het vinkje: genoeg hoogte zodat de
	   hele regel raakbaar is, niet alleen het vierkantje.

	   GEEN display:flex hier. Een label bestaat uit losse tekstknopen met een
	   link ertussen; flex maakt van elke knoop een item en laat de spaties
	   ertussen weg. Resultaat: "Ik heb de" / "privacyverklaring" / "gelezen"
	   zonder spaties, en op drie regels. Gemeten op de contactpagina. */
	display: block;
	min-block-size: 24px;
	padding-block: 2px;
}

/* Een link in een toestemmingslabel is zelf ook een tapdoel. Zonder deze
   regel is hij zo hoog als de regelhoogte van de tekst (gemeten: 18px). */
.eqw-form__choice label a {
	display: inline-block;
	min-block-size: 24px;
	padding-block: 3px;
}

/* --- Honeypot ------------------------------------------------------------ */

/*
 * Niet display:none — sommige bots slaan verborgen velden over. Wel volledig
 * onbereikbaar voor mensen: buiten beeld, geen ruimte, niet aantikbaar.
 */
.eqw-form__trap {
	position: absolute !important;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	pointer-events: none;
}

/* --- Meldingen ----------------------------------------------------------- */

.eqw-form__notice {
	padding: 1rem 1.125rem;
	border-radius: var(--eqw-form-input-radius);
	margin-block: 0 var(--eqw-form-gap);
}

.eqw-form__notice.is-success {
	color: var(--eqw-form-success-color);
	background: var(--eqw-form-success-bg);
}

.eqw-form__notice.is-error {
	color: var(--eqw-form-error-color);
	background: var(--eqw-form-error-bg);
}

.eqw-form__notice.is-error p {
	margin-block: 0 0.5rem;
}

.eqw-form__notice.is-error ul {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.eqw-form__notice.is-error a {
	color: inherit;
}

.eqw-form__notice:focus-visible {
	outline: var(--eqw-form-focus-width) solid currentColor;
	outline-offset: var(--eqw-form-focus-offset);
}

/* --- Verzenden ----------------------------------------------------------- */

.eqw-form__legend {
	margin: 0;
	font-size: var(--eqw-form-help-size);
	color: var(--eqw-form-help-color);
}

.eqw-form__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.eqw-form__submit {
	padding: var(--eqw-form-button-padding);
	font-size: var(--eqw-form-input-size);
	font-family: inherit;
	font-weight: var(--eqw-form-button-weight);
	color: var(--eqw-form-button-color);
	background: var(--eqw-form-button-bg);
	border: 0;
	border-radius: var(--eqw-form-button-radius);
	cursor: pointer;
	transition: filter 0.15s ease;
}

.eqw-form__submit:hover {
	filter: brightness(1.08);
}

.eqw-form__submit:focus-visible {
	outline: var(--eqw-form-focus-width) solid var(--eqw-form-input-border-focus);
	outline-offset: var(--eqw-form-focus-offset);
}

.eqw-form__status {
	font-size: var(--eqw-form-help-size);
	color: var(--eqw-form-help-color);
}

@media (prefers-reduced-motion: reduce) {
	.eqw-form__submit,
	.eqw-form__field :is(input, textarea, select) {
		transition: none;
	}
}

/* --- Bestandsveld --------------------------------------------------------
   Het echte invoerveld blijft in het formulier staan, maar onzichtbaar: de
   knoptekst daarvan wordt door de browser getekend en volgt de browsertaal,
   niet die van de pagina. Wat je hier ziet is onze eigen knop met onze eigen
   tekst; het veld eronder doet het werk.

   Het veld wordt niet met display:none weggehaald - dan is het niet meer met
   het toetsenbord te bereiken. Het staat over de knop heen met opacity 0, dus
   een klik en een tab komen allebei op de juiste plek uit. */

:where(.eqw-form__file) {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

:where(.eqw-form__file-input) {
	position: absolute;
	inset: 0 auto 0 0;
	width: 1px;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

:where(.eqw-form__file-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid var(--eqw-form-input-border, #c9d0d8);
	background: var(--eqw-form-input-bg, #fff);
	border-radius: var(--eqw-form-input-radius, 6px);
	padding: 0.55rem 1rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

:where(.eqw-form__file-btn):hover {
	border-color: var(--eqw-form-input-border-focus, #0b5fff);
}

/* De ring hoort om de knop, want het veld zelf is onzichtbaar. */
.eqw-form__file-input:focus-visible ~ .eqw-form__file-btn {
	outline: var(--eqw-form-focus-width, 2px) solid var(--eqw-form-input-border-focus, #0b5fff);
	outline-offset: var(--eqw-form-focus-offset, 2px);
}

:where(.eqw-form__file-name) {
	font-size: var(--eqw-form-help-size, 0.8125rem);
	color: var(--eqw-form-help-color, #5b6470);
	overflow-wrap: anywhere;
}

:where(.eqw-form__file-name.is-gekozen) {
	color: inherit;
}


/* --- Stappen ------------------------------------------------------------- */

/*
 * Een formulier in stappen. De balk met nummers staat er ook zonder JavaScript;
 * hij is dan een inhoudsopgave van wat eronder staat. Pas als view.js de stappen
 * heeft gegroepeerd krijgt het formulier de klasse is-stapsgewijs, en pas dan
 * wordt er iets verborgen.
 */

.eqw-form__stappenbalk {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.eqw-form__stapnummer {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	font-weight: 700;
	opacity: 0.5;
}

.eqw-form__stapnummer.is-actief {
	opacity: 1;
	background-color: var(--eqw-form-stap-actief, currentColor);
	color: var(--eqw-form-stap-actief-tekst, #fff);
}

.eqw-form__stapnummer.is-gedaan {
	opacity: 0.8;
}

.eqw-form__stapnav {
	display: flex;
	gap: 0.75rem;
	margin-block-start: 1.5rem;
}

.eqw-form__stapknop {
	border: 1px solid currentColor;
	background: none;
	color: inherit;
	border-radius: var(--eqw-form-radius, 4px);
	padding: 0.75rem 1.5rem;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.eqw-form__stapknop.is-verder {
	background-color: var(--eqw-form-stap-verder, currentColor);
	color: var(--eqw-form-stap-verder-tekst, #fff);
}

/* Een eigen display-regel verslaat de [hidden]-regel van de browser, en dan
 * zet JavaScript het attribuut wel maar verandert er niets. Dat gebeurde met de
 * verzendknop: die stond op elke stap, ook al zei de code dat hij alleen op de
 * laatste hoort. Er stond hier een regel voor de stapknop en niet voor de
 * actiebalk — dezelfde val, één keer gezien en één keer gemist.
 *
 * Daarom nu één regel voor het hele formulier in plaats van per onderdeel. Wie
 * hier een nieuw onderdeel bijzet dat verborgen mag worden, hoeft er niet meer
 * aan te denken. */
.eqw-form [hidden],
.eqw-form__form [hidden] {
	display: none !important;
}

/* De sectiekop van de eerste stap heeft geen extra ruimte nodig; hij staat al
 * onder de nummerbalk. */
.is-stapsgewijs .eqw-form__stap .eqw-form__sectie:first-child {
	margin-block-start: 0;
}