/* Inline form validation — assets/js/forms.js. */

.mg-field-err {
	display: block;
	margin-block-start: 6px;
	color: #b3261e;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.7;
}
.mg-field-err[hidden] { display: none; }
.mg-field-err::before { content: "⚠ "; font-weight: 400; }

:is(.mg-contact-form, .mg-news__form, .mg-form, .mg-course-form, form[data-mg-validate]) [aria-invalid="true"] {
	border-color: #b3261e !important;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .14) !important;
}

.mg-form-alert {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid rgba(179, 38, 30, .35);
	border-radius: 10px;
	background: #fdf1f0;
	color: #7a1a14;
	font-size: 14px;
	line-height: 1.8;
}

form.is-sending :is(button[type=submit], input[type=submit]) {
	cursor: progress;
	opacity: .72;
}

/* Error text on the permanently dark newsletter band. */
.mg-news .mg-field-err,
[data-theme="dark"] .mg-field-err { color: #ffb4ab; }
[data-theme="dark"] .mg-form-alert { background: rgba(179, 38, 30, .16); color: #ffdad6; border-color: rgba(255, 180, 171, .35); }

/*
 * iOS Safari zooms the whole page into any text field whose font is smaller
 * than 16px, and does not zoom back out. The audit found 14–15px fields in the
 * newsletter band, header search and contact forms on every page.
 */
@media (max-width: 720px) {
	body:not(.wp-admin) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]), select, textarea) {
		font-size: 16px !important;
	}
}
