/* ==========================================================================
   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;
	/* "inherit" cannot appear inside a font-family list alongside a font
	   name - that's invalid CSS and browsers drop the whole declaration,
	   which is what silently happened here before this Google Fonts
	   enqueue existed (see wp_enqueue_style('erm-barlow-condensed', ...)
	   in enqueue-locations-hours.php). sans-serif is the real fallback now. */
	--lh-display: "Barlow Condensed", sans-serif;
}

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

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


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

   Every `color` on an <a> below carries !important. Elementor's global Kit
   CSS ships `.elementor-kit-N a { color: var(--e-global-color-...) }` at
   specificity (0,1,1) - a tie with any single-class-plus-tag or single-class
   selector here, and ties resolve to whichever stylesheet is later in
   source order, which in practice is the Kit's. The Kit's global link color
   is a blue close enough to several of ours that this was easy to miss
   (still blue, just the wrong blue) until it collided with a button
   background and the text disappeared entirely - see .lh-ftr3-btn below.
   Confirmed via computed-style audit against the live site, not guessed.
   -------------------------------------------------------------------------- */

/* 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) !important;
	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) !important; text-decoration: none; }
.lh-ext a:hover { text-decoration: underline; }

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

.lh-dir:hover { color: #fff !important; 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 !important;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid rgba(169, 200, 245, .4);
}

.lh-plinks a:hover { color: #fff !important; 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;
}


/* --------------------------------------------------------------------------
   Layout 3 — footer v2  (three-column: 118 | logo/social/CTA | 603)
   Rendered by the [erm_footer] shortcode - see enqueue-locations-hours.php.
   Sizes are scoped under .lh-ftr3-dept rather than overriding the shared
   .lh-name / .lh-hours / .lh-mail atoms, so this doesn't change the
   Locations page panels or the old compact-rows chunk if either is ever on
   the same page.
   -------------------------------------------------------------------------- */

.lh-ftr3 {
	display: grid;
	grid-template-columns: 1fr 260px 1fr;
	gap: 0 48px;
	align-items: start;
}

.lh-ftr3-loc { padding-top: 4px; }

.lh-ftr3-bhead { margin-bottom: 14px; }

.lh-ftr3-addr {
	font-family: var(--lh-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--lh-navy);
	line-height: 1.1;
}

.lh-ftr3-addr b { font-size: 26px; margin-right: 4px; }

.lh-ftr3-city {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--lh-muted);
	margin-top: 2px;
}

.lh-ftr3-tag {
	display: block;
	font-family: var(--lh-display);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 11px;
	font-weight: 600;
	color: var(--lh-muted);
	margin-top: 4px;
}

.lh-ftr3-dir {
	display: inline-block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--lh-blue) !important;
	text-decoration: none;
	border-bottom: 1px solid rgba(43, 108, 212, .35);
}

.lh-ftr3-dir:hover { color: var(--lh-navy) !important; border-color: var(--lh-navy); }

.lh-ftr3-dept { padding: 11px 0; border-top: 1px solid var(--lh-line); }
.lh-ftr3-dept:first-of-type { border-top: 0; }
.lh-ftr3-dept .lh-name { font-size: 13.5px; }
.lh-ftr3-dept .lh-ext { font-size: 12px; margin-left: 6px; }
.lh-ftr3-dept .lh-hours { display: block; margin-top: 3px; font-size: 12px; }
.lh-ftr3-dept .lh-act { display: flex; align-items: center; gap: 12px; margin-top: 5px; justify-self: start; }
.lh-ftr3-dept .lh-status.lh-ready { font-size: 11px; }
.lh-ftr3-dept .lh-mail { font-size: 12px; }
.lh-ftr3-dept .lh-mail svg { width: 13px; height: 13px; }

.lh-ftr3-mid { text-align: center; }

