/*
 * Revia Homes - the contact form's states (phase 6).
 *
 * home.css draws the card and its fields as the handoff has them (README 6.9).
 * This file adds what the prototype only switched on the client side: the
 * message above the form, a wrong field and the words under it, the consent
 * checkbox, the thank-you block in the form's place, and the honeypot nobody
 * may see. Loaded on every page, after the rest (inc/assets.php).
 *
 * Every value is a token (tokens.css, "The form's states").
 *
 * @package Revia_Homes
 */

/*
 * The honeypot (inc/contact/form-guard.php): off screen rather than
 * display:none - some form-filling robots skip what is not rendered. A person
 * cannot reach it either: tabindex -1, and aria-hidden on this box.
 */
.rh-form__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The form as a whole could not be accepted: one line above it. */
.rh-form__alert {
	border-left: var(--rh-form-error-rule) solid var(--rh-gold-light);
	padding: var(--rh-form-alert-pad);
	font-size: var(--rh-t-note);
	line-height: 1.6;
	color: var(--rh-strong-text);
}

/* A wrong field: the heavier gold underline, and the words under it. */
.rh-form__field--error .rh-form__input {
	border-bottom: var(--rh-form-error-rule) solid var(--rh-gold-light);
}

.rh-form__error {
	display: block;
	margin-top: var(--rh-form-error-top);
	font-size: var(--rh-t-form-error);
	line-height: 1.5;
	color: var(--rh-gold-light);
}

/* The consent: the box, then its sentence and the link, wrapping beside it. */
.rh-form__field--check {
	display: grid;
	grid-template-columns: var(--rh-form-check) 1fr;
	column-gap: var(--rh-form-check-gap);
	align-items: start;
}

.rh-form__check {
	width: var(--rh-form-check);
	height: var(--rh-form-check);
	margin: var(--rh-form-check-top) 0 0;
	accent-color: var(--rh-gold);
}

.rh-form__checklabel {
	font-size: var(--rh-t-form-check);
	line-height: 1.6;
	color: var(--rh-body-text);
}

.rh-form__checklabel a {
	color: var(--rh-link);
	text-decoration: underline;
	text-underline-offset: var(--rh-form-link-underline-gap);
}

.rh-form__checklabel a:hover,
.rh-form__checklabel a:focus-visible {
	color: var(--rh-gold-light);
}

.rh-form__field--check .rh-form__error {
	grid-column: 2;
}

/* After a send: the prototype's block, in the form's place (README 6.9). */
.rh-form__thanks {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--rh-form-thanks-gap);
	min-height: var(--rh-form-thanks-min-h);
}

.rh-form__thanks-title {
	font-family: var(--rh-font-display);
	font-size: var(--rh-t-form-thanks);
	font-weight: var(--rh-w-light);
	line-height: 1.3;
	color: var(--rh-strong-text);
}

.rh-form__thanks-text {
	font-size: var(--rh-t-form-thanks-text);
	line-height: 1.8;
	color: var(--rh-body-text);
}