@charset "UTF-8";
/*
 * calendar.css - front-end styles for the calendar Page Functions
 * (calendar_display.php = month grid, calendar_events.php = year list)
 *
 * Copyright 2026 - Onespot Web Integration
 *
 * Version 2.02.0  (13/11/2026)
 *
 * Served to each site by /styles/calendar.php. A skin copy at
 * /skins/<skindir>/styles/calendar.css replaces this file.
 *
 * ChangeLog:
 * 2.00.0 10/11/2026 - Calendar rebuild (phase 1):
 *   - Removed the global "body, div { margin:0; padding:0 }" and
 *     "html" rules, which reset every div on the page.
 *   - Category colours (--cal-colour on each event), "Closed" days
 *     and badges, today's date, "No events".
 *   - Event details open with a class (calendar.js 2.00.0) instead of
 *     jQuery slideToggle.
 *   - Year list laid out with CSS grid (months left to right, as
 *     before) - Masonry is no longer needed. The month icon no longer needs glyphicons.
 *   - Works on Bootstrap 3 and Bootstrap 5 skins.
 * 2.01.0 12/11/2026 - Phase 3 (new rules at the end, all inside :where()
 *   so a skin can override them easily): category key / filter, month
 *   agenda layout, year planner, print button (prints only the calendar),
 *   upcoming events (list, cards, compact, mini month), event pages,
 *   "add to calendar" and "subscribe" links.
 * 2.01.1 12/11/2026 - Upcoming cards: a long title no longer drops below
 *   the date box (the text column takes the remaining width).
 * 2.02.0 13/11/2026 - Event Bookings (phase 4, rules at the end): the
 *   booking box and form on event pages, the customer's booking page and
 *   My bookings. Sizes in em, not rem (Bootstrap 3 sets html to 10px). Inside :where() like phase 3, except a few resets that
 *   must beat Bootstrap 3 / 5 element rules.
 */

@font-face {
	font-family: 'Lato';
	src: url('/assets/fonts/subset-Lato-Regular.woff2') format('woff2'),
		url('/assets/fonts/subset-Lato-Regular.woff') format('woff'),
		url('/assets/fonts/subset-Lato-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lato';
	src: url('/assets/fonts/subset-Lato-Bold.woff2') format('woff2'),
		url('/assets/fonts/subset-Lato-Bold.woff') format('woff'),
		url('/assets/fonts/subset-Lato-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* Custom Calendar */

.customCalendar {
	font-family: 'Lato', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.2;
	margin: 15px;
	--cal-closed: #b00020;
	--cal-closed-bg: #fdf1f0;
	--cal-today-bg: #f3f8ff;
}

.customCalendar .section {
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 30px 25px;
}

.customCalendar .closed-badge {
	display: inline-block;
	margin: 0;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--cal-closed);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* Monthly Calendar */

#monthlyCalendar {
	border: 1px solid #ebebeb;
	padding: 23px 23px 0;
	color: #000;
	border-radius: 6px;
	box-shadow: 0 0 54px 0 rgba(0, 0, 0, 0.16);
}

#monthlyCalendar .options {
	padding: 3px 14px 0;
	margin-bottom: 21px;
	font-size: 20px;
	font-weight: bold;
}

#monthlyCalendar .options .months {
	float: left;
}

#monthlyCalendar .options .months .name {
	display: inline-block;
	vertical-align: middle;
	margin-right: 13px;
	text-transform: capitalize;
}

#monthlyCalendar .options .months .prev,
#monthlyCalendar .options .months .next {
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 0;
	border-style: solid;
	margin: 0 3px;
	text-indent: -9999em;
	overflow: hidden;
}

#monthlyCalendar .options .months .prev {
	border-width: 6px 7px 6px 0;
	border-color: transparent #000 transparent transparent;
}

#monthlyCalendar .options .months .next {
	border-width: 6px 0 6px 7px;
	border-color: transparent transparent transparent #000;
}

