/* =========================================================================
   CONTACT FORM
   =========================================================================

   Loaded only on /contact-us/. Dark form controls are the one place a dark
   interface regularly fails: a field that does not look like a field, a
   placeholder dark enough to read as a filled value, a focus ring the same
   colour as the border. Each of those is answered below on purpose.
   ========================================================================= */

.form { padding: var(--sp-4); display: grid; gap: var(--sp-3); }

.form__head { display: grid; gap: var(--sp-2); }
.form__head h2 { font-size: var(--step-2); max-width: 20ch; }
.form__head p { color: var(--text-dim); max-width: 56ch; }
/* Underlined, not merely bronze. A link inside a paragraph that is distinguished by colour
   alone is unreadable as a link to anyone who cannot separate those two colours, and
   Lighthouse caught exactly this on the form's intro paragraph at 96. The same treatment
   `.prose a` already uses, so the two match. */
.form__head a, .form__meta a, .form__result a {
	color: var(--bronze);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(213, 154, 79, 0.5);
	transition: text-decoration-color var(--fast) var(--ease);
}

.form__head a:hover, .form__meta a:hover, .form__result a:hover {
	text-decoration-color: var(--bronze);
}

.form__form { display: grid; gap: var(--sp-3); }

.form__row { display: grid; gap: var(--sp-3); }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: 0.45rem; }

.field label,
.form__set legend {
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.req { color: var(--text-faint); letter-spacing: 0.04em; text-transform: none; }

.field input,
.field textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border-radius: 12px;
	/* A visible edge AND a lighter fill than the pane behind it. One or the other is how a
	   field on a dark background stops looking like a field. */
	border: 1px solid var(--edge-lit);
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
	font: inherit;
	font-size: var(--step-0);
	transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); opacity: 1; }

.field input:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.42); }

.field input:focus-visible,
.field textarea:focus-visible {
	outline: 2px solid var(--bronze);
	outline-offset: 2px;
	border-color: transparent;
	background: rgba(255, 255, 255, 0.07);
}

/* The browser's own "please fill this in" state, but only after a submit attempt — styling
   :invalid alone paints every empty required field red before anybody has typed. */
.form__form:has(:user-invalid) .field input:user-invalid,
.form__form:has(:user-invalid) .field textarea:user-invalid { border-color: #e4766b; }

/* --------------------------------------------------------------- services */

.form__set { border: 0; padding: 0; margin: 0; display: grid; gap: 0.8rem; }

.form__checks {
	display: grid;
	gap: 0.5rem 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.check { display: flex; align-items: center; gap: 0.6rem; }

.check input {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--bronze);
	cursor: pointer;
}

.check label {
	font-size: var(--step--1);
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
	cursor: pointer;
}

/* ------------------------------------------------------------------- foot */

.form__foot { display: grid; gap: var(--sp-2); justify-items: start; }
@media (min-width: 620px) { .form__foot { grid-template-columns: auto 1fr; align-items: center; } }

.form__meta { color: var(--text-faint); font-size: var(--step--1); }

/* The honeypot. Taken out of the layout and out of the tab order without `display: none`,
   which some scripts read as "do not fill this one". */
.form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ----------------------------------------------------------------- result */

.form__result { display: grid; gap: var(--sp-2); }
.form__result h2 { font-size: var(--step-2); max-width: 20ch; }
.form__result p { color: var(--text-dim); max-width: 56ch; }

.form__result--bad {
	padding: var(--sp-2) var(--sp-3);
	border-radius: 12px;
	border: 1px solid rgba(228, 118, 107, 0.5);
	background: rgba(228, 118, 107, 0.09);
	color: var(--text);
}

.form__result--ok h2 { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
	.field input, .field textarea { transition-duration: 1ms; }
}

/* ---------------------------------------------------------------- captcha */

.field--captcha .captcha { display: flex; align-items: center; gap: var(--sp-2); }

.captcha__img {
	display: block;
	flex: none;
	width: 168px;
	height: 58px;
	border-radius: 10px;
	border: 1px solid var(--edge);
	/* The image is drawn on the same near-black the form sits on, so without this it reads
	   as a hole in the panel rather than as a thing to look at. */
	background: rgba(255, 255, 255, 0.04);
}

/* Four characters, so the box is four characters wide. A full-width input next to a small
   image tells the reader to type a sentence. */
.field--captcha input {
	width: 7rem;
	min-width: 0;
	text-align: center;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	text-transform: uppercase;
	font-size: var(--step-1);
	font-variant-numeric: tabular-nums;
}

.field__help { font-size: var(--step--1); color: var(--text-faint); line-height: 1.45; }

@media (max-width: 420px) {
	/* Below this the image plus a 7rem box no longer fit on one line, and a flex row that
	   does not fit silently shrinks the image until the code is unreadable. */
	.field--captcha .captcha { flex-wrap: wrap; }
	.field--captcha input { width: 100%; }
}