/**
 * Speculum Artium Calendar: event date lists.
 *
 * Markup and proportions follow the DDT showtimes list on dd-trbovlje.si.
 * Colours are the DDT company palette:
 *   light mode uses the darkest shade (1), dark mode the lightest shade (5).
 * Dark mode follows the Speculum Artium theme switch: <html data-mode="dark">.
 *
 * Override any token on .sa-cal-showtimes in your theme to restyle.
 */

.sa-cal-showtimes {
	/* Square colours, cycled per line: red, purple, blue, green. */
	--sa-cal-square-1: #A03F30; /* DDT Red 1 */
	--sa-cal-square-2: #5A2342; /* DDT Purple 1 */
	--sa-cal-square-3: #375D71; /* DDT Blue 1 */
	--sa-cal-square-4: #1B675F; /* DDT Green 1 */

	--sa-cal-square-size: 2.6mm;
	--sa-cal-indent: 0.6cm;
	--sa-cal-gap: 0.2cm;
	--sa-cal-past-opacity: 0.5;
	--sa-cal-secondary-size: 0.875em;

	list-style: none;
	margin: 1.2em 0 0 10px;
	padding: 0;
	line-height: 1;
}

:root[data-mode="dark"] .sa-cal-showtimes {
	--sa-cal-square-1: #F79F88; /* DDT Red 5 */
	--sa-cal-square-2: #B18296; /* DDT Purple 5 */
	--sa-cal-square-3: #95B0C5; /* DDT Blue 5 */
	--sa-cal-square-4: #8CB7B2; /* DDT Green 5 */
}

.sa-cal-showtimes > .sa-cal-event {
	position: relative;
	margin: 0 0 var(--sa-cal-gap);
	padding-left: var(--sa-cal-indent);
}

.sa-cal-showtimes > .sa-cal-event:last-child {
	margin-bottom: 0;
}

.sa-cal-showtimes > .sa-cal-event::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8mm;
	width: var(--sa-cal-square-size);
	height: var(--sa-cal-square-size);
	background-color: var(--sa-cal-square-1);
}

.sa-cal-showtimes > .sa-cal-event:nth-child(4n+2)::before {
	background-color: var(--sa-cal-square-2);
}

.sa-cal-showtimes > .sa-cal-event:nth-child(4n+3)::before {
	background-color: var(--sa-cal-square-3);
}

.sa-cal-showtimes > .sa-cal-event:nth-child(4n+4)::before {
	background-color: var(--sa-cal-square-4);
}

/* Past events: dimmed, square included. */
.sa-cal-showtimes > .sa-cal-is-past {
	opacity: var(--sa-cal-past-opacity);
}

/* Fields inside a line. The date stays inline like on DDT; extra fields go on their own line. */
.sa-cal-date {
	display: inline;
}

.sa-cal-location,
.sa-cal-description {
	display: block;
	margin-top: 0.35em;
	font-size: var(--sa-cal-secondary-size);
	line-height: 1.35;
}

.sa-cal-description > :first-child {
	margin-top: 0;
}

.sa-cal-description > :last-child {
	margin-bottom: 0;
}

.sa-cal-description a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.sa-cal-description a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Editor: placeholders show what each field block will output. */
.sa-cal-placeholder {
	font-style: italic;
	opacity: 0.7;
}