/**
 * Lookit Events Calendar Skin
 *
 * Restyles The Events Calendar (Views v2) month, list and day views.
 * Custom properties are injected at runtime from the settings screen.
 *
 * Everything is scoped under body.lecs-active so the skin can be switched off
 * without touching the theme. Only classes we add ourselves use the lecs-
 * prefix; the rest are The Events Calendar's own classes, targeted not renamed.
 */

body.lecs-active {
	/* The Events Calendar drives its own defaults, including the blue on the
	   subscribe button, from these. Pointing them at our palette fixes the
	   whole family at once rather than one control at a time. */
	--tec-color-accent-primary: var(--lecs-accent);
	--tec-color-accent-primary-hover: var(--lecs-ink);
	--tec-color-accent-primary-active: var(--lecs-ink);
	--tec-color-button-primary: var(--lecs-accent);
	--tec-color-button-primary-hover: var(--lecs-ink);
	--tec-color-button-primary-active: var(--lecs-ink);
	--tec-color-background-subscribe-list-item-hover: var(--lecs-accent-tint);
	--lecs-line: #dde4e4;
	--lecs-muted: #7b8a89;
	--lecs-text: #31403f;
	--lecs-card-bg: #323232;
	--lecs-grey: #ebebeb;
	--lecs-radius: 0;
}

body.lecs-style-b {
	--lecs-radius: 10px;
}

/* --------------------------------------------------------------------------
   1. Search bar band
   -------------------------------------------------------------------------- */

body.lecs-active .tribe-events-header__events-bar,
body.lecs-active .tribe-events-c-events-bar {
	position: relative;
	padding: 10px 16px;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	min-height: 0;
	border: 1px solid var(--lecs-line);
	border-radius: var(--lecs-radius);
	background: transparent;
}

/* The comp gives the dark band more room around the fields. */
body.lecs-bar-dark .tribe-events-c-events-bar,
body.lecs-bar-dark .tribe-events-header__events-bar {
	padding: 22px 24px;
	margin-bottom: 0;
}

body.lecs-bar-dark .tribe-events-c-events-bar,
body.lecs-bar-dark .tribe-events-header__events-bar {
	background-color: var(--lecs-ink);
	border-color: var(--lecs-ink);
}

body.lecs-active .tribe-events-c-events-bar__search-button,
body.lecs-active .tribe-events-c-events-bar__filter-button {
	padding-top: 6px;
	padding-bottom: 6px;
}

body.lecs-bar-fullbleed .tribe-events-c-events-bar::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: var(--lecs-ink);
	z-index: 0;
}

body.lecs-bar-fullbleed .tribe-events-c-events-bar > * {
	position: relative;
	z-index: 1;
}

body.lecs-active .lecs-bar-title {
	margin: 0;
	flex: none;
	color: var(--lecs-accent);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Standalone magnifier beside the label, as in the comp. On the light bar the
   icon TEC puts inside the field is enough, so this one is hidden there. */

body.lecs-active .lecs-bar-icon {
	flex: none;
	display: inline-flex;
	width: 24px;
	height: 24px;
	margin-right: 2px;
}

body.lecs-active .lecs-bar-icon svg {
	width: 100%;
	height: 100%;
}

body.lecs-active .lecs-bar-icon svg path {
	fill: var(--lecs-accent);
}

body.lecs-active .tribe-events-c-events-bar__search-container {
	flex: 1 1 460px;
	margin: 0;
	min-width: 0;
}

/* The search form holds both input controls and the submit button. */
body.lecs-active .tribe-events-c-search,
body.lecs-active .tribe-events-c-search__input-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	min-width: 0;
}

body.lecs-active .tribe-events-c-search__input-group {
	flex: 1 1 340px;
}

/* Both fields are styled by one rule so the keyword box and the location box
   are identical. Targeted by input type rather than by class, because themes
   that override The Events Calendar templates change the class names. */
body.lecs-active .tribe-events-c-search__input-group > *,
body.lecs-active .tribe-events-c-search__input-control,
body.lecs-active .lecs-location-control {
	flex: 1 1 200px;
	margin: 0;
	min-width: 0;
}

body.lecs-active .tribe-events-c-events-bar input[type="text"],
body.lecs-active .tribe-events-c-events-bar input[type="search"],
body.lecs-active .tribe-events-c-events-bar .lecs-location-input {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	border: 1px solid var(--lecs-line);
	border-radius: 2px;
	padding: 0 14px;
	background-color: #fff;
	color: var(--lecs-text);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	min-height: 0;
	box-shadow: none;
}

