/*
 * 50-events.css — The Events Calendar views (/calendar-events/…) and single events (Discovery).
 * TEC declares its --tec-* variables on :root and computes derived ones there, so overrides sit on :root:root
 * (higher specificity, same element) to win regardless of load order. Selectors that override TEC rules carry a
 * `body` prefix for the same reason.
 */

/* ---- D-18: brand colours and fonts ---- */
:root:root {
	--tec-color-accent-primary: var(--ric-color-primary);
	--tec-color-accent-primary-hover: var(--ric-color-secondary);
	--tec-color-accent-primary-active: var(--ric-color-secondary);
	--tec-color-accent-primary-background: color-mix(in srgb, var(--ric-color-primary) 8%, transparent);
	--tec-color-accent-primary-week-event: color-mix(in srgb, var(--ric-color-primary) 10%, transparent);
	--tec-color-accent-primary-week-event-hover: color-mix(in srgb, var(--ric-color-primary) 20%, transparent);
	--tec-color-accent-primary-week-event-featured: color-mix(in srgb, var(--ric-color-primary) 4%, transparent);
	--tec-color-accent-primary-week-event-featured-hover: color-mix(in srgb, var(--ric-color-primary) 14%, transparent);
	--tec-color-background-primary-multiday: color-mix(in srgb, var(--ric-color-primary) 24%, transparent);
	--tec-color-background-primary-multiday-hover: color-mix(in srgb, var(--ric-color-primary) 34%, transparent);
	--tec-color-link-accent-hover: var(--ric-color-secondary);
	--tec-color-icon-focus: var(--ric-color-primary);
	--tec-color-event-icon-hover: var(--ric-color-primary);
	--tec-color-text-primary: var(--ric-color-text);
	--tec-color-text-primary-light: color-mix(in srgb, var(--ric-color-text) 72%, transparent);
	--tec-color-accent-secondary: var(--ric-color-secondary);
	--tec-color-border-active: var(--ric-color-secondary);
	--tec-color-icon-active: var(--ric-color-secondary);
	--tec-color-event-icon: var(--ric-color-secondary);
	--tec-font-family-sans-serif: var(--ric-font-body);
}
body .tribe-common .tribe-common-h1,
body .tribe-common .tribe-common-h2,
body .tribe-common .tribe-common-h3,
body .tribe-common .tribe-common-h4,
body .tribe-common .tribe-common-h5,
body .tribe-common .tribe-common-h6,
body .tribe-common .tribe-common-h7,
body .tribe-common .tribe-common-h8 { font-family: var(--ric-font-heading); }
body .tribe-events .tribe-events-header__content-title-text { color: var(--ric-color-secondary); }

/* ---- D-19 + D-21: tap targets ≥ 44px on touch widths; Prev · Today · Next share one size ---- */
@media (max-width: 1024px) {
	body .tribe-events .tribe-events-c-nav__list-item > a,
	body .tribe-events .tribe-events-c-nav__list-item > button,
	body .tribe-events .tribe-events-c-top-bar__nav-list-item > a,
	body .tribe-events .tribe-events-c-top-bar__nav-list-item > button,
	body .tribe-events .tribe-events-c-top-bar__today-button,
	body .tribe-events .tribe-events-c-top-bar__datepicker-button,
	body .tribe-events .tribe-events-c-events-bar__search-button,
	body .tribe-events .tribe-events-c-view-selector__button,
	body .tribe-events .tribe-events-c-view-selector__list-item-link,
	body .tribe-events .tribe-events-c-messages__message-list-item-link,
	body .tribe-events .tribe-events-c-subscribe-dropdown__list-item-link,
	body .tribe-events .tribe-events-calendar-month__day-cell--mobile,
	body .tribe-events-back a,
	body .tribe-events-single .tribe-events-sub-nav a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--ric-tap-min);
		min-height: var(--ric-tap-min);
	}
	body .tribe-events .tribe-events-calendar-month__day-cell--mobile { display: flex; flex-direction: column; }
}
body .tribe-events .tribe-events-c-nav__list-item > a,
body .tribe-events .tribe-events-c-nav__list-item > button { /* D-21: Hello's button reset made "Next" 16px and others 12px */
	font-size: var(--ric-text-base);
	line-height: var(--ric-leading-normal);
}
body .tribe-events .tribe-events-c-nav__list-item > button { padding: 0; }

