/*
 * The events calendar.
 *
 * Two renderings of the same month ship together: a table for wide screens and
 * a list for narrow ones. That is deliberate rather than wasteful — reflowing
 * table cells into cards with CSS destroys the row/column semantics that made a
 * table the right element in the first place, so the mobile view is its own
 * markup rather than a reshaped copy.
 *
 * Colours come from Kadence's palette custom properties per SOP-theme-vs-code,
 * with neutral fallbacks so this degrades to readable grey rather than to a
 * stale brand if the theme is ever swapped.
 */

.swest-calendar-nav {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	margin: 1.5em 0 0.75em;
}

.swest-calendar-month {
	margin: 0;
	font-size: 1.4em;
}

.swest-calendar-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 0.5em 1.25em;
}

.swest-calendar-filter {
	margin: 0;
}

/* --- The list, narrow screens only --------------------------------------- */

.swest-calendar-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.swest-calendar-list-item {
	padding: 0.75em 0;
	border-bottom: 1px solid var(--global-palette7, #e3ddd0);
	line-height: 1.5;
}

.swest-calendar-list-when,
.swest-calendar-list-where {
	font-size: 0.9em;
	color: var(--global-palette5, #4a4a4a);
}

.swest-calendar-list-status {
	font-size: 0.9em;
	font-weight: 600;
}

.swest-calendar-empty-month {
	padding: 1.5em 0;
}

/*
 * The fallback, and why it is visible by default.
 *
 * `.swest-calendar-fallback` is the server-rendered list. JavaScript sets its
 * `hidden` attribute ONLY after FullCalendar has initialised, so no CSS here
 * hides it — if the bundle never loads, the browser has nothing to act on and
 * the list simply stays. An earlier version of this file hid a rendering by
 * default and revealed it in a media query, which meant anything that stopped
 * the CSS applying produced an empty calendar. Never again: nothing in this
 * stylesheet may hide content that JavaScript is responsible for restoring.
 */
.swest-calendar-mount {
	margin: 1em 0;
}

/*
 * FullCalendar's own palette, replaced with Sanctuary's.
 *
 * Left alone, every event renders in the library's default blue — including
 * cancelled ones, which is exactly the row a reader most needs to tell apart.
 * These override FullCalendar's custom properties rather than fighting its
 * selectors, so its own layout rules keep working.
 *
 * Status is still never colour alone: the label travels in the aria-label and
 * the title attribute (see assets/js/calendar.js), and the fallback list spells
 * it out. Colour is the fast path, not the only one.
 */
.swest-calendar-mount {
	--fc-event-bg-color: var(--global-palette1, #5a2a5a);
	--fc-event-border-color: var(--global-palette1, #5a2a5a);
	--fc-event-text-color: #fff;
	--fc-today-bg-color: var(--global-palette8, #fdf3d7);
	--fc-border-color: var(--global-palette7, #e3ddd0);
	--fc-button-bg-color: var(--global-palette1, #5a2a5a);
	--fc-button-border-color: var(--global-palette1, #5a2a5a);
	--fc-button-hover-bg-color: var(--global-palette2, #47204a);
	--fc-button-hover-border-color: var(--global-palette2, #47204a);
	--fc-button-active-bg-color: var(--global-palette2, #47204a);
}

/* Open for sign-ups keeps the full-strength accent — it is the actionable one. */
.fc-event.swest-calendar-event--open {
	background-color: var(--global-palette1, #5a2a5a);
	border-color: var(--global-palette1, #5a2a5a);
}

/* Still on, but you cannot take a seat: present, and visibly quieter. */
.fc-event.swest-calendar-event--full,
.fc-event.swest-calendar-event--closed {
	background-color: var(--global-palette4, #6b6b6b);
	border-color: var(--global-palette4, #6b6b6b);
}

/* Not happening, or already happened. Struck through as well as greyed. */
.fc-event.swest-calendar-event--cancelled,
.fc-event.swest-calendar-event--completed {
	background-color: transparent;
	border-color: var(--global-palette4, #6b6b6b);
	color: var(--global-palette4, #6b6b6b);
	text-decoration: line-through;
}

.fc-event.swest-calendar-event--cancelled .fc-event-title,
.fc-event.swest-calendar-event--completed .fc-event-title,
.fc-event.swest-calendar-event--cancelled .fc-event-time,
.fc-event.swest-calendar-event--completed .fc-event-time {
	color: var(--global-palette4, #6b6b6b);
	text-decoration: line-through;
}

/* The toolbar title should be the page's own heading face, not the library's. */
.fc .fc-toolbar-title {
	font-family: inherit;
	color: var(--global-palette1, #5a2a5a);
}

/* ---------------------------------------------------------------------------
 * Month-grid chips: wrap the title rather than sever it.
 *
 * FullCalendar's day-grid chip is `white-space: nowrap` with the title clipped
 * by `overflow: hidden`, so any chip narrower than its content is cut
 * mid-string — "7:" out of "7:30", "Sanctuary D&D — C" out of the full title.
 * A hard cut, not an ellipsis, which reads as a rendering fault rather than as
 * truncation. Found in a browser 2026-09-08; nothing in the markup shows it,
 * because the markup is complete and it is the cell that is too narrow.
 *
 * Wrapping rather than ellipsing, deliberately: this calendar carries at most
 * one event per day, so a second line costs nothing, where an ellipsis would
 * hide a title the row has room to show.
 * ------------------------------------------------------------------------- */
.fc-daygrid-event {
	white-space: normal;
}

.fc-daygrid-event .fc-event-title,
.fc-daygrid-event .fc-event-time {
	white-space: normal;
	overflow: visible;
	overflow-wrap: break-word;
}

/* Time and title are separate inline boxes; keep them apart once they wrap. */
.fc-daygrid-event .fc-event-time {
	margin-right: 0.35em;
}