/*
 * Month calendar grid (AO_Month_Calendar) — shared by the Syndication
 * JavaScript Embed's Month view (inside its shadow root) and the theme's
 * events archive at ?ao_view=month.
 *
 * Themed through custom properties a caller sets on .ao-cal or an ancestor:
 *   --ao-cal-accent          chip accent (embed: date strip colour; theme: primary)
 *   --ao-cal-highlight       today / selected day (embed: active pagination colour)
 *   --ao-cal-highlight-ink   text on the highlight
 *   --ao-cal-rule, --ao-cal-muted, --ao-cal-paper, --ao-cal-warm, --ao-cal-focus
 *
 * Below 560px of the calendar's OWN width (container query) the same table
 * becomes a day-by-day agenda: no duplicated markup, so nothing is read twice.
 * Up to 760px the grid stays but chips wrap instead of truncating.
 */

.ao-cal {
	--ao-cal-rule: #dcd8d1;
	--ao-cal-muted: #5c6168;
	--ao-cal-paper: #ffffff;
	--ao-cal-warm: #f3f0ea;
	--ao-cal-accent: #6b6f76;
	--ao-cal-highlight: #1f2328;
	--ao-cal-highlight-ink: #ffffff;
	--ao-cal-focus: #1d4ed8;
	container-type: inline-size;
	font-size: 15px;
	line-height: 1.4;
}

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

.ao-cal__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ao-cal a:focus-visible,
.ao-cal .ao-cal__daynum:focus-visible {
	outline: 3px solid var(--ao-cal-focus);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- nav */
.ao-cal__nav {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}
.ao-cal__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	min-width: 11ch;
	text-align: center;
}
.ao-cal__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ao-cal-rule);
	border-radius: 6px;
	background: var(--ao-cal-paper);
	color: inherit;
	font-size: 26px;
	line-height: 1;
	text-decoration: none;
}
.ao-cal__nav-btn:hover { border-color: currentColor; }
.ao-cal__nav-btn.is-disabled { opacity: .35; cursor: default; }
.ao-cal__today {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--ao-cal-rule);
	border-radius: 999px;
	background: var(--ao-cal-paper);
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.ao-cal__today:hover { border-color: currentColor; }

/* ---------------------------------------------------------------- grid */
.ao-cal__grid {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ao-cal-rule);
	border-radius: 8px;
	/* Not clipped: the chip tooltips (.ao-cal__tip) hang outside their cell. */
	overflow: visible;
	background: var(--ao-cal-paper);
}
.ao-cal__grid th:first-child { border-top-left-radius: 7px; }
.ao-cal__grid th:last-child { border-top-right-radius: 7px; }
.ao-cal__grid th {
	padding: 8px 6px;
	background: var(--ao-cal-warm);
	border-bottom: 1px solid var(--ao-cal-rule);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ao-cal-muted);
	text-align: left;
}
.ao-cal__day {
	vertical-align: top;
	min-height: 110px;
	height: 110px;
	padding: 6px;
	border-bottom: 1px solid var(--ao-cal-rule);
	border-right: 1px solid var(--ao-cal-rule);
}
.ao-cal__day:last-child { border-right: 0; }
.ao-cal__grid tbody tr:last-child .ao-cal__day { border-bottom: 0; }
.ao-cal__day.is-outside { background: var(--ao-cal-warm); }
.ao-cal__day.is-selected { box-shadow: inset 0 0 0 2px var(--ao-cal-highlight); }

.ao-cal__day-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin: 0 0 4px;
}
.ao-cal__daynum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}
a.ao-cal__daynum:hover { background: var(--ao-cal-warm); }
.ao-cal__day.is-today .ao-cal__daynum {
	background: var(--ao-cal-highlight);
	color: var(--ao-cal-highlight-ink);
}
.ao-cal__daylabel { display: none; font-size: 13px; color: var(--ao-cal-muted); }

