/**
 * Component: Contact Form — styles
 * Scoped to .contact-form (BEM root). All rules confined to this component —
 * no global/site-wide selectors. Site-wide tokens from style.css via var(--*).
 *
 * Layout: a full-width blue-grey band with a centered heading, intro line and
 * a 560px form column (Name, Email, Message, full-width navy submit). Sits
 * directly above the global site_footer.
 *
 * Motion: contact_form.js adds .is-visible on scroll-in; the inner block fades
 * and rises. prefers-reduced-motion renders the resting state immediately.
 */

/* ── Section root ─────────────────────────────────────────────── */
.contact-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--color-panel-bottom);
	color: var(--color-text-pri);
	padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3.5rem, 7.5vw, 7rem);
	padding-inline: var(--space-lg);
}

/* ── Inner block ──────────────────────────────────────────────── */
.contact-form__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 680px;
}

/* ── Head ─────────────────────────────────────────────────────── */
.contact-form__head {
	text-align: center;
}

.contact-form__heading {
	margin: 0;
	font-family: var(--font-title);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--color-text-pri);
}

.contact-form__subhead {
	margin: var(--space-xl) 0 0;
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	color: var(--color-text-sec);
}

/* ── Post-submit notice ───────────────────────────────────────── */
.contact-form__notice {
	width: 100%;
	max-width: 560px;
	margin-top: var(--space-xl);
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.contact-form__notice--success {
	color: var(--color-brand);
}

.contact-form__notice--error {
	color: #b3261e;
}

/* ── Form ─────────────────────────────────────────────────────── */
.contact-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl); /* 24px */
	width: 100%;
	max-width: 560px;
	margin-top: var(--space-2xl);
}

.contact-form__field {
	display: flex;
	flex-direction: column;
}

/* Double-class specificity (0,2,0) so these beat GeneratePress's own
   input[type="…"] / textarea form styling. */
.contact-form .contact-form__input,
.contact-form .contact-form__textarea {
	width: 100%;
	padding: 0 var(--space-xl);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md); /* 12px */
	font-family: var(--font-body);
	font-size: var(--text-body-lg);
	color: var(--color-text-pri);
}

.contact-form .contact-form__input {
	height: 50px;
}

.contact-form .contact-form__textarea {
	min-height: 112px;
	padding-block: var(--space-md);
	resize: vertical;
}

.contact-form .contact-form__input::placeholder,
.contact-form .contact-form__textarea::placeholder {
	color: var(--color-text-ter);
}

.contact-form .contact-form__input:focus-visible,
.contact-form .contact-form__textarea:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 1px;
	border-color: var(--color-brand);
}

.contact-form__submit {
	height: 50px;
	width: 100%;
	background: var(--color-brand);
	color: var(--color-text-inv);
	border: 0;
	border-radius: var(--radius-md); /* 12px */
	font-family: var(--font-body);
	font-size: var(--text-body-lg);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.contact-form__submit:hover,
.contact-form__submit:focus {
	background: var(--color-brand-shade);
	color: var(--color-text-inv);
}

.contact-form__submit:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}

/* ── Honeypot — off-screen, not display:none ──────────────────── */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Scroll-in reveal ─────────────────────────────────────────── */
.contact-form__inner {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.contact-form.is-visible .contact-form__inner {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.contact-form__inner {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.contact-form__submit {
		transition: none;
	}
}

/* ── Tablet ≤900px ────────────────────────────────────────────── */
@media (max-width: 900px) {
	.contact-form {
		padding-inline: var(--space-2xl);
	}
}

/* ── Mobile ≤480px ────────────────────────────────────────────── */
@media (max-width: 480px) {
	.contact-form {
		padding-inline: var(--space-lg);
	}

	.contact-form__subhead {
		margin-top: var(--space-lg);
	}

	.contact-form .contact-form__input,
	.contact-form .contact-form__textarea,
	.contact-form__submit {
		font-size: var(--text-body);
	}
}