/*
 * Contact page — page-contact.php, template-parts/contact-info.php and
 * template-parts/contact-map.php.
 *
 * Only this page's own bands are styled here. The container and the section
 * rhythm are the shared .hcr-container / .hcr-section (assets/css/cards.css),
 * the buttons the shared .hcr-btn rules (assets/css/cart.css) and the social
 * icon links the shared .hcr-social rules (assets/css/hours-social.css) — none
 * of those are repeated.
 *
 * Every colour, size, space, radius, shadow and duration is a design token, so
 * a [data-theme="dark"] remap of the role tokens recolours the whole page with
 * no extra rules here.
 *
 * Mobile-first: one column throughout, details above the map; the two sit side
 * by side from the tablet breakpoint (48em) up. Nothing is sized in fixed
 * pixels and nothing is sized against the viewport width, so there is no
 * horizontal scroll at 320px.
 */

.hcr-contact {
	background: var(--color-bg);
	color: var(--color-text);
}

/* --------------------------------------------------------------- the hero --- */

.hcr-contact__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--space-section);
	background: var(--color-surface-dark);
	color: var(--color-neutral-50);
}

.hcr-contact__hero-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hcr-contact__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--overlay-hero);
}

.hcr-contact__hero-inner {
	position: relative;
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.hcr-contact__eyebrow {
	margin: 0 0 var(--space-3);
	color: var(--color-accent-300);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
}

.hcr-contact__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--text-4xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tighter);
	line-height: var(--leading-tight);
	text-wrap: balance;
}

.hcr-contact__lede {
	max-width: var(--measure);
	margin: var(--space-5) 0 0;
	color: var(--color-neutral-200);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	line-height: var(--leading-normal);
}

/* ------------------------------------------------- details beside the map --- */

.hcr-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: start;
}

@media (min-width: 48em) {
	.hcr-contact__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--space-12);
	}
}

.hcr-contact__details-title {
	margin: 0 0 var(--space-6);
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-snug);
}

.hcr-contact__block {
	margin-block: 0 var(--space-8);
}

.hcr-contact__block:last-child {
	margin-block-end: 0;
}

.hcr-contact__label {
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
}

.hcr-contact__address,
.hcr-contact__value {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-style: normal;
	line-height: var(--leading-normal);
}

.hcr-contact__link {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--duration-fast) var(--ease-default);
}

.hcr-contact__link:hover,
.hcr-contact__link:focus-visible {
	color: var(--color-link-hover);
}

.hcr-contact__link:focus-visible,
.hcr-contact__map-embed:focus-visible {
	outline: 2px solid var(--color-primary-600);
	outline-offset: 2px;
}

/* ----------------------------------------------- the week, one row a day --- */

.hcr-contact__hours {
	margin: 0;
	padding: var(--space-2) var(--space-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.hcr-contact__hours-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	align-items: baseline;
	justify-content: space-between;
	padding-block: var(--space-3);
	border-block-end: var(--border-width) solid var(--color-border);
}

.hcr-contact__hours-row:last-child {
	border-block-end: 0;
}

.hcr-contact__hours-day {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
}

.hcr-contact__hours-time {
	margin: 0;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-variant-numeric: tabular-nums;
}

/* Today's row: the one highlighted line in the week. */
.hcr-contact__hours-row--today {
	margin-inline: calc(var(--space-4) * -1);
	padding-inline: var(--space-4);
	border-inline-start: 3px solid var(--color-primary-600);
	background: var(--color-primary-50);
	border-radius: var(--radius-sm);
}

.hcr-contact__hours-row--today .hcr-contact__hours-day,
.hcr-contact__hours-row--today .hcr-contact__hours-time {
	color: var(--color-primary-700);
	font-weight: var(--weight-semibold);
}

.hcr-contact__hours-today {
	display: inline-block;
	margin-inline-start: var(--space-2);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-full);
	background: var(--color-primary-600);
	color: var(--color-on-primary);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: var(--letter-wide);
	text-transform: uppercase;
}

.hcr-contact__hours-row--closed .hcr-contact__hours-time {
	font-style: italic;
}

.hcr-contact__note,
.hcr-contact__aside {
	max-width: var(--measure);
	margin: var(--space-4) 0 0;
	color: var(--color-text-muted);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
}

.hcr-contact__social {
	margin-block-start: var(--space-2);
}

/* ---------------------------------------------------------------- the map --- */

.hcr-contact__map-frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
}

@media (min-width: 48em) {
	.hcr-contact__map-frame {
		aspect-ratio: 16 / 11;
	}
}

.hcr-contact__map-embed {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.hcr-contact__action {
	margin: var(--space-5) 0 0;
}

/* ------------------------------------------------- the editable content --- */

.hcr-contact__content {
	background: var(--color-surface);
}

.hcr-contact__prose {
	max-width: var(--container-narrow);
	margin-inline: auto;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
}

.hcr-contact__prose h2,
.hcr-contact__prose h3 {
	color: var(--color-text);
	font-family: var(--font-heading);
	letter-spacing: var(--letter-tight);
	line-height: var(--leading-snug);
}

.hcr-contact__prose a {
	color: var(--color-link);
	text-underline-offset: 3px;
}