/*
 * BAN calendar - the lightweight "next N days" list.
 *
 * Paired with calendar/GFX/js/upcoming.js and loaded instead of FullCalendar's
 * skeleton.css, the Classic theme and ban-calendar.css. The colour values are
 * taken from the Classic palette so the list looks at home next to the full
 * calendar elsewhere on the site; they are written out rather than referenced,
 * because themes/classic/palette.css is not loaded here.
 */

/* On .ban-cal rather than .ban-cal-list so the loading and error message,
   which replaces the list rather than sitting inside it, gets them too. */
.ban-cal {
	--ban-cal-text: #030712;
	--ban-cal-border: #dddddd;
	--ban-cal-muted: #6b7280;
	--ban-cal-faint: #0000000a;
	--ban-cal-today: #facc1526;
}

.ban-cal-list {
	font-size: 14px;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Day headings
   -------------------------------------------------------------------------- */

.ban-cal-list__day {
	border: 1px solid var(--ban-cal-border);
	border-top-width: 0;
}

.ban-cal-list__day:first-child {
	border-top-width: 1px;
}

.ban-cal-list__date {
	padding: 8px 14px;
	font-weight: 700;
	background: var(--ban-cal-faint);
	border-bottom: 1px solid var(--ban-cal-border);
}

/* Intl gives "maandag 1 september". Only the day name gets a capital -
   text-transform: capitalize would wrongly hit the month name too. */
.ban-cal-list__date::first-letter {
	text-transform: uppercase;
}

.ban-cal-list__date--today {
	background: var(--ban-cal-today);
}

/* --------------------------------------------------------------------------
   Event rows

   Divs with role="button", not real buttons: a WordPress theme styles every
   button on the page, and there is no reliably winning that fight - the titles
   kept coming out in the theme's white button text. upcoming.js handles Enter
   and Space so the rows stay keyboard operable.

   The selectors are still scoped under .ban-cal because themes restyle the
   elements inside post content just as freely, and colours are set explicitly
   rather than inherited for the same reason.
   -------------------------------------------------------------------------- */

.ban-cal .ban-cal-list__event {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 8px 14px;
	color: var(--ban-cal-text);
	cursor: pointer;
}

.ban-cal .ban-cal-list__event + .ban-cal-list__event {
	border-top: 1px solid var(--ban-cal-border);
}

.ban-cal .ban-cal-list__event:hover,
.ban-cal .ban-cal-list__event:focus-visible {
	background: var(--ban-cal-faint);
}

/* A div gets no focus ring of its own, and the hover tint alone is too subtle
   to navigate by. */
.ban-cal .ban-cal-list__event:focus-visible {
	outline: 2px solid var(--ban-cal-text);
	outline-offset: -2px;
}

/* The group type colour, between the time and the title. --fc-event-color is
   set by the .event-* rules in ban-calendar-shared.css; upcoming.js overrides
   it inline per event with the colour from the feed. */
.ban-cal-list__dot {
	flex: 0 0 auto;
	align-self: center;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--fc-event-color, #3788d8);
}

.ban-cal .ban-cal-list__time {
	flex: 0 0 auto;
	color: var(--ban-cal-muted);
	font-variant-numeric: tabular-nums;
}

/* A title longer than the column gets cut off with an ellipsis rather than
   wrapping or pushing out of the block. min-width: 0 is what lets a flex item
   shrink below its content width at all. */
.ban-cal .ban-cal-list__event .ban-cal-list__title {
	flex: 1 1 auto;
	min-width: 0em;
	color: var(--ban-cal-text);
	/* font-weight: 600; */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Loading, empty and error text. */
.ban-cal-list__message {
	margin: 0;
	padding: 14px;
	color: var(--ban-cal-muted);
	border: 1px solid var(--ban-cal-border);
}

/* --------------------------------------------------------------------------
   Narrow screens: the time drops onto its own line above the title.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 480px) {

	.ban-cal .ban-cal-list__event {
		flex-wrap: wrap;
		gap: 2px 10px;
	}

	/* Full width on its own line, so there is as much room as possible
	   before the ellipsis kicks in. */
	.ban-cal .ban-cal-list__event .ban-cal-list__title {
		flex: 1 1 100%;
	}

}