/* ─────────────────────────────────────────────────────────────
   hours.css — Flexible Office Hours page template only
   (enqueued conditionally, dep odx-navigation)
   Ground truth: ui-blueprints/section-15-26(-mobile), section-154-26
   (-mobile), section-370-272(-mobile) — live computed-style dumps,
   /flexible-office-hours/. Shared .odx-page-header band comes from
   components.css.

   Namespace note: `.odx-hours-*` is otherwise owned by the footer
   hours-MODAL component (footer.css:328-438 — `.odx-hours-backdrop`,
   `.odx-hours-modal`, flat `.odx-hours-list/-row/-day/-time`). This
   template's blocks share the same day/time visual language (both
   read live's hours data) but every selector here is qualified under
   `.odx-hours-page` (the <main> class), so there is zero collision
   with the modal's flat top-level selectors.
   ─────────────────────────────────────────────────────────── */

/* ── INTRO — section-15-26: white BG, 1120px rail (matches CV rail:
   .odx-container is 1280px, this is narrower — literal 1120px, no
   token matches) ── */
.odx-hours-page .odx-hours-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 1120px;
	margin: 0 auto;
	padding-bottom: 75px;
}

/* live: div_block-77-26 grid 550/550, gap 20 */
.odx-hours-page .odx-hours-intro__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* live: image-80-26 550×367, bottom-only 5px radius (literal — matches
   CV photo's 5px, not --radius-sm 4px) */
.odx-hours-page .odx-hours-intro__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0 0 5px 5px;
}

/* live: div_block-22-26 is display:grid (not flex) — grid items stretch
   to the full column width by default, which is what gives the heading/
   text their full 490px (550 - 2×30 padding) rather than shrink-wrapping
   to content. align-items:center here centers the content block
   vertically within the row's height. pad 30px */
.odx-hours-page .odx-hours-intro__panel {
	display: grid;
	align-items: center;
	gap: 20px; /* live div_block-22-26 grid gap between heading and copy */
	padding: 30px;
}

/* live: div_block-16-26 centred wrap, mt 30 ; our-office-textdiv mt 25 —
   collapses to a single 30px gap above the strip since inner margins
   don't stack visually against the row above (flex column parent) */
.odx-hours-page .odx-hours-intro__strip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 896px;
	margin: 30px auto 0;
	padding-top: 25px;
}

/* live: .our-office-heading — navy, 2.2em (35.2px @ 16px base), fw 500,
   lh 1.6, no margin. Applies to the "We Value Your Time" strip heading
   and both hours-grid column headings (all three carry this class live) */
.odx-hours-page .odx-hours-intro__heading,
.odx-hours-page .odx-hours-grid__heading {
	color: var(--color-navy);
	font-size: 2.2em;
	font-weight: 500;
	line-height: 1.6;
	margin: 0;
}

/* live: headline-23-26 ("Here When You Need Us") is plain .ct-headline
   (no our-office-heading class) — 30px/fw500/lh 1.6, same navy */
.odx-hours-page .odx-hours-intro__heading--sm {
	font-size: 30px;
}

/* live: .our-office-text — theme serif (Merriweather) 16px #404040,
   confirmed via computed fontFamily probe (no inline Helvetica override
   on this page's text blocks, unlike the CV rich-text lists) */
.odx-hours-page .odx-hours-intro__text {
	color: var(--color-charcoal);
	font-size: 1rem;
	line-height: 1.6;
}

.odx-hours-page .odx-hours-intro__text p {
	margin: 0;
}

/* ── EMERGENCY STRIP — section-154-26: white BG, centred text-align at
   the section level, same 1120px rail (flex-column, matches CV/intro
   rail pattern), 75px top/bottom + 20px side pad ── */
.odx-hours-page .odx-hours-emergency {
	background-color: var(--color-white);
	text-align: center;
}

.odx-hours-page .odx-hours-emergency__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1120px;
	margin: 0 auto;
	padding: 75px 20px;
}

