/*
 * Contact Form 7 fixes, loaded after style.css.
 * Kept separate so wp-scss recompiling style.scss doesn't overwrite them.
 */

/* style.css forces the response box to display:block !important, so hide it until CF7 has a message to show */
.wpcf7 form.wpcf7-form .wpcf7-response-output:empty,
.wpcf7 form.wpcf7-form.init .wpcf7-response-output,
.wpcf7 form.wpcf7-form.resetting .wpcf7-response-output,
.wpcf7 form.wpcf7-form.submitting .wpcf7-response-output {
	display: none !important;
}

/* keep the spinner beside the submit button rather than on its own line */
.wpcf7 form.wpcf7-form p input[type="submit"] {
	display: inline-block;
	vertical-align: middle;
}

.wpcf7 form.wpcf7-form .wpcf7-spinner {
	vertical-align: middle;
	margin: 0 0 0 1em;
}

/* line the consent block up with the fields above */
.wpcf7 form.wpcf7-form .data-check p.terms {
	display: block;
	float: none;
	clear: both;
	padding: 10px 0;
}

/* checkbox spans the full form width, not the 50% column style.css gives every p on desktop */
.wpcf7 form.wpcf7-form .data-check .check p {
	width: 100%;
}

/*
 * Desktop: two-column grid instead of floats + an absolutely positioned message box,
 * so the message box stretches to exactly the height of the four fields beside it.
 * Scoped to .socCon (contact page, posts, archives, 404); the sidebar and modal forms keep their own layout.
 */
@media (min-width: 1024px) {
	.socCon .wpcf7 form.wpcf7-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 2em;
	}

	.socCon .wpcf7 form.wpcf7-form > * {
		grid-column: 1 / -1;
	}

	/* name, email, phone, company (child 1 is the hidden fieldset) */
	.socCon .wpcf7 form.wpcf7-form > p:nth-child(2),
	.socCon .wpcf7 form.wpcf7-form > p:nth-child(3),
	.socCon .wpcf7 form.wpcf7-form > p:nth-child(4),
	.socCon .wpcf7 form.wpcf7-form > p:nth-child(5) {
		grid-column: 1;
		width: auto;
		margin: 0;
		padding-right: 0;
	}

	.socCon .wpcf7 form.wpcf7-form > p.ptarget {
		grid-column: 2;
		grid-row: 1 / span 4;
		position: static;
		width: auto;
	}

	.socCon .wpcf7 form.wpcf7-form > p.ptarget .wpcf7-form-control-wrap {
		display: block;
		height: 100%;
	}

	/* fields each have a 0.5em bottom margin, so stop the textarea at the last field's border */
	.socCon .wpcf7 form.wpcf7-form > p.ptarget textarea {
		height: calc(100% - 0.5em);
		padding-bottom: 10px !important;
		resize: none;
	}
}