body.lecs-active .tribe-events-c-events-bar input[type="text"]::placeholder,
body.lecs-active .tribe-events-c-events-bar input[type="search"]::placeholder,
body.lecs-active .tribe-events-c-events-bar .lecs-location-input::placeholder {
	color: #97a4a3;
	opacity: 1;
}

body.lecs-bar-dark .tribe-events-c-events-bar input[type="text"],
body.lecs-bar-dark .tribe-events-c-events-bar input[type="search"] {
	border-color: transparent;
}

/* One magnifier beside the label, none inside the fields. TEC's own mobile
   search toggle is also hidden, since both fields are always visible here. */
body.lecs-active .tribe-events-c-search__input-control-icon-svg,
body.lecs-active .tribe-common-form-control-text__label {
	display: none;
}

@media (min-width: 768px) {

	body.lecs-active .tribe-events-c-events-bar__search-button {
		display: none;
	}
}

/* The search container is collapsed on mobile by TEC. Themes that do not pick
   up TEC's breakpoint class leave it half applied, so keep it open here. */
body.lecs-active .tribe-events-c-events-bar__search-container {
	display: block;
	flex: 1 1 460px;
	min-width: 0;
}

body.lecs-active .tribe-events-c-events-bar__search {
	margin: 0;
}

/* Find Events must stay on the row with the fields. */
body.lecs-active .tribe-events-c-events-bar .tribe-events-c-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	visibility: visible;
	opacity: 1;
}

body.lecs-active .tribe-events-c-search__button {
	flex: none;
	background-color: var(--lecs-accent);
	border: 0;
	border-radius: 2px;
	padding: 0 24px;
	height: 44px;
	min-height: 0;
	color: #fff;
	font-size: 0.78125rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.18s ease;
}

body.lecs-active .tribe-events-c-search__button:hover,
body.lecs-active .tribe-events-c-search__button:focus {
	background-color: var(--lecs-accent-dark);
}

/* --------------------------------------------------------------------------
   2. Top bar: month title, prev/next, this month, view selector
   -------------------------------------------------------------------------- */

