/**
 * The service-area layer: the Fraser Valley band on the home page and the
 * city pages behind it.
 *
 * Grounds, in page order: the oxblood page head the theme already paints,
 * an ink arrival panel, a cream reading field with the hours as an ink card
 * on it (the same move the reservation band makes), an ink question list,
 * and an oxblood close that bookends the head.
 *
 * Every cream ground restates its own text colours — ink headings, softened
 * ink for body copy, deep saffron for small gold type, ink hairlines — because
 * the dark ground rules will not adapt on their own. Nothing here leaves the
 * six brand colours: the softened tones are ink at an alpha, the way the base
 * stylesheet already writes them.
 */

/* Home band: the valley towns ------------------------------------------- */

body.bh .bh-locations {
	background: var(--bh-cream);
	color: rgba(22, 17, 15, 0.72);
	padding-block: 5.5rem;
}

body.bh .bh-locations :is(h1, h2, h3, .bh-display) {
	color: var(--bh-ink);
}

body.bh .bh-locations .bh-eyebrow {
	color: var(--bh-gold-deep);
}

body.bh .bh-locations em {
	color: var(--bh-terracotta);
	font-style: italic;
}

/* The same accent on the city pages, gold because those grounds are ink. */
body.bh :is(.bh-locarrive, .bh-locfaq) .bh-display em {
	color: var(--bh-gold);
	font-style: italic;
}

body.bh .bh-locations a {
	color: var(--bh-ink);
}

body.bh .bh-locations a:hover {
	color: var(--bh-terracotta);
}

.bh-locations .bh-heading {
	margin-bottom: 1.1rem;
}

.bh-locations__lede {
	max-width: 48rem;
	margin: 0 auto 2.8rem;
	text-align: center;
	font-size: 1.02rem;
}

.bh-locations__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.2rem;
}

.bh-loccard {
	display: block;
}

.bh-loccard__link {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	padding: 1.9rem 1.6rem 1.5rem;
	border: 1px solid rgba(22, 17, 15, 0.16);
	border-radius: 14px;
	background: rgba(22, 17, 15, 0.025);
	transition: var(--bh-ease);
}

.bh-loccard__link:hover {
	border-color: var(--bh-terracotta);
	background: rgba(22, 17, 15, 0.055);
	transform: translateY(-4px);
}

body.bh .bh-loccard__link:hover .bh-loccard__city {
	color: var(--bh-terracotta);
}

/* The home city is the address, not a destination to weigh up. */
.bh-loccard--home .bh-loccard__link {
	border-color: var(--bh-gold-soft);
	background: rgba(200, 138, 54, 0.09);
}

.bh-loccard--home .bh-loccard__drive {
	color: var(--bh-terracotta);
}

.bh-loccard--home .bh-loccard__index {
	color: rgba(110, 43, 46, 0.22);
}

.bh-loccard__index {
	position: absolute;
	top: 1.1rem;
	right: 1.3rem;
	font-family: var(--bh-display);
	font-size: 2rem;
	line-height: 1;
	color: rgba(22, 17, 15, 0.12);
}

body.bh .bh-loccard__city {
	font-family: var(--bh-display);
	font-size: 1.65rem;
	line-height: 1.1;
	color: var(--bh-ink);
}

.bh-loccard__title {
	font-size: 0.9rem;
	color: rgba(22, 17, 15, 0.6);
}

.bh-loccard__drive {
	margin-top: 0.35rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(22, 17, 15, 0.16);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bh-gold-deep);
}

.bh-loccard__serving {
	font-size: 0.92rem;
	color: rgba(22, 17, 15, 0.72);
}

.bh-loccard__cue {
	margin-top: auto;
	padding-top: 0.9rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bh-terracotta);
}

.bh-loccard__cue::after {
	content: ' \2192';
	transition: var(--bh-ease);
}

.bh-loccard__link:hover .bh-loccard__cue::after {
	margin-inline-start: 0.25rem;
}

.bh-locations__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 0.9rem;
	margin: 2.6rem 0 0;
	padding-top: 1.8rem;
	border-top: 1px solid rgba(22, 17, 15, 0.16);
	font-size: 0.94rem;
	text-align: center;
}

.bh-locations__foot .bh-lotus {
	width: 22px;
	height: 22px;
}

