/**
 * Minimal / functional calendar CSS only.
 *
 * Visual theming — the site's purple palette, gold accents, fonts — is the
 * THEME's job. The theme's stylesheet targets the classes this plugin attaches:
 *   .elks17-calendar-event--private    Private Booking chips (non-clickable)
 *   .elks17-calendar-event--ticketed   events that sell tickets
 *   .elks17-calendar-event--public     "Open to the Public" events
 *   .elks17-day-hours                  the per-day hours subtext
 *   .elks17-tier--unavailable          sold-out / closed-window ticket tiers
 * Keep visual decisions out of this file.
 */

/* Full-bleed friendly: fills its container edge-to-edge with responsive side
   padding, and centers the calendar within. Set the block's alignment to "Full
   width" in the editor for true edge-to-edge; the padding keeps it off the edges. */
.elks17-calendar-wrap {
	width: 100%;
	box-sizing: border-box;
	margin: 1.5rem auto;
	padding: 0 clamp(16px, 4vw, 56px);
}

.elks17-calendar {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

/* Per-day hours subtext under the date number. Neutral by default; theme restyles. */
.elks17-day-hours {
	font-size: 0.7rem;
	line-height: 1.2;
	opacity: 0.75;
	padding: 0 4px;
	text-align: right;
}

/* Closed days read quieter than open ones. */
.elks17-day-hours--closed {
	opacity: 0.45;
	font-style: italic;
}

/* In week/day column headers the subtext sits under the weekday label. */
.fc-col-header-cell .elks17-day-hours {
	text-align: center;
	font-weight: 400;
}

/* List view (mobile): stack the day header as two lines — "Weekday Month D, YYYY"
   on the first, the club hours on the second. FC lays the cushion out as a flex
   row with the date text on one side and the weekday on the other; we reflow it
   to a column and drop our injected hours span onto its own line beneath. */
.elks17-day-hours--list {
	display: block;
	width: 100%;
	padding: 2px 0 0;
	font-weight: 400;
	text-align: left;
	opacity: 0.7;
}

/* Reflow the day-header cushion from FC's default single row to two lines. The
   weekday (.fc-list-day-side-text) leads, the date (.fc-list-day-text) follows
   on the same line, then our hours span wraps to line two via its width:100%. */
.fc-list-day-cushion {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.4em;
}

.fc-list-day-cushion .fc-list-day-side-text {
	order: 0;
	font-weight: 700;
}

.fc-list-day-cushion .fc-list-day-text {
	order: 1;
	font-weight: 700;
}

.fc-list-day-cushion .elks17-day-hours--list {
	order: 2;
}

/* Private booking chips are not links — remove affordances. */
.elks17-calendar-event--private {
	cursor: default;
}

.elks17-calendar-actions {
	display: flex;
	gap: 1.25rem;
	margin-top: 0.75rem;
	font-size: 0.85rem;
}

.elks17-calendar-actions a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.elks17-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* Hover tooltip for calendar events. Neutral defaults; theme may override the
   palette. pointer-events:none so it never intercepts the hover it describes. */
.elks17-event-tooltip {
	position: fixed;
	z-index: 9999;
	max-width: 260px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #1a1230;
	color: #fff;
	font-size: 13px;
	line-height: 1.35;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.12s ease;
}

.elks17-event-tooltip.is-visible {
	opacity: 1;
}

.elks17-event-tooltip__title {
	font-weight: 700;
	margin-bottom: 3px;
}

.elks17-event-tooltip__meta {
	opacity: 0.85;
}

.elks17-event-tooltip__desc {
	margin-top: 6px;
	opacity: 0.9;
}

.elks17-event-tooltip__badges {
	margin-top: 7px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.elks17-event-tooltip__badge {
	font-size: 11px;
	padding: 2px 7px;
	border-radius: 4px;
	background: #7a5ea8;
}

/* Sold-out / expired ticket tiers render struck-through, never hidden — the
   client wants the "you missed this price" urgency. */
.elks17-tier--unavailable {
	text-decoration: line-through;
	opacity: 0.6;
}

/* Mobile: FullCalendar's toolbar is a single flex row by default and overflows
   on narrow screens (the title and button clusters collide / run off-edge).
   Stack the three toolbar sections and let each cluster wrap. */
@media (max-width: 640px) {
	.elks17-calendar .fc-toolbar.fc-header-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.elks17-calendar .fc-toolbar-chunk {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 0.5rem;
	}

	.elks17-calendar .fc-toolbar-title {
		font-size: 1.15rem;
		text-align: center;
	}

	/* FC sets right-margin on toolbar buttons for the row layout; clear it so
	   the wrapped/centered clusters space evenly via the chunk gap instead. */
	.elks17-calendar .fc-button {
		margin: 0;
	}
}