/* ---- D-20: month grid header and "today" marker ---- */
/* Hello's `table thead:first-child tr:first-child th` (0,2,4) border drew dashes above the weekday letters */
body .tribe-events .tribe-events-calendar-month__header .tribe-events-calendar-month__header-column { border: 0; }
body .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
body .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum { color: var(--ric-color-primary); }
/* The selected day of the mobile grid is a filled chip: white number (TEC's own number colour has no contrast on it) */
body .tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date,
body .tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum { color: var(--ric-color-on-primary); }
@media (min-width: 768px) {
	body .tribe-events .tribe-events-calendar-month__day--current { box-shadow: inset 0 3px 0 var(--ric-color-primary); }
}

/* ---- D-22: the list row's negative gutters made the page 2px wider than the phone ---- */
body .tribe-events .tribe-events-l-container { overflow-x: clip; }

/* ---- D-23: no iOS zoom on the keyword field at tablet widths ---- */
body .tribe-events .tribe-events-c-search__input,
body .tribe-common--breakpoint-medium.tribe-common .tribe-events-c-search__input { font-size: var(--ric-text-base); } /* beats TEC's medium-breakpoint 14px */

/* ---- D-32: event facts (date, time, place, organizer) at 16px ---- */
body .tribe-common .tribe-common-b2,
body .tribe-common .tribe-common-b3,
body .tribe-common--breakpoint-medium.tribe-common .tribe-common-b2,
body .tribe-common--breakpoint-medium.tribe-common .tribe-common-b3 { font-size: var(--ric-text-base); line-height: var(--ric-leading-normal); }
body .tribe-events .tribe-events-calendar-list__month-separator-text,
body .tribe-events .tribe-events-c-view-selector__list-item-text { font-size: var(--ric-text-base); }
body.single-tribe_events .tribe-events-event-meta,
body.single-tribe_events .tribe-events-event-meta .tribe-events-meta-label,
body.single-tribe_events .tribe-events-event-meta .tribe-events-meta-value,
body.single-tribe_events .tribe-events-event-meta .tribe-events-abbr,
body.single-tribe_events .tribe-events-event-meta .tribe-address,
body.single-tribe_events .tribe-events-event-meta .tribe-events-gmap,
body.single-tribe_events .tribe-events-event-meta li { font-size: var(--ric-text-base); }
body.single-tribe_events .tribe-events-single .tribe-events-sub-nav { font-size: var(--ric-text-base); }

/* ---- D-14: TEC's <abbr> dates are not abbreviations — no dotted underline ---- */
body.single-tribe_events .tribe-events-abbr { text-decoration: none; border-bottom: 0; cursor: default; }

/* ---- D-26 (CSS part): event title outranks the body; previous/next event nav aligned ---- */
body.single-tribe_events .tribe-events-single-event-title {
	font-family: var(--ric-font-heading);
	font-size: 2rem;
	line-height: var(--ric-leading-tight);
	color: var(--ric-color-primary);
}
@media (min-width: 768px) {
	body.single-tribe_events .tribe-events-single-event-title { font-size: 2.5rem; }
}
body.single-tribe_events .tribe-events-single .tribe-events-sub-nav { padding-left: 0; list-style: none; }

/* ---- Focus: TEC buttons and links use the site ring ---- */
body .tribe-events :is(a, button, input):focus-visible,
body.single-tribe_events .tribe-events-single :is(a, button):focus-visible { outline: var(--ric-focus-ring); outline-offset: 2px; }
/* D-34: the events bar's Search button (shown while the calendar is narrower than TEC's 768px breakpoint). TEC's
   `.tribe-events button.tribe-events-c-events-bar__search-button:focus` (0,3,1) sets `outline: auto`, drawn in the
   button's colour, which Hello's reset turns white on focus, and `box-shadow: none`: a white ring on the white bar. */
body .tribe-events button.tribe-events-c-events-bar__search-button:focus-visible {
	outline: var(--ric-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--ric-color-bg), 0 0 0 5px var(--ric-color-focus);
}

