/* ============================================================
   The Contact page (template-contact.php): the "Contact" designs,
   desktop 1440 and mobile 402 (docs/notes/nav-and-pages.md 8 and 9).
   The hero is the shared inner-page hero (page-hero.css). Loaded on
   the Contact page only (inc/enqueue.php).

   - Cream section, the shared section padding (the files have about
     80 above and below). Phones: the form, then the details (DOM
     order). From 1024px two columns: the details left, the form right
     at the drawn 656px (41rem), 64px apart.
   - Details: H2 Koulen 36 Secondary Navy; four rows on a 64px rhythm
     (label 12px SemiBold Grey Dark in capitals, value 16px Navy, a 20px
     outline icon centred on the pair, the text 32px in); "Follow us" in
     the eyebrow style; 40px Navy circles with White glyphs, 16px apart.
     Icons Dark Orange everywhere (the mobile file's; the desktop file's
     Light Orange is under the 3:1 icons need on Cream). The email and
     phone are links (not drawn as such): Navy, underlined on hover.
   - Form: the shared form styles (contact-form.css: labels, 48px
     fields, errors, the thank-you), with the full-width "Send message"
     button.
   - States not designed (proposals): a social circle's hover deepens to
     orange (the form's states: contact-form.css).
   ============================================================ */

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

.contact-page__grid {
	display: grid;
	gap: 56px;
}

@media (min-width: 1024px) {
	.contact-page__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 41rem);
		gap: 64px;
		align-items: start;
	}

	/* The details on the left, as drawn (the form comes first in the
	   DOM, as on phones). */
	.contact-page__details {
		grid-row: 1;
		grid-column: 1;
	}

	.contact-page__form {
		grid-column: 2;
	}
}

/* ---------- Other ways to reach us ---------- */

.contact-page__title {
	margin: 0 0 32px;
	color: var(--contact-heading);
	font-size: var(--fs-h3-static);
	line-height: 1.1;
}

.contact-page__list {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tablets (not designed): the four rows two across under the form. */
@media (min-width: 768px) and (max-width: 1023px) {
	.contact-page__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 32px;
	}
}

/* The icon centred on its label and value; the text 32px in. */
.contact-page__item {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: center;
}

.contact-page__icon {
	grid-row: 1 / span 2;
	color: var(--contact-icon);
}

.contact-page__label {
	color: var(--color-text-muted);
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	text-transform: uppercase;
}

.contact-page__value {
	grid-column: 2;
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.contact-page__value--link {
	text-decoration: none;
}

@media (hover: hover) {
	.contact-page__value--link:hover {
		text-decoration: underline;
		text-underline-offset: 0.18em;
	}
}

.contact-page__value--link:focus-visible {
	outline-color: var(--color-focus-light);
}

.contact-page__follow {
	margin: 31px 0 16px;
	color: var(--color-accent-text-light);
	font-size: var(--fs-label);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-eyebrow);
	line-height: 1.5;
	text-transform: uppercase;
}

.contact-page__socials {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-page__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--contact-social-bg);
	color: var(--contact-social-fg);
	transition: background-color var(--transition);
}

.contact-page__social:focus-visible {
	background-color: var(--contact-social-bg-hover);
	outline-color: var(--color-focus-light);
}

@media (hover: hover) {
	.contact-page__social:hover {
		background-color: var(--contact-social-bg-hover);
	}
}

/* ---------- Windows High Contrast ---------- */

@media (forced-colors: active) {
	.contact-page__social {
		border: 1px solid;
	}
}