/*
 * CONTACT — template-contact.php + template-parts/contact-form.php (§4.5).
 * Reuses the shared `.site-header` (components.css §7). Field appearance
 * (border/transparent/placeholder) already lives in components.css — this
 * file is layout/width/spacing only. Mobile-first: base = mobile values,
 * `@media (min-width: 768px)` = desktop.
 */

.contact-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: var(--sp-sm); /* mobile side gutters, 20px */
	padding-right: var(--sp-sm);
}

@media (min-width: 768px) {
	.contact-page {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Menu→text gap: mobile 40px, desktop 60px. `.contact-page__intro` is only
   rendered when the page has content; when it's absent, the same gap
   falls back onto the social icons directly following the header so the
   spacing never collapses. */
.site-header + .contact-page__intro,
.site-header + .contact-page__social {
	margin-top: var(--sp-lg);
}

@media (min-width: 768px) {
	.site-header + .contact-page__intro,
	.site-header + .contact-page__social {
		margin-top: var(--sp-2xl);
	}
}

.contact-page__intro {
	text-align: center;
	/* Client feedback-01 (inspector measurement): constrain the intro text
	   wrapper. Harmless at mobile widths (already narrower than 600px). */
	max-width: 600px;
}

/* Text→social gap, both breakpoints: 30px (only applies when intro text
   is present — otherwise the header→social rule above already covers the
   gap once). */
.contact-page__intro + .contact-page__social {
	margin-top: var(--sp-md);
}

/* Social→form gap, both breakpoints: 30px. */
.contact-page__social + .contact-form {
	margin-top: var(--sp-md);
}

/* Form: fluid to the mobile gutter width, fixed 25rem on desktop. Flex
   column with the default `align-items: stretch` makes every field
   (including the submit button) match the form's own width — no need to
   size each field individually. */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
	width: var(--form-width);
	max-width: 100%;
}

.contact-form__notice {
	margin-bottom: var(--sp-sm);
}

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

.contact-form__notice--error {
	color: var(--c-badge-sold);
}

/* TRIMITE: full-width, accent bg, vertical padding overridden to sp-sm
   (the shared `.btn-accent` default is sp-xs) — horizontal padding and
   color/typography already come from `.btn-accent`/`.type-cta`. */
.contact-form__submit {
	width: 100%;
	--btn-pad-y: var(--sp-sm);
	/* Client feedback-01: override .type-cta's 22px desktop size on the
	   contact submit only (mobile's type-cta is already 1rem, so this is
	   a no-op there — both breakpoints end up at the requested 1rem). */
	font-size: 1rem;
}

/*
 * Inline validation errors injected by assets/js/contact.js as
 * `<p class="contact-form__field-error type-body">`, inserted as the next
 * sibling right after the invalid field — a direct child of `.contact-form`
 * (client feedback-01: these were easy to miss).
 */
.contact-form__field-error {
	font-size: 0.84rem; /* client-specified literal (inspector measurement) */
	color: var(--c-error);
	text-align: right;
	/* `.contact-form` is a flex column with `gap: var(--sp-sm)` (20px)
	   between EVERY child, including this dynamically-inserted message —
	   pull it back up closer to its field without touching the shared
	   flex gap used for every other field-to-field spacing. */
	margin-top: -1rem;
}