/*
 * Opening hours block. Loaded only on pages that use it. Mobile first; desktop
 * from 900px. Source: the components file's ".hrs" CSS.
 *
 * The status chip, today's highlight and hidden past holidays are set by
 * hours.js (classes is-open, is-closed, is-today). The chip's height is reserved
 * so the page doesn't jump when the script fills it in.
 *
 * The open / closed colours are status colours (green / orange), not brand colours.
 */

.hours { --status-open: #1f9d55; --status-open-ink: #13703b; --status-closed: #c2410c; --status-closed-ink: #9a3412; padding: 56px 0; }

.hours__grid { display: grid; gap: 26px; }

.hours__title { font-size: 1.9rem; line-height: 1.1; }

.hours__status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 40px;
	margin: 14px 0 0;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

/* Until hours.js fills it in, the chip is just empty reserved space. */
.hours__status:empty { padding: 0; visibility: hidden; }

.hours__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }

.hours__status.is-open { background: color-mix(in srgb, var(--status-open) 13%, var(--surface)); color: var(--status-open-ink); }
.hours__status.is-open .hours__dot { background: var(--status-open); }
.hours__status.is-closed { background: color-mix(in srgb, var(--status-closed) 11%, var(--surface)); color: var(--status-closed-ink); }
.hours__status.is-closed .hours__dot { background: var(--status-closed); }

.hours__lead { max-width: 46ch; margin: 14px 0 0; color: var(--muted); }

.hours__special { margin-top: 18px; padding: 16px 18px; border-radius: var(--card-r); background: var(--surface); }
.hours__special[hidden],
.hours__special-row[hidden] { display: none; }
.hours__special h3 { margin-bottom: 8px; font-size: 1rem; }
.hours__special dl { display: grid; gap: 5px; margin: 0; font-size: 14px; }
.hours__special-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; }
.hours__special dt small { margin-left: 8px; color: var(--muted); font-size: 12.5px; }
.hours__special dd { margin: 0; color: var(--muted); text-align: right; }

.hours__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hours__ctas .button { flex: 1 1 170px; }

/* ---------- The weekly table ---------- */

.hours__table { padding: 6px 20px 16px; border-radius: var(--card-r); background: var(--surface); }

.hours__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

/* Today stands out: a tinted band, bold text and a "Today" badge. While the clinic is open, the band turns green. No side accent line. */
.hours__row.is-today {
	margin-inline: -12px;
	padding-inline: 12px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--brand) 9%, var(--surface));
	color: var(--ink);
	font-weight: 700;
}
.hours__row.is-today.is-now { background: color-mix(in srgb, var(--status-open) 12%, var(--surface)); }

.hours__row em {
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--brand);
	color: var(--on-brand);
	font-size: 11.5px;
	font-style: normal;
	font-weight: 700;
}

.hours__tz { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.hours__tz[hidden] { display: none; }
.hours__tz .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* ---------- Look F: a more rounded table ---------- */

.look-f .hours__table,
.look-f .hours__special { box-shadow: 0 14px 30px -22px rgb(0 0 0 / 0.35); }

/* ---------- Desktop ---------- */

@media (min-width: 900px) {
	.hours { padding: 96px 0; }
	.hours__title { font-size: 2.9rem; }
	.hours__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
	.hours__ctas .button { flex: 0 0 auto; min-height: 56px; padding: 0 26px; font-size: 17px; }
}

/* ---------- The live banner: open now (green) or closed (orange), with a Call button ---------- */

.hours__live {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	min-height: 74px; /* Reserved: nothing jumps when hours.js fills it in. */
	margin: 0; /* Sits above the table card; .hours__side supplies the gap. */
	padding: 12px 16px;
	border-radius: calc(var(--card-r) * 0.75);
	background: var(--surface);
}
.hours__live:not(.is-open):not(.is-closed) { visibility: hidden; }
.hours__live.is-open { background: color-mix(in srgb, var(--status-open) 14%, var(--surface)); color: var(--status-open-ink); }
.hours__live.is-closed { background: color-mix(in srgb, var(--status-closed) 11%, var(--surface)); color: var(--status-closed-ink); }
.hours__live.is-open .hours__dot { background: var(--status-open); }
.hours__live.is-closed .hours__dot { background: var(--status-closed); }

.hours__live-text { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; margin: 0; line-height: 1.25; }
.hours__live-text strong { font-size: 1.1rem; }
.hours__live-text small { grid-column: 2; font-size: 13.5px; font-weight: 600; opacity: 0.9; }
.hours__live-call { min-height: 44px; }
.hours__live-call[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
	.hours__live.is-open .hours__dot { animation: hours-pulse 2.4s ease-out infinite; }
}
@keyframes hours-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-open) 55%, transparent); }
	70%, 100% { box-shadow: 0 0 0 9px transparent; }
}

/* ---------- The map under or below the hours ---------- */
.hours__side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.hours__map { margin-top: 26px; }