body.bh .bh-locations__directions {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bh-gold-deep);
	border-bottom: 1px solid var(--bh-gold-soft);
	padding-bottom: 2px;
}

body.bh .bh-locations__directions:hover {
	color: var(--bh-terracotta);
	border-bottom-color: var(--bh-terracotta);
}

/* City page: the head ----------------------------------------------------- */

.bh-lochead__note {
	max-width: 44rem;
	margin: 1.4rem auto 0;
	font-size: 0.98rem;
	color: var(--bh-cream);
	opacity: 0.85;
}

/* City page: the arrival panel -------------------------------------------- */

.bh-locarrive {
	background: var(--bh-ink);
	padding-block: 5rem;
}

.bh-locarrive__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 3.5rem;
	align-items: center;
}

.bh-locarrive .bh-heading {
	margin-bottom: 1.8rem;
}

.bh-locfacts {
	margin: 0;
	border-top: 1px solid var(--bh-border);
}

.bh-locfacts__row {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 0.6rem 1.4rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--bh-border);
}

.bh-locfacts__row dt {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bh-gold);
	padding-top: 0.2rem;
}

.bh-locfacts__row dd {
	margin: 0;
	font-size: 1.04rem;
	color: var(--bh-cream);
}

.bh-locarrive__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 2rem 0 0;
}

.bh-locarrive__media {
	margin: 0;
}

.bh-locarrive__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	border-radius: 16px;
	border: 1px solid var(--bh-border);
}

.bh-locarrive__media figcaption {
	margin-top: 0.9rem;
	font-size: 0.84rem;
	color: var(--bh-sand);
	opacity: 0.8;
}

/* City page: the reading field -------------------------------------------- */

body.bh .bh-locstory {
	background: var(--bh-cream);
	color: rgba(22, 17, 15, 0.72);
	padding-block: 5rem;
}

body.bh .bh-locstory :is(h1, h2, h3, h4, .bh-display) {
	color: var(--bh-ink);
}

body.bh .bh-locstory .bh-eyebrow {
	color: var(--bh-gold-deep);
}

body.bh .bh-locstory a {
	color: var(--bh-ink);
}

body.bh .bh-locstory a:hover {
	color: var(--bh-terracotta);
}

body.bh .bh-locstory .bh-prose a {
	color: var(--bh-gold-deep);
	border-bottom: 1px solid var(--bh-gold-soft);
}

body.bh .bh-locstory .bh-prose a:hover {
	color: var(--bh-terracotta);
	border-bottom-color: var(--bh-terracotta);
}

.bh-locstory__grid {
	display: grid;
	grid-template-columns: 1.45fr 0.85fr;
	gap: 3.5rem;
	align-items: start;
}

.bh-locstory__prose > p:first-child {
	font-size: 1.14rem;
	line-height: 1.75;
}

.bh-hoods {
	margin-top: 2.6rem;
	padding-top: 1.8rem;
	border-top: 1px solid rgba(22, 17, 15, 0.16);
}

body.bh .bh-hoods__title {
	font-family: var(--bh-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bh-gold-deep);
	margin: 0 0 1rem;
}

.bh-hoods__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.bh-hoods__chip {
	padding: 0.4rem 0.9rem;
	border: 1px solid rgba(22, 17, 15, 0.16);
	border-radius: 999px;
	background: rgba(22, 17, 15, 0.03);
	font-size: 0.86rem;
	color: rgba(22, 17, 15, 0.72);
}

/* The hours sit as an ink card on the paper field. */

body.bh .bh-locstory .bh-lochours {
	background: var(--bh-ink);
	color: var(--bh-sand);
	border-radius: 16px;
	padding: 2.2rem 1.9rem;
}

body.bh .bh-locstory .bh-lochours .bh-eyebrow {
	color: var(--bh-gold);
	margin-bottom: 0.6rem;
}

body.bh .bh-locstory .bh-lochours__title {
	font-family: var(--bh-display);
	font-size: 1.75rem;
	line-height: 1.15;
	color: var(--bh-cream);
	margin: 0 0 1.4rem;
}

.bh-lochours__list {
	margin: 0;
}

.bh-lochours__row {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.55rem 0;
}