/* live: div_block-46-26 — flex-row, justify-content:center, align-items
   center; no explicit gap (visual gutter comes from the icon's own
   50×35 container width, not a margin/gap value) */
.odx-hours-page .odx-hours-emergency__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding-left: 15px; /* live div_block-46-26 — content sits 15px right of true centre */
}

/* live: fancy_icon-476-272 container 50×35, the FontAwesome svg glyph
   sits flush-left at 35×35 (not centred) — the spare 15px on the right
   is what creates the visual gap before the text, not a margin */
.odx-hours-page .odx-hours-emergency__icon {
	display: block;
	width: 50px;
	height: 35px;
	flex-shrink: 0;
	color: var(--color-blue);
}

.odx-hours-page .odx-hours-emergency__icon svg {
	display: block;
	width: 35px;
	height: 35px;
}

/* live: text_block-464-272 computes text-align:left despite the section-
   level center (Oxygen author redundancy) — kept literal for parity */
.odx-hours-page .odx-hours-emergency__text {
	margin: 0;
	color: var(--color-charcoal);
	font-size: 1rem;
	line-height: 1.6;
	text-align: left;
}

.odx-hours-page .odx-hours-emergency__text a {
	color: var(--color-blue);
	text-decoration: none;
}

/* ── HOURS GRID — section-370-272: off-white full-bleed section (no
   1280px .odx-container — live's own inner-wrap is 100% width with its
   own gutters), two-col CSS grid 690/690, gap 20, pad 50 top/bottom +
   20 sides ── */
.odx-hours-page .odx-hours-grid {
	background-color: var(--color-off-white);
}

.odx-hours-page .odx-hours-grid__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	padding: 50px 20px;
}

/* live: both columns are fixed pixel widths that never stretch or
   reset at mobile — div_block-373-272 (dental) 515px, div_block-386-272
   (service) 600px, confirmed identical at 1440 and 767.
   Desktop alignment: the dental column right-aligns inside its 690px
   grid cell (live wrap-371/372 compute align-items:flex-end → content
   hugs the centre line at x:195); the service column left-aligns
   (flex-start, x:745). */
.odx-hours-page .odx-hours-grid__col--dental {
	width: 100%;
	max-width: 515px;
	justify-self: end;
}

.odx-hours-page .odx-hours-grid__col--service {
	width: 100%;
	max-width: 600px;
	justify-self: start;
	margin-left: 15px; /* live wrap-385 margin-left:15px at every viewport (x:745, not 730) */
}

/* live: headline-374/387-272 padding-bottom 15px (not margin) before
   the list starts */
.odx-hours-page .odx-hours-grid__heading {
	padding-bottom: 15px;
}

.odx-hours-page .odx-hours-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* live: div_block-377/390-272 row = single flex-row (icon+day+time),
   align-items center, padding-bottom 15px, no border/divider between
   rows (confirmed via computed borderBottomStyle: none) */
.odx-hours-page .odx-hours-grid__row {
	display: flex;
	align-items: center;
	padding-bottom: 15px;
}

/* live: image-379/392-272 35×35, margin-right 15px */
.odx-hours-page .odx-hours-grid__icon {
	width: 35px;
	height: 35px;
	flex-shrink: 0;
	margin-right: 15px;
}

/* live: headline-380/393-272 — MYS Blue, Poppins (theme --font-sans),
   19.2px (1.2em @ 16px base). Fixed min-width creates the visual gutter
   before the time column — NOT justify-content (row is flex-start) */
.odx-hours-page .odx-hours-grid__day {
	color: var(--color-blue);
	font-family: var(--font-sans);
	font-size: 1.2em;
	line-height: 1.6;
	padding-right: 15px; /* live headline-380/393 pr:15 at every viewport
	                        (border-box — the 135/250px widths include it) */
}

/* live: dental-hours column day label width/min-width 135px */
.odx-hours-page .odx-hours-grid__day--primary {
	min-width: 135px;
}