#monthlyCalendar .options .years {
	position: relative;
	float: right;
}

#monthlyCalendar .options .years:after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -3.5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 6px 0 6px;
	border-color: #000 transparent transparent transparent;
	pointer-events: none;
}

#monthlyCalendar .options .years select {
	border: 0;
	padding: 0 18px 0 0;
	background: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	font-weight: bold;
}

#monthlyCalendar .calendar {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
}

#monthlyCalendar .calendar th,
#monthlyCalendar .calendar td {
	margin: 0;
	padding: 0 2px;
	font-weight: normal;
	text-align: center;
}

#monthlyCalendar .calendar th {
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	font-size: 15px;
	font-weight: bold;
	color: #7c7c7c;
	padding: 22px 0;
}

#monthlyCalendar .calendar td {
	font-size: 17px;
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 6px;
	height: 100px;
	vertical-align: top;
}

#monthlyCalendar .calendar tbody tr:first-child td {
	padding-top: 24px;
}

#monthlyCalendar .calendar td.is-today .date {
	display: inline-block;
	min-width: 1.8em;
	border-radius: 1em;
	background: #244ba4;
	color: #fff;
}

#monthlyCalendar .calendar td.is-closed {
	background: var(--cal-closed-bg);
}

#monthlyCalendar .calendar td.is-closed .date {
	color: var(--cal-closed);
}

#monthlyCalendar .calendar td .closed-badge {
	display: table;
	margin: 3px auto 0;
}

#monthlyCalendar .calendar td .date {
	margin: 0;
}

#monthlyCalendar .calendar td .date span {
	display: none;
}

#monthlyCalendar .calendar td .noEvents {
	display: none;
	text-align: center;
	font-weight: 300;
	font-size: 14px;
	padding: 0 10px 14px;
	color: #aaa;
}

#monthlyCalendar .calendar .event {
	--cal-colour: #244ba4;
	position: relative;
	max-width: 110px;
	margin: 6px auto 0;
}

#monthlyCalendar .calendar .event[role="button"] {
	cursor: pointer;
}

#monthlyCalendar .calendar .event[role="button"]:focus-visible {
	outline: 2px solid var(--cal-colour);
	outline-offset: 2px;
}

#monthlyCalendar .calendar .event .caption {
	font-size: 11px;
	font-weight: bold;
	color: var(--cal-colour);
	margin: 0;
	padding: 2px 3px;
	border-left: 3px solid var(--cal-colour);
	text-align: left;
	overflow-wrap: anywhere;
}

#monthlyCalendar .calendar .event .image img {
	display: block;
	margin: 0 auto;
}

#monthlyCalendar .calendar .event .image .caption {
	display: block;
	background: var(--cal-colour);
	border-left: 0;
	font-size: 10px;
	color: #fff;
	padding: 3px;
	text-align: center;
}

#monthlyCalendar .calendar .event .details {
	display: none;
	position: absolute;
	width: 200px;
	padding: 0 10px 10px;
	left: 50%;
	margin-left: -100px;
	margin-top: 14px;
	background: #fff;
	color: #555;
	font-size: 13px;
	font-weight: normal;
	text-align: left;
	line-height: 1.385;
	border-radius: 6px;
	box-shadow: 0 0 54px 0 rgba(0, 0, 0, 0.16);
	z-index: 10;
}

#monthlyCalendar .calendar .event.open .details {
	display: block;
}

#monthlyCalendar .calendar .event .details:after {
	position: absolute;
	left: 50%;
	margin-left: -9px;
	top: -10px;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 9px 10px 9px;
	border-color: transparent transparent var(--cal-colour) transparent;
}

#monthlyCalendar .calendar .event .details .title {
	display: block;
	background: var(--cal-colour);
	color: #fff;
	font-size: 13px;
	margin: 0 -10px 10px;
	padding: 8px 10px;
	font-weight: bold;
	text-align: center;
	border-radius: 6px 6px 0 0;
}

