/*
 * The Contact page message form.
 *
 * Every colour, space, radius, shadow and duration is a design token from
 * assets/css/design-tokens.css, so a [data-theme="dark"] remap of the role
 * tokens recolours the whole section with no rules here — the band, the panel,
 * the inputs and the notices all read --color-bg / --color-surface /
 * --color-text rather than a hardcoded light value. The button comes from the
 * shared .hcr-btn rules; the band width and rhythm from .hcr-section and
 * .hcr-container.
 *
 * Mobile-first: one column, no fixed widths, nothing wider than its container,
 * so there is no horizontal scroll at 320px. The two-column row for name and
 * email only appears from 40em up.
 *
 * No JavaScript styles anything here: the notices, the field errors and the
 * repopulated values are all server-rendered.
 */

.hcr-contact-form {
	background: var(--color-surface);
	border-top: var(--border-width) solid var(--color-border);
}

.hcr-contact-form *,
.hcr-contact-form *::before,
.hcr-contact-form *::after {
	box-sizing: border-box;
}

.hcr-contact-form__inner {
	max-width: var(--container-narrow);
}

/* --------------------------------------------------------------- the head --- */

.hcr-contact-form__head {
	margin-bottom: var(--space-8);
}

.hcr-contact-form__title {
	margin: 0 0 var(--space-3);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-tight);
}

.hcr-contact-form__intro {
	margin: 0;
	max-width: var(--measure);
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
}

/* ------------------------------------------------------------ the notices --- */

/*
 * The result region is always in the DOM so the announcement after the
 * admin-post redirect is reliable, so the box itself is painted only once there
 * is a message to show — an empty region takes no space and draws nothing.
 */
.hcr-contact-form__notice--success,
.hcr-contact-form__notice--error,
.hcr-contact-form__notice--warning,
.hcr-contact-form__notice--notice {
	margin-bottom: var(--space-6);
	padding: var(--space-4) var(--space-5);
	border-left: 4px solid currentColor;
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.hcr-contact-form__notice-text {
	margin: 0;
	font-weight: var(--weight-medium);
}

.hcr-contact-form__notice--success {
	background: rgba(22, 163, 74, 0.12);
	color: var(--color-success);
}

.hcr-contact-form__notice--error {
	background: rgba(220, 38, 38, 0.12);
	color: var(--color-error);
}

.hcr-contact-form__notice--warning {
	background: rgba(217, 119, 6, 0.14);
	color: var(--color-warning);
}

/* The listed problems, each a link to the field that caused it. */
.hcr-contact-form__problems {
	margin: var(--space-3) 0 0;
	padding-left: var(--space-5);
	color: var(--color-text);
}

.hcr-contact-form__problems li + li {
	margin-top: var(--space-2);
}

.hcr-contact-form__problems a {
	color: inherit;
	font-weight: var(--weight-medium);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--duration-fast) var(--ease-default);
}

.hcr-contact-form__problems a:hover,
.hcr-contact-form__problems a:focus-visible {
	color: var(--color-link-hover);
}

/* -------------------------------------------------------------- the panel --- */

.hcr-contact-form__form {
	padding: var(--space-6);
	background: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	color: var(--color-text);
}

.hcr-contact-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

/* ------------------------------------------------------------- the fields --- */

.hcr-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.hcr-contact-form__label {
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
}

.hcr-contact-form__required {
	color: var(--color-primary-600);
}

.hcr-contact-form__input {
	width: 100%;
	max-width: 100%;
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg);
	border: var(--border-width) solid var(--color-neutral-300);
	border-radius: var(--radius-md);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	transition:
		border-color var(--duration-fast) var(--ease-default),
		box-shadow var(--duration-fast) var(--ease-default);
}

.hcr-contact-form__input::placeholder {
	color: var(--color-text-muted);
}

.hcr-contact-form__input:hover {
	border-color: var(--color-neutral-400);
}

.hcr-contact-form__input:focus {
	border-color: var(--color-primary-600);
	box-shadow: 0 0 0 3px rgba(168, 72, 28, 0.18);
	outline: none;
}

.hcr-contact-form__input:focus-visible {
	outline: 2px solid var(--color-primary-600);
	outline-offset: 1px;
}

.hcr-contact-form__textarea {
	min-height: 11rem;
	resize: vertical;
}

.hcr-contact-form__field--invalid .hcr-contact-form__input {
	border-color: var(--color-error);
}

.hcr-contact-form__error {
	margin: 0;
	color: var(--color-error);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	line-height: var(--leading-snug);
}

.hcr-contact-form__hint {
	margin: 0;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

/* ------------------------------------------------------------ the honeypot --- */

/*
 * Taken out of the layout and out of the accessibility tree without
 * display:none, which some bots detect — and clipped to nothing so it never
 * occupies a pixel or widens the panel.
 */
.hcr-contact-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ the actions --- */

.hcr-contact-form__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.hcr-contact-form__submit {
	align-self: flex-start;
}

.hcr-contact-form__legal {
	margin: 0;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}

/* ------------------------------------------------------------- wider view --- */

@media (min-width: 40em) {
	.hcr-contact-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The subject and the message both want the full row. */
	.hcr-contact-form__field--subject,
	.hcr-contact-form__field--message {
		grid-column: 1 / -1;
	}

	.hcr-contact-form__form {
		padding: var(--space-8);
	}
}