/* ==========================================================================
   Locations & Hours — site-wide styles
   Covers two layouts that can safely coexist on the same page:
     .lh-panels  — location panels (Locations page body)
     .lh-group   — compact rows (footer)
   Shared atoms (status pill, email link, today highlight) are intentionally
   common to both so they stay visually identical.
   All positional rules are scoped under their layout root — nothing bleeds.
   ========================================================================== */

.lh {
	--lh-navy: #123772;
	--lh-blue: #2b6cd4;
	--lh-blue-soft: #eaf1fc;
	--lh-paper: #f4f7fb;
	--lh-line: #d7e0ed;
	--lh-ink: #1b2532;
	--lh-muted: #5a6a80;
	--lh-open: #128a4c;
	--lh-closed: #9aa5b4;
	--lh-appt: #b26a00;
	--lh-radius: 10px;
	--lh-display: "Barlow Condensed", inherit;
}

.lh *,
.lh *::before,
.lh *::after { box-sizing: border-box; }

.lh p,
.lh h1,
.lh h2,
.lh h3 { margin: 0; }


/* --------------------------------------------------------------------------
   Shared atoms
   -------------------------------------------------------------------------- */

/* Hidden until the script fills it in — a bare pip with no text reads as
   broken, so no JS means no pill at all rather than a mystery dot. */
.lh-status { display: none; }

.lh-status.lh-ready {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	color: var(--lh-closed);
}

.lh-pip {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.lh-status.is-open { color: var(--lh-open); }
.lh-status.is-open .lh-pip { box-shadow: 0 0 0 3px rgba(18, 138, 76, .15); }
.lh-status.is-appt { color: var(--lh-appt); }

.lh-mail {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--lh-blue);
	text-decoration: none;
}

.lh-mail:hover { text-decoration: underline; }
.lh-mail svg { width: 14px; height: 14px; flex: none; }

.lh-hours {
	font-size: 13.5px;
	color: var(--lh-muted);
	font-variant-numeric: tabular-nums;
}

.lh-today {
	color: var(--lh-navy);
	font-weight: 600;
	background: var(--lh-blue-soft);
	border-radius: 4px;
	padding: 1px 7px;
}

.lh-note {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lh-appt);
}

.lh-name {
	font-family: inherit;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lh-navy);
}

.lh-ext {
	font-size: 13.5px;
	color: var(--lh-muted);
	white-space: nowrap;
}

.lh-ext a { color: var(--lh-muted); text-decoration: none; }
.lh-ext a:hover { text-decoration: underline; }

.lh-dir {
	font-size: 13px;
	font-weight: 500;
	color: #a9c8f5;
	text-decoration: none;
	border-bottom: 1px solid rgba(169, 200, 245, .4);
}

.lh-dir:hover { color: #fff; border-color: #fff; text-decoration: none; }


/* --------------------------------------------------------------------------
   Intro block (optional heading above the panels)
   -------------------------------------------------------------------------- */

.lh-intro { margin: 0 0 26px; }

.lh-eyebrow {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lh-muted);
	margin: 0 0 6px;
}

.lh-title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--lh-navy);
	margin: 0 0 8px;
}

.lh-lede {
	font-size: 15px;
	line-height: 1.5;
	color: var(--lh-muted);
	margin: 0;
}


/* --------------------------------------------------------------------------
   Layout 1 - location panels  (Locations page body)
   -------------------------------------------------------------------------- */

.lh-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

.lh-panel {
	background: #fff;
	border: 1px solid var(--lh-line);
	border-radius: var(--lh-radius);
	overflow: hidden;
}

.lh-phead {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 20px;
	background: var(--lh-navy);
	color: #fff;
}

.lh-pnum {
	font-family: var(--lh-display);
	font-weight: 700;
	font-size: 52px;
	line-height: .86;
	letter-spacing: -.01em;
}