#monthlyCalendar .calendar .event .details .when {
	margin: 0 0 6px;
	font-weight: bold;
	color: #000;
}

#monthlyCalendar .calendar .event .details .brief p {
	margin: 0 0 6px;
}

#monthlyCalendar .calendar .event .details .brief img {
	max-width: 100%;
	height: auto;
}

#monthlyCalendar .calendar .event .details .more {
	margin: 6px 0 0;
}

#monthlyCalendar .calendar .event .details .more a {
	color: var(--cal-colour);
	font-weight: bold;
	text-decoration: underline;
}

/* Yearly Calendar */

#yearlyCalendar {
	margin-left: 0;
	margin-right: 0;
}

#yearlyCalendar .months {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	align-items: start;
}

#yearlyCalendar .month {
	width: auto;
	padding: 0 20px 40px;
	break-inside: avoid;
	page-break-inside: avoid;
}

#yearlyCalendar .month .inner {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.19);
}

#yearlyCalendar .month .caption {
	margin: 0;
	padding: 17px 18px 16px;
	background: #f6f6f6;
	font-size: 23px;
	font-weight: bold;
	border-radius: 6px 6px 0 0;
}

#yearlyCalendar .month .caption .cal-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	vertical-align: -2px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 0h1v2h6V0h1v2h3v14H1V2h3zm-2 6v9h12V6zm0-3v2h12V3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 0h1v2h6V0h1v2h3v14H1V2h3zm-2 6v9h12V6zm0-3v2h12V3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#yearlyCalendar .month .caption.January { color: #bca612; }
#yearlyCalendar .month .caption.February { color: #4c9137; }
#yearlyCalendar .month .caption.March { color: #20a880; }
#yearlyCalendar .month .caption.April { color: #343478; }
#yearlyCalendar .month .caption.May { color: #a131cb; }
#yearlyCalendar .month .caption.June { color: #cb318f; }
#yearlyCalendar .month .caption.July { color: #e21616; }
#yearlyCalendar .month .caption.August { color: #e15e36; }
#yearlyCalendar .month .caption.September { color: #e1a736; }
#yearlyCalendar .month .caption.October { color: #3f61a8; }
#yearlyCalendar .month .caption.November { color: #309b97; }
#yearlyCalendar .month .caption.December { color: #4ab682; }

#yearlyCalendar .month ul.January a { color: #bca612; }
#yearlyCalendar .month ul.February a { color: #4c9137; }
#yearlyCalendar .month ul.March a { color: #20a880; }
#yearlyCalendar .month ul.April a { color: #343478; }
#yearlyCalendar .month ul.May a { color: #a131cb; }
#yearlyCalendar .month ul.June a { color: #cb318f; }
#yearlyCalendar .month ul.July a { color: #e21616; }
#yearlyCalendar .month ul.August a { color: #e15e36; }
#yearlyCalendar .month ul.September a { color: #e1a736; }
#yearlyCalendar .month ul.October a { color: #3f61a8; }
#yearlyCalendar .month ul.November a { color: #309b97; }
#yearlyCalendar .month ul.December a { color: #4ab682; }

#yearlyCalendar .month ul {
	margin: 0;
	padding: 22px 18px;
	font-size: 14px;
	color: #1a1b1c;
}

#yearlyCalendar .month ul li {
	--cal-colour: #1a1b1c;
	position: relative;
	margin: 8px 0 0;
	padding: 0 0 0 19px;
	list-style: none;
}

#yearlyCalendar .month ul li:first-child {
	margin-top: 0;
}

#yearlyCalendar .month ul li:after {
	content: "";
	position: absolute;
	left: 0;
	top: 4.5px;
	width: 8px;
	height: 8px;
	border: 1px solid var(--cal-colour);
	background: var(--cal-colour);
	border-radius: 100%;
}

#yearlyCalendar .month ul li.is-closed strong {
	color: var(--cal-closed);
}