/* live: customer-service column day label width 250px (longer labels
   wrap to two lines at both viewports) */
.odx-hours-page .odx-hours-grid__day--wide {
	min-width: 250px;
	max-width: 250px;
}

/* live: text_block-382/395-272 — navy, theme serif, 19.2px.
   white-space is NORMAL on live at every viewport (probed @1440/767/375)
   — times wrap at 375, which is what keeps the page overflow-free */
.odx-hours-page .odx-hours-grid__time {
	color: var(--color-navy);
	font-family: var(--font-serif);
	font-size: 1.2em;
	line-height: 1.6;
}

/* ── RESPONSIVE — 767px (mobile flip) ────────────────────────
   live @767: intro rail padding drops to 0 (photo full-bleed), image/
   copy grid stacks (flex column); emergency strip keeps its 20px
   gutters; hours-grid stacks single column (flex column) with 20px
   side gutters retained (confirmed via computed display, not just
   rect geometry — declared-vs-painted check per PATTERNS.md).
   ─────────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
	.odx-hours-page .odx-hours-intro__inner {
		padding-bottom: 65px;
	}

	/* live @767: photo/copy stack but the 20px grid gap is retained
	   between them (computed gap 20px on the stacked flex column) */
	.odx-hours-page .odx-hours-intro__row {
		grid-template-columns: 1fr;
	}

	.odx-hours-page .odx-hours-intro__panel {
		padding: 30px;
	}

	/* live: image-80-26 border-radius resets to 0 at ≤767 (full-bleed,
	   no rounding when the photo goes edge-to-edge) */
	.odx-hours-page .odx-hours-intro__photo {
		border-radius: 0;
	}

	/* live: div_block-16-26 (the "We Value Your Time" strip's outer
	   wrap) gains 30px side padding at ≤767 — the row above stays
	   full-bleed/no-padding, only the strip below picks up gutters.
	   The desktop 30px top margin drops to 0 (live div_block-81-26
	   margin-top computes 0 at ≤767; only the inner 25px offset stays) */
	.odx-hours-page .odx-hours-intro__strip {
		margin-top: 0;
		padding-left: 30px;
		padding-right: 30px;
	}

	/* live: both columns keep their fixed desktop widths (515px / 600px)
	   at every viewport — they never stretch full-bleed, which is why
	   the "Additional Customer Service Hours" labels keep wrapping to
	   2 lines here too (confirmed via computed width, not just rect) */
	.odx-hours-page .odx-hours-grid__inner {
		grid-template-columns: 1fr;
		justify-content: start;
	}

	/* live @767: both columns flip to left-aligned with a 15px inset
	   inside the 20px rail gutter (dental via wrap-372 padding-left:15px,
	   service via its always-on wrap-385 margin-left:15px — x:35).
	   The dental col also gains margin-bottom:30px (div_block-373-272,
	   mobile-only) which stacks with the 20px grid gap → 50px before
	   the service column. */
	.odx-hours-page .odx-hours-grid__col--dental {
		justify-self: start;
		margin-left: 15px;
		margin-bottom: 30px;
	}
}

/* ── RESPONSIVE — 479px ──────────────────────────────────────
   live @375: both 15px column insets drop (col-373/386 land at x:20,
   wrap-372 padding-left and wrap-385 margin-left compute 0), and the
   service day label's fixed 250px releases (min-width:auto, flexes to
   fit) — that release plus normal-wrapping times is what keeps live
   overflow-free at narrow phones (docWidth stays 375).
   ─────────────────────────────────────────────────────────── */
@media ( max-width: 479px ) {
	/* live @375: 15px insets swap for a 5px column padding-left
	   (col-373/386 pl:5px, wrap-level insets compute 0) */
	.odx-hours-page .odx-hours-grid__col--dental,
	.odx-hours-page .odx-hours-grid__col--service {
		margin-left: 0;
		padding-left: 5px;
	}

	.odx-hours-page .odx-hours-grid__day--wide {
		min-width: 0;
		max-width: none;
	}
}