.com-eventlab {
	--eventlab-border: #d8dee8;
	--eventlab-border-soft: #e9edf3;
	--eventlab-text: #202733;
	--eventlab-muted: #667085;
	--eventlab-surface: #ffffff;
	--eventlab-soft: #f6f8fb;
	--eventlab-blue: #1d4f91;
	--eventlab-green: #20735b;
	--eventlab-gold: #9a6416;
	--eventlab-red: #a74242;
	--eventlab-purple: #7152a3;
	color: var(--eventlab-text);
}

/*
 * Category colours: set --eventlab-cat-color on a category-{slug} element.
 * EventLab writes it from each category's Colour option; templates can also
 * set it directly, e.g. .category-workshops { --eventlab-cat-color: #20735b; }
 */

.eventlab-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin: 0 0 1.25rem;
}

.eventlab-toolbar h1 {
	margin: 0;
}

.eventlab-toolbar__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-left: auto;
}

.eventlab-viewswitch {
	background: var(--eventlab-surface);
	border: 1px solid var(--eventlab-border);
	border-radius: 6px;
	color: var(--eventlab-text);
	font-weight: 700;
	padding: .55rem .85rem;
	text-decoration: none;
}

.eventlab-viewswitch:hover,
.eventlab-viewswitch:focus {
	background: var(--eventlab-soft);
	border-color: #b9c3d2;
	color: var(--eventlab-blue);
}

.eventlab-calendar-tools {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: flex-end;
}

.eventlab-calendar-header {
	align-items: end;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin: 0 0 1.25rem;
}

.eventlab-calendar-header h1,
.eventlab-calendar-header .eventlab-month-title {
	font-size: clamp(2rem, 5vw, 3.6rem);
	line-height: 1;
	margin: 0;
}

.eventlab-eyebrow {
	color: var(--eventlab-muted);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin: 0 0 .45rem;
	text-transform: uppercase;
}

.eventlab-month-nav {
	display: flex;
	gap: .5rem;
}

.eventlab-month-nav a {
	background: var(--eventlab-surface);
	border: 1px solid var(--eventlab-border);
	border-radius: 6px;
	color: var(--eventlab-text);
	font-weight: 700;
	padding: .55rem .85rem;
	text-decoration: none;
}

.eventlab-month-nav a:hover,
.eventlab-month-nav a:focus {
	background: var(--eventlab-soft);
	border-color: #b9c3d2;
	color: var(--eventlab-blue);
}

.eventlab-legend {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.eventlab-legend__item {
	align-items: center;
	color: var(--eventlab-muted);
	display: flex;
	font-size: .82rem;
	font-weight: 700;
	gap: .45rem;
}

.eventlab-legend__swatch {
	background: var(--eventlab-cat-color, var(--eventlab-blue));
	border-radius: 3px;
	display: inline-block;
	height: .85rem;
	width: .85rem;
}

.eventlab-form__actions {
	display: flex;
	gap: .5rem;
	margin-top: 1.25rem;
}

.eventlab-calendar {
	background: var(--eventlab-border);
	border: 1px solid var(--eventlab-border);
	border-collapse: separate;
	border-radius: 8px;
	border-spacing: 0;
	box-shadow: 0 18px 50px rgba(24, 36, 56, .08);
	overflow: hidden;
	table-layout: fixed;
	width: 100%;
}

.eventlab-calendar th {
	background: #23314d;
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .06em;
	padding: .8rem .75rem;
	text-align: left;
	text-transform: uppercase;
}

.eventlab-calendar td {
	background: var(--eventlab-surface);
	border-left: 1px solid var(--eventlab-border-soft);
	border-top: 1px solid var(--eventlab-border-soft);
	height: 8.75rem;
	padding: .55rem;
	vertical-align: top;
}

.eventlab-calendar tr:first-child td {
	border-top: 0;
}

.eventlab-calendar th:first-child,
.eventlab-calendar td:first-child {
	border-left: 0;
}

.eventlab-calendar__day.is-muted {
	background: #f8fafc;
	color: #98a2b3;
}

.eventlab-calendar__day.is-today {
	box-shadow: inset 0 0 0 2px var(--eventlab-blue);
}

.eventlab-calendar__date {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: .45rem;
}

.eventlab-calendar__date span {
	align-items: center;
	background: #eef2f7;
	border-radius: 999px;
	display: inline-flex;
	font-size: .88rem;
	font-weight: 800;
	height: 1.75rem;
	justify-content: center;
	min-width: 1.75rem;
	padding: 0 .42rem;
}

.eventlab-calendar__day.is-muted .eventlab-calendar__date span {
	background: #edf0f4;
	color: #98a2b3;
}

.eventlab-calendar__day.is-today .eventlab-calendar__date span {
	background: var(--eventlab-blue);
	color: #fff;
}

.eventlab-calendar__event {
	background: #eef5ff;
	background: color-mix(in srgb, var(--eventlab-cat-color, var(--eventlab-blue)) 9%, #fff);
	border-left: 4px solid var(--eventlab-cat-color, var(--eventlab-blue));
	border-radius: 6px;
	color: #183c6b;
	color: color-mix(in srgb, var(--eventlab-cat-color, var(--eventlab-blue)) 75%, #000);
	display: block;
	font-size: .82rem;
	line-height: 1.25;
	margin: .35rem 0 0;
	padding: .45rem .5rem;
	text-decoration: none;
	transition: background-color .15s ease, transform .15s ease;
}

.eventlab-calendar__event:hover,
.eventlab-calendar__event:focus {
	background: #dfeeff;
	background: color-mix(in srgb, var(--eventlab-cat-color, var(--eventlab-blue)) 16%, #fff);
	color: #102f55;
	color: color-mix(in srgb, var(--eventlab-cat-color, var(--eventlab-blue)) 60%, #000);
	text-decoration: none;
	transform: translateY(-1px);
}

.eventlab-calendar__time {
	color: var(--eventlab-muted);
	display: block;
	font-size: .72rem;
	font-weight: 800;
	margin-bottom: .12rem;
	text-transform: uppercase;
}

.eventlab-calendar__title {
	display: block;
	font-weight: 700;
	overflow-wrap: anywhere;
}

@media (max-width: 760px) {
	.eventlab-calendar-header {
		align-items: stretch;
		display: block;
	}

	.eventlab-month-nav {
		margin-top: 1rem;
	}

	.eventlab-calendar {
		border: 0;
		box-shadow: none;
		display: block;
	}

	.eventlab-calendar thead {
		display: none;
	}

	.eventlab-calendar tbody,
	.eventlab-calendar tr,
	.eventlab-calendar td {
		display: block;
		width: 100%;
	}

	.eventlab-calendar td {
		border: 1px solid var(--eventlab-border-soft);
		border-radius: 8px;
		height: auto;
		margin-bottom: .75rem;
		min-height: 4.5rem;
	}
}