/**
 * Contactformulier — opmaak.
 *
 * Uitgangspunten:
 *  - Zelfde tokens als de rest van het thema (kleuren, radius). Geen eigen
 *    palet, want dan wijkt het formulier af van de pagina eromheen.
 *  - Geen vaste hoogtes: een label dat op mobiel twee regels wordt, duwt het
 *    veld naar beneden in plaats van eroverheen.
 *  - Foutmeldingen zijn tekst, geen rood randje alleen. Kleur is nooit de
 *    enige drager van betekenis (WCAG 1.4.1).
 */

.pcontact {
	--pc-radius: 10px;
	margin-top: 2rem;
}

.pcontact__form {
	display: grid;
	gap: 1.1rem;
}

.pcontact__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem;
}

@media (max-width: 640px) {
	.pcontact__rij {
		grid-template-columns: 1fr;
	}
}

.pcontact__veld {
	display: grid;
	gap: .38rem;
	min-width: 0;
}

.pcontact__veld label {
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--ink, #2f2a22);
}

.pcontact__verplicht {
	color: var(--terra, #c97857);
}

.pcontact__veld input,
.pcontact__veld textarea {
	width: 100%;
	padding: .8em 1em;
	font: inherit;
	font-size: .95rem;
	color: var(--ink, #2f2a22);
	background: #fff;
	border: 1px solid var(--line, #e2d6c3);
	border-radius: var(--pc-radius);
	/* Voorkomt dat iOS het veld van binnenuit zoomt bij focus. */
	min-height: 44px;
}

.pcontact__veld textarea {
	min-height: 150px;
	resize: vertical;
	line-height: 1.55;
}

.pcontact__veld input:focus,
.pcontact__veld textarea:focus {
	outline: 2px solid var(--green, #5a6d62);
	outline-offset: 1px;
	border-color: var(--green, #5a6d62);
}

/* Een ongeldig veld krijgt een rode rand ÉN de melding eronder. De rand alleen
   is voor kleurenblinden en voor schermlezers betekenisloos. */
.pcontact__veld input[aria-invalid="true"],
.pcontact__veld textarea[aria-invalid="true"] {
	border-color: #a63d2f;
	background: #fdf7f6;
}

.pcontact__fout {
	margin: 0;
	font-size: .82rem;
	color: #a63d2f;
}

.pcontact__hint {
	margin: 0;
	font-size: .82rem;
	color: var(--muted, #8a7f6d);
}

.pcontact__actie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 1.2rem;
	margin-top: .4rem;
}

.pcontact__knop {
	border: 0;
	cursor: pointer;
	font: inherit;
}

.pcontact__knop[disabled] {
	opacity: .62;
	cursor: progress;
}

.pcontact__privacy {
	margin: 0;
	font-size: .8rem;
	color: var(--muted, #8a7f6d);
	max-width: 34ch;
}

.pcontact__privacy a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Honeypot: uit het beeld, niet display:none. Een bot die op display let,
   slaat een verborgen veld over; een veld dat buiten het scherm staat niet. */
.pcontact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- meldingen ---------- */

.pcontact__melding {
	padding: 1.1rem 1.3rem;
	border-radius: var(--pc-radius);
	border: 1px solid var(--line, #e2d6c3);
	background: #fff;
}

.pcontact__melding--fout {
	border-color: #d9a79e;
	background: #fdf7f6;
}

.pcontact__melding--gelukt {
	border-color: #b9cbbf;
	background: #f4f8f5;
}

.pcontact__melding-titel {
	margin: 0 0 .3rem;
	font-weight: 600;
}

.pcontact__melding-tekst {
	margin: 0;
	font-size: .92rem;
	line-height: 1.6;
}

.pcontact__status {
	font-size: .88rem;
	min-height: 1.2em;
}

.pcontact__status:empty {
	min-height: 0;
}