#yearlyCalendar .month ul li.noEvents {
	color: #aaa;
	padding-left: 0;
}

#yearlyCalendar .month ul li.noEvents:after {
	display: none;
}

#yearlyCalendar .month ul li .closed-badge {
	vertical-align: 1px;
}

/* Miscellaneous */

.customCalendar a,
.customCalendar a:hover,
.customCalendar a:active,
.customCalendar a:focus {
	text-decoration: none;
	color: inherit;
}

.customCalendar img {
	border: 0;
	max-width: 100%;
	height: auto;
}

.customCalendar .clear {
	clear: both;
}

.customCalendar .clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.customCalendar .visually-hidden,
.customCalendar .sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

#calendarNav {
	position: relative;
	text-align: center;
	padding-top: 50px;
	font-family: 'Lato', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.2;
	color: #000;
	margin-bottom: 38px;
}

#calendarNav .currentYear {
	text-align: center;
	font-size: 48px;
	font-weight: bold;
}

#calendarNav .prevYear,
#calendarNav .nextYear {
	position: absolute;
	bottom: 7px;
	font-size: 30px;
	color: #000;
	text-decoration: none;
}

#calendarNav .prevYear { left: 20px; }
#calendarNav .nextYear { right: 20px; }

/* Medium Screens (Tablets - Landscape) */

@media only screen and (max-width: 1225px) {
	#yearlyCalendar .month {
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 30px;
	}
}

/* Extra Small Screens (Mobiles) - the month grid becomes a list of days */

@media only screen and (max-width: 767px) {
	#monthlyCalendar {
		padding-left: 0;
		padding-right: 0;
	}

	#monthlyCalendar .calendar,
	#monthlyCalendar .calendar tbody,
	#monthlyCalendar .calendar tr,
	#monthlyCalendar .calendar th,
	#monthlyCalendar .calendar td {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		height: auto;
		text-align: left;
	}

	#monthlyCalendar .calendar thead,
	#monthlyCalendar .calendar td.NoDay {
		display: none;
	}

	#monthlyCalendar .options {
		padding-left: 15px;
		padding-right: 15px;
	}

	#monthlyCalendar .options .months .name {
		margin-right: 6px;
	}

	#monthlyCalendar .calendar {
		border-top: 1px solid #e9ecef;
	}

	#monthlyCalendar .calendar tbody tr:first-child td {
		padding-top: 0;
	}

	#monthlyCalendar .calendar td {
		border-bottom: 1px solid #e9ecef;
		padding-bottom: 14px;
	}

	#monthlyCalendar .calendar td .date {
		position: relative;
		background-color: #f8f9fa;
		padding: 4px 20px;
		margin: 0 0 14px;
		border-bottom: 2px solid #e9ecef;
	}

	#monthlyCalendar .calendar td.is-today .date {
		display: block;
		border-radius: 0;
	}

	#monthlyCalendar .calendar td .date span {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 4px;
		text-align: center;
	}

	#monthlyCalendar .calendar .event {
		max-width: 100%;
		padding: 0 15px;
		text-align: center;
	}

	#monthlyCalendar .calendar .event .caption {
		font-size: 14px;
	}

	#monthlyCalendar .calendar .event .image {
		max-width: 120px;
		margin: 0 auto;
	}

	#monthlyCalendar .calendar .event .details {
		position: relative;
		left: 0;
		margin: 6px 0 0;
		padding: 10px;
		width: auto;
		max-width: 100%;
		box-shadow: none;
		background: #f8f9fa;
	}

	#monthlyCalendar .calendar .event .details .title,
	#monthlyCalendar .calendar .event .details:after {
		display: none;
	}

	#monthlyCalendar .calendar td .noEvents {
		display: block;
	}

	#yearlyCalendar .month {
		padding-bottom: 15px;
	}

	#calendarNav {
		padding-top: 30px;
		margin-bottom: 25px;
	}

	#calendarNav .currentYear { font-size: 32px; }
	#calendarNav .prevYear,
	#calendarNav .nextYear { font-size: 20px; }
}

