/*
 * Het contactformulier. Kleuren, letters en maten komen uit het thema
 * (theme.json), zodat het formulier meekleurt als de huisstijl verandert.
 * Dezelfde opzet als het reserveringsformulier, zodat de twee formulieren
 * op de site niet uit twee verschillende huizen lijken te komen.
 */

.dhc-formulier {
	max-inline-size: 34rem;
}

.dhc-velden {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.dhc-veld {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin: 0;
}

.dhc-veld label {
	font-family: var(--wp--preset--font-family--kop, inherit);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--klein, .875rem);
}

.dhc-veld input,
.dhc-veld textarea {
	inline-size: 100%;
	padding: .65rem .8rem;
	font: inherit;
	color: var(--wp--preset--color--tekst, #212728);
	background: var(--wp--preset--color--wit, #fff);
	border: 1px solid var(--wp--preset--color--lijn, #e2ecee);
	border-radius: 6px;
	box-sizing: border-box;
}

.dhc-veld input:focus-visible,
.dhc-veld textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--accentgroen, #71bf45);
	outline-offset: 1px;
	border-color: transparent;
}

.dhc-knop {
	margin: .4rem 0 0;
}

/* Het lokkertje voor robots: uit beeld, maar niet display:none — dat slaan
   sommige invulrobots juist over. */
.dhc-honingpot {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.dhc-melding {
	padding: 1rem 1.15rem;
	margin-block-end: 1.5rem;
	border-radius: 8px;
	border-inline-start: 4px solid;
	font-size: var(--wp--preset--font-size--klein, .875rem);
}

.dhc-melding p { margin: 0 0 .4rem; }
.dhc-melding ul { margin: 0; padding-inline-start: 1.2rem; }
.dhc-melding :last-child { margin-block-end: 0; }

.dhc-melding--goed {
	background: var(--wp--preset--color--zacht, #f7fafb);
	border-inline-start-color: var(--wp--preset--color--accentgroen, #71bf45);
}

.dhc-melding--fout {
	background: #fdf3f3;
	border-inline-start-color: var(--wp--preset--color--accentrood, #d0322c);
}

/* De twee manieren om bereikbaar te zijn horen bij elkaar: één vraag,
   twee manieren om hem te beantwoorden. */
.dhc-contact {
	margin: 0;
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--lijn, #e2ecee);
	border-radius: 8px;
	background: var(--wp--preset--color--zacht, #f7fafb);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.dhc-contact legend {
	padding: 0 .4rem;
	font-family: var(--wp--preset--font-family--kop, inherit);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--klein, .875rem);
}

.dhc-uitleg {
	margin: 0 0 -.35rem;
	font-size: var(--wp--preset--font-size--klein, .875rem);
	color: var(--wp--preset--color--tekst-zacht, #5a6567);
}