.bh-lochours__row dt,
.bh-lochours__row dd {
	margin: 0;
	font-size: 0.94rem;
	white-space: nowrap;
}

.bh-lochours__row dd {
	flex: 1;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
}

body.bh .bh-locstory .bh-lochours__span {
	color: var(--bh-cream);
	font-variant-numeric: tabular-nums;
}

.bh-lochours__dots {
	flex: 1;
	border-bottom: 1px dashed var(--bh-border);
	transform: translateY(-4px);
}

.bh-lochours__note {
	margin: 1.4rem 0 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--bh-border);
	font-size: 0.86rem;
	opacity: 0.85;
}

/* City page: the four questions ------------------------------------------- */

.bh-locfaq {
	background: var(--bh-ink);
	padding-block: 5rem;
}

.bh-locfaq__list {
	max-width: 56rem;
	margin-inline: auto;
	border-top: 1px solid var(--bh-border);
}

.bh-locfaq__item {
	border-bottom: 1px solid var(--bh-border);
}

.bh-locfaq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.4rem;
	padding: 1.35rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--bh-display);
	font-size: 1.35rem;
	line-height: 1.25;
	color: var(--bh-cream);
	transition: var(--bh-ease);
}

.bh-locfaq__item summary::-webkit-details-marker {
	display: none;
}

.bh-locfaq__item summary:hover {
	color: var(--bh-gold);
}

.bh-locfaq__mark {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.bh-locfaq__mark::before,
.bh-locfaq__mark::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 16px;
	height: 1px;
	background: var(--bh-gold);
	transition: var(--bh-ease);
}

.bh-locfaq__mark::after {
	transform: rotate(90deg);
}

.bh-locfaq__item[open] .bh-locfaq__mark::after {
	transform: rotate(0deg);
}

.bh-locfaq__item > p {
	max-width: 62ch;
	margin: 0 0 1.3rem;
	color: var(--bh-sand);
}

.bh-locfaq__item > p:first-of-type {
	margin-top: -0.2rem;
}

/* City page: the close ---------------------------------------------------- */

body.bh .bh-loccta {
	background: var(--bh-oxblood);
	padding-block: 4.8rem;
	text-align: center;
}

.bh-loccta__inner .bh-lotus {
	width: 30px;
	height: 30px;
	margin: 0 auto 1.2rem;
}

body.bh .bh-loccta .bh-display {
	max-width: 26ch;
	margin-inline: auto;
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	color: var(--bh-cream);
}

.bh-loccta__line {
	margin: 1rem 0 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bh-cream);
	opacity: 0.8;
}

.bh-loccta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin: 1.8rem 0 0;
}

body.bh .bh-loccta .bh-btn--ghost {
	border-color: rgba(239, 231, 221, 0.4);
	color: var(--bh-cream);
}

body.bh .bh-loccta .bh-btn--ghost:hover {
	border-color: var(--bh-gold);
	color: var(--bh-gold);
}

/* Collapses ---------------------------------------------------------------- */

@media (max-width: 60em) {
	.bh-locarrive__grid,
	.bh-locstory__grid {
		grid-template-columns: 1fr;
		gap: 2.6rem;
	}

	.bh-locarrive__media img {
		aspect-ratio: 16 / 10;
	}

	.bh-locarrive,
	.bh-locstory,
	.bh-locfaq,
	body.bh .bh-locations {
		padding-block: 3.8rem;
	}
}

@media (max-width: 40em) {
	/*
	 * The hours card: with the label and the time both refusing to wrap, the
	 * card's min-content stretched the collapsed column past a 320px viewport
	 * and body.bh's overflow-x: clip cut its right edge off. Stacking the row
	 * puts the day on its own line and leaves the leader and the time on the
	 * next, so nothing has to shrink.
	 */
	body.bh .bh-locstory .bh-lochours {
		padding: 1.9rem 1.5rem;
	}

	.bh-lochours__row {
		flex-wrap: wrap;
		gap: 0.15rem 0.6rem;
	}

	.bh-lochours__row dt {
		flex: 1 0 100%;
	}

	.bh-locfacts__row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}

	.bh-locfacts__row dt {
		padding-top: 0;
	}

	.bh-locfaq__item summary {
		font-size: 1.15rem;
	}

	.bh-loccard__index {
		font-size: 1.6rem;
	}
}