/* Days before today (2.231.0): greyed out so a visitor can see those
   performances are no longer available. The chips stay links — a run that
   started last week still opens its event — but read as spent. Colour, not
   opacity, on the text so it keeps 4.5:1 (#5c6168 is 5.3:1 on #ececec,
   5.8:1 on the chip), and the chip card on hover stays at full strength. */
.ao-cal__day.is-past { background: #ececec; color: #5c6168; }
.ao-cal__day.is-past .ao-cal__chip {
	background: #f6f6f6;
	border-left-color: #b4b7bb;
	color: #5c6168;
}
.ao-cal__day.is-past .ao-cal__chip:hover { background: #ffffff; }

/* ---------------------------------------------------------------- chips */
.ao-cal__events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.ao-cal__chip {
	display: block;
	padding: 3px 6px 3px 8px;
	border-left: 3px solid var(--ao-cal-accent);
	border-radius: 3px;
	background: var(--ao-cal-warm);
	color: inherit;
	font-size: 12px;
	line-height: 1.3;
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ao-cal__chip:hover { background: var(--ao-cal-rule); }
.ao-cal__time { font-weight: 700; margin-right: 4px; }

/* ---------------------------------------------------------------- chip card */
/* Title, a 150×150 thumbnail, the run dates and a "View event details" link,
   shown while the chip is hovered or focused (WCAG 1.4.13: it stays while
   the pointer moves onto it — same <li>, plus the ::before bridge over the
   gap — and while its link has focus; Escape hides it via .is-tips-off, set
   by the calendar script / embed loader, until the pointer moves to another
   chip). The chip names it with aria-describedby. */
.ao-cal__events > li { position: relative; }
.ao-cal__events > li:hover,
.ao-cal__events > li:focus-within { z-index: 40; }
.ao-cal__tip {
	display: none;
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	width: 330px;
	max-width: 80vw;
	padding: 10px;
	border: 1px solid var(--ao-cal-rule);
	border-radius: 8px;
	background: var(--ao-cal-paper);
	color: inherit;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
	font-size: 13px;
	line-height: 1.35;
	white-space: normal;
	text-align: left;
}
.ao-cal__events > li:hover .ao-cal__tip,
.ao-cal__events > li:focus-within .ao-cal__tip {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 12px;
	align-items: start;
}
.ao-cal.is-tips-off .ao-cal__tip { display: none !important; }
/* Right-hand columns open leftwards so the card stays inside the grid. */
.ao-cal__day:nth-child(n+5) .ao-cal__tip { left: auto; right: 0; }
.ao-cal__tip-img {
	display: block;
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 6px;
	background: var(--ao-cal-warm);
}
.ao-cal__tip-img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ao-cal-rule);
}
.ao-cal__tip-body { min-width: 0; }
.ao-cal__tip-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; }
.ao-cal__tip-range { display: block; color: var(--ao-cal-muted); }
/* Invisible bridge over the 6px gap above the card, so the pointer can
   travel from the chip onto the card without it closing on the way. */
