/*
 * Contact form (Contact Form 7) — themed to the KBH huisstijl.
 * Scoped to page content (.kbh-article .entry-content) so it only styles the
 * contact form, never editor chrome. All colours/spacing come from theme.json
 * tokens; the submit button mirrors the theme.json core/button element.
 */

.kbh-article .entry-content .wpcf7 {
	--kbh-form-blue: var(--wp--preset--color--koningsblauw);
	--kbh-form-red: var(--wp--preset--color--venetiaans-rood);
	--kbh-form-border: var(--wp--preset--color--zilvergrijs);
	margin-top: var(--wp--preset--spacing--40);
}

/* Labels: brand blue, bold, stacked above their field. */
.kbh-article .entry-content .wpcf7-form label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	font-weight: 700;
	color: var(--kbh-form-blue);
}

/*
 * Reserve a fixed row under every field for the inline validation tip so it
 * can render in place without pushing the rest of the form down. --kbh-tip-h
 * = one line of the (small) tip text; the tip is absolutely positioned into
 * this padding, so valid fields simply leave the row empty.
 */
.kbh-article .entry-content .wpcf7-form-control-wrap {
	--kbh-tip-h: 1.5rem;
	display: block;
	position: relative;
	margin-top: 0.35rem;
	padding-bottom: var(--kbh-tip-h);
}

/* Text inputs + textarea. */
.kbh-article .entry-content .wpcf7-form input.wpcf7-form-control,
.kbh-article .entry-content .wpcf7-form textarea.wpcf7-form-control {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	font: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--zwart);
	background: var(--wp--preset--color--wit);
	border: 1px solid var(--kbh-form-border);
	border-radius: var(--kbh-radius, 8px);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kbh-article .entry-content .wpcf7-form textarea.wpcf7-form-control {
	min-height: 10rem;
	resize: vertical;
}

.kbh-article .entry-content .wpcf7-form input.wpcf7-form-control::placeholder,
.kbh-article .entry-content .wpcf7-form textarea.wpcf7-form-control::placeholder {
	color: rgba(0, 0, 0, 0.4);
}

/* Focus ring in brand blue (koningsblauw = rgb(35, 56, 142)). */
.kbh-article .entry-content .wpcf7-form input.wpcf7-form-control:focus,
.kbh-article .entry-content .wpcf7-form textarea.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--kbh-form-blue);
	box-shadow: 0 0 0 3px rgba(35, 56, 142, 0.18);
}

/* Submit button — mirrors theme.json styles.elements.button. */
.kbh-article .entry-content .wpcf7-form input.wpcf7-submit {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	padding: 0.75rem 1.5rem;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--wit);
	background: var(--kbh-form-blue);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.kbh-article .entry-content .wpcf7-form input.wpcf7-submit:hover,
.kbh-article .entry-content .wpcf7-form input.wpcf7-submit:focus {
	background: var(--kbh-form-red);
	color: var(--wp--preset--color--wit);
}

.kbh-article .entry-content .wpcf7-form input.wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Invalid fields + inline validation tips in brand red. */
.kbh-article .entry-content .wpcf7-form input.wpcf7-not-valid,
.kbh-article .entry-content .wpcf7-form textarea.wpcf7-not-valid {
	border-color: var(--kbh-form-red);
}

.kbh-article .entry-content .wpcf7-form .wpcf7-not-valid-tip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	line-height: var(--kbh-tip-h);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--kbh-form-red);
}

/* Response banner: validation summary, send error, or success. */
.kbh-article .entry-content .wpcf7-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--kbh-form-border);
	border-radius: var(--kbh-radius, 8px);
	font-size: var(--wp--preset--font-size--small);
}

.kbh-article .entry-content .wpcf7-form.invalid .wpcf7-response-output,
.kbh-article .entry-content .wpcf7-form.unaccepted .wpcf7-response-output,
.kbh-article .entry-content .wpcf7-form.payment-required .wpcf7-response-output,
.kbh-article .entry-content .wpcf7-form.failed .wpcf7-response-output,
.kbh-article .entry-content .wpcf7-form.aborted .wpcf7-response-output,
.kbh-article .entry-content .wpcf7-form.spam .wpcf7-response-output {
	border-color: var(--kbh-form-red);
	color: var(--kbh-form-red);
}

.kbh-article .entry-content .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--kbh-form-blue);
	color: var(--kbh-form-blue);
}

/* Spinner sits next to the button. */
.kbh-article .entry-content .wpcf7-spinner {
	margin: 0 0 0 0.5rem;
}