/* Real lockup is 471.14x252.53 (~1.87:1) — width matches whatever the CTA
   buttons below it render at (they fill .lh-ftr3-cta's full width via
   align-items:stretch, which in turn fills .lh-ftr3-mid up to the grid
   column's 260px), so the logo and buttons always share one edge-to-edge
   width instead of the logo being narrower than what's under it. height
   stays auto so the ratio can't drift. width/height attributes on the
   <img> itself set the intrinsic size so nothing inflates before this
   loads (same reasoning as the SVG envelope icons elsewhere in this file).
   !important as a defensive floor — see the identical note on .hdr-logo-img
   in erm-header.css for why. */
.lh-ftr3-logo { display: block; width: 100% !important; height: auto !important; margin: 0 auto; }

.lh-ftr3-social { display: flex; justify-content: center; gap: 10px; margin: 18px 0; }

.lh-ftr3-social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff !important;
	flex: none;
}

.lh-ftr3-social a svg { width: 16px; height: 16px; }

/* Matched to the reference screenshot of the site's existing social icon
   row — a muted set, not the vivid modern per-platform brand colors this
   was set to previously (that was a guess made with no reference image;
   this replaces it now that one exists). */
.lh-ftr3-social a.fb { background: #3b5998; }
.lh-ftr3-social a.ig { background: #000; }
.lh-ftr3-social a.li { background: #1b8ca8; }
.lh-ftr3-social a.yt { background: #d32f2f; }
.lh-ftr3-social a.tt { background: #74808a; }
.lh-ftr3-social a:hover { opacity: .85; }

.lh-ftr3-cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

/* Matched to the reference screenshot's CTA buttons - a brighter cornflower
   blue than --lh-blue (which stays as-is; it's used site-wide for links and
   accents, so it wasn't changed just to fix these two buttons). Not tied to
   the shared --lh-blue/--lh-navy variables on purpose - this is specific to
   these two buttons matching a specific reference, not a site-wide token. */
.lh-ftr3-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #4285f4;
	/* !important: Elementor's global Kit CSS ships `.elementor-kit-N a { color: ... }`
	   at specificity (0,2,0), which otherwise beats this single-class selector
	   and silently replaces white text/icon with the Kit's global link color -
	   a blue close enough to this button's own background that the text and
	   icon effectively disappeared. Same defensive pattern as the logo-sizing
	   !important rules above. */
	color: #fff !important;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 24px;
	white-space: nowrap;
}

.lh-ftr3-btn:hover { background: #3367d6; }
.lh-ftr3-btn svg { width: 14px; height: 14px; flex: none; }


/* --------------------------------------------------------------------------
   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; }
}

@media (min-width: 881px) {
	/* Mirror the right (603) column so both sides bookend the logo
	   symmetrically. Two left-aligned columns left a big gap outside 118
	   and almost none outside 603. */
	.lh-ftr3-loc--right { text-align: right; }
	.lh-ftr3-loc--right .lh-act { justify-content: flex-end; justify-self: end; }
}

@media (max-width: 880px) {
	.lh-ftr3 { grid-template-columns: 1fr; gap: 32px 0; text-align: center; }
	.lh-ftr3-mid { order: -1; }
	.lh-ftr3-dept { text-align: left; max-width: 340px; margin: 0 auto; }
	.lh-ftr3-bhead { text-align: left; max-width: 340px; margin: 0 auto 14px; }
	/* Same 260px clamp as .lh-ftr3-cta below - .lh-ftr3-logo is width:100% of
	   its container, and below this breakpoint that container is the full
	   stacked column instead of the 260px grid track, so without this the
	   logo spans edge-to-edge while the buttons stay clamped under it.
	   !important: Elementor's own frontend.min.css ships `.elementor img {
	   max-width: 100% }`, which beats a plain .lh-ftr3-logo selector on
	   specificity alone (two selector components vs one) - same reason the
	   width/height rule above already needs !important. */
	.lh-ftr3-logo { max-width: 260px !important; margin: 0 auto; }
	.lh-ftr3-cta { max-width: 260px; margin: 0 auto; }
}