/*
 * Contact Form 7 in the theme's look (module "form-bridge", inc/form-bridge.php). Loads after the base CSS and
 * after CF7's own stylesheet, which stays (it hides CF7's hidden fields and screen-reader text). Fields, labels,
 * buttons and the focus ring come from forms.css; this file adds the layout of .myco-form and CF7's states.
 */

.myco-form label {
	margin-bottom: var(--myco-space-md);
}

/* A field inside its label: on its own line, in the body text weight. */
.myco-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: var(--myco-space-xs);
	font-weight: 400;
}

/* Two fields side by side from 640px: <div class="myco-form__row"><label>…</label><label>…</label></div>. */
.myco-form__row {
	display: grid;
	column-gap: var(--myco-space-md);
}

.myco-form .wpcf7-list-item {
	margin: 0 0 var(--myco-space-xs);
	margin-inline-end: var(--myco-space-md);
}

.myco-form .wpcf7-list-item label {
	display: inline-flex;
	gap: var(--myco-space-xs);
	align-items: center;
	margin: 0;
	font-weight: 400;
}

.myco-form [aria-invalid="true"] {
	border-color: var(--myco-color-danger);
}

.myco-form .wpcf7-not-valid-tip {
	margin-top: var(--myco-space-2xs);
	color: var(--myco-color-danger);
	font-size: var(--myco-font-size-sm);
}

.myco-form .wpcf7-submit {
	margin-top: var(--myco-space-sm);
}

.myco-form .wpcf7-spinner {
	margin: var(--myco-space-sm) var(--myco-space-sm) 0;
	background-color: var(--myco-color-primary);
	vertical-align: middle;
}

/* The message under the form after sending: sent, or not sent (invalid, unaccepted, failed, aborted, spam). `form.`
   matches the specificity of CF7's state rules (.wpcf7 form.sent …), and this file loads after them. */
.wpcf7 form.myco-form .wpcf7-response-output {
	margin: var(--myco-space-md) 0 0;
	padding: var(--myco-space-sm) var(--myco-space-md);
	border: 1px solid var(--myco-color-danger);
	border-inline-start-width: 4px;
	border-radius: var(--myco-radius-md);
	background: var(--myco-color-surface);
	color: var(--myco-color-text);
}

.wpcf7 form.myco-form.sent .wpcf7-response-output {
	border-color: var(--myco-color-success);
}

@media (min-width: 640px) {
	.myco-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}