/*
 * Formulieren buiten de winkel: het contactformulier.
 *
 * Zelfde vormtaal als de rest: hairlines in plaats van kaders, ruimte in plaats
 * van vlakken, en labels in kleinkapitaal boven het veld in plaats van ernaast.
 */

.contact-form {
	margin-top: var(--wce-space-5);
	display: grid;
	gap: var(--wce-space-4);
	max-width: 34rem;
}

/* Naam en e-mailadres passen samen op één regel. Dat scheelt een rij, en op de
   contactpagina is dat precies het verschil tussen wel en niet in één scherm. */
@media (min-width: 560px) {
	.contact-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wce-space-4);
	}

	.contact-form > * {
		grid-column: 1 / -1;
	}

	.contact-form__row--half {
		grid-column: auto;
	}
}

.contact-form__row {
	display: grid;
	gap: var(--wce-space-2);
}

.contact-form__label {
	font-size: var(--wce-text-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wce-color-ink-soft);
}

.contact-form__input {
	width: 100%;
	padding: 0.9em 1em;
	font-family: var(--wce-font-body);
	font-size: var(--wce-text-body);
	color: var(--wce-color-ink);
	background: var(--wce-color-paper);
	border: 1px solid var(--wce-color-line);
	border-radius: var(--wce-radius-frame);
	box-shadow: inset 0 1px 2px rgb(var(--wce-ink-rgb) / 0.04);
	transition: border-color var(--wce-duur-kort) var(--wce-ease),
	            box-shadow var(--wce-duur-kort) var(--wce-ease);
}

.contact-form__input:hover {
	border-color: var(--wce-color-ink-soft);
}

.contact-form__input:focus {
	outline: none;
	border-color: var(--wce-color-accent-ink);
	box-shadow: 0 0 0 3px var(--wce-color-accent-wash);
}

.contact-form__textarea {
	resize: vertical;
	min-height: 7rem;
	line-height: 1.6;
}

.contact-form__hint {
	margin: 0;
	font-size: var(--wce-text-small);
	line-height: 1.5;
	color: var(--wce-color-ink-soft);
}

.contact-form__submit {
	justify-self: start;
}

.contact-form__note {
	margin: 0;
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink-soft);
}

.contact-form__msg {
	margin: 0;
	padding: var(--wce-space-3) var(--wce-space-4);
	background: var(--wce-color-surface);
	border-left: 3px solid #8A3B3B;
	font-size: var(--wce-text-small);
}

/* Honeypot: onzichtbaar voor mensen, invulbaar voor bots. */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Na verzenden: bevestiging in plaats van een leeg formulier. */
.contact-form--klaar {
	padding: var(--wce-space-5);
	background: var(--wce-color-surface);
	border-left: 3px solid var(--wce-color-accent);
}

.contact-form__done {
	margin: 0 0 var(--wce-space-2);
	font-family: var(--wce-font-display);
	font-size: var(--wce-text-h3);
	line-height: 1.2;
}

/* --- Mobiel ---
 * Velden op volle breedte en hoog genoeg om met een duim te raken. De 16 pixels
 * op invoervelden zijn geen smaak: bij een kleinere maat zoomt iOS Safari
 * automatisch in zodra je in het veld tikt, en dan springt je hele layout.
 */
@media (max-width: 600px) {
	.contact-form {
		max-width: none;
		gap: var(--wce-space-3);
	}

	.contact-form__input {
		font-size: 16px;
		padding: 0.95em 0.9em;
	}

	.contact-form__submit {
		justify-self: stretch;
		width: 100%;
	}
}