/* AE Hours — minimal, theme-friendly styles. All selectors namespaced under
   .ae-hours so the widget inherits the theme's typography by default and only
   adds light structure. */

.ae-hours {
	/* Theming surface. Every colour the widget paints is a variable carrying its
	   historical default — override any of these on .ae-hours (or a parent) to
	   retint the whole widget in one place. The body text deliberately has NO
	   colour set: it inherits the theme. But every block that paints its own
	   *background* below also sets a paired text colour from these vars, so the
	   coloured "island" blocks never depend on the inherited theme text colour —
	   that dependency is what made them unreadable on dark pages/sections. */
	--ae-status-open-bg: #e7f6ec;
	--ae-status-open-fg: #1a7f37;
	--ae-status-closed-bg: #fbeaea;
	--ae-status-closed-fg: #a4282a;

	--ae-change-bg: #fff8e5;
	--ae-change-fg: #5c4a00;
	--ae-change-accent: #b88600;

	--ae-special-accent: #d6a0a0;

	--ae-cal-border: #ededed;
	--ae-cal-head-border: #e2e2e2;
	--ae-cal-blank-bg: #fafafa;
	--ae-cal-blank-border: #f3f3f3;
	--ae-cal-today-outline: #2a5aa0;

	--ae-btn-bg: #fff;
	--ae-btn-fg: #222;
	--ae-btn-border: #d0d0d0;

	--ae-notice-bg: #fcf0f1;
	--ae-notice-fg: #7a1f20;
	--ae-notice-accent: #d63638;

	--ae-muted-fg: #555;

	display: block;
	max-width: 32rem;
	line-height: 1.5;
}

/* Dark mode. Re-point the palette to dark-appropriate values when the *visitor's
   OS* asks for a dark scheme. This complements — does not replace — the per-theme
   override above: prefers-color-scheme reflects the OS setting, not the page's
   background, so a dark page on a light-OS visitor is still best handled by a
   theme overriding the vars directly. The body text stays inherited; we only
   retint the blocks that paint their own background, keeping each bg/fg pair in
   contrast. */
@media (prefers-color-scheme: dark) {
	.ae-hours {
		--ae-status-open-bg: #14361f;
		--ae-status-open-fg: #6fd98a;
		--ae-status-closed-bg: #3a1718;
		--ae-status-closed-fg: #f0a3a4;

		--ae-change-bg: #332a00;
		--ae-change-fg: #f0d98a;
		--ae-change-accent: #d9a93a;

		--ae-special-accent: #c98a8a;

		--ae-cal-border: #3a3a3a;
		--ae-cal-head-border: #4a4a4a;
		--ae-cal-blank-bg: #1e1e1e;
		--ae-cal-blank-border: #2a2a2a;
		--ae-cal-today-outline: #6aa0e0;

		--ae-btn-bg: #2a2a2a;
		--ae-btn-fg: #eaeaea;
		--ae-btn-border: #555;

		--ae-notice-bg: #3a1718;
		--ae-notice-fg: #f0a3a4;
		--ae-notice-accent: #e06a6c;

		--ae-muted-fg: #aaa;
	}
}

.ae-hours__title {
	margin: 0 0 0.5rem;
	font-size: 1.1em;
}

.ae-hours__status {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
}

.ae-hours__status--open {
	background: var(--ae-status-open-bg);
	color: var(--ae-status-open-fg);
}

.ae-hours__status--closed {
	background: var(--ae-status-closed-bg);
	color: var(--ae-status-closed-fg);
}

.ae-hours__weekly {
	width: 100%;
	border-collapse: collapse;
}