body.lecs-active .tribe-events-c-top-bar {
	margin-top: 30px;
	margin-bottom: 18px;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

/* Comp order: AUGUST 2026, then the arrows, then This Month, with the view
   switcher on the far right. TEC's DOM order is arrows, This Month, title.
   TEC centres the datepicker with auto margins, so those are cleared here. */
body.lecs-active .tribe-events-c-top-bar {
	justify-content: flex-start;
	padding-left: 0;
	padding-right: 0;
}

body.lecs-active .tribe-events-c-top-bar > *:not(.lecs-view-selector-moved) {
	margin-left: 0;
}
body.lecs-active .tribe-events-c-top-bar__datepicker {
	order: 1;
	flex: 0 0 auto;
	margin: 0 6px 0 0;
}

body.lecs-active .tribe-events-c-top-bar__nav {
	order: 2;
	flex: 0 0 auto;
	margin: 0;
}

/* Everything to the left stays grouped, the view switcher goes right. */
body.lecs-active .tribe-events-c-top-bar__today-button {
	order: 3;
	flex: 0 0 auto;
	margin-right: auto;
}

/* Moved out of the search bar by lecs-front.js. */
body.lecs-active .lecs-view-selector-moved {
	order: 4;
	margin-left: auto;
	margin-right: 0;
	padding-right: 0;
}

body.lecs-active .lecs-view-selector-moved .tribe-events-c-view-selector__list-item:last-child,
body.lecs-active .lecs-view-selector-moved .tribe-events-c-view-selector__list-item:last-child .tribe-events-c-view-selector__list-item-link {
	margin-right: 0;
	padding-right: 0;
}

body.lecs-active .lecs-view-selector-moved .tribe-events-c-view-selector__content {
	position: static;
	display: block;
	border: 0;
	box-shadow: none;
	padding: 0;
	background: transparent;
}

body.lecs-active .lecs-view-selector-moved .tribe-events-c-view-selector__list {
	display: flex;
	justify-content: flex-end;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.lecs-active .lecs-view-selector-moved .tribe-events-c-view-selector__list-item-icon {
	display: none;
}

/* The mobile-style toggle button is redundant once the list is inline. */
body.lecs-active .lecs-view-selector-moved .tribe-events-c-view-selector__button {
	display: none;
}

body.lecs-active .tribe-events-c-top-bar__datepicker-button,
body.lecs-active .tribe-events-header__title,
body.lecs-active .tribe-events-calendar-month__header-title {
	color: var(--lecs-accent);
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

body.lecs-active .tribe-events-c-top-bar__datepicker-button svg path,
body.lecs-active .tribe-events-c-top-bar__datepicker-button .tribe-common-c-svgicon path {
	fill: var(--lecs-accent);
}

body.lecs-active .tribe-events-c-top-bar__nav-link {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--lecs-grey);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.18s ease;
}

body.lecs-active .tribe-events-c-top-bar__nav-link svg path,
body.lecs-active .tribe-events-c-top-bar__nav-link .tribe-common-c-svgicon path {
	fill: var(--lecs-ink);
	transition: fill 0.18s ease;
}

body.lecs-active .tribe-events-c-top-bar__nav-link:hover {
	background-color: var(--lecs-accent);
}

body.lecs-active .tribe-events-c-top-bar__nav-link:hover svg path {
	fill: #fff;
}

body.lecs-active .tribe-events-c-top-bar__today-button {
	background-color: var(--lecs-grey);
	border: 0;
	border-radius: 2px;
	padding: 9px 15px;
	color: #4a5857;
	font-size: 0.71875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: background-color 0.18s ease, color 0.18s ease;
}

body.lecs-active .tribe-events-c-top-bar__today-button:hover,
body.lecs-active .tribe-events-c-top-bar__today-button:focus {
	background-color: var(--lecs-ink);
	color: #fff;
}

body.lecs-active .tribe-events-c-view-selector__list-item-link {
	color: #8b9998;
	font-size: 0.71875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	padding-bottom: 4px;
}

body.lecs-active .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
body.lecs-active .tribe-events-c-view-selector__list-item-link:hover {
	color: var(--lecs-ink);
}

body.lecs-active .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
	border-bottom-color: var(--lecs-accent);
}

body.lecs-active .tribe-events-c-view-selector__list-item-icon path,
body.lecs-active .tribe-events-c-view-selector__list-item-text {
	fill: currentColor;
	color: inherit;
}

/* Optional wider calendar, for sites whose theme container is narrower than
   the full width search band looks like it wants. Breaks out of the theme
   wrapper rather than fighting its max-width. */

body.lecs-width-wide .tribe-events-view {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(1600px, calc(100vw - 64px));
	max-width: none;
}

/* Theme wrappers commonly cap the content width, which would clip the wider
   calendar before it can break out. */
body.lecs-width-wide .tribe-events {
	max-width: none;
	width: auto;
}

/* --------------------------------------------------------------------------
   3. Month grid
   -------------------------------------------------------------------------- */

body.lecs-active .tribe-events-calendar-month__header {
	background-color: var(--lecs-accent);
	border: 0;
}

body.lecs-style-b .tribe-events-calendar-month__header {
	background-color: var(--lecs-ink);
}

body.lecs-active .tribe-events-calendar-month__header-column {
	position: relative;
	padding: 12px 8px;
	text-align: center;
	vertical-align: middle;
}

/* Short white rule between columns, rather than a full height border. */
body.lecs-active .tribe-events-calendar-month__header-column + .tribe-events-calendar-month__header-column::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 16px;
	background-color: rgba(255, 255, 255, 0.45);
	transform: translateY(-50%);
}

/* The header row is a seven column grid, and the calendar aligns its items to
   the start of each track on desktop. That left each column shrunk to the width
   of its own word and parked at the left of its track, which is why centring the
   text inside it never moved anything. Stretching the items is the actual fix. */
body.lecs-active .tribe-events-calendar-month__header tr {
	justify-items: stretch;
}

body.lecs-active th.tribe-events-calendar-month__header-column,
body.lecs-active .tribe-events-calendar-month__header-column {
	width: auto;
	text-align: center;
	justify-content: center;
	align-items: center;
}

/* Centred inside its own column. A percentage width resolves unreliably inside
   a table cell, which pushed the labels out of their columns, so the label is a
   plain block that fills the cell naturally. Position and transform are reset in
   case the active templates place the label absolutely. */
/* Centred inside its own column. The label has to fill the cell before its own
   text alignment means anything: where the column is laid out as flex, a plain
   block shrinks to its text and sits left, which is what kept happening. The
   flex-grow below makes it fill in that case, and it is harmless otherwise. */
body.lecs-active .tribe-events-calendar-month__header-column .tribe-events-calendar-month__header-column-title,
body.lecs-active .tribe-events-calendar-month__header-column .lecs-weekday {
	position: static;
	display: block;
	flex: 1 1 auto;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	inset: auto;
	transform: none;
	float: none;
	text-align: center;
}

