/* Golden Elm Class Calendar — themed via the site's Elementor global colors
   (Site Settings → Global Colors). Hex fallbacks mirror the kit's current
   values for contexts where the kit stylesheet isn't loaded. */

#gewc-class-calendar {
	/* Elementor globals */
	--gewc-primary: var(--e-global-color-primary, #879381);
	--gewc-secondary: var(--e-global-color-secondary, #b59461);
	--gewc-text: var(--e-global-color-text, #333333);
	--gewc-heading: var(--e-global-color-accent, #333333);
	--gewc-bg-soft: var(--e-global-color-386ea67, #f4f1ea); /* "Backgrounds" */
	--gewc-border: var(--e-global-color-1087372, #c1b8a3); /* "Borders" */
	--gewc-white: var(--e-global-color-ab33650, #ffffff); /* "White" */
	--gewc-meta: var(--e-global-color-9c8e80d, #868686); /* "Meta" */

	/* Derived tints (fallbacks for browsers without color-mix) */
	--gewc-border-soft: var(--gewc-border);
	--gewc-today-bg: rgba(181, 148, 97, 0.08);

	--fc-border-color: var(--gewc-border-soft);
	--fc-today-bg-color: var(--gewc-today-bg);
	--fc-page-bg-color: var(--gewc-white);
	--fc-neutral-bg-color: var(--gewc-bg-soft);
	--fc-button-bg-color: var(--gewc-primary);
	--fc-button-border-color: var(--gewc-primary);
	--fc-list-event-hover-bg-color: var(--gewc-today-bg);
	max-width: 100%;
	margin: 0 auto 2em;
	font-size: 15px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	#gewc-class-calendar {
		--gewc-border-soft: color-mix(in srgb, var(--gewc-border) 55%, var(--gewc-white));
		--gewc-today-bg: color-mix(in srgb, var(--gewc-secondary) 8%, transparent);
	}
}

/* Hello Elementor's reset.css stripes odd table rows site-wide — neutralise
   it inside the calendar so week rows are uniform. */
#gewc-class-calendar table tbody > tr:nth-child(2n + 1) > td,
#gewc-class-calendar table tbody > tr:nth-child(2n + 1) > th {
	background-color: transparent;
}

/* The toolbar is a space-between flexbox, so the title chunk only sits at the
   true centre when the side chunks are equal width. Centre it absolutely
   instead (the nav buttons keep the toolbar's height). */
#gewc-class-calendar .fc-header-toolbar {
	position: relative;
}

#gewc-class-calendar .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 60%;
	text-align: center;
}

@media (max-width: 639px) {
	/* Not enough room to overlay — stack: title above, buttons below. */
	#gewc-class-calendar .fc-header-toolbar {
		flex-direction: column;
		align-items: center;
		gap: 0.6em;
	}

	#gewc-class-calendar .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
		position: static;
		transform: none;
		order: -1;
		max-width: 100%;
	}
}

#gewc-class-calendar .fc-toolbar-title {
	font-family: Eleanora, sans-serif;
	font-weight: 400;
	font-size: 1.7em;
	color: var(--gewc-heading);
	white-space: nowrap;
}

/* Toolbar buttons: pin every interactive state, because the Elementor kit
   styles bare button:hover/:focus/:active site-wide (pink background,
   box-shadow) and would otherwise win over FullCalendar's own styles. */
#gewc-class-calendar .fc-button,
#gewc-class-calendar .fc-button:hover,
#gewc-class-calendar .fc-button:focus,
#gewc-class-calendar .fc-button:focus-visible,
#gewc-class-calendar .fc-button:active,
#gewc-class-calendar .fc-button:not(:disabled):active,
#gewc-class-calendar .fc-button:not(:disabled).fc-button-active {
	background-color: var(--gewc-primary);
	border-color: var(--gewc-primary);
	color: var(--gewc-white);
	/* !important: the site's custom CSS puts an !important drop shadow on all
	   bare buttons (rest and hover) — flat is wanted here. */
	box-shadow: none !important;
	border-radius: 5px;
	text-transform: none;
	padding: 0.35em 0.8em;
}

