/**
 * Repairs for The Events Calendar under the Elementor kit.
 *
 * Elementor styles every bare <button> globally. The month view's mobile day
 * cells are buttons, so each day picks up the kit's button fill and the grid
 * renders as a solid block of colour with unreadable dates.
 *
 * Specificity, for anyone changing these rules:
 *   .elementor-kit-6 button              (0,1,1)
 *   .elementor-kit-6 button:hover/:focus (0,2,1)
 * so the doubled class below is (0,2,0) — enough for the base — and the :is()
 * state list lifts the interactive rule to (0,4,0). Dropping either the doubled
 * class or the :is() wrapper puts the purple back.
 */

.tribe-events-calendar-month__day-cell.tribe-events-calendar-month__day-cell--mobile:not( .tribe-events-calendar-month__day-cell--selected ) {
	background-color: transparent;
	/* TEC's own token, with the kit's body colour as the fallback. */
	color: var( --tec-color-text-primary, #46464f );
	border-color: transparent;
	box-shadow: none;
}

.tribe-events-calendar-month__day-cell.tribe-events-calendar-month__day-cell--mobile:not( .tribe-events-calendar-month__day-cell--selected ):is( :hover, :focus, :focus-visible, :active ) {
	background-color: var( --tec-color-background-secondary, #f5f5f5 );
	color: var( --tec-color-text-primary, #46464f );
	box-shadow: none;
}

/*
 * The selected day is deliberately filled by TEC and is left alone — it is the
 * one cell that should read as a button.
 */

/*
 * The selected day.
 *
 * This one is not Elementor's doing — verified by neutralising every
 * .elementor-kit-6 button rule, which left it unchanged. It is TEC's own
 * --tec-color-accent-primary (#334AFF), which sits close enough to the kit's
 * button purple (#4D47D1) to read as a stray brand button dropped in the grid.
 *
 * Restyled to the site's primary navy so the selection reads as "this day",
 * not as something clickable that got loose.
 */
.tribe-events-calendar-month__day-cell.tribe-events-calendar-month__day-cell--mobile.tribe-events-calendar-month__day-cell--selected {
	background-color: #13134b;
}

.tribe-events-calendar-month__day-cell.tribe-events-calendar-month__day-cell--mobile.tribe-events-calendar-month__day-cell--selected:is( :hover, :focus, :focus-visible, :active ) {
	background-color: #13134b;
}

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

/*
 * The visible number is the <time> inside that wrapper, and it carries its own
 * colour rather than inheriting — so styling the wrapper alone leaves a dark
 * date on a dark fill. This is the rule that actually makes it readable, and it
 * was needed with TEC's original accent fill too.
 */
.tribe-events-calendar-month__day-cell--mobile.tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum {
	color: #fff;
}