/* ============================================================
   The stored-first forms' shared look (inc/contact.php): the Contact
   page's form (template-parts/components/contact-form.php, laid out by
   contact-page.css) and a guided day's enquiry (template-parts/guiding/
   enquiry.php, laid out by guiding-enquiry.css). Loaded on the Contact
   page and the guided days only (inc/enqueue.php).

   - Intro 16px; labels 14px SemiBold Navy with a Navy "*" on the
     required ones, 8px above 48px fields; 20px from a field to the next
     label; White fields with an 8px radius (outline Grey Dark, not the
     drawn Grey Light: fields need 3:1), 16px in, placeholders 14px Grey
     Dark; the message 150px tall; a 20px checkbox; the "Send" button
     from the global system.
   - States not designed (proposals): errors under their fields in red
     with a red outline, a summary above the form, the thank-you in place
     of the form.
   ============================================================ */

.contact-form__intro {
	margin: 0 0 23px;
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: 1.5;
}

.contact-form__alert {
	margin-bottom: 20px;
	padding: 12px 16px;
	border-left: 4px solid var(--color-error);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	line-height: 1.5;
}

.contact-form__alert:focus {
	outline: none;
}

.contact-form__alert:focus-visible {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 2px;
}

.contact-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__field {
	margin-bottom: 20px;
}

.contact-form__label {
	display: block;
	margin-bottom: 8px;
	color: var(--color-text);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: 1.5;
}

.contact-form__input {
	display: block;
	width: 100%;
	height: var(--field-height);
	margin: 0;
	padding: 0 15px; /* 16px in with the border */
	border: var(--border-hairline) solid var(--color-field-border);
	border-radius: var(--field-radius);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-family: inherit;
	font-size: var(--fs-body);
	line-height: 1.5;
	appearance: none;
	transition: border-color var(--transition);
}

.contact-form__input::placeholder {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	opacity: 1;
}

.contact-form__input--area {
	height: 150px;
	min-height: 96px;
	padding-block: 14px;
	resize: vertical;
}

@media (hover: hover) {
	.contact-form__input:hover {
		border-color: var(--color-control-hover);
	}
}

.contact-form__input:focus-visible {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 2px;
}

.contact-form__input[aria-invalid="true"] {
	border-width: 2px;
	border-color: var(--color-error);
}

.contact-form__error {
	margin: 6px 0 0;
	color: var(--color-error);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	line-height: 1.4;
}

/* The tick and its line: 24px under the message, 25 over the button. */
.contact-form__field--consent {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 0 12px;
	align-items: center;
	margin: 24px 0 25px;
}

.contact-form__field--consent .contact-form__error {
	grid-column: 2;
}

.contact-form__check {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--color-control-checked);
	cursor: pointer;
}

.contact-form__check:focus-visible {
	outline: 2px solid var(--color-focus-light);
	outline-offset: 2px;
}

.contact-form__check[aria-invalid="true"] {
	outline: 2px solid var(--color-error);
	outline-offset: 2px;
}

.contact-form__consent {
	color: var(--color-text);
	font-size: var(--fs-small);
	line-height: 1.5;
	cursor: pointer;
}

.contact-form__consent a {
	color: var(--color-link-accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.contact-form__submit:disabled {
	cursor: progress;
	opacity: 0.7;
}

/* The thank-you, in place of the form. */
.contact-form__done-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	color: var(--color-heading);
	font-size: var(--fs-card-title);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.contact-form__done-title:focus {
	outline: none;
}

.contact-form__tick {
	flex: none;
	color: var(--color-heading);
}

.contact-form__done-text {
	margin: 0;
	color: var(--color-text);
	line-height: 1.6;
}

/* ---------- Windows High Contrast ---------- */

@media (forced-colors: active) {
	.contact-form__alert {
		border-left-color: var(--color-forced-line);
	}

	.contact-form__check {
		appearance: auto;
	}

	/* The thank-you's tick keeps the page's text colour (a Navy tick on a
	   dark system background all but disappears). */
	.contact-form__tick {
		color: var(--color-forced-line);
	}
}