@media print {
	#monthlyCalendar, #yearlyCalendar .month .inner { box-shadow: none; }
	#monthlyCalendar .options .years, #calendarNav .prevYear, #calendarNav .nextYear { display: none; }
}


/* ===================================================================
 * 2.01.0 - Phase 3 displays. Mostly wrapped in :where() (zero
 * specificity) so a skin's own rules win without !important. The list
 * and table resets use plain classes, or Bootstrap's element rules
 * (ul padding, th/td) would win.
 * =================================================================== */

:where(.cal-legend, .cal-agenda, .cal-upcoming, .cal-event-page, .cal-subscribe, .cal-add, .cal-mini, .cal-notice) {
	--cal-closed: #b00020;
	--cal-closed-bg: #fdf1f0;
	--cal-today-bg: #f3f8ff;
	box-sizing: border-box;
}
:where(.cal-upcoming, .cal-event-page) .closed-badge {
	display: inline-block; padding: 1px 6px; border-radius: 3px; background: var(--cal-closed); color: #fff;
	font-size: 11px; font-weight: bold; line-height: 1.4; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle;
}
:where(.cal-swatch) {
	display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: .35em; vertical-align: -.05em;
	background: var(--cal-colour, #244ba4);
}

/* Category key / filter */
:where(.cal-legend) { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 0 0 1rem; padding: 0 14px; font-size: 14px; }
:where(.cal-legend-filter) { gap: .4rem; }
:where(.cal-legend-filter .cal-legend-item) {
	display: inline-block; padding: .25rem .7rem; border: 1px solid #d5d8dc; border-radius: 999px; color: inherit; text-decoration: none; background: #fff;
}
:where(.cal-legend-filter .cal-legend-item:hover, .cal-legend-filter .cal-legend-item:focus-visible) { border-color: #244ba4; }
:where(.cal-legend-filter .cal-legend-item.is-active) { background: #244ba4; border-color: #244ba4; color: #fff; }
:where(.cal-legend-filter .cal-legend-item.is-active .cal-swatch) { outline: 1px solid #fff; }

/* Month agenda */
:where(.cal-agenda) { margin: 0 0 1rem; }
:where(.cal-agenda-day) { display: flex; gap: 1rem; padding: .9rem 14px; border-top: 1px solid #ebebeb; }
:where(.cal-agenda-day.is-today) { background: var(--cal-today-bg); }
:where(.cal-agenda-day.is-closed) { background: var(--cal-closed-bg); }
:where(.cal-agenda-date) { flex: 0 0 3.6rem; text-align: center; line-height: 1.1; }
:where(.cal-agenda-date) span { display: block; }
:where(.cal-agenda-date .dow, .cal-agenda-date .mon) { font-size: 12px; text-transform: uppercase; color: #666; }
:where(.cal-agenda-date .num) { font-size: 28px; font-weight: bold; }
:where(.cal-agenda-day.is-closed .cal-agenda-date .num) { color: var(--cal-closed); }
:where(.cal-agenda-events) { flex: 1 1 auto; min-width: 0; }
:where(.cal-agenda-event) { border-left: 4px solid var(--cal-colour, #244ba4); padding: .1rem 0 .1rem .8rem; margin-bottom: .8rem; overflow: hidden; }
:where(.cal-agenda-event:last-child) { margin-bottom: 0; }
:where(.cal-agenda-event .title) { margin: 0 0 .2rem; font-weight: bold; font-size: 17px; }
:where(.cal-agenda-event .when) { margin: 0 0 .3rem; color: #555; font-size: 14px; }
:where(.cal-agenda-event .brief p:last-child) { margin-bottom: 0; }
:where(.cal-agenda-img) { float: right; max-width: 120px; height: auto; margin: 0 0 .5rem .8rem; border-radius: 4px; }
:where(.cal-agenda-none) { padding: 1rem 14px; color: #666; }

/* Small notices / links */
:where(.cal-notice) { padding: .6rem 14px; margin: 0 0 1rem; background: #fff8e1; border-radius: 4px; }
:where(.cal-subscribe, .cal-add) { font-size: 14px; margin: .6rem 0; }
:where(#monthlyCalendar .cal-subscribe) { padding: 0 14px 1rem; }
:where(.cal-subscribe a, .cal-add a) { margin-right: .7rem; white-space: nowrap; }
:where(.cal-subscribe-label, .cal-add-label) { color: #666; margin-right: .3rem; }
:where(.cal-add-inline) { margin: 0; font-size: 13px; }
:where(#monthlyCalendar .calendar .event .details .cal-add) { margin-top: 6px; }

/* Print button */
:where(.cal-print-btn) {
	margin-left: 1rem; padding: .3rem .9rem; border: 1px solid #c9ccd1; border-radius: 4px; background: #fff; font: inherit; font-size: 14px; cursor: pointer;
}

/* Mini month (year planner, upcoming "mini" layout) */
.cal-mini { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 .8rem; font-size: 13px; }
.cal-mini caption { caption-side: top; text-align: center; font-weight: bold; padding: 0 0 .4rem; color: inherit; }
.cal-mini th { text-align: center; font-weight: normal; color: #777; font-size: 11px; padding: 2px 0; }
.cal-mini td { text-align: center; padding: 3px 0; border-radius: 3px; }
:where(.cal-mini td.has-events) { background: #e3e9f6; background: color-mix(in srgb, var(--cal-colour, #244ba4) 22%, #fff); font-weight: bold; }
:where(.cal-mini td.is-closed) { background: var(--cal-closed-bg); color: var(--cal-closed); font-weight: bold; }
:where(.cal-mini td.is-today) { outline: 2px solid #244ba4; outline-offset: -2px; }
:where(.cal-mini .cal-mini-day) { cursor: help; }

/* Year planner */
:where(#yearlyCalendar.cal-planner .month ul li) { font-size: 13px; }

/* Upcoming events */
:where(.cal-upcoming) { margin: 0 0 1.5rem; }
:where(.cal-upcoming-heading) { margin: 0 0 1rem; }
:where(.cal-upcoming-items) { display: grid; gap: 1rem; }
:where(.cal-upcoming-item) { display: flex; gap: 1rem; align-items: flex-start; }
:where(.cal-upcoming-date) {
	flex: 0 0 3.6rem; text-align: center; border-radius: 6px; padding: .4rem 0; line-height: 1.05;
	background: var(--cal-colour, #244ba4); color: #fff;
}
:where(.cal-upcoming-item.is-closed .cal-upcoming-date) { background: var(--cal-closed); }
:where(.cal-upcoming-date) span { display: block; }
:where(.cal-upcoming-date .num) { font-size: 26px; font-weight: bold; }
:where(.cal-upcoming-date .mon) { font-size: 12px; text-transform: uppercase; }
:where(.cal-upcoming-body) { flex: 1 1 0; min-width: 0; }
:where(.cal-upcoming-body .title) { margin: 0 0 .2rem; font-weight: bold; font-size: 17px; }
:where(.cal-upcoming-body .when) { margin: 0 0 .3rem; color: #555; font-size: 14px; }
:where(.cal-upcoming-body .brief p:last-child) { margin-bottom: 0; }
:where(.cal-upcoming-list .cal-upcoming-img) { order: 3; flex: 0 0 110px; }
:where(.cal-upcoming-img img) { width: 100%; height: auto; border-radius: 4px; display: block; }
:where(.cal-upcoming-cards .cal-upcoming-items) { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
:where(.cal-upcoming-cards .cal-upcoming-item) {
	flex-wrap: wrap; border: 1px solid #e3e5e8; border-radius: 6px; padding: .9rem; background: #fff; position: relative;
	border-top: 4px solid var(--cal-colour, #244ba4);
}
:where(.cal-upcoming-cards .cal-upcoming-img) { flex: 0 0 100%; margin: -.9rem -.9rem 0; max-width: calc(100% + 1.8rem); flex-basis: calc(100% + 1.8rem); }
:where(.cal-upcoming-cards .cal-upcoming-img img) { border-radius: 0; aspect-ratio: 16 / 9; object-fit: cover; }
.cal-upcoming-compact { list-style: none; margin: 0 0 1rem; padding: 0; }
.cal-upcoming-compact li { padding: .35rem 0 .35rem .7rem; border-left: 3px solid var(--cal-colour, #244ba4); margin-bottom: .35rem; }
:where(.cal-upcoming-compact .cal-when) { font-weight: bold; margin-right: .3rem; }
:where(.cal-upcoming-mini .cal-mini) { max-width: 320px; }
:where(.cal-upcoming-none) { color: #666; }
:where(.cal-upcoming-more) { margin: .8rem 0 0; }

/* Event page */
:where(.cal-event-page) { padding: 0 14px 1.5rem; }
:where(.cal-event-page .cal-back) { margin: 0 0 1rem; font-size: 14px; }
:where(.cal-event-title) { margin: 0 0 .3rem; border-left: 5px solid var(--cal-colour, #244ba4); padding-left: .6rem; }
:where(.cal-event-when) { font-size: 18px; margin: 0 0 .6rem; }
:where(.cal-event-meta) { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: 14px; color: #555; margin: 0 0 1rem; }
:where(.cal-event-image img) { max-width: 100%; height: auto; border-radius: 6px; }
:where(.cal-event-details) { margin: 1rem 0; }
:where(.cal-event-details img) { max-width: 100%; height: auto; }

@media only screen and (max-width: 575px) {
	:where(.cal-upcoming-list .cal-upcoming-img) { display: none; }
	:where(.cal-agenda-img) { max-width: 80px; }
}

/* Print: the Print button (calendar.js) adds .cal-printing to <html> so only the
   calendar prints; printing the page any other way is unchanged. */
@media print {
	html.cal-printing body * { visibility: hidden; }
	html.cal-printing .cal-print-area, html.cal-printing .cal-print-area * { visibility: visible; }
	html.cal-printing .cal-print-area { position: absolute; left: 0; top: 0; width: 100%; }
	html.cal-printing .cal-no-print, html.cal-printing #calendarNav a { display: none !important; }
	html.cal-printing #yearlyCalendar .months { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
	html.cal-printing #yearlyCalendar .month { break-inside: avoid; }
	html.cal-printing .cal-mini td.has-events, html.cal-printing .cal-mini td.is-closed { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------------------------------------------------------------------
 * 2.02.0 - Event Bookings. Colours follow the category (--cal-colour)
 * on event pages, else the calendar blue.
 * ------------------------------------------------------------------ */
:where(.cal-booking) {
	margin: 1.5em 0; padding: 1.1em 1.25em; border: 1px solid #d9dde3; border-top: 4px solid var(--cal-colour, #244ba4);
	border-radius: 6px; background: #fafbfc; text-align: left;
}
:where(.cal-booking-title) { margin: 0 0 .25em; font-size: 1.35em; }
:where(.cal-booking-facts) { margin: 0 0 1em; color: #444; }
:where(.cal-booking-price) { font-weight: bold; }
:where(.cal-booking-left) { color: #b35900; font-weight: bold; }
:where(.cal-sep) { color: #aaa; }
:where(.cal-booking-message) { font-weight: bold; }
:where(.cal-booking-waitlist) { color: #6c4a00; }
:where(.cal-booking-form) fieldset { margin: 0 0 1em; padding: 0; border: 0; min-width: 0; }
:where(.cal-booking-form) legend {
	width: auto; margin: 0 0 .5em; padding: 0; border: 0; font-size: 1.05em; font-weight: bold; float: none;
}
:where(.cal-booking-form) .form-group { margin: 0 0 .8em; }
:where(.cal-booking-form) label { display: inline-block; margin-bottom: .25em; font-weight: 600; }
:where(.cal-booking-form) .form-control { max-width: 32em; }
:where(.cal-booking-form) .is-invalid .form-control, :where(.cal-booking-form) .has-error .form-control { border-color: #c0392b; }
:where(.cal-req) { color: #c0392b; }
:where(.cal-field-error) { margin-top: .2em; font-size: .9em; color: #c0392b; }
:where(.cal-help) { font-size: .85em; color: #666; }
:where(.cal-ticket) { display: flex; flex-wrap: wrap; align-items: center; gap: .25em 1em; }
:where(.cal-ticket) .cal-ticket-name { flex: 1 1 14em; margin: 0; }
:where(.cal-ticket) .cal-qty { flex: 0 0 6em; width: 6em; }
:where(.cal-ticket-price) { font-weight: normal; color: #444; margin-left: .35em; }
:where(.cal-ticket-desc) { flex: 1 0 100%; order: 3; font-size: .9em; color: #666; margin-top: -.2em; }
:where(.cal-ticket-note) { font-size: .9em; color: #b35900; }
:where(.cal-booking-total) { margin: .25em 0 0; font-size: 1.1em; }
:where(.cal-check) { display: flex; align-items: flex-start; gap: .45em; margin: 0 0 .35em; }
:where(.cal-check) input { margin-top: .3em; flex: 0 0 auto; }
:where(.cal-check) label { font-weight: normal; margin: 0; }
:where(.cal-choices) .cal-check { display: inline-flex; margin-right: 1.1em; }
:where(.cal-method) label strong { font-weight: 600; }
:where(.cal-method-text) { font-size: .9em; color: #555; }
:where(.cal-attendee) { margin: 0 0 .9em; padding: .75em .9em .1em; border: 1px solid #e3e6ea; border-radius: 5px; background: #fff; }
:where(.cal-attendee-title) { margin: 0 0 .4em; font-weight: bold; }
:where(.cal-attendee-ticket) { font-weight: normal; color: #666; }
:where(.cal-terms-text) { max-height: 10em; overflow: auto; margin: 0 0 .5em; padding: .6em .75em; border: 1px solid #e3e6ea; background: #fff; font-size: .9em; }
:where(.cal-booking-submit) { margin: 1em 0 .5em; }
:where(.cal-booking-privacy) { margin: 0; color: #666; }
:where(.cal-booking-error) ul { margin: .35em 0 0; padding-left: 1.2em; }
:where(.cal-booking-member) { margin: 0 0 .6em; color: #444; }
.cal-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

:where(.cal-booking-page) { margin: 0 0 1.5em; padding: 0 14px; text-align: left; }
:where(.cal-booking-heading) { margin: 0 0 .75em; }
.cal-booking-summary { display: grid; grid-template-columns: max-content 1fr; gap: .35em 1.25em; margin: 1em 0; padding: 0; }
.cal-booking-summary dt { margin: 0; font-weight: bold; }
.cal-booking-summary dd { margin: 0; }
:where(.cal-booking-paynote, .cal-booking-note) { margin: 1em 0; padding: .8em 1em; border-left: 4px solid #244ba4; background: #f3f6fb; }
:where(.cal-booking-paynote) p:last-child, :where(.cal-booking-note) p:last-child { margin-bottom: 0; }
:where(.cal-booking-cancel) { margin: 1.25em 0 .5em; }
:where(.cal-booking-list) tr.cal-past td { color: #888; }
@media (max-width: 575px) {
	.cal-booking-summary { grid-template-columns: 1fr; gap: 0; }
	.cal-booking-summary dd { margin-bottom: .5em; }
	:where(.cal-booking) { padding: .9em; }
}
@media print { :where(.cal-booking) { display: none; } }