.aoc-calendar {
	--aoc-calendar-blue: var(--thim-body-primary-color, #005cd1);
	--aoc-calendar-black: #000;
	--aoc-calendar-gray: #4d4d4d;
	/* Same size as the course description. */
	font-size: var(--thim-font-h4-font-size, 18px);
	line-height: 28px;
}

/* Boxed Elementor containers centre their inner wrapper with auto margins; here the
   listing must line up with the page title and the breadcrumb. */
.aoc-calendar-page .e-con:has(.elementor-widget-aoc_calendar) > .e-con-inner {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Pages with the widget: title the same size as a course title. */
.aoc-calendar-page .page-title-wrapper .page-title {
	font-size: var(--thim-font-h2-font-size, 36px);
	line-height: 1.6em;
}

.aoc-calendar__subtitle {
	margin: 0 0 1.25em;
}

/* "Ordenar per tipus de servei" / "Ordenar per data". */
.aoc-calendar__sort {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 0 0 2.5em;
}

.aoc-calendar .aoc-calendar__sort-link {
	display: inline-block;
	padding: 0.4em 1.1em;
	border: 2px solid var(--aoc-calendar-blue);
	border-radius: var(--thim-border-radius-button, 6px);
	color: var(--aoc-calendar-blue);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.aoc-calendar .aoc-calendar__sort-link:hover,
.aoc-calendar .aoc-calendar__sort-link:focus {
	background: rgba(0, 92, 209, 0.08);
}

.aoc-calendar .aoc-calendar__sort-link.is-active {
	background: var(--aoc-calendar-blue);
	color: #fff;
}

.aoc-calendar__year + .aoc-calendar__year {
	margin-top: 3.5em;
}

/* The year groups everything below it: a blue rule runs along the whole section. */
.aoc-calendar__year {
	padding-left: 1.25em;
	border-left: 4px solid var(--aoc-calendar-blue);
}

/* Headings: the theme gives them a font family with no fallback, and it only loads the 400
   and 600 weights of Inter. Asking for 700 made the browser fall back to a serif or a generic
   sans, so bold here is always 600 and the family is inherited from the body. */
.aoc-calendar .aoc-calendar__year-title {
	margin: 0 0 0.6em;
	font-family: inherit;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2;
}

.aoc-calendar__type + .aoc-calendar__type {
	margin-top: 1.5em;
}

.aoc-calendar .aoc-calendar__type-title {
	margin: 0 0 0.25em;
	color: var(--aoc-calendar-blue);
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
}

.aoc-calendar__month {
	display: grid;
	grid-template-columns: 9em 1fr;
	gap: 0.25em 1.5em;
	padding: 0.75em 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.aoc-calendar .aoc-calendar__month-title {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
}

.aoc-calendar__events {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aoc-calendar__event + .aoc-calendar__event {
	margin-top: 0.4em;
}

/* Dates in black, the course name in bold blue. */
.aoc-calendar__dates {
	color: var(--aoc-calendar-black);
	font-weight: 400;
	white-space: nowrap;
}

.aoc-calendar__title {
	color: var(--aoc-calendar-blue);
	font-weight: 600;
}

/* Unpublished courses: listed in dark gray, no link and no underline. */
.aoc-calendar__title--no-link {
	color: var(--aoc-calendar-gray);
	text-decoration: none;
}

.aoc-calendar__empty {
	margin: 0;
}

@media (max-width: 600px) {
	.aoc-calendar__year {
		padding-left: 0.75em;
	}

	.aoc-calendar__month {
		grid-template-columns: 1fr;
	}

	.aoc-calendar__dates {
		white-space: normal;
	}
}