body.lecs-active .tribe-events-calendar-month__header-column-title,
body.lecs-active .lecs-weekday {
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

body.lecs-style-b .tribe-events-calendar-month__header-column-title {
	color: var(--lecs-accent-tint);
}

/* Full weekday names are written in by lecs-front.js, because the markup that
   holds them differs between versions and themed template overrides. */

body.lecs-active .tribe-events-calendar-month__header-column-title .screen-reader-text {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

body.lecs-active .tribe-events-calendar-month__body {
	border: 1px solid var(--lecs-line);
	border-top: 0;
}

body.lecs-style-b .tribe-events-calendar-month__body,
body.lecs-style-b .tribe-events-calendar-month__header {
	border-color: #eef2f2;
}

body.lecs-style-b .tribe-events-calendar-month__header {
	border-radius: var(--lecs-radius) var(--lecs-radius) 0 0;
	overflow: hidden;
}

body.lecs-style-b .tribe-events-calendar-month__body {
	border-radius: 0 0 var(--lecs-radius) var(--lecs-radius);
	overflow: hidden;
}

body.lecs-active .tribe-events-calendar-month__week {
	border: 0;
}

body.lecs-active .tribe-events-calendar-month__day {
	border: 0;
	border-right: 1px solid var(--lecs-line);
	border-bottom: 1px solid var(--lecs-line);
	background-color: var(--lecs-cell);
	min-width: 0;
	overflow: hidden;
}

body.lecs-style-b .tribe-events-calendar-month__day {
	background-color: #fff;
	border-color: #eef2f2;
}

body.lecs-active .tribe-events-calendar-month__day:last-child {
	border-right: 0;
}

body.lecs-active .tribe-events-calendar-month__week:last-child .tribe-events-calendar-month__day {
	border-bottom: 0;
}

body.lecs-active .tribe-events-calendar-month__day--other-month {
	background-color: #fff;
}

body.lecs-style-b .tribe-events-calendar-month__day--other-month {
	background-color: #fafbfb;
}

/* Padding is set on the base cell class as well as the --month modifier,
   because TEC swaps modifiers between breakpoints. */
body.lecs-active .tribe-events-calendar-month__day-cell {
	padding: 10px 12px 12px;
	min-width: 0;
	overflow: hidden;
}

body.lecs-active .tribe-events-calendar-month__day-cell--month {
	min-height: 150px;
	padding: 10px 12px 12px;
	background-color: transparent;
	transition: background-color 0.16s ease;
	min-width: 0;
	overflow: hidden;
}

/* TEC gives the events wrapper negative side margins so multiday bars can
   bleed to the cell edge. That is what pushes event text against the border,
   so cancel it and let the cell padding do the work. */
body.lecs-active .tribe-events-calendar-month__events {
	min-width: 0;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

body.lecs-active .tribe-events-calendar-month__multiday-event-wrapper,
body.lecs-active .tribe-events-calendar-month__calendar-event-wrapper {
	margin-left: 0;
	margin-right: 0;
}

body.lecs-active .tribe-events-calendar-month__day-cell--selected,
body.lecs-active .tribe-events-calendar-month__day-cell--month:hover,
body.lecs-active .tribe-events-calendar-month__day-cell--month:focus-within {
	background-color: var(--lecs-accent-tint);
}

body.lecs-active .tribe-events-calendar-month__day-date {
	margin-bottom: 10px;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
	min-height: 26px;
	display: flex;
	align-items: center;
}

body.lecs-active .tribe-events-calendar-month__day-date-daynum {
	color: #94a1a0;
	font-size: inherit;
	font-weight: inherit;
}

/* Days with events render the number as a link. That is our "has events" hook. */
body.lecs-active .tribe-events-calendar-month__day-date-link,
body.lecs-active .tribe-events-calendar-month__day-date-link:hover,
body.lecs-active a.tribe-events-calendar-month__day-date-daynum {
	color: var(--lecs-accent);
	text-decoration: none;
}

body.lecs-active .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-daynum {
	opacity: 0.75;
}

body.lecs-active .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
	background-color: var(--lecs-ink);
	color: #fff;
	border-radius: 999px;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.0625rem;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   4. Events inside a day cell
   -------------------------------------------------------------------------- */

body.lecs-active .tribe-events-calendar-month__calendar-event {
	margin-bottom: 9px;
	padding: 0;
	border: 0;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

body.lecs-active .tribe-events-calendar-month__calendar-event:last-child {
	margin-bottom: 0;
}

body.lecs-active .tribe-events-calendar-month__calendar-event-details,
body.lecs-active .tribe-events-calendar-month__calendar-event-wrapper {
	min-width: 0;
	max-width: 100%;
}

body.lecs-active .tribe-events-calendar-month__calendar-event-datetime {
	display: block;
	margin-bottom: 1px;
	color: var(--lecs-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
	white-space: normal;
}

body.lecs-active .tribe-events-calendar-month__calendar-event-title {
	margin: 0;
	max-width: 100%;
	overflow: hidden;
}

body.lecs-active .tribe-events-calendar-month__calendar-event-title,
body.lecs-active .tribe-events-calendar-month__calendar-event-title-link {
	color: var(--lecs-text);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

/* Long titles stay inside the cell. The full title is in the hover card. */
body.lecs-active .tribe-events-calendar-month__calendar-event-title-link {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.lecs-active .tribe-events-calendar-month__calendar-event-title-link:hover,
body.lecs-active .tribe-events-calendar-month__calendar-event-title-link:focus {
	color: var(--lecs-accent-dark);
	text-decoration: underline;
}

body.lecs-active .tribe-events-calendar-month__more-events-link {
	color: var(--lecs-accent);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* Serif event text, matching the approved comp. Weekday names, day numbers and
   controls stay in the theme font. */

body.lecs-active .tribe-events-c-events-bar,
body.lecs-active .tribe-events-c-events-bar input {
	font-family: inherit;
}

body.lecs-font-serif .tribe-events-calendar-month__calendar-event-datetime,
body.lecs-font-serif .tribe-events-calendar-month__calendar-event-title,
body.lecs-font-serif .tribe-events-calendar-month__calendar-event-title-link,
body.lecs-font-serif .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-datetime,
body.lecs-font-serif .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title,
body.lecs-font-serif .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title-link,
body.lecs-font-serif .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-description,
body.lecs-font-serif .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-description p {
	font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

/* Style B: events as tinted chips */

body.lecs-style-b .tribe-events-calendar-month__calendar-event {
	background-color: var(--lecs-accent-tint);
	border-left: 3px solid var(--lecs-accent);
	border-radius: 0 6px 6px 0;
	padding: 7px 8px;
	margin-bottom: 6px;
	transition: background-color 0.16s ease;
}

body.lecs-style-b .tribe-events-calendar-month__day-cell--month:hover .tribe-events-calendar-month__calendar-event {
	background-color: var(--lecs-accent-tint);
	filter: brightness(0.96);
}

body.lecs-style-b .tribe-events-calendar-month__calendar-event-datetime {
	margin-bottom: 3px;
	color: var(--lecs-accent-dark);
	font-size: 0.65625rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

body.lecs-style-b .tribe-events-calendar-month__calendar-event-title,
body.lecs-style-b .tribe-events-calendar-month__calendar-event-title-link {
	color: var(--lecs-ink);
	font-size: 0.71875rem;
	font-weight: 500;
	line-height: 1.38;
}

/* Featured / multiday bars keep the accent rather than TEC's default */

body.lecs-active .tribe-events-calendar-month__multiday-event-bar-inner {
	background-color: var(--lecs-accent-tint);
	border-color: var(--lecs-accent);
}

body.lecs-active .tribe-events-calendar-month__multiday-event--featured .tribe-events-calendar-month__multiday-event-bar-inner {
	background-color: var(--lecs-accent);
	color: #fff;
}

/* --------------------------------------------------------------------------
   5. Event card (TEC tooltip, rendered at body level by tooltipster)
   -------------------------------------------------------------------------- */

body.lecs-active .tribe-events-tooltip-theme,
.tribe-events-tooltip-theme.lecs-tooltip {
	max-width: 320px;
}

body.lecs-active .tribe-events-tooltip-theme {
	padding: 3px;
}

body.lecs-active .tribe-events-tooltip-theme .tooltipster-box {
	margin: 0;
	padding: 0;
	background-color: var(--lecs-card-bg);
	border: 0;
	border-radius: var(--lecs-radius);
	box-shadow: 0 18px 44px rgba(9, 30, 34, 0.34);
	overflow: hidden;
}

body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-box {
	background-color: #fff;
}

body.lecs-active .tribe-events-tooltip-theme .tooltipster-content {
	padding: 0;
	color: #fff;
}

body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content {
	color: var(--lecs-ink);
}

body.lecs-active .tribe-events-tooltip-theme .tooltipster-arrow {
	display: none;
}

/* Safety net: earlier builds injected this block outside the hidden tooltip
   wrapper, so it appeared in the day cell. Hide any leftover copy. */

body.lecs-active .lecs-tooltip-org {
	display: none;
}

/* Organizer logo header, injected when the event has no featured image.
   The comp shows the organizer lockup on an accent block above the copy. */

body.lecs-active .lecs-card-header {
	display: block;
	width: auto;
	height: 150px;
	margin: -18px -20px 16px;
	padding: 0;
	background-color: var(--lecs-accent);
	line-height: 0;
	overflow: hidden;
}

body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .lecs-card-header img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	object-position: center;
}

/* TEC's own featured image inside the card, used as the card header. */

body.lecs-active .tribe-events-calendar-month__calendar-event-tooltip-featured-image-wrapper {
	display: block;
	width: auto;
	height: 150px;
	margin: -18px -20px 16px;
	background-color: var(--lecs-accent);
	line-height: 0;
	overflow: hidden;
}

/* Carries the full tooltip chain so it outranks theme rules that reset image
   widths, which is what left the image at its natural size. */
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-featured-image {
	display: block;
	width: 100%;
	min-width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}

/* Card image off: the card falls back to the plain dark window. */
body.lecs-hero-off .tribe-events-calendar-month__calendar-event-tooltip-featured-image-wrapper,
body.lecs-hero-off .lecs-card-header {
	display: none;
}

/* Tooltip body */

/* The theme styles headings and links inside the card, so set the colour on
   every descendant rather than on the title element alone. */
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content h1,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content h2,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content h3,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content h4,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content h5,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content h6,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content p,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content a,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content span,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content div:not(.tribe-events-calendar-month__calendar-event-tooltip-datetime),
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content li {
	color: #fff;
}

body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content h1,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content h2,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content h3,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content h4,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content h5,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content h6,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content p,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content a,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content span,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content div,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content li {
	color: var(--lecs-ink);
}

body.lecs-active .tribe-events-calendar-month__calendar-event-tooltip {
	padding: 18px 20px 22px;
}

/* These sit after the blanket colour rule above and carry the same
   .tooltipster-content chain so they win on source order, not on !important. */

body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-datetime,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-datetime * {
	color: var(--lecs-accent);
}

body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-datetime {
	display: block;
	margin-bottom: 14px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
}

body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-datetime,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-datetime * {
	color: var(--lecs-accent-dark);
}

body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title-link,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title-link:hover,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title-link:focus {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 12px;
	color: #fff;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title-link {
	color: var(--lecs-ink);
}

body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-description,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-description p {
	margin: 0;
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Imported descriptions often repeat the title and run to several hundred
   words. Five lines is roughly 160 characters at this card width, which is the
   cut off Ricky approved. */
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-description {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-description,
body.lecs-card-light .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-description p {
	color: #54615f;
}

body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title-link:hover,
body.lecs-active .tribe-events-tooltip-theme .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title-link:focus {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. Subscribe button
   -------------------------------------------------------------------------- */

body.lecs-active .tribe-events-c-subscribe-dropdown__button {
	background-color: var(--lecs-accent);
	border: 0;
	border-radius: 3px;
	padding: 13px 24px;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	transition: background-color 0.18s ease;
}

body.lecs-style-b .tribe-events-c-subscribe-dropdown__button {
	border-radius: 999px;
}

body.lecs-active .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover,
body.lecs-active .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus,
body.lecs-active .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within,
body.lecs-active .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:active,
body.lecs-active .tribe-events-c-subscribe-dropdown__button:hover,
body.lecs-active .tribe-events-c-subscribe-dropdown__button:focus {
	background-color: var(--lecs-ink);
	border-color: var(--lecs-ink);
	color: #fff;
}

body.lecs-active .tribe-events-c-subscribe-dropdown__button-text,
body.lecs-active .tribe-events-c-subscribe-dropdown__button-icon path {
	color: #fff;
	fill: #fff;
}

body.lecs-active .tribe-events-c-subscribe-dropdown__list-item-link {
	color: var(--lecs-ink);
}

body.lecs-active .tribe-events-c-subscribe-dropdown__list-item:hover {
	background-color: var(--lecs-accent-tint);
}

/* --------------------------------------------------------------------------
   7. List and day views
   -------------------------------------------------------------------------- */

body.lecs-active .tribe-events-calendar-list__event-row,
body.lecs-active .tribe-events-calendar-day__event-row {
	border-bottom: 1px solid var(--lecs-line);
	padding-bottom: 22px;
	margin-bottom: 22px;
}

body.lecs-active .tribe-events-calendar-list__month-separator-text,
body.lecs-active .tribe-events-calendar-list__event-date-tag-daynum,
body.lecs-active .tribe-events-calendar-day__event-date-tag-daynum {
	color: var(--lecs-accent);
	font-weight: 700;
}

body.lecs-active .tribe-events-calendar-list__event-date-tag-weekday {
	color: var(--lecs-muted);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

body.lecs-active .tribe-events-calendar-list__event-title-link,
body.lecs-active .tribe-events-calendar-day__event-title-link {
	color: var(--lecs-ink);
	font-weight: 600;
	text-decoration: none;
}

body.lecs-active .tribe-events-calendar-list__event-title-link:hover,
body.lecs-active .tribe-events-calendar-day__event-title-link:hover {
	color: var(--lecs-accent-dark);
	text-decoration: underline;
}

body.lecs-active .tribe-events-calendar-list__event-datetime,
body.lecs-active .tribe-events-calendar-day__event-datetime {
	color: var(--lecs-muted);
}

body.lecs-active .tribe-events-c-nav__next,
body.lecs-active .tribe-events-c-nav__prev {
	color: var(--lecs-accent);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Mobile month view
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	body.lecs-active .tribe-events-calendar-month__day-cell--mobile {
		min-height: 0;
		padding: 8px 4px;
		background-color: transparent;
	}

	body.lecs-active .tribe-events-calendar-month__mobile-events-icon--event {
		background-color: var(--lecs-accent);
	}

	body.lecs-active .tribe-events-calendar-month__day-cell--selected {
		background-color: var(--lecs-ink);
	}

	body.lecs-active .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum {
		color: #fff;
	}

	body.lecs-active .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__mobile-events-icon--event {
		background-color: #fff;
	}

	body.lecs-active .tribe-events-calendar-month-mobile-events__mobile-day-title {
		color: var(--lecs-accent);
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	body.lecs-active .tribe-events-calendar-month-mobile-events__mobile-event-title-link {
		color: var(--lecs-ink);
		font-weight: 600;
		text-decoration: none;
	}

	body.lecs-active .lecs-bar-title {
		font-size: 1.5rem;
		width: 100%;
	}

	body.lecs-active .tribe-events-c-events-bar {
		padding: 18px;
	}

	body.lecs-active .tribe-events-c-search__input-control,
	body.lecs-active .tribe-events-c-search__button {
		flex: 1 1 100%;
		width: 100%;
	}

	body.lecs-active .lecs-view-selector-moved {
		order: 5;
		margin-left: 0;
		width: 100%;
	}

	body.lecs-active .lecs-view-selector-moved .tribe-events-c-view-selector__list {
		gap: 18px;
	}
}

/* --------------------------------------------------------------------------
   9. Accessibility
   -------------------------------------------------------------------------- */

body.lecs-active .tribe-events :focus-visible {
	outline: 3px solid var(--lecs-ink);
	outline-offset: 2px;
}

body.lecs-active .tribe-events-c-events-bar :focus-visible {
	outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {

	body.lecs-active .tribe-events * {
		transition: none !important;
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   10. Standalone search form shortcode
   --------------------------------------------------------------------------
   Scoped to its own class rather than to body.lecs-active, because the
   shortcode can be placed on any page, including ones with no calendar on
   them, where the body class is not added. */

.lecs-search-form {
	--lecs-form-accent: #01a89e;
	--lecs-form-ink: #153d45;
	--lecs-form-line: #dde4e4;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.lecs-search-form--dark {
	padding: 22px 24px;
	background-color: var(--lecs-form-ink);
}

.lecs-search-form__label {
	flex: none;
	margin: 0;
	color: var(--lecs-form-accent);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lecs-search-form__icon {
	flex: none;
	display: inline-flex;
	width: 24px;
	height: 24px;
}

.lecs-search-form__icon svg {
	width: 100%;
	height: 100%;
}

.lecs-search-form__icon svg path {
	fill: var(--lecs-form-accent);
}

.lecs-search-form__field {
	box-sizing: border-box;
	flex: 1 1 200px;
	min-width: 0;
	width: auto;
	height: 44px;
	margin: 0;
	border: 1px solid var(--lecs-form-line);
	border-radius: 2px;
	padding: 0 14px;
	background-color: #fff;
	color: #31403f;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: normal;
	letter-spacing: normal;
	box-shadow: none;
}

.lecs-search-form--dark .lecs-search-form__field {
	border-color: transparent;
}

.lecs-search-form__field::placeholder {
	color: #97a4a3;
	opacity: 1;
}

.lecs-search-form__button {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border: 0;
	border-radius: 2px;
	padding: 0 24px;
	background-color: var(--lecs-form-accent);
	color: #fff;
	font-size: 0.78125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.lecs-search-form__button:hover,
.lecs-search-form__button:focus {
	background-color: #017f78;
	color: #fff;
}

.lecs-search-form :focus-visible {
	outline: 3px solid var(--lecs-form-ink);
	outline-offset: 2px;
}

.lecs-search-form--dark :focus-visible {
	outline-color: #fff;
}

@media (max-width: 767px) {

	.lecs-search-form__field,
	.lecs-search-form__button {
		flex: 1 1 100%;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   11. Calendar embeds
   --------------------------------------------------------------------------
   Embeds render inside a fixed height iframe, so the wider calendar layout is
   ignored there and the grid is allowed to shrink instead. */

body.lecs-embed .tribe-events-view {
	position: static;
	left: auto;
	width: auto;
	max-width: none;
	transform: none;
}

body.lecs-embed .tribe-events-calendar-month__day-cell--month {
	min-height: 96px;
}

/* --------------------------------------------------------------------------
   12. Full calendar shortcode
   -------------------------------------------------------------------------- */

.lecs-calendar-shortcode {
	width: 100%;
}

.lecs-calendar-shortcode--wide {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(1600px, calc(100vw - 64px));
	max-width: none;
}

/* --------------------------------------------------------------------------
   13. List and day view featured images
   --------------------------------------------------------------------------
   The row is laid out as a flex pair rather than the default grid, so the copy
   takes every pixel the image column does not need. The image then fills its
   own column rather than floating small inside a wide one. */

body.lecs-active .tribe-events-calendar-list__event-row,
body.lecs-active .tribe-events-calendar-day__event-row {
	display: flex;
	align-items: flex-start;
	gap: 28px;
}

body.lecs-active .tribe-events-calendar-list__event-details,
body.lecs-active .tribe-events-calendar-day__event-details,
body.lecs-active .tribe-events-calendar-list__event-date-tag,
body.lecs-active .tribe-events-calendar-day__event-date-tag {
	max-width: none;
}

body.lecs-active .tribe-events-calendar-list__event-details,
body.lecs-active .tribe-events-calendar-day__event-details {
	flex: 1 1 auto;
	min-width: 0;
}

body.lecs-active .tribe-events-calendar-list__event-date-tag,
body.lecs-active .tribe-events-calendar-day__event-date-tag {
	flex: 0 0 auto;
}

body.lecs-active .tribe-events-calendar-list__event-featured-image-wrapper,
body.lecs-active .tribe-events-calendar-day__event-featured-image-wrapper {
	flex: 0 0 200px;
	width: 200px;
	max-width: 200px;
	margin: 0;
	order: 3;
}

body.lecs-active .tribe-events-calendar-list__event-featured-image,
body.lecs-active .tribe-events-calendar-day__event-featured-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	object-position: center;
}

@media (max-width: 767px) {

	body.lecs-active .tribe-events-calendar-list__event-row,
	body.lecs-active .tribe-events-calendar-day__event-row {
		flex-wrap: wrap;
		gap: 16px;
	}

	body.lecs-active .tribe-events-calendar-list__event-featured-image-wrapper,
	body.lecs-active .tribe-events-calendar-day__event-featured-image-wrapper {
		flex: 0 0 140px;
		width: 140px;
		max-width: 140px;
	}
}

/* List view runs without a featured image, so the copy has the full row. */

body.lecs-active .tribe-events-calendar-list__event-featured-image-wrapper {
	display: none;
}

/* --------------------------------------------------------------------------
   14. Link underlines
   --------------------------------------------------------------------------
   The calendar's own anchor style draws a border under event links. Adding a
   text underline on hover then produced two lines, so the border is dropped
   and the underline does the work. */

body.lecs-active .tribe-events-calendar-list__event-title-link,
body.lecs-active .tribe-events-calendar-day__event-title-link,
body.lecs-active .tribe-events-calendar-month__calendar-event-title-link,
body.lecs-active .tribe-events-calendar-month-mobile-events__mobile-event-title-link,
body.lecs-active .tribe-common-anchor-thin {
	border-bottom: 0;
	box-shadow: none;
	background-image: none;
}

body.lecs-active .tribe-events-calendar-list__event-title-link:hover,
body.lecs-active .tribe-events-calendar-list__event-title-link:focus,
body.lecs-active .tribe-events-calendar-day__event-title-link:hover,
body.lecs-active .tribe-events-calendar-day__event-title-link:focus,
body.lecs-active .tribe-events-calendar-month__calendar-event-title-link:hover,
body.lecs-active .tribe-events-calendar-month__calendar-event-title-link:focus {
	border-bottom: 0;
	box-shadow: none;
	background-image: none;
	text-decoration: underline;
}

/* Fallback in case a template override renders the Day item regardless. */
body.lecs-hide-day .tribe-events-c-view-selector__list-item--day {
	display: none;
}