/*
 * Contact form (Contact Us page). Shared form UI in _booking-kit.css.
 * Figma desktop/contactus/1 2991:76696: hero text/hero 480 (left), content
 * 2991:76707 = 480 column, 32 gap + divider between "Select Contact Type"
 * (header/M, 24 gap, button/M rows 16 apart) and "Want to Call Us?"
 * (header/M + body/M grey, 24 gap, outlined button with the phone number).
 * Mobile 2991:77080: 350 column, 24 below the hero band; headings header/S 20
 * (2991:77302).
 * The lavender band runs from the top of the page with the nav on it
 * (2991:76699, 0-332): with the light header (which overlaps the first section)
 * the band leaves room for the header itself.
 */
@import url("_booking-kit.css");

.contact { --bk-col: 480px; --bk-hero: 480px; }

.contact__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	max-width: var(--bk-col);
}

.contact__group {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contact__call {
	padding-top: 32px;
	border-top: 1px solid var(--c-border-light);
}

.contact__head { display: flex; flex-direction: column; gap: 8px; }
.contact__title { font: var(--f-header-m); color: var(--c-text-dark); }
.contact__text { font: var(--f-body-m); color: var(--c-text-grey); }

.contact__types { display: flex; flex-direction: column; gap: 16px; }

.contact__type { white-space: normal; text-align: center; }

.contact__phone { font: var(--f-body-m); }
.contact__phone .icon { --icon-size: 16px; }

/* Light header over the band (site.js LIGHT_TOP has contact_form). */
body:has(.site-header--light) .contact .bk-hero { padding-top: calc(var(--header-h) + 64px); }

@media (max-width: 767px) {
	.contact__title { font: var(--f-header-s); }
	.contact__text { font: var(--f-body-m); }

	body:has(.site-header--light) .contact .bk-hero { padding-top: calc(var(--header-h) + 16px); }
}