/**
 * The Events Calendar — Training Center styling for the Month, List and Day views.
 * Loaded only on TEC view pages (see inc/Events.php). Colors come from the Elementor
 * kit's mk-* variables, with hex fallbacks.
 */

/* TEC design tokens → Training Center palette */
.tribe-common,
.tribe-events {
	--tec-color-accent-primary: var(--mk-safe-harbor, #276ea9);
	--tec-color-accent-primary-hover: var(--mk-midnight, #090420);
	--tec-color-accent-primary-active: var(--mk-midnight, #090420);
	--tec-color-accent-primary-background: rgba(53, 202, 255, 0.12);
	--tec-color-button-primary: var(--mk-safe-harbor, #276ea9);
	--tec-color-button-primary-hover: var(--mk-midnight, #090420);
	--tec-color-link-accent: var(--mk-safe-harbor, #276ea9);
	--tec-color-link-accent-hover: var(--mk-midnight, #090420);
	--tec-color-text-primary: var(--mk-midnight, #090420);
	--tec-color-text-secondary: var(--mk-slate, #3D4759);
	--tec-color-text-event-date: var(--mk-twilight, #143c64);
	--tec-color-text-event-title: var(--mk-midnight, #090420);
	--tec-color-text-events-title: var(--mk-midnight, #090420);
	--tec-color-icon-primary: var(--mk-twilight, #143c64);
	--tec-color-icon-active: var(--mk-safe-harbor, #276ea9);
	--tec-color-border-default: var(--mk-frost, #D6E3EC);
	--tec-color-border-secondary: var(--mk-frost, #D6E3EC);
	--tec-color-border-tertiary: var(--mk-frost, #D6E3EC);
	--tec-color-border-active: var(--mk-safe-harbor, #276ea9);
	--tec-color-background-secondary: var(--mk-off-white, #F7FAFC);
	--tec-color-background-events-bar-submit-button: var(--mk-safe-harbor, #276ea9);
	--tec-color-background-events-bar-submit-button-hover: var(--mk-midnight, #090420);
	--tec-color-day-marker-month: var(--mk-midnight, #090420);
	--tec-color-day-marker-current-month: var(--mk-midnight, #090420);
	--tec-color-day-marker-past-month: var(--mk-slate, #3D4759);
	--tec-border-radius-default: 5px;
}

/* Page width, matching the other Training Center templates: 1400px of content inside 32px gutters */
.tribe-common.tribe-events .tribe-events-l-container.tribe-common-l-container {
	max-width: 1464px;
	padding: 28px 32px 56px;
}

/* Intro above the calendar — printed inside TEC's container by the tribe_events_before_html filter in inc/Events.php */
.mk-events-intro {
	margin: 0 0 24px;
}

.mk-events-intro #breadcrumbs {
	margin: 0 0 18px;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mk-events-intro #breadcrumbs a {
	color: var(--mk-safe-harbor, #276ea9);
	text-decoration: none;
}

.mk-events-intro #breadcrumbs .breadcrumb_last {
	font-weight: 700;
	color: var(--mk-midnight, #090420);
}

.mk-events-intro__eyebrow {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mk-safe-harbor, #276ea9);
}

.mk-events-intro__heading {
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mk-frost, #D6E3EC);
	font-family: degular;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mk-midnight, #090420);
}

/* Headings in Degular, like the rest of the Training Center */
.tribe-events .tribe-events-c-top-bar__datepicker-button,
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-list__month-separator-text,
.tribe-events .tribe-events-calendar-day__event-title,
.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events .tribe-events-calendar-month__multiday-event-bar-title {
	font-family: degular;
}

/* Events bar: search + view toggle in one bordered strip */
.tribe-events .tribe-events-c-events-bar {
	border: 1px solid var(--mk-frost, #D6E3EC);
	border-radius: 8px;
	background-color: #fff;
}

.tribe-events .tribe-events-c-search__button {
	border-radius: 5px;
	font-weight: 700;
	background-color: var(--mk-safe-harbor, #276ea9);
}

.tribe-events .tribe-events-c-search__button:hover,
.tribe-events .tribe-events-c-search__button:focus {
	background-color: var(--mk-midnight, #090420);
}

.tribe-events .tribe-events-c-view-selector__list-item-text {
	font-weight: 700;
}

.tribe-events .tribe-events-c-view-selector--labels .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after {
	background-color: var(--mk-midnight, #090420);
}

/* Top bar: boxed arrows and Today, bigger month label */
.tribe-events .tribe-events-c-top-bar__nav-link {
	width: 32px;
	height: 32px;
	border: 1px solid var(--mk-frost, #D6E3EC);
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mk-twilight, #143c64);
}

.tribe-events .tribe-events-c-top-bar__nav-list-item + .tribe-events-c-top-bar__nav-list-item {
	margin-left: 6px;
}

.tribe-events .tribe-events-c-top-bar__today-button {
	border: 1px solid var(--mk-frost, #D6E3EC);
	border-radius: 5px;
	padding: 7px 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mk-twilight, #143c64);
}

.tribe-events .tribe-events-c-top-bar__datepicker-button {
	font-size: 20px;
	font-weight: 700;
	color: var(--mk-midnight, #090420);
}

/* Month grid */
.tribe-events .tribe-events-calendar-month {
	border: 1px solid var(--mk-frost, #D6E3EC);
	border-radius: 8px;
	overflow: hidden;
}

.tribe-events .tribe-events-calendar-month__header {
	background-color: var(--mk-off-white, #F7FAFC);
	border-bottom: 1px solid var(--mk-frost, #D6E3EC);
}

.tribe-events .tribe-events-calendar-month__header-column-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mk-twilight, #143c64);
}

.tribe-events .tribe-events-calendar-month__day--other-month,
.tribe-events .tribe-events-calendar-month__day--past {
	background-color: var(--mk-off-white, #F7FAFC);
}

.tribe-events .tribe-events-calendar-month__calendar-event-datetime {
	font-size: 13px;
	color: var(--mk-slate, #3D4759);
}

.tribe-events .tribe-events-calendar-month__calendar-event-title {
	padding-left: 7px;
	border-left: 3px solid var(--mk-safe-harbor, #276ea9);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.tribe-events .tribe-events-calendar-month__calendar-event-title-link {
	color: var(--mk-midnight, #090420);
}

.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:focus {
	color: var(--mk-safe-harbor, #276ea9);
}

/* Category colors on the event's left edge (and multi-day bars) */
.tribe-events .tribe_events_cat-educators .tribe-events-calendar-month__calendar-event-title {
	border-left-color: var(--mk-sky, #35caff);
}

.tribe-events .tribe_events_cat-professionals .tribe-events-calendar-month__calendar-event-title {
	border-left-color: var(--mk-twilight, #143c64);
}

.tribe-events .tribe_events_cat-parents-caregivers .tribe-events-calendar-month__calendar-event-title {
	border-left-color: var(--mk-slate, #3D4759);
}

.tribe-events .tribe-events-calendar-month__multiday-event-bar {
	border-radius: 4px;
	background-color: var(--mk-twilight, #143c64);
}

.tribe-events .tribe_events_cat-professionals .tribe-events-calendar-month__multiday-event-bar {
	background-color: var(--mk-safe-harbor, #276ea9);
}

.tribe-events .tribe-events-calendar-month__multiday-event-bar-title {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.tribe-events .tribe-events-calendar-month__multiday-event-bar:hover {
	background-color: var(--mk-midnight, #090420);
}

/* List view */
.tribe-events .tribe-events-calendar-list__month-separator-text {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mk-safe-harbor, #276ea9);
}

.tribe-events .tribe-events-calendar-list__event-date-tag-weekday {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mk-twilight, #143c64);
}

.tribe-events .tribe-events-calendar-list__event-date-tag-daynum {
	font-family: degular;
	font-weight: 700;
	color: var(--mk-midnight, #090420);
}

.tribe-events .tribe-events-calendar-list__event-featured-image {
	border-radius: 6px;
	border: 1px solid var(--mk-frost, #D6E3EC);
	background-color: var(--mk-off-white, #F7FAFC);
	object-fit: contain;
}

.tribe-events .tribe-events-calendar-list__event-title-link {
	color: var(--mk-midnight, #090420);
	font-weight: 700;
}

/* Type scale shared with the Training Center pages: 24px sub-headings, 20px body, 16px buttons */
.tribe-common.tribe-events .tribe-events-calendar-list__event-title {
	font-size: 24px;
	line-height: 1.3;
}

.tribe-common.tribe-events .tribe-events-calendar-list__event-description,
.tribe-common.tribe-events .tribe-events-calendar-list__event-description p {
	font-size: 20px;
	line-height: 1.6;
}

.tribe-common.tribe-events button.tribe-events-c-search__button {
	font-size: 16px;
}

.tribe-events .tribe-events-calendar-list__event-title-link:hover,
.tribe-events .tribe-events-calendar-list__event-title-link:focus {
	color: var(--mk-safe-harbor, #276ea9);
}

.tribe-events .tribe-events-calendar-list__event-datetime {
	font-weight: 700;
	color: var(--mk-twilight, #143c64);
}

.tribe-events .tribe-events-calendar-list__event-row + .tribe-events-calendar-list__event-row,
.tribe-events .tribe-events-calendar-list__month-separator {
	border-color: var(--mk-frost, #D6E3EC);
}

/* Overrides for TEC rules that out-rank the ones above (breakpoint and button resets) */
.mk-events-intro h2.mk-events-intro__heading {
	font-family: degular;
	font-size: 52px;
	line-height: 1.1;
}

.tribe-common.tribe-events .tribe-events-c-top-bar button.tribe-events-c-top-bar__datepicker-button {
	font-family: degular;
	font-size: 20px;
	font-weight: 700;
	color: var(--mk-midnight, #090420);
}

.tribe-common.tribe-events .tribe-events-c-top-bar__nav-link,
.tribe-common.tribe-events button.tribe-events-c-top-bar__nav-link {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--mk-frost, #D6E3EC);
	border-radius: 5px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mk-twilight, #143c64);
}

.tribe-common.tribe-events .tribe-events-c-top-bar__nav-link:disabled {
	opacity: 0.35;
	cursor: default;
}

.tribe-common.tribe-events .tribe-events-calendar-month__header-column {
	border-top: 0;
	padding: 8px 0;
	text-align: center;
}

.tribe-common.tribe-events .tribe-events-calendar-month__header-column-title {
	font-size: 13px;
	text-align: center;
}

.tribe-common.tribe-events .tribe-events-calendar-month__day-date {
	font-family: degular;
	font-size: 15px;
	font-weight: 700;
	color: var(--mk-midnight, #090420);
}

.tribe-common.tribe-events .tribe-events-calendar-list__month-separator-text {
	font-size: 13px;
}

/* Mobile month: day cells are <button>s, so undo the Elementor kit's global button style */
.tribe-common.tribe-events button.tribe-events-calendar-month__day-cell--mobile {
	background-color: transparent;
	color: var(--mk-midnight, #090420);
	border-radius: 0;
	box-shadow: none;
}

.tribe-common.tribe-events button.tribe-events-calendar-month__day-cell--mobile:hover,
.tribe-common.tribe-events button.tribe-events-calendar-month__day-cell--mobile:focus {
	background-color: var(--mk-off-white, #F7FAFC);
}

.tribe-common.tribe-events button.tribe-events-calendar-month__day-cell--mobile.tribe-events-calendar-month__day-cell--selected,
.tribe-common.tribe-events button.tribe-events-calendar-month__day-cell--mobile.tribe-events-calendar-month__day-cell--selected:hover {
	background-color: var(--mk-safe-harbor, #276ea9);
	color: #fff;
	border-radius: 6px;
}

.tribe-common.tribe-events button.tribe-events-calendar-month__day-cell--mobile.tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date {
	color: #fff;
}

/* Date picker (month/year dropdown): its prev/next, title and month cells are <button>s too */
.tribe-common.tribe-events .datepicker .datepicker-grid {
	background-color: #fff;
}

.tribe-common.tribe-events .datepicker button {
	background-color: transparent;
	color: var(--mk-midnight, #090420);
	box-shadow: none;
}

.tribe-common.tribe-events .datepicker button:hover,
.tribe-common.tribe-events .datepicker button:focus {
	background-color: var(--mk-off-white, #F7FAFC);
	color: var(--mk-midnight, #090420);
}

.tribe-common.tribe-events .datepicker button.month.past {
	color: var(--mk-slate, #3D4759);
}

.tribe-common.tribe-events .datepicker button.active,
.tribe-common.tribe-events .datepicker button.active:hover,
.tribe-common.tribe-events .datepicker button.active:focus {
	background-color: var(--mk-safe-harbor, #276ea9);
	color: #fff;
}

/* The month/year toggle itself — no kit hover/pressed fill */
.tribe-common.tribe-events button.tribe-events-c-top-bar__datepicker-button:hover,
.tribe-common.tribe-events button.tribe-events-c-top-bar__datepicker-button:focus,
.tribe-common.tribe-events button.tribe-events-c-top-bar__datepicker-button:active {
	background-color: transparent;
	color: var(--mk-midnight, #090420);
}

/* "Subscribe to calendar" menu — navy links instead of the theme's green */
.tribe-common.tribe-events a.tribe-events-c-subscribe-dropdown__list-item-link,
.tribe-common.tribe-events a.tribe-events-c-subscribe-dropdown__list-item-link:visited {
	color: var(--mk-twilight, #143c64);
	font-weight: 700;
	text-decoration: none;
}

.tribe-common.tribe-events a.tribe-events-c-subscribe-dropdown__list-item-link:hover,
.tribe-common.tribe-events a.tribe-events-c-subscribe-dropdown__list-item-link:focus {
	color: var(--mk-safe-harbor, #276ea9);
	text-decoration: underline;
}

@media (max-width: 767px) {
	/* 16px gutters like the other TC pages; TEC's rows and header assume ~20px and bleed a few px past it */
	.tribe-common.tribe-events .tribe-events-l-container.tribe-common-l-container {
		padding-left: 16px;
		padding-right: 16px;
		overflow-x: clip;
	}

	.mk-events-intro h2.mk-events-intro__heading {
		font-size: 36px;
	}

	.tribe-common.tribe-events .tribe-events-c-top-bar button.tribe-events-c-top-bar__datepicker-button {
		font-size: 18px;
	}
}