/**
 * Overrides for react-big-calendar's own stylesheet, which the events bundle
 * emits as assets/js/dist/events.css. Loaded after it, so these rules win
 * without needing !important. Only the calendar page loads either file.
 *
 * react-big-calendar renders several things as real <button> elements:
 * the toolbar controls, the date number in every cell (.rbc-button-link), and
 * the "+N more" overflow link (.rbc-button-link.rbc-show-more). Elementor's kit
 * skins every button on the page, so each of those has to be neutralised
 * explicitly or it arrives wearing the theme's orange fill, border and padding.
 *
 * Specificity floor is (0,2,1): ".csl-events .csl-rbc button" or
 * ".csl-rbc button.rbc-x". The Elementor kit sits at (0,1,1), which beats a
 * lone class. The reset comes first so the deliberate styling below wins on
 * source order.
 *
 * Values match www.spiritualliving.org, measured rather than estimated. The
 * live site runs an older react-big-calendar that renders these as <a>, which
 * is why they never had this problem.
 */

/* Reset: strip the theme's button skin from everything inside the calendar
   ------------------------------------------------------------------------- */

.csl-events .csl-rbc button {
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	line-height: inherit;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
	text-shadow: none;
	text-transform: none;
	width: auto;
}

.csl-events .csl-rbc button:hover,
.csl-events .csl-rbc button:focus,
.csl-events .csl-rbc button:active {
	background: none;
	background-color: transparent;
	box-shadow: none;
}

.csl-rbc {
	height: 780px;
	margin-top: 8px;
}

.csl-rbc .rbc-calendar {
	font-family: var(--csl-font, Helvetica, Arial, sans-serif);
	font-size: 14px;
}

/* Toolbar
   ------------------------------------------------------------------------- */

.csl-rbc .rbc-toolbar {
	align-items: center;
	font-size: 14px;
	gap: 12px;
	margin-bottom: 14px;
}

