/*
 * Contact Form 7 compatibility.
 *
 * Contact Form 7 wraps every field in <span class="wpcf7-form-control-wrap"> and adds a
 * response box and validation tips that the static template never had. Nothing here
 * restyles the design - these rules only make the plugin's extra elements behave like
 * the original markup, and give its messages the same look as the rest of the site.
 *
 * Loaded after the plugin's own stylesheet, and only when the plugin is active.
 */

/* The wrapper is inline by default, which would break the grid columns the fields sit
   in. Making it a block keeps each input exactly where the template put it. */
.contact-form .wpcf7-form-control-wrap {
	display: block;
}

/* The template's inputs already carry their own bottom spacing via .mb-20 columns, so
   the wrapper must not add any of its own. */
.contact-form .wpcf7-form-control-wrap > input,
.contact-form .wpcf7-form-control-wrap > select,
.contact-form .wpcf7-form-control-wrap > textarea {
	margin-bottom: 0;
}

/* Validation message under a field. */
.contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	padding-left: 18px;
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: var(--fw-regular);
	line-height: 1.4;
	color: #dc3232;
}

/* Field that failed validation. */
.contact-form input.wpcf7-not-valid,
.contact-form select.wpcf7-not-valid,
.contact-form textarea.wpcf7-not-valid {
	border-color: rgba(220, 50, 50, 0.55);
}

/* The status box under the form, restyled to match the rounded design. */
.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 24px;
	border: 1px solid rgba(11, 114, 208, 0.2);
	border-radius: 24px;
	font-family: var(--font-primary);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--clr-body);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: rgba(11, 114, 208, 0.45);
	background-color: rgba(11, 114, 208, 0.06);
	color: var(--clr-heading);
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: rgba(220, 50, 50, 0.45);
	background-color: rgba(220, 50, 50, 0.05);
	color: #a32222;
}

/* The AJAX spinner sits next to the submit button. */
.contact-form .wpcf7-spinner {
	margin: 0 0 0 14px;
	vertical-align: middle;
}