/* Contactformulier — Klussenbedrijf Marcel de Bodt
 *
 * Hoort bij mu-plugins/00-contactformulier.php. Alleen ingeladen op de pagina
 * waar de shortcode [itmb_contact] staat.
 *
 * De kleuren komen uit de --hs-variabelen die platform-assets/huisstijl.css
 * zet; dat bestand wordt gegenereerd uit het huisstijl-blok van
 * config/app.php. Elke var() heeft hier een terugvalwaarde die gelijk is aan
 * de huidige huisstijl, zodat het formulier ook leesbaar blijft als
 * huisstijl.css om wat voor reden dan ook niet meelaadt.
 *
 * Wijzig kleuren dus in config/app.php en draai platform-wp-muplugins; de
 * waarden hieronder zijn alleen het vangnet.
 *
 * Contrast (nagerekend 2026-08-18):
 *   tekst op wit           #333333 op #ffffff  12,63:1
 *   label op wit           #333333 op #ffffff  12,63:1
 *   'optioneel' op wit     #5f5f5f op #ffffff   6,39:1
 *   wit op de knop         #ffffff op #5c7d22   4,76:1
 *   wit op de knop (hover) #ffffff op #4d691d   6,26:1
 */

.itmb-contact {
	font-family: var(--hs-font, Montserrat, system-ui, sans-serif);
	color: var(--hs-tekst, #333333);
	max-width: 46rem;
}

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

.itmb-contact__melding {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	border-left: 4px solid var(--hs-rand, #e0dede);
	background: var(--hs-vlak, #f6f6f6);
	font-size: 0.95rem;
	line-height: 1.5;
}

.itmb-contact__melding a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

.itmb-contact__melding--goed {
	border-left-color: var(--hs-primair, #5c7d22);
}

/* Bewust geen fel rood: de kleur is één signaal naast de tekst, en de tekst
 * zegt zelf wat er mis is. Deze bruinrode tint haalt op #f6f6f6 een contrast
 * van 6,5:1. */
.itmb-contact__melding--fout {
	border-left-color: #a33b2a;
}

.itmb-contact__melding--let-op {
	border-left-color: #b07d1a;
}

.itmb-contact__verborgen {
	display: none;
}

/* --- velden ------------------------------------------------------------- */

.itmb-contact__form {
	display: grid;
	gap: 1rem;
}

/* Twee kolommen vanaf een halfbrede telefoon; daaronder onder elkaar. */
.itmb-contact__rij {
	display: grid;
	gap: 1rem;
}

@media (min-width: 34rem) {
	.itmb-contact__rij {
		grid-template-columns: 1fr 1fr;
	}
}

.itmb-contact__veld {
	display: block;
}

.itmb-contact__label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: var(--hs-font-kop, "Source Sans Pro", system-ui, sans-serif);
}

.itmb-contact__optioneel,
.itmb-contact__vereist {
	font-weight: 400;
	color: var(--hs-tekst-zacht, #5f5f5f);
}

.itmb-contact input[type="text"],
.itmb-contact input[type="email"],
.itmb-contact input[type="tel"],
.itmb-contact textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--hs-rand, #e0dede);
	border-radius: 4px;
	background: var(--hs-achtergrond, #ffffff);
	color: var(--hs-tekst, #333333);
	font: inherit;
	font-size: 1rem;   /* 16px: onder die maat zoomt iOS bij het focussen in */
}

.itmb-contact textarea {
	resize: vertical;
	min-height: 9rem;
}

.itmb-contact input:focus-visible,
.itmb-contact textarea:focus-visible,
.itmb-contact button:focus-visible {
	outline: 2px solid var(--hs-focus, #2563eb);
	outline-offset: 2px;
}

/* --- honeypot ------------------------------------------------------------
 * Niet display:none maar buiten beeld geschoven. Een deel van de bots kijkt
 * of een veld display:none heeft en slaat het dan juist over; verplaatsen
 * buiten het scherm laat het veld voor hen gewoon bestaan. aria-hidden en
 * tabindex="-1" staan in de HTML, dus schermlezers en toetsenbord komen er
 * niet langs. */
.itmb-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- knop en voettekst --------------------------------------------------- */

.itmb-contact__voet {
	margin: 0;
	font-size: 0.85rem;
	color: var(--hs-tekst-zacht, #5f5f5f);
}

.itmb-contact__voet a {
	color: inherit;
	text-decoration: underline;
}

.itmb-contact__knop {
	justify-self: start;
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: 4px;
	background: var(--hs-primair, #5c7d22);
	color: #ffffff;
	font-family: var(--hs-font-kop, "Source Sans Pro", system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.itmb-contact__knop:hover {
	background: var(--hs-primair-hover, #4d691d);
}

/* De uitgeschakelde staat moet ZICHTBAAR anders zijn. Hij is de normale staat
 * bij het laden van de pagina — pas als de handtekening uit /api/token binnen
 * is, gaat de knop aan. Een knop die er klikbaar uitziet maar niets doet, leest
 * als een kapotte site. */
.itmb-contact__knop:disabled {
	background: var(--hs-rand, #e0dede);
	color: var(--hs-tekst-zacht, #5f5f5f);
	cursor: not-allowed;
}