.csl-rbc .rbc-toolbar-label {
	color: var(--csl-ink, #292c31);
	font-size: 16px;
	font-weight: 600;
}

.csl-events .csl-rbc .rbc-toolbar button {
	background: #fff;
	border: 1px solid var(--csl-rule, #dcdcdc);
	border-radius: 0;
	color: var(--csl-body, #4b4b4b);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.4px;
	line-height: 1;
	padding: 7px 14px;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease;
	width: auto;
}

.csl-events .csl-rbc .rbc-toolbar button:hover,
.csl-events .csl-rbc .rbc-toolbar button:focus-visible {
	background: var(--csl-panel-solid, #f0f0f0);
	color: var(--csl-ink, #292c31);
}

.csl-events .csl-rbc .rbc-toolbar button.rbc-active,
.csl-events .csl-rbc .rbc-toolbar button.rbc-active:hover,
.csl-events .csl-rbc .rbc-toolbar button.rbc-active:focus-visible {
	background: var(--csl-purple, #6c4f6e);
	border-color: var(--csl-purple, #6c4f6e);
	box-shadow: none;
	color: #fff;
}

/* Grid
   ------------------------------------------------------------------------- */

.csl-rbc .rbc-header {
	border-bottom: 1px solid var(--csl-rule, #dcdcdc);
	color: var(--csl-ink, #292c31);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.4px;
	padding: 8px 6px;
	text-transform: uppercase;
}

.csl-rbc .rbc-month-view,
.csl-rbc .rbc-time-view,
.csl-rbc .rbc-header,
.csl-rbc .rbc-day-bg + .rbc-day-bg,
.csl-rbc .rbc-month-row + .rbc-month-row,
.csl-rbc .rbc-header + .rbc-header {
	border-color: var(--csl-rule, #dcdcdc);
}

.csl-rbc .rbc-off-range-bg {
	background: #e5e5e5;
}

.csl-rbc .rbc-today {
	background: rgba(237, 145, 80, 0.1);
}

/* Date numbers
   ------------------------------------------------------------------------- */

.csl-rbc .rbc-date-cell {
	padding: 0 5px 0 0;
	text-align: right;
}

.csl-events .csl-rbc .rbc-date-cell button.rbc-button-link {
	color: var(--csl-body, #4b4b4b);
	cursor: pointer;
	display: inline;
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
	text-align: right;
}

.csl-events .csl-rbc .rbc-date-cell.rbc-off-range button.rbc-button-link {
	color: #999;
}

.csl-events .csl-rbc .rbc-date-cell.rbc-now button.rbc-button-link {
	font-weight: 700;
}

.csl-events .csl-rbc .rbc-date-cell button.rbc-button-link:hover,
.csl-events .csl-rbc .rbc-date-cell button.rbc-button-link:focus-visible {
	color: var(--csl-orange, #ed9150);
	text-decoration: underline;
}

/* Overflow link
   ------------------------------------------------------------------------- */

.csl-events .csl-rbc button.rbc-show-more,
.csl-events .csl-rbc a.rbc-show-more,
.csl-events .csl-rbc .rbc-row-segment .rbc-show-more {
	background: rgba(255, 255, 255, 0.3);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--csl-orange, #ed9150);
	cursor: pointer;
	display: block;
	font-size: 13.6px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: normal;
	margin: 0;
	min-height: 0;
	padding: 0;
	text-align: left;
	text-transform: none;
	width: 100%;
}

.csl-events .csl-rbc button.rbc-show-more:hover,
.csl-events .csl-rbc button.rbc-show-more:focus-visible,
.csl-events .csl-rbc a.rbc-show-more:hover,
.csl-events .csl-rbc a.rbc-show-more:focus-visible {
	background: rgba(255, 255, 255, 0.3);
	color: var(--csl-orange-dark, #d97c3b);
	text-decoration: underline;
}

/* Events
   ------------------------------------------------------------------------- */

.csl-rbc .rbc-event,
.csl-rbc .rbc-event.rbc-selected,
.csl-rbc .rbc-day-slot .rbc-background-event {
	background: var(--csl-purple, #6c4f6e);
	border: 0;
	border-radius: 2px;
	color: #fff;
	font-size: 12px;
	line-height: 16px;
	outline: none;
	padding: 2px 6px;
}

.csl-rbc .rbc-event:hover,
.csl-rbc .rbc-event:focus-visible {
	background: var(--csl-purple-dark, #5a4159);
}

.csl-rbc .rbc-event:focus-visible {
	outline: 2px solid var(--csl-orange, #ed9150);
	outline-offset: 1px;
}

.csl-rbc .rbc-overlay {
	border: 1px solid var(--csl-rule, #dcdcdc);
	border-radius: 2px;
	box-shadow: 0 6px 18px rgba(41, 44, 49, 0.14);
}

.csl-rbc .rbc-overlay-header {
	border-bottom: 1px solid var(--csl-rule, #dcdcdc);
	color: var(--csl-ink, #292c31);
	font-weight: 700;
}

/* Time views
   ------------------------------------------------------------------------- */

.csl-rbc .rbc-time-header-content,
.csl-rbc .rbc-time-content,
.csl-rbc .rbc-timeslot-group,
.csl-rbc .rbc-time-content > * + * > * {
	border-color: var(--csl-rule, #dcdcdc);
}

.csl-rbc .rbc-label {
	color: #7a7a7a;
	font-size: 11px;
}

.csl-rbc .rbc-current-time-indicator {
	background: var(--csl-orange, #ed9150);
}

@media (max-width: 767px) {
	.csl-rbc {
		height: 560px;
	}

	.csl-rbc .rbc-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.csl-rbc .rbc-header {
		font-size: 10px;
		padding: 6px 2px;
	}

	.csl-events .csl-rbc .rbc-date-cell button.rbc-button-link {
		font-size: 13px;
		line-height: 20px;
	}

	.csl-events .csl-rbc button.rbc-show-more {
		font-size: 12px;
	}
}