/*
	Tour Manager website — the Contact page.

	Loaded by contact.html after site.css; values come from tokens.css and no
	raw colour appears below. Kept out of site.css so the home page's CSS
	budget (tests/website/test_site_integrity.py) stays untouched.
*/

/* ---------- Intro ---------- */

.hero--contact {
	padding-bottom: var(--site-space-8);
}

/* ---------- Layout ---------- */

.contact {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: var(--site-space-8);
	align-items: start;
}

.contact__title {
	margin-bottom: var(--site-space-6);
}

.contact__aside {
	display: grid;
	gap: var(--site-space-5);
}

.contact-card {
	display: grid;
	gap: var(--site-space-4);
	padding: var(--site-space-6);
	border: var(--site-border) solid var(--site-color-line);
	border-top: var(--site-rule-height) solid var(--site-color-gold);
	border-radius: var(--site-radius);
	background: var(--site-color-page);
}

.contact-card__title {
	font-size: var(--site-font-h3);
}

.contact-card p {
	color: var(--site-color-text-soft);
}

.contact-card .btn {
	justify-self: start;
}

/* ---------- Form ---------- */

.contact-form {
	display: grid;
	gap: var(--site-space-5);
}

.contact-form[hidden] {
	display: none;
}

.contact-form__field {
	display: grid;
	gap: var(--site-space-2);
}

.contact-form__label {
	font-size: var(--site-font-small);
	font-weight: var(--site-weight-heading);
	letter-spacing: var(--site-tracking-heading);
	text-transform: uppercase;
}

.contact-form__optional {
	color: var(--site-color-text-soft);
	font-weight: var(--site-weight-body);
	letter-spacing: 0;
	text-transform: none;
}

.contact-form__input {
	width: 100%;
	min-height: var(--site-tap);
	padding: var(--site-space-3) var(--site-space-4);
	border: var(--site-border) solid var(--site-color-text-soft);
	border-radius: var(--site-radius-sm);
	background: var(--site-color-surface);
	color: var(--site-color-text);
	font: inherit;
	font-size: max(1rem, var(--site-font-body));
}

.contact-form__input--area {
	resize: vertical;
	line-height: var(--site-leading-body);
}

.contact-form__input[aria-invalid='true'] {
	border-color: var(--site-color-error);
	border-width: var(--site-border-strong);
}

/* The honeypot: present for a form-filler, nowhere for a person. */
.contact-form__trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__error {
	color: var(--site-color-error);
	font-size: var(--site-font-small);
	font-weight: var(--site-weight-medium);
}

.contact-form__error:empty {
	display: none;
}

.contact-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--site-space-4);
}

.contact-form__privacy {
	color: var(--site-color-text-soft);
	font-size: var(--site-font-small);
}

.contact-form__done {
	padding: var(--site-space-5) var(--site-space-6);
	border-left: var(--site-rule-height) solid var(--site-color-gold);
	border-radius: var(--site-radius-sm);
	background: var(--site-color-page);
	font-size: var(--site-font-lead);
	font-weight: var(--site-weight-medium);
}

.contact-form__done:empty {
	display: none;
}

/* ---------- Phone layout ---------- */

@media (max-width: 47.4375em) {
	.contact {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--site-space-7);
	}
}