.lh-pmeta { flex: 1; min-width: 0; }

/* h2 wrapper. Color and font are pinned rather than inherited because
   themes style h2 directly, and that beats inheriting from .lh-phead. */
.lh-ptitle {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	color: #fff;
}

.lh-ptag {
	display: block;
	font-family: var(--lh-display);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 14px;
	font-weight: 600;
	color: #9dc0f2;
	margin-bottom: 8px;
}

.lh-paddr {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
}

.lh-pcity {
	display: block;
	font-weight: 400;
	font-size: 13.5px;
	color: #c9d8ee;
}

.lh-plinks {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 9px;
	font-size: 13px;
}

.lh-plinks a {
	color: #a9c8f5;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid rgba(169, 200, 245, .4);
}

.lh-plinks a:hover { color: #fff; border-color: #fff; }

.lh-dept {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 16px;
	padding: 15px 20px;
	border-top: 1px solid var(--lh-line);
}

.lh-phead + .lh-dept { border-top: 0; }
.lh-dept:nth-child(odd) { background: var(--lh-paper); }

.lh-dept .lh-name {
	grid-column: 1;
	grid-row: 1;
	font-size: 15.5px;
	letter-spacing: -.005em;
}

.lh-dept .lh-status {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	align-self: center;
}

.lh-contact {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin-top: 2px;
	font-size: 14px;
	color: var(--lh-muted);
}

/* Extension stays left, email pushes to the right edge of the panel.
   The separator only made sense when the two sat side by side. */
.lh-contact .lh-mail { margin-left: auto; }
.lh-contact .lh-sep { display: none; }

.lh-dept .lh-hours {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 3px 16px;
	margin-top: 8px;
}

.lh-dept .lh-hours b { color: var(--lh-ink); font-weight: 600; }
.lh-dept .lh-today { margin: -1px -3px; }


/* --------------------------------------------------------------------------
   Layout 2 — compact rows  (footer)
   -------------------------------------------------------------------------- */

.lh-group {
	border: 1px solid var(--lh-line);
	border-radius: var(--lh-radius);
	overflow: hidden;
	margin-bottom: 14px;
}

.lh-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	padding: 11px 16px;
	background: var(--lh-navy);
	color: #fff;
}

.lh-num {
	font-family: var(--lh-display);
	font-weight: 700;
	font-size: 27px;
	line-height: 1;
}

.lh-street { font-weight: 600; font-size: 14.5px; }

.lh-tag {
	font-family: var(--lh-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9dc0f2;
}

.lh-head .lh-dir { margin-left: auto; }

.lh-rows { list-style: none; margin: 0; padding: 0; }

.lh-row {
	display: grid;
	grid-template-columns: minmax(170px, 1fr) minmax(190px, 1.2fr) auto;
	align-items: center;
	gap: 2px 18px;
	padding: 11px 16px;
	border-top: 1px solid var(--lh-line);
}

.lh-row:first-child { border-top: 0; }
.lh-row:nth-child(even) { background: var(--lh-paper); }

.lh-row .lh-name { font-size: 15px; }
.lh-row .lh-ext { margin-left: 8px; }
.lh-row .lh-today { padding: 1px 6px; margin-left: -6px; }

.lh-act {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-self: end;
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
	.lh-panels { grid-template-columns: 1fr; }
	.lh-pnum { font-size: 42px; }
}

@media (max-width: 720px) {
	.lh-row {
		grid-template-columns: 1fr auto;
		padding: 12px 14px;
		gap: 3px 12px;
	}
	.lh-row .lh-main  { grid-column: 1; grid-row: 1; }
	.lh-row .lh-act   { grid-column: 2; grid-row: 1; gap: 12px; }
	.lh-row .lh-hours { grid-column: 1 / -1; grid-row: 2; }
	.lh-head .lh-dir  { margin-left: 0; width: 100%; }
	.lh-num { font-size: 24px; }
}