/* ---- TBD (Task 52): the "TBD" tag reads like the date tags ---- */
body .tribe-events .ri-tbd-date-tag .tribe-events-calendar-list__event-date-tag-daynum { color: var(--ric-color-muted); }

/* ---- [ric_events_list] — /events/ and Home (Task 55) ---- */
.ric-events { display: grid; gap: var(--ric-space-6); }
.ric-events .ric-events__heading { margin: 0 0 var(--ric-space-4); font-family: var(--ric-font-heading); font-size: var(--ric-text-2xl); line-height: var(--ric-leading-tight); color: var(--ric-color-secondary); }
.ric-events .ric-events__list { display: grid; gap: var(--ric-space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
	.ric-events .ric-events__list { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
}
.ric-events .ric-event-card {
	position: relative;
	height: 100%;
	padding: var(--ric-space-4) var(--ric-space-5);
	background: var(--ric-color-bg);
	border: 1px solid var(--ric-color-border);
	border-left: 4px solid var(--ric-color-primary);
	border-radius: var(--ric-radius-md);
}
.ric-events .ric-event-card:hover { box-shadow: var(--ric-shadow-sm); }
.ric-events .ric-event-card:focus-within { outline: var(--ric-focus-ring); outline-offset: 2px; }
.ric-events .ric-event-card__date { margin: 0 0 var(--ric-space-2); font-size: var(--ric-text-base); font-weight: 600; color: var(--ric-color-secondary); }
.ric-events .ric-event-card__date--tbd { font-style: italic; color: var(--ric-color-muted); }
.ric-events .ric-event-card__past { font-weight: 400; color: var(--ric-color-muted); }
.ric-events .ric-event-card__title { margin: 0 0 var(--ric-space-2); font-family: var(--ric-font-heading); font-size: var(--ric-text-lg); line-height: var(--ric-leading-tight); }
.ric-events .ric-event-card__link { color: var(--ric-color-primary); text-decoration: none; }
.ric-events .ric-event-card__link:hover { text-decoration: underline; }
.ric-events .ric-event-card__link:focus-visible { outline: none; } /* the card shows the ring */
.ric-events .ric-event-card__link::after { content: ""; position: absolute; inset: 0; } /* whole card = one link */
.ric-events .ric-event-card__venue,
.ric-events .ric-event-card__excerpt,
.ric-events .ric-events__empty { margin: 0 0 var(--ric-space-2); font-size: var(--ric-text-base); color: var(--ric-color-text); }
.ric-events .ric-events__item--past .ric-event-card { background: var(--ric-color-bg-accent); border-left-color: var(--ric-color-border); }
.ric-events .ric-events__links { display: flex; flex-wrap: wrap; gap: var(--ric-space-3); margin: 0; }
.ric-events .ric-events__button {
	display: inline-flex;
	align-items: center;
	min-height: var(--ric-tap-min);
	padding: 0 var(--ric-space-5);
	font-weight: 600;
	color: var(--ric-color-on-primary);
	text-decoration: none;
	background: var(--ric-color-secondary);
	border: 1px solid var(--ric-color-secondary);
	border-radius: var(--ric-radius-sm);
}
.ric-events .ric-events__button--secondary { color: var(--ric-color-primary); background: transparent; border-color: var(--ric-color-primary); }
.ric-events .ric-events__button:focus-visible { outline: var(--ric-focus-ring); outline-offset: 2px; }
/* Hover/focus states at (0,3,0): the kit's `.elementor-kit-395 a:hover` (0,2,1) would otherwise turn the label the
 * button's own dark green. Same pattern as the site's buttons (20-components.css): primary fill + underline cue. */
.ric-events .ric-events__button:is(:hover, :focus-visible) {
	color: var(--ric-color-on-primary);
	background: var(--ric-color-primary);
	border-color: var(--ric-color-primary);
	text-decoration-line: underline;
	text-underline-offset: 3px;
}
.ric-events .ric-events__button--secondary:is(:hover, :focus-visible) {
	color: var(--ric-color-secondary);
	background: var(--ric-color-bg-accent);
	border-color: var(--ric-color-secondary);
}