/**
 * Hero location cards + "Book an appointment" slide-out.
 *
 * Shipped as a standalone stylesheet (enqueued in Setup::enqueue_assets
 * after the compiled bundle) rather than a src/scss partial, because this
 * host has no Node/npm to run wp-scripts build — so the webpack bundle
 * can't be recompiled here. Uses the same theme.json design tokens
 * (--wp--preset--color--*, --wp--preset--font-family--*) as the rest of
 * the theme so it stays visually consistent.
 */

/* ---------- Hero: one card per location (A2) ---------- */
.section-hero__locations {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
	max-width: 620px;
}

.hero-loc-card {
	flex: 1 1 240px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	background: var(--wp--preset--color--surface, #fff);
	border-radius: 16px;
	padding: 1.25rem;
	box-shadow: 0 18px 40px -24px rgba(20, 34, 51, 0.55);
}

.hero-loc-card__name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--body, Inter, sans-serif);
	font-size: var(--wp--preset--font-size--paragraph-l, 1.0625rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--action, #1e3a5f);
}

.hero-loc-card__name svg {
	flex: none;
	color: var(--wp--preset--color--accent, #487c46);
}

.hero-loc-card__address {
	margin: 0 0 0.85rem;
	font-size: var(--wp--preset--font-size--paragraph-s, 0.875rem);
	line-height: 1.45;
	color: var(--wp--preset--color--text-muted, #505f73);
}

.hero-loc-card__actions {
	display: flex;
	gap: 0.5rem;
	margin-top: auto;
}

.hero-loc-card__call {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.7rem 0.95rem;
	border: 1.5px solid var(--wp--preset--color--border, #d9d9d9);
	border-radius: var(--button-radius, 10px);
	font-size: var(--wp--preset--font-size--paragraph-s, 0.875rem);
	font-weight: 600;
	color: var(--wp--preset--color--text, #142233);
	background: var(--wp--preset--color--surface, #fff);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.hero-loc-card__call svg { flex: none; }

.hero-loc-card__call:hover,
.hero-loc-card__call:focus-visible {
	border-color: var(--wp--preset--color--action, #1e3a5f);
	color: var(--wp--preset--color--action, #1e3a5f);
}

.hero-loc-card__book {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1rem;
	border-radius: var(--button-radius, 10px);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--paragraph-m, 1rem);
	color: #fff;
	background: var(--wp--preset--color--action, #1e3a5f);
	text-decoration: none;
	transition: background-color 0.15s ease;
	white-space: nowrap;
}

.hero-loc-card__book:hover,
.hero-loc-card__book:focus-visible {
	background: var(--wp--preset--color--action-hover, #2c5282);
	color: #fff;
}

@media (max-width: 600px) {
	.section-hero__locations { flex-direction: column; }
	.hero-loc-card { flex: 0 0 auto; }
}

/* Keep the Call + Book online row inside the card at every width. The
   Call button shows a short "Call" label (the full number lives in the
   slide-out), and both buttons may shrink (min-width:0) so a long label
   can never push the row past the card edge; they wrap only as a last
   resort. */
.hero-loc-card__actions {
	flex-wrap: wrap;
}

.hero-loc-card__call {
	flex: 0 1 auto;
	min-width: 0;
}

.hero-loc-card__book {
	min-width: 0;
}

/* ---------- "Book an appointment" slide-out (B2) ---------- */
/* Mirrors .nav-drawer: right-edge fixed panel over .nav-drawer-overlay
   (z-index 200). Sits one layer above the mobile nav drawer (201) so a
   race between the two never leaves the menu painted on top; the JS keeps
   them mutually exclusive regardless. */
.booking-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(430px, 100%);
	z-index: 202;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.5rem;
	overflow-y: auto;
	background: var(--wp--preset--color--bg, #fff);
	box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.5);
}

.booking-drawer[hidden] { display: none; }

.booking-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.booking-drawer__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, "DM Serif Display", Georgia, serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-3, 1.75rem);
	color: var(--wp--preset--color--text, #142233);
}

.booking-drawer__close {
	flex: none;
	display: inline-flex;
	padding: 0.35rem;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--text-muted, #505f73);
	cursor: pointer;
	border-radius: 8px;
}

.booking-drawer__close:hover,
.booking-drawer__close:focus-visible {
	color: var(--wp--preset--color--text, #142233);
	background: var(--wp--preset--color--surface-alt, #f3f7fc);
}

.booking-drawer__sub {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--paragraph-s, 0.875rem);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted, #505f73);
}

.booking-loc {
	border: 1px solid var(--wp--preset--color--border, #d9d9d9);
	border-radius: 14px;
	padding: 1rem;
	margin-bottom: 0.85rem;
}

.booking-loc__name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--body, Inter, sans-serif);
	font-size: var(--wp--preset--font-size--paragraph-l, 1.0625rem);
	font-weight: 700;
	color: var(--wp--preset--color--action, #1e3a5f);
}

.booking-loc__name svg {
	flex: none;
	color: var(--wp--preset--color--accent, #487c46);
}

.booking-loc__address {
	margin: 0.3rem 0 0.85rem;
	font-size: var(--wp--preset--font-size--paragraph-s, 0.875rem);
	line-height: 1.45;
	color: var(--wp--preset--color--text-muted, #505f73);
}

.booking-loc__actions {
	display: flex;
	gap: 0.5rem;
}

.booking-loc__call {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.7rem 0.95rem;
	border: 1.5px solid var(--wp--preset--color--border, #d9d9d9);
	border-radius: var(--button-radius, 10px);
	font-size: var(--wp--preset--font-size--paragraph-s, 0.875rem);
	font-weight: 600;
	color: var(--wp--preset--color--text, #142233);
	background: var(--wp--preset--color--surface, #fff);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.booking-loc__call svg { flex: none; }

.booking-loc__call:hover,
.booking-loc__call:focus-visible {
	border-color: var(--wp--preset--color--action, #1e3a5f);
	color: var(--wp--preset--color--action, #1e3a5f);
}

.booking-loc__book {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

body.booking-open { overflow: hidden; }