/*
 * Contact page. Enqueued only on page-templates/template-contact.php — see
 * inc/contact.php.
 */

.rsdf-contact__intro {
	max-width: 68ch;
	margin-bottom: 40px;
}

.rsdf-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

/*
 * Form first on mobile (it's what people came for), details alongside it on
 * desktop. Order is set in CSS rather than the markup so the source order stays
 * the sensible one for a screen reader: address and phone before a form, since
 * the fastest answer for many enquiries is just to ring.
 */
@media (min-width: 900px) {
	.rsdf-contact {
		grid-template-columns: 1fr 1.15fr;
		gap: 72px;
		align-items: start;
	}
}

.rsdf-contact h2 {
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	margin-bottom: 20px;
}

/* ── Details ─────────────────────────────────────────────────────────────── */

/*
 * Matches .rsdf-contact__formwrap's own padding (below) so "Get in touch"
 * lands on the same baseline as "Send us a message" — without this, the
 * details column sits flush with the grid's top edge while the form's
 * heading is pushed down by the white box's internal padding.
 */
@media (min-width: 900px) {
	.rsdf-contact__details {
		padding-top: clamp(24px, 4vw, 40px);
	}
}

.rsdf-contact__list {
	margin: 0;
	display: grid;
	gap: 24px;
}

.rsdf-contact__list dt {
	font-family: var(--rsdf-font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
	margin-bottom: 4px;
}

.rsdf-contact__list dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.rsdf-contact__list address {
	font-style: normal;
	margin: 0;
}

.rsdf-contact__directions {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.9rem;
	text-underline-offset: 3px;
}

.rsdf-contact__note {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(51, 59, 48, 0.15);
	font-size: 0.9rem;
	opacity: 0.85;
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.rsdf-contact__formwrap {
	background: var(--rsdf-white);
	border-radius: 22px;
	padding: clamp(24px, 4vw, 40px);
}

.rsdf-contact__field {
	margin: 0 0 20px;
}

.rsdf-contact__field label {
	display: block;
	font-family: var(--rsdf-font-ui);
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.rsdf-contact__field input,
.rsdf-contact__field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(51, 59, 48, 0.25);
	border-radius: 10px;
	font-family: var(--rsdf-font-ui);
	/* 16px minimum, or iOS Safari zooms the page on focus. */
	font-size: 1rem;
	background: var(--rsdf-cream);
	color: var(--rsdf-ink);
}

.rsdf-contact__field textarea {
	resize: vertical;
	min-height: 150px;
}

.rsdf-contact__field input:focus,
.rsdf-contact__field textarea:focus {
	border-color: var(--rsdf-green-dark);
}

.rsdf-contact__field small {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	opacity: 0.7;
}

.rsdf-contact__privacy {
	font-size: 0.8rem;
	opacity: 0.75;
	line-height: 1.5;
}

.rsdf-contact__notice {
	margin: 0 0 24px;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 0.9rem;
	border-left: 4px solid;
}

.rsdf-contact__notice--success {
	background: #eef4ea;
	border-left-color: var(--rsdf-green-mid);
}

.rsdf-contact__notice--error {
	background: #fdeeea;
	border-left-color: var(--rsdf-orange);
	color: #8a2b0d;
}

/*
 * Honeypot. Taken out of the layout entirely rather than display:none — some
 * bots specifically skip fields that are display:none, on the reasonable
 * assumption they're traps.
 */
.rsdf-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Map ─────────────────────────────────────────────────────────────────── */
/* The frame itself is styled in layout.css, since the homepage uses the same
   embed. Only the heading above it is contact-specific. */

.rsdf-contact-map__title {
	max-width: var(--rsdf-content-max-width);
	margin: 0 auto 24px;
	padding-inline: var(--rsdf-gutter);
	font-size: clamp(1.3rem, 2vw, 1.7rem);
}