/* ---------------------------------------------------------------------------------------
 * Calendar styles.
 *
 * Loaded by calendar/index.php and calendar/agenda/index.php only — it is not in css.php, so
 * nothing else on the site pays for it.
 *
 * This file was 0 bytes until 2026-08-15 while `calendar-full.php` was already emitting
 * `.calendar-table` / `.calendar-day` / `.day-number` / `.event-item` markup. Every one of
 * those classes was undefined, which is why the month grid had ragged, content-height rows:
 * a cell with three events was three times the height of an empty one.
 *
 * Ported from haferkamp.us's TV calendar (includes/tv/tv-calendar.php), where the same rules
 * live in an inline <style> block. They belong in a stylesheet rather than inline, and colours
 * are taken from the semantic aliases in custom.css rather than hafferkamp's hard-coded
 * Bootstrap blues, so this travels with the palette when the build is copied.
 * ------------------------------------------------------------------------------------- */


/* Equal-height day cells
 * ---------------------------------------------------------------------------------------
 * Two rules do the work, and BOTH are required:
 *
 *   table-layout: fixed  makes every column the same width regardless of content. Without it
 *                        a day holding "Referee Certification Clinic" is wider than an empty
 *                        Tuesday, and the week grid stops lining up.
 *   height on the cell   a fixed height on <td> behaves as a MINIMUM in table layout — the row
 *                        still grows if a day genuinely overflows — so a light day and a busy
 *                        day match, without clipping a busy one.
 *
 * `min-height` is set alongside it because `height` alone is ignored on table cells in some
 * engines; together they cover both behaviours. */
.calendar-table {
	table-layout: fixed;
}

.calendar-table thead th {
	padding: 12px 8px;
	vertical-align: middle;
	background-color: #f8f9fa;
	font-weight: 600;
}

.calendar-day {
	padding: 8px;
	min-height: 150px;
	height: 150px;
	vertical-align: top;   /* events stack from the top; without this they centre in the cell */
	position: relative;
}

/* Today, and the greyed-out leading/trailing days of adjacent months. */
.calendar-day.today {
	background-color: rgba(82, 140, 185, 0.08);   /* --color-secondary-light, tinted */
}

.calendar-day.other-month {
	background-color: #f8f9fa;
}

.day-number {
	font-size: 0.9rem;
	margin-bottom: 4px;
	font-weight: 500;
}


/* Event chips
 * ---------------------------------------------------------------------------------------
 * The left rule uses the palette rather than Bootstrap's #0d6efd, which is the colour
 * hafferkamp's version hard-codes and which appears nowhere in this build. */
.event-item,
.episode-item {
	border-left: 3px solid var(--color-primary);
	transition: all 0.2s ease;
	font-size: 0.75rem;
}

.event-item:hover,
.episode-item:hover {
	background-color: #e9ecef !important;
	transform: translateX(2px);
}

.mobile-event-item,
.mobile-episode-item {
	transition: all 0.2s ease;
}

.mobile-event-item:hover,
.mobile-episode-item:hover {
	background-color: #e9ecef !important;
	transform: translateX(2px);
}


/* Responsive
 * ---------------------------------------------------------------------------------------
 * Cells shrink at narrower widths rather than the type wrapping into an unreadable column.
 * Below 768px the month grid is hidden entirely (`d-none d-md-block` in the template) and the
 * stacked mobile list takes over, so no rules are needed under that. */
@media (max-width: 1200px) {
	.calendar-table {
		font-size: 0.85rem;
	}

	.calendar-day {
		padding: 5px;
		min-height: 120px;
		height: 120px;
	}

	.event-item,
	.episode-item {
		font-size: 0.7rem;
		padding: 3px !important;
	}

	.day-number {
		font-size: 0.8rem;
	}
}

@media (max-width: 991px) {
	.calendar-day {
		min-height: 100px;
		height: 100px;
	}
}


/* Event details modal
 * ---------------------------------------------------------------------------------------
 * The modal's card-featured styling — top-edge accent, card-header grey, and the reason
 * `.card` must never be added to `.modal-content` — now lives in `custom.css` under
 * "card-featured on a modal". It was generalised out of here when the home page's
 * announcement modals needed the same treatment in the secondary colour. Nothing
 * calendar-specific remains except the rule below.
 *
 * WYSIWYG content lands here. theme.css:17335 sets a global `p { color: #777 }`, which is
 * legible on the modal's white body — so unlike the dark alert banners in custom.css this
 * needs no colour override, only its trailing margin removed so the block doesn't push the
 * modal open. */
#eventModal .event-description p:last-child {
	margin-bottom: 0;
}


/* Respect reduced-motion: the hover nudge is decorative. */
@media (prefers-reduced-motion: reduce) {
	.event-item,
	.episode-item,
	.mobile-event-item,
	.mobile-episode-item {
		transition: none;
	}

	.event-item:hover,
	.episode-item:hover,
	.mobile-event-item:hover,
	.mobile-episode-item:hover {
		transform: none;
	}
}