/*
 * The contact and whitelisting request forms; functions.php loads this only
 * on pages that hold one. Field borders use haze, not line, because form
 * controls need 3:1 contrast against the night background.
 */

.pm-form {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.pm-form__field {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pm-form label,
.pm-form legend {
	font-weight: 500;
}

.pm-form legend {
	margin-bottom: 0.4rem;
	padding: 0;
}

.pm-form__hint {
	margin: 0;
	color: var(--pm-haze);
	font-size: var(--wp--preset--font-size--small);
}

.pm-form__error {
	color: var(--pm-magenta);
	font-size: var(--wp--preset--font-size--small);
}

.pm-form input:not([type="radio"]),
.pm-form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--pm-haze);
	border-radius: 0;
	background: var(--pm-deep);
	color: var(--pm-text);
	font: inherit;
}

/*
 * Dimmer than typed text and italic so an example never reads as a filled
 * field, yet 4.66:1 on deep. Browser defaults fall below 4.5:1.
 */
.pm-form ::placeholder {
	color: color-mix(in srgb, var(--pm-haze) 70%, var(--pm-deep));
	font-style: italic;
	opacity: 1;
}

.pm-form textarea:focus-visible {
	outline: 2px solid var(--pm-magenta);
	outline-offset: 3px;
}

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

.pm-form .pm-form__choice {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	font-weight: 400;
}

.pm-form input[type="radio"] {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--pm-violet);
}

/* Off screen, not display: none, so form-filling bots still see the field. */
.pm-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Google's floating badge covers page content at phone width. Its terms
 * allow hiding it when the form shows the reCAPTCHA notice instead.
 */
.grecaptcha-badge {
	visibility: hidden;
}

.pm-form a {
	color: var(--pm-violet);
}

.pm-form button {
	justify-self: start;
	cursor: pointer;
}

.pm-form-errors,
.pm-form-status {
	margin-block: 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid currentcolor;
}

.pm-form-errors {
	color: var(--pm-magenta);
}

.pm-form-errors h3 {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.pm-form-errors a {
	color: inherit;
}

.pm-form-status {
	color: var(--pm-aurora);
}