.ao-cal__tip::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -8px;
	height: 8px;
}
.ao-cal__tip-link {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.ao-cal__tip-link:hover,
.ao-cal__tip-link:focus-visible { background: var(--ao-cal-highlight); border-color: var(--ao-cal-highlight); color: var(--ao-cal-highlight-ink); }
.ao-cal__more {
	display: inline-block;
	padding: 2px 4px;
	font-size: 12px;
	font-weight: 600;
	color: inherit;
}

/* ---------------------------------------------------------------- panel */
.ao-cal__panel,
.ao-cal__ongoing {
	margin: 18px 0 0;
	padding: 16px;
	border: 1px solid var(--ao-cal-rule);
	border-radius: 8px;
	background: var(--ao-cal-paper);
}
.ao-cal__panel:focus { outline: none; }
.ao-cal__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}
.ao-cal__panel-title,
.ao-cal__ongoing-title { margin: 0; font-size: 17px; font-weight: 700; }
.ao-cal__ongoing-title { margin-bottom: 10px; }
.ao-cal__panel-close {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--ao-cal-rule);
	border-radius: 999px;
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.ao-cal__empty { margin: 0; color: var(--ao-cal-muted); }
.ao-cal__events--ongoing { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.ao-cal__events--ongoing .ao-cal__chip { white-space: normal; }

/* ---------------------------------------------------------------- tight grid */
/* Between the agenda breakpoint and ~760px (the theme's main column beside
   its sidebar lands here on a laptop) the seven columns are 80–105px wide:
   let chips wrap instead of truncating, with the time on its own line. */
@container (max-width: 760px) {
	.ao-cal__chip { white-space: normal; padding-left: 6px; }
	.ao-cal__time { display: block; margin: 0; }
	.ao-cal__day { padding: 4px; }
	.ao-cal__grid th { padding: 6px 4px; font-size: 11px; letter-spacing: .03em; }
}

/* ---------------------------------------------------------------- agenda (narrow) */
@container (max-width: 560px) {
	.ao-cal__grid,
	.ao-cal__grid tbody,
	.ao-cal__grid tr,
	.ao-cal__day { display: block; width: 100%; height: auto; min-height: 0; }
	.ao-cal__grid thead { display: none; }
	.ao-cal__grid { border: 0; border-radius: 0; background: transparent; }
	.ao-cal__day { border-right: 0; padding: 10px 0; }
	.ao-cal__day.is-outside,
	.ao-cal__day:not(.has-events) { display: none; }
	.ao-cal__daylabel { display: inline; }
	.ao-cal__day-head { justify-content: flex-start; }
	.ao-cal__chip { white-space: normal; font-size: 14px; padding: 6px 8px 6px 10px; }
	.ao-cal__title { font-size: 18px; }
	.ao-cal__day:nth-child(n+5) .ao-cal__tip { left: 0; right: auto; }
	.ao-cal__events > li:hover .ao-cal__tip,
	.ao-cal__events > li:focus-within .ao-cal__tip { grid-template-columns: 1fr; width: 260px; }
}

/* ---------------------------------------------------------------- viewport fallbacks */
/* The two blocks above key on the calendar's own width, which needs CSS
   container queries (Chrome 105+, Safari 16+). A phone on an older Safari
   ignored them and got seven columns squeezed into ~350px — cells a few
   characters wide, i.e. "nothing" — while landscape happened to fit. On a
   viewport that narrow the calendar can never be wider than the viewport,
   so the same rules are repeated here on plain media queries: portrait
   phones always get the day-by-day agenda, whatever the browser. */
@media (max-width: 760px) {
	.ao-cal__chip { white-space: normal; padding-left: 6px; }
	.ao-cal__time { display: block; margin: 0; }
	.ao-cal__day { padding: 4px; }
	.ao-cal__grid th { padding: 6px 4px; font-size: 11px; letter-spacing: .03em; }
}
@media (max-width: 560px) {
	.ao-cal__grid,
	.ao-cal__grid tbody,
	.ao-cal__grid tr,
	.ao-cal__day { display: block; width: 100%; height: auto; min-height: 0; }
	.ao-cal__grid thead { display: none; }
	.ao-cal__grid { border: 0; border-radius: 0; background: transparent; }
	.ao-cal__day { border-right: 0; padding: 10px 0; }
	.ao-cal__day.is-outside,
	.ao-cal__day:not(.has-events) { display: none; }
	.ao-cal__daylabel { display: inline; }
	.ao-cal__day-head { justify-content: flex-start; }
	.ao-cal__chip { white-space: normal; font-size: 14px; padding: 6px 8px 6px 10px; }
	.ao-cal__title { font-size: 18px; }
	.ao-cal__day:nth-child(n+5) .ao-cal__tip { left: 0; right: auto; }
	.ao-cal__events > li:hover .ao-cal__tip,
	.ao-cal__events > li:focus-within .ao-cal__tip { grid-template-columns: 1fr; width: 260px; }
}