/**
 * cs-events.css — The Events Calendar list view on /events/ (Module 51).
 *
 * Two jobs: the View Details button (#166) and the mobile headings.
 */

/* ------------------------------------------------------------------ View Details button (#166) */

/*
 * Colors, font, border and hover come from the Elementor kit's global button style via the
 * `elementor-button` class; only layout is set here. Right-aligned with a 10px gap above
 * (Tif, October 1, 2026).
 * Scoped under .tribe-common because TEC's common-skeleton.css resets `.tribe-common div` to
 * margin 0 at (0,1,1), which beat a bare `.cs-event-view-details` (0,1,0) — measured on dev.
 */
.tribe-common .cs-event-view-details {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}

.cs-event-view-details__link {
	display: inline-block;
	text-decoration: none;
}

/* ------------------------------------------------------------------ Mobile headings */

/*
 * The brand rules for these live in Customizer > Additional CSS and are scoped to
 * `.tribe-common--breakpoint-medium`, so below TEC's medium breakpoint they never applied and the
 * title and day number fell back to TEC's Helvetica. Body text and colors now come from TEC's own
 * Customizer (Global Elements: inherit theme fonts + brand colors); TEC has no heading-font option,
 * so the serif is set here from Elementor's "secondary" global, which already shrinks per device
 * (40px / 28px / 24px). Same specificity as the Additional CSS rules, which print later in <head>,
 * so desktop keeps its existing styling.
 */
.tribe-common.tribe-events .tribe-events-calendar-list__event-title,
.tribe-common.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-common.tribe-events .tribe-events-calendar-list__event-date-tag-daynum {
	font-family: var(--e-global-typography-secondary-font-family), serif;
	font-weight: var(--e-global-typography-secondary-font-weight);
	font-size: var(--e-global-typography-secondary-font-size);
	line-height: var(--e-global-typography-secondary-line-height);
}

/*
 * Mobile venue, address, date and day number. TEC's Customizer has no setting for its primary text
 * color, so below the medium breakpoint these stayed navy (#141827) at 12px. Values come from
 * Elementor's body-text global (futura 300, 20px desktop / 16px mobile) and brand colors, which is
 * what desktop already renders, so desktop is unchanged.
 */
.tribe-common.tribe-events .tribe-events-calendar-list__event-date-tag-daynum {
	color: var(--e-global-color-primary);
}

.tribe-common.tribe-events .tribe-events-calendar-list__event-venue,
.tribe-common.tribe-events .tribe-events-calendar-list__event-venue-title,
.tribe-common.tribe-events .tribe-events-calendar-list__event-venue-address,
.tribe-common.tribe-events .tribe-events-calendar-list__event-datetime {
	color: var(--e-global-color-text);
	font-size: var(--e-global-typography-text-font-size);
	line-height: var(--e-global-typography-text-line-height);
}

.tribe-common.tribe-events .tribe-events-calendar-list__event-venue-address,
.tribe-common.tribe-events .tribe-events-calendar-list__event-datetime {
	font-weight: var(--e-global-typography-text-font-weight);
}

/* ------------------------------------------------------------------ RSVP on Facebook (Module 52) */

/* Two buttons on one listing: the flex row above spaces them, and wraps them 8px apart on phones. */

/* Single event page: below the description, in the content's own left alignment. */
.cs-event-fb-rsvp {
	margin: 20px 0;
}

.cs-event-fb-rsvp__link {
	display: inline-block;
	text-decoration: none;
}