/* Request form ([hero_aanvraag]). Colours come from the theme palette, with fallbacks. */

.hero-form {
	--hf-forest: var(--wp--preset--color--forest, #1e412b);
	--hf-leaf: var(--wp--preset--color--leaf, #7d9e4d);
	--hf-lime: var(--wp--preset--color--lime, #b7db79);
	--hf-mist: var(--wp--preset--color--mist, #eef3e6);
	--hf-base: var(--wp--preset--color--base, #fafbf7);
	--hf-ink: var(--wp--preset--color--ink, #17241b);
	--hf-quiet: #55655a;
	--hf-line: #cdd7c2;
	--hf-error: #b42318;
	--hf-radius: 10px;
	display: grid;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	margin-block: var(--wp--preset--spacing--50, 1.5rem);
}

/* Sections: white cards, like the cards elsewhere on the site. */
.hero-form__section {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--50, 1.5rem);
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--white, #fff);
	box-shadow: 0 1px 3px rgb(22 53 36 / 0.08);
}
/* float makes a legend an ordinary grid item, so it lines up with the fields below it. */
.hero-form legend {
	float: left;
	width: 100%;
	padding: 0;
}
.hero-form__section > legend {
	margin-bottom: 0.25rem;
	color: var(--hf-forest);
	font-size: var(--wp--preset--font-size--large, 1.2rem);
	font-weight: 700;
}

.hero-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}
@media (max-width: 599px) {
	.hero-form__row {
		grid-template-columns: 1fr;
	}
}

.hero-form__field {
	display: grid;
	gap: 0.4rem;
	align-content: start;
	min-width: 0;
}
.hero-form__field > label,
.hero-form__choices > legend {
	color: var(--hf-ink);
	font-weight: 600;
}
.hero-form__opt {
	color: var(--hf-quiet);
	font-size: 0.875em;
	font-weight: 400;
}
.hero-form__hint {
	margin: 0;
	color: var(--hf-quiet);
	font-size: 0.875rem;
}

.hero-form input:is([type="text"], [type="email"], [type="tel"], [type="number"]),
.hero-form select,
.hero-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--hf-line);
	border-radius: var(--hf-radius);
	background: var(--hf-base);
	color: var(--hf-ink);
	font: inherit;
}
.hero-form textarea {
	min-height: 8rem;
	resize: vertical;
}
.hero-form :is(input, select, textarea):focus-visible {
	border-color: var(--hf-forest);
	outline: 3px solid var(--hf-lime);
	outline-offset: 1px;
}
.hero-form [aria-invalid="true"],
.hero-form__choices[aria-invalid="true"] .hero-form__option {
	border-color: var(--hf-error);
}
.hero-form__error {
	margin: 0;
	color: var(--hf-error);
	font-size: 0.875rem;
	font-weight: 600;
}

/* Checkboxes and radios as tiles: easy to tap on a phone. */
.hero-form__choices {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.hero-form__choices > legend {
	margin-bottom: 0.1rem;
}
.hero-form__options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0.5rem;
}
.hero-form__option {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--hf-line);
	border-radius: var(--hf-radius);
	background: var(--hf-base);
	cursor: pointer;
	line-height: 1.3;
}
.hero-form__option:hover {
	border-color: var(--hf-leaf);
}
.hero-form__option:has(:checked) {
	border-color: var(--hf-leaf);
	background: var(--hf-mist);
	box-shadow: inset 0 0 0 1px var(--hf-leaf);
}
.hero-form__option input {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--hf-forest);
}

/* "Welk pakket of contract?" only when one of those is ticked, or when a link filled it in. */
.hero-form__keuze {
	display: none;
}
.hero-form__keuze.is-visible,
.hero-form:has(input[value="onderhoudscontract"]:checked, input[value="aanleg-pakket"]:checked) .hero-form__keuze {
	display: grid;
}

.hero-form input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	padding: 0.85rem;
	border: 1px dashed var(--hf-line);
	border-radius: var(--hf-radius);
	background: var(--hf-base);
	color: var(--hf-quiet);
	font: inherit;
	font-size: 0.9rem;
}
.hero-form input[type="file"]::file-selector-button {
	margin-right: 0.85rem;
	padding: 0.5rem 1rem;
	border: 2px solid var(--hf-forest);
	border-radius: 999px;
	background: transparent;
	color: var(--hf-forest);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.hero-form__summary {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--hf-error);
	border-radius: 6px;
	background: #fef3f2;
}
.hero-form__summary:focus {
	outline: 3px solid var(--hf-lime);
}
.hero-form__summary p {
	margin: 0 0 0.4rem;
	font-weight: 700;
}
.hero-form__summary ul {
	margin: 0;
	padding-left: 1.2rem;
}
.hero-form__summary a {
	color: var(--hf-error);
}

.hero-form__privacy {
	margin: 0;
	color: var(--hf-quiet);
	font-size: 0.875rem;
}
.hero-form__submit {
	justify-self: start;
	border: 0;
	cursor: pointer;
}
.hero-form__submit:disabled {
	cursor: progress;
	opacity: 0.6;
}

/* Honeypot: off-screen for people, still filled in by bots. */
.hero-form__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}