/* Hover/active feedback: darken the brand colour instead of swapping it. */
#gewc-class-calendar .fc-button:not(:disabled):hover,
#gewc-class-calendar .fc-button:not(:disabled):active {
	filter: brightness(0.88);
}

#gewc-class-calendar .fc-button:focus-visible {
	outline: 2px solid var(--gewc-secondary);
	outline-offset: 2px;
}

#gewc-class-calendar .fc-col-header-cell-cushion {
	color: var(--gewc-text);
	font-weight: 600;
	text-decoration: none;
	padding: 8px 4px;
}

#gewc-class-calendar .fc-daygrid-day-number {
	color: var(--gewc-meta);
	text-decoration: none;
}

/* Events */
#gewc-class-calendar .fc-daygrid-event,
#gewc-class-calendar .fc-list-event {
	cursor: pointer;
}

#gewc-class-calendar .fc-daygrid-dot-event,
#gewc-class-calendar .fc-daygrid-block-event {
	/* block, not FullCalendar's default flex row — the title and the
	   sold-out tag stack, and long titles can't push the box past the
	   day cell */
	display: block;
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 0.85em;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: break-word;
	min-width: 0;
	overflow: hidden;
}

/* Keep single-day events inside their day cell. */
#gewc-class-calendar .fc-daygrid-event-harness {
	max-width: 100%;
}

/* Narrow month grids (tablets / small windows): tighter event type so titles
   wrap less awkwardly in the slim day cells. */
@media (max-width: 1024px) {
	#gewc-class-calendar .fc-daygrid-dot-event,
	#gewc-class-calendar .fc-daygrid-block-event {
		font-size: 0.72em;
		padding: 2px 4px;
		line-height: 1.3;
	}
}

#gewc-class-calendar .gewc-event-open,
#gewc-class-calendar .fc-daygrid-event.gewc-event-open {
	background: var(--gewc-primary);
	border: 1px solid var(--gewc-primary);
	color: var(--gewc-white);
}

#gewc-class-calendar .fc-daygrid-event.gewc-event-open:hover {
	filter: brightness(0.88);
}

#gewc-class-calendar .fc-daygrid-event.gewc-event-soldout {
	background: var(--gewc-bg-soft);
	border: 1px solid var(--gewc-border-soft);
	color: var(--gewc-meta);
}

#gewc-class-calendar .gewc-event-title {
	display: block;
}

#gewc-class-calendar .gewc-event-tag {
	display: inline-block;
	margin: 3px 0 1px;
	padding: 0 5px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.08);
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* In the list view the title cell is a full-width row — keep the tag on the
   same line there. */
#gewc-class-calendar .fc-list .gewc-event-title {
	display: inline;
}

#gewc-class-calendar .fc-list .gewc-event-tag {
	margin: 0 0 0 6px;
}

/* List view (mobile) */
#gewc-class-calendar .fc-list {
	border-radius: 5px;
	overflow: hidden;
}

#gewc-class-calendar .fc-list-event.gewc-event-soldout td {
	color: var(--gewc-meta);
}

#gewc-class-calendar .fc-list-event.gewc-event-soldout .fc-list-event-dot {
	border-color: var(--gewc-border-soft);
}

#gewc-class-calendar .fc-list-event.gewc-event-open .fc-list-event-dot {
	border-color: var(--gewc-primary);
}

#gewc-class-calendar .fc-list-day-cushion {
	background: var(--gewc-bg-soft);
}

#gewc-class-calendar a {
	color: inherit;
}

.gewc-calendar-empty {
	text-align: center;
	color: var(--e-global-color-9c8e80d, #868686);
	font-style: italic;
	padding: 2em 0 3em;
}