.ae-hours__caption {
	text-align: left;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.ae-hours__row > th,
.ae-hours__row > td {
	padding: 0.2em 0;
	text-align: left;
	vertical-align: top;
}

.ae-hours__day {
	font-weight: 500;
	padding-right: 1.5em;
}

.ae-hours__times {
	white-space: nowrap;
}

.ae-hours__row--closed .ae-hours__times {
	opacity: 0.7;
}

/* Schedule-change notice: the upcoming standing pattern differs from the week
   shown above. A light, attention-drawing block (not an error) carrying the
   change date and the new week's hours. */
.ae-hours__change {
	margin-top: 1rem;
	padding: 0.6em 0.85em;
	border-left: 3px solid var(--ae-change-accent);
	background: var(--ae-change-bg);
	color: var(--ae-change-fg);
}

.ae-hours__change-lead {
	margin: 0 0 0.4rem;
	font-weight: 600;
}

.ae-hours__change-week {
	width: 100%;
	border-collapse: collapse;
}

.ae-hours__change-caption {
	text-align: left;
	font-weight: 500;
	opacity: 0.8;
	margin-bottom: 0.25rem;
}

.ae-hours__exceptions {
	margin-top: 1rem;
}

.ae-hours__exceptions-title {
	margin: 0 0 0.35rem;
	font-size: 1em;
}

.ae-hours__exceptions-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ae-hours__exception {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: 0.15em 0;
}

.ae-hours__exception-date {
	font-weight: 500;
	min-width: 4.5em;
}

.ae-hours__exception-note {
	opacity: 0.75;
}

/* Multi-week "upcoming hours" view: a plain, customer-facing day-by-day list
   grouped into rolling weeks. No provenance colours or edit affordances — just
   readable structure, with special days lightly marked. */
.ae-hours__u-week {
	margin: 0 0 1rem;
}

.ae-hours__u-week-title {
	margin: 0 0 0.3rem;
	font-size: 0.95em;
	font-weight: 600;
	opacity: 0.85;
}

.ae-hours__u-table {
	width: 100%;
	border-collapse: collapse;
}

.ae-hours__u-day > th,
.ae-hours__u-day > td {
	padding: 0.18em 0;
	text-align: left;
	vertical-align: top;
}

.ae-hours__u-date {
	font-weight: 500;
	padding-right: 1.25em;
	white-space: nowrap;
}

.ae-hours__u-times {
	white-space: nowrap;
	padding-right: 1em;
}

.ae-hours__u-note {
	width: 100%;
	opacity: 0.75;
	font-size: 0.95em;
}

.ae-hours__u-day--closed .ae-hours__u-times {
	opacity: 0.7;
}

/* Special days: a left accent. Closures/exceptions in muted red, the start of a
   new regular pattern in the same amber as the weekly-view change notice. */
.ae-hours__u-day--exception > th,
.ae-hours__u-day--closure > th,
.ae-hours__u-day--calendar_response > th {
	box-shadow: inset 3px 0 0 var(--ae-special-accent);
	padding-left: 0.5em;
}

.ae-hours__u-day--change > th {
	box-shadow: inset 3px 0 0 var(--ae-change-accent);
	padding-left: 0.5em;
}

/* Monthly "calendar" view: a wall-calendar grid (Ma–Su columns, weeks as rows)
   showing each day's date and resolved hours — the read-only, customer-facing
   cousin of the editor calendar. Wider than the list widgets, so the calendar
   root lifts the default max-width. Provenance is deliberately NOT colour-coded:
   special days carry a modifier class + their reason note, so a theme *can*
   colour them, but the resting state is neutral. */
.ae-hours--calendar {
	max-width: none;
}

.ae-hours__cal-month {
	margin: 0 0 1.5rem;
}

.ae-hours__cal-title {
	margin: 0 0 0.4rem;
	font-size: 1em;
	font-weight: 600;
}

.ae-hours__cal {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.ae-hours__cal-wd {
	padding: 0.25em 0.4em;
	text-align: left;
	font-size: 0.8em;
	font-weight: 600;
	opacity: 0.7;
	border-bottom: 1px solid var(--ae-cal-head-border);
}

.ae-hours__cal-cell {
	width: 14.28%;
	height: 3.5em;
	padding: 0.3em 0.4em;
	vertical-align: top;
	border: 1px solid var(--ae-cal-border);
}

.ae-hours__cal-cell--blank {
	background: var(--ae-cal-blank-bg);
	border-color: var(--ae-cal-blank-border);
}

.ae-hours__cal-date {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.2;
}

.ae-hours__cal-times {
	display: block;
	font-size: 0.78em;
	line-height: 1.25;
}

.ae-hours__cal-note {
	display: block;
	font-size: 0.72em;
	opacity: 0.7;
}

/* No data for this day (a past day, or beyond the fetched window): just a
   muted date number, no hours. */
.ae-hours__cal-cell--nodata .ae-hours__cal-date,
.ae-hours__cal-cell--past .ae-hours__cal-date {
	opacity: 0.45;
	font-weight: 500;
}

.ae-hours__cal-cell--closed .ae-hours__cal-times {
	opacity: 0.6;
}

/* Today: a subtle ring — the only emphasis the resting calendar carries. */
.ae-hours__cal-cell--today {
	outline: 2px solid var(--ae-cal-today-outline);
	outline-offset: -2px;
}

/* Optional provenance colouring — off by default (the brief: "need not
   colour-code, but could"). Uncomment to tint special days. Note the paired
   text colour: a tinted cell must carry its own fg so it stays readable on a
   dark theme too.
.ae-hours__cal-cell--exception,
.ae-hours__cal-cell--calendar_response,
.ae-hours__cal-cell--closure { background: #fcf4f4; color: #5a2a2a; }
*/

/* Calendar pager (added by ae-hours-calendar.js when 2+ months render). The
   prev/next bar sits above a single visible month; with JS off, none of this
   applies and the months stay stacked. */
.ae-hours__cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
}

.ae-hours__cal-nav-label {
	font-weight: 600;
	text-align: center;
	flex: 1 1 auto;
}

.ae-hours__cal-prev,
.ae-hours__cal-next {
	flex: 0 0 auto;
	cursor: pointer;
	border: 1px solid var(--ae-btn-border);
	background: var(--ae-btn-bg);
	color: var(--ae-btn-fg);
	border-radius: 4px;
	padding: 0.05em 0.7em;
	font-size: 1.2em;
	line-height: 1.4;
}

.ae-hours__cal-prev[disabled],
.ae-hours__cal-next[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* When paged, the per-month heading is shown in the nav label instead, and the
   single visible month needs no bottom gap. */
.ae-hours__calendar--paged .ae-hours__cal-title {
	display: none;
}

.ae-hours__calendar--paged .ae-hours__cal-month {
	margin-bottom: 0;
}

/* On narrow screens the 7-column grid gets tight; drop the type size a notch so
   the hours still fit rather than overflow. */
@media (max-width: 600px) {
	.ae-hours__cal-times { font-size: 0.68em; }
	.ae-hours__cal-cell  { padding: 0.2em 0.25em; }
}

/* Minimal "current week" footer view: the Mon–Su week folded to as few lines as
   possible (consecutive same-hours days merge into a Ma–Pe range), holiday-aware.
   Built for a site footer — compact, borderless, inherits the theme's type. The
   root drops the list-widget max-width so it sits comfortably in a footer column. */
.ae-hours--footer {
	max-width: none;
	font-size: 0.9em;
}

.ae-hours__footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ae-hours__footer-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em 0.6em;
	padding: 0.1em 0;
}

.ae-hours__footer-day {
	font-weight: 600;
	min-width: 3.5em;
}

.ae-hours__footer-times {
	white-space: nowrap;
}

.ae-hours__footer-row--closed .ae-hours__footer-times {
	opacity: 0.7;
}

/* Reason for a special day (a holiday/exception that broke out of its range);
   real content, kept muted so the hours stay the focus. */
.ae-hours__footer-note {
	opacity: 0.7;
	font-style: italic;
}

/* Graceful unavailable state: a neutral public line, plus an admin-only
   diagnostic (the __notice paragraph) naming the failed identifier. */
.ae-hours__unavailable {
	margin: 0;
	color: var(--ae-muted-fg);
	font-style: italic;
}

.ae-hours__notice {
	margin: 0.5em 0 0;
	padding: 0.5em 0.75em;
	border-left: 3px solid var(--ae-notice-accent);
	background: var(--ae-notice-bg);
	color: var(--ae-notice-fg);
	font-size: 0.9em;
	font-style: normal;
}