/*
 * Events pages (The Events Calendar): /events/ (list, month and day views), category archives and
 * single events (/event/<slug>/).
 *
 * Layout and sizes match the Squarespace events pages. Colors deliberately don't (owner request, #42):
 * Squarespace's all-crimson page was too much red around the calendars, so these pages are cream with
 * charcoal text (#46), crimson buttons and links, and thin navy grid lines. The header keeps the site-wide
 * crimson-deep. Event titles use the heading font.
 * Templates: themes/sacred-roots/tribe/events/ (list event, single event, shared date/time lines).
 *
 * Sizes measured from sacredrootscommunity.org/events at 1440px and 390px; clamp() runs between them.
 * Contrast on cream (WCAG AA): charcoal text 14.4:1, soft charcoal 5.7:1, crimson links 5.5:1, cream on crimson
 * buttons 5.5:1, dimmed past days 4.8:1.
 */

/*
 * The Events Calendar colors and fonts. Its --tec-* variables are declared on :root and many derive
 * from each other there, so override the base ones on the root element itself (only on event pages).
 * Higher specificity than TEC's :root rule, so load order doesn't matter.
 */
:root:has(> body.post-type-archive-tribe_events),
:root:has(> body.tax-tribe_events_cat),
:root:has(> body.single-tribe_events) {
	--sr-events-bg: var(--wp--preset--color--accent-3);
	--sr-events-ink: var(--wp--preset--color--contrast);
	--sr-events-ink-soft: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, var(--wp--preset--color--accent-3));
	--sr-events-link: var(--wp--preset--color--accent-1);
	--sr-events-link-hover: var(--wp--preset--color--crimson-deep);
	--sr-events-line: color-mix(in srgb, var(--wp--preset--color--accent-2) 30%, transparent);

	--tec-font-family-sans-serif: var(--wp--preset--font-family--body);

	--tec-color-text-primary: var(--sr-events-ink);
	--tec-color-text-primary-light: var(--sr-events-ink-soft);
	--tec-color-text-primary-hover: var(--sr-events-ink-soft);
	--tec-color-text-primary-active: var(--sr-events-ink);
	--tec-color-text-secondary: var(--sr-events-ink-soft);
	--tec-color-text-disabled: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);

	--tec-color-icon-primary: var(--sr-events-ink);
	--tec-color-icon-primary-alt: var(--sr-events-ink);
	--tec-color-icon-secondary: var(--sr-events-ink-soft);
	--tec-color-icon-active: var(--sr-events-ink);
	--tec-color-icon-hover: var(--sr-events-link);
	--tec-color-icon-focus: var(--sr-events-link);
	--tec-color-icon-disabled: color-mix(in srgb, var(--wp--preset--color--accent-2) 40%, transparent);
	--tec-color-event-icon: var(--sr-events-ink);
	--tec-color-event-icon-hover: var(--sr-events-link);

	/* TEC's blue accent becomes crimson (buttons, today marker, active states). */
	--tec-color-accent-primary: var(--sr-events-link);
	--tec-color-accent-primary-hover: var(--sr-events-link-hover);
	--tec-color-accent-primary-active: var(--sr-events-link-hover);
	--tec-color-accent-primary-background: color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, transparent);
	--tec-color-accent-secondary: var(--sr-events-ink);
	--tec-color-accent-secondary-hover: var(--sr-events-ink-soft);
	--tec-color-accent-secondary-active: var(--sr-events-ink-soft);
	--tec-color-accent-secondary-background: color-mix(in srgb, var(--wp--preset--color--accent-2) 6%, transparent);
	--tec-color-link-primary: var(--sr-events-ink);
	--tec-color-link-accent: var(--sr-events-link);
	--tec-color-link-accent-hover: var(--sr-events-link-hover);
	--tec-color-background-primary-multiday: color-mix(in srgb, var(--wp--preset--color--accent-1) 15%, transparent);
	--tec-color-background-primary-multiday-hover: color-mix(in srgb, var(--wp--preset--color--accent-1) 25%, transparent);
	--tec-color-background-secondary-multiday: color-mix(in srgb, var(--wp--preset--color--accent-2) 10%, transparent);
	--tec-color-background-secondary-multiday-hover: color-mix(in srgb, var(--wp--preset--color--accent-2) 16%, transparent);

	--tec-color-border-default: var(--sr-events-line);
	--tec-color-border-secondary: var(--sr-events-line);
	--tec-color-border-tertiary: var(--sr-events-ink-soft);
	--tec-color-border-hover: var(--sr-events-ink-soft);
	--tec-color-border-active: var(--sr-events-ink);

	--tec-color-background: var(--sr-events-bg);
	--tec-color-background-secondary: var(--wp--preset--color--base);
	--tec-color-background-secondary-hover: var(--wp--preset--color--base);
	--tec-color-background-transparent: color-mix(in srgb, var(--wp--preset--color--accent-3) 60%, transparent);
	--tec-color-background-messages: color-mix(in srgb, var(--wp--preset--color--accent-2) 6%, transparent);

	/* Page width: the same 3vw side margins as the header (6vw on phones). */
	--sr-events-gutter: 3vw;
	--tec-grid-width: 100%;
	--tec-grid-gutter-page: var(--sr-events-gutter);
	--tec-grid-gutter-page-small: var(--sr-events-gutter);

	/* Squarespace body text: 19.456px at 1440px wide, 18.16px at 390px. */
	--sr-events-text: clamp(18.16px, 17.68px + 0.1234vw, 19.456px);
}

@media (max-width: 781px) {
	:root:has(> body.post-type-archive-tribe_events),
	:root:has(> body.tax-tribe_events_cat),
	:root:has(> body.single-tribe_events) {
		--sr-events-gutter: 6vw;
	}
}

body.post-type-archive-tribe_events,
body.tax-tribe_events_cat,
body.single-tribe_events {
	background-color: var(--sr-events-bg);
	color: var(--sr-events-ink);
}

/*
 * No focus box on mouse click in the calendar either (TEC adds its own :focus outlines, which beat the
 * site-wide rule in base.css). Keyboard focus keeps TEC's outline.
 */
.tribe-events-view.tribe-common.tribe-events :focus:not(:focus-visible),
.tribe-common .tribe-events-c-subscribe-dropdown :focus:not(:focus-visible) {
	outline: none;
}

/* Filled buttons: keyboard focus ring in the button's crimson, set off from it so it shows on the cream. */
.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn:focus-visible {
	outline: 2px solid var(--sr-events-link);
	outline-offset: 2px;
}

/* Theme fonts everywhere in the calendar: headings in the heading font, everything else in the body font. */
body .tribe-common :is(.tribe-common-h1, .tribe-common-h2, .tribe-common-h3, .tribe-common-h4, .tribe-common-h5, .tribe-common-h6, .tribe-common-h7, .tribe-common-h8) {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
}

/* Buttons: crimson with cream text (Squarespace's cream buttons, inverted for the cream page). */
.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn,
.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn-border,
.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn-border-small,
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	border-radius: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn-border-small,
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	border-color: var(--sr-events-link);
	color: var(--sr-events-link);
}

.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn-border-small:hover,
.tribe-events-view.tribe-common.tribe-events .tribe-common-c-btn-border-small:focus,
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover,
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within {
	background-color: var(--sr-events-link);
	color: var(--wp--preset--color--accent-3);
}

.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-text,
.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within .tribe-events-c-subscribe-dropdown__button-text {
	color: var(--wp--preset--color--accent-3);
}

/*
 * Calendar page (list, month, day).
 */
.tribe-block.tec-block__archive-events {
	margin-top: 0;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-l-container {
	min-height: 0;
	padding-top: 15px;
	padding-bottom: 68px;
}

/* "Weekly programs:" note above the calendar (plugins/sacred-roots-site/includes/weekly-programs.php). */
.tribe-events-before-html .sr-weekly-note {
	margin: 0 0 17px;
	font-size: var(--sr-events-text);
	line-height: 1.6;
}

.sr-weekly-note a {
	color: inherit;
}

/* It's for the calendar pages; Squarespace's single event pages don't have it. */
.single-tribe_events .sr-weekly-note {
	display: none;
}

/*
 * No search bar (#46: functions.php turns TEC's event search off). The List / Month / Day tabs sit at the
 * right end of the date navigation row (TEC's own layout without search; tabs kept by
 * tribe/events/v2/components/events-bar/views.php). On phones TEC shows them as an icon menu instead.
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__list-item-text,
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__button-text {
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
}

/* The view menu (phones) opens on cream with a thin edge. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-view-selector__content {
	border-radius: 0;
}

/*
 * Date row (#52): "Upcoming" or the month name as plain text, no date picker or "Today" button
 * (tribe/events/v2/list/top-bar.php, month/top-bar.php). Month arrows show on phones too, and a missing
 * arrow keeps its place so the other one doesn't jump (month/top-bar/nav.php).
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-top-bar {
	display: flex;
	align-items: center;
}

.tribe-events-view.tribe-common.tribe-events .sr-events-heading {
	margin: 0;
	font-size: 28px;
	font-weight: 400;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events .sr-nav-slot::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
}

/* Bottom links: an empty slot keeps "Next Events" / "Dec ›" on the right. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-nav__list-item:empty {
	flex: 1;
}

/* Month headings in the list ("October 2026"). */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list__month-separator-text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--sr-events-ink);
}

/*
 * List view events (template: tribe/events/v2/list/event.php). Owner request (#46): one compact card per
 * event, flyer thumbnail on the left, no "View Event" button. The whole card opens the event: the title
 * link is stretched over it (::after), and the calendar links sit above that so they still work.
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list__event-row.sr-event-row {
	display: block;
	margin: 0 -12px 28px;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list__month-separator + .sr-event-row {
	margin-top: 22px;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card {
	position: relative;
	display: flex;
	flex-direction: row; /* TEC reverses it (featured image on the right). */
	gap: 24px;
	align-items: flex-start;
	margin: 0;
	padding: 12px;
	transition: background-color 0.1s ease;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card:hover {
	background-color: color-mix(in srgb, var(--sr-events-link) 6%, transparent);
}

.sr-event-card__thumb {
	flex: 0 0 auto;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card__thumb img {
	display: block;
	width: 112px;
	height: 112px;
	object-fit: cover;
}

/* No flyer: deep-crimson tile, logo mark centered (sized like the header logo relative to its bar). */
.tribe-events-view.tribe-common.tribe-events .sr-event-card__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	background-color: var(--wp--preset--color--crimson-deep);
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card__thumb--placeholder img {
	width: 40%;
	height: auto;
	object-fit: contain;
}

.sr-event-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sr-events-ink);
	transition: color 0.1s ease;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card:hover .tribe-events-calendar-list__event-title {
	color: var(--sr-events-link);
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link,
.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link:visited,
.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link:hover,
.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link:focus {
	border: 0;
	color: inherit;
	text-decoration: none;
	outline: none;
}

/* The stretched link covers the whole card. Keyboard focus draws its ring around the card. */
.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title-link:focus-visible::after {
	outline: 2px solid var(--sr-events-link);
	outline-offset: 2px;
}

/* Google Calendar and ICS stay their own links, above the card link. */
.tribe-common .sr-event-card .sr-event-meta--export a,
.sr-event-card .sr-event-meta--export a {
	position: relative;
	z-index: 2;
}

.tribe-common .sr-event-card .sr-event-meta--export a:hover,
.sr-event-card .sr-event-meta--export a:hover {
	color: var(--sr-events-link);
}

@media (prefers-reduced-motion: reduce) {
	.tribe-events-view.tribe-common.tribe-events .sr-event-card,
	.tribe-events-view.tribe-common.tribe-events .sr-event-card .tribe-events-calendar-list__event-title {
		transition: none;
	}
}

/*
 * Text colored in the editor (<mark class="has-inline-color">). The editor writes a transparent background
 * inline, but kses can strip that style for editors without unfiltered_html, which would leave the
 * browser's yellow highlight.
 */
:is(body.post-type-archive-tribe_events, body.tax-tribe_events_cat, body.single-tribe_events) mark.has-inline-color {
	background-color: transparent;
}

/*
 * A link whose text is colored (e.g. a navy "Apply"): the underline takes the text's color, not the
 * crimson link color (owner request). The link drops its own underline and the colored text draws one.
 */
:is(body.post-type-archive-tribe_events, body.tax-tribe_events_cat, body.single-tribe_events) a:has(> mark.has-inline-color) {
	text-decoration: none;
}

:is(body.post-type-archive-tribe_events, body.tax-tribe_events_cat, body.single-tribe_events) a > mark.has-inline-color {
	text-decoration: underline;
	text-decoration-thickness: inherit;
	text-underline-offset: inherit;
}

/* Date, time and calendar links (tribe/events/sr-event-meta.php), list and single event. */
.sr-event-meta {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--sr-events-text);
	line-height: 1.6;
	color: var(--sr-events-ink);
}

.sr-event-meta li {
	margin: 0;
}

.tribe-common .sr-event-meta a,
.sr-event-meta a {
	color: inherit;
	text-decoration: none;
}

.tribe-common .sr-event-meta a:hover,
.sr-event-meta a:hover,
.sr-event-meta a:focus {
	color: inherit;
	text-decoration: none;
}

.sr-event-meta .sr-event-meta__divider {
	margin: 0 5px;
}

@media (max-width: 781px) {
	.tribe-events-view.tribe-common.tribe-events .tribe-events-l-container {
		padding-top: 38px;
	}

	.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-list__event-row.sr-event-row {
		margin-bottom: 16px;
	}

	.tribe-events-view.tribe-common.tribe-events .sr-event-card {
		gap: 16px;
	}

	.tribe-events-view.tribe-common.tribe-events .sr-event-card__thumb img,
	.tribe-events-view.tribe-common.tribe-events .sr-event-card__thumb--placeholder {
		width: 80px;
		height: 80px;
	}

	.tribe-events-view.tribe-common.tribe-events .sr-event-card__thumb--placeholder img {
		width: 40%;
		height: auto;
	}
}

/* Bottom of the list: "Previous Events / Next Events" and "Subscribe to calendar". */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-nav__list-item a,
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-nav__list-item button {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--sr-events-text);
}

/*
 * Month view.
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__header-column-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day-date,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day-date-link {
	font-family: var(--wp--preset--font-family--body);
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-title-link,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title-link {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-datetime {
	font-size: 15px;
	color: var(--sr-events-ink-soft);
}

/* Days in the past and in other months: dimmed, not gray. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day--past-month .tribe-events-calendar-month__day-date,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day--next-month .tribe-events-calendar-month__day-date,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date {
	opacity: 0.65;
}

/* Today: bold. On phones TEC marks the selected day with a crimson square and a cream number. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
	font-weight: 700;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum {
	color: var(--wp--preset--color--accent-3);
	opacity: 1;
}

/* Hover cards in the month grid: white with a thin edge. */
.tooltipster-base.tribe-events-tooltip-theme,
.tooltipster-base.tribe-events-tooltip-theme--hover {
	--tec-color-background-tooltip: var(--wp--preset--color--base);
}

/*
 * Day view.
 */
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-day__time-separator-text,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-day__type-separator-text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-day__event-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-day__event-title-link {
	border: 0;
	color: var(--sr-events-ink);
}

.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-day__event-datetime,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-day__event-description,
.tribe-events-view.tribe-common.tribe-events .tribe-events-calendar-day__event-venue {
	font-size: var(--sr-events-text);
	color: var(--sr-events-ink);
}

/* Empty states ("There are no upcoming events") and other notices. */
.tribe-events-view.tribe-common.tribe-events .tribe-events-c-messages__message {
	font-size: var(--sr-events-text);
	color: var(--sr-events-ink);
}

/*
 * Single event (template: tribe/events/single-event-blocks.php).
 * Left: title, date, time, calendar links. Right: description with the flyer floated beside it.
 */
.single-tribe_events #tribe-events-pg-template,
.single-tribe_events .tribe-events-pg-template {
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
}

.single-tribe_events .tribe-block.tec-block__single-event {
	margin: 0;
	max-width: none;
}

.sr-event {
	padding: 15px var(--sr-events-gutter) 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--sr-events-text);
	line-height: 1.6;
	color: var(--sr-events-ink);
}

.sr-event a {
	color: inherit;
}

.sr-event .sr-event__back {
	display: inline-block;
	margin-bottom: 51px;
	text-decoration: none;
}

.sr-event .sr-event__back:hover,
.sr-event .sr-event__back:focus {
	opacity: 0.8;
}

.sr-event .sr-event__item {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
}

.sr-event__meta {
	flex: 0 0 30%;
}

#tribe-events-pg-template .sr-event .sr-event__title,
.sr-event .sr-event__title {
	margin: 0 0 34px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sr-events-ink);
}

/* Date and time are a little smaller on the single page. */
.sr-event .sr-event-meta {
	font-size: calc(var(--sr-events-text) * 0.9);
}

.sr-event .sr-event-meta--when {
	margin-bottom: 17px;
}

.sr-event__content {
	flex: 1 1 0;
	min-width: 0;
	padding: 17px 0 0 34px;
	/* Squarespace "large" paragraph text: 24.64px at 1440px wide, 21.4px at 390px. */
	font-size: clamp(21.4px, 20.2px + 0.3086vw, 24.64px);
	line-height: 1.6;
}

.sr-event__content::after {
	content: "";
	display: table;
	clear: both;
}

.sr-event__content > :first-child,
.sr-event__flyer + * {
	margin-top: 0;
}

.sr-event__content p {
	margin: 0 0 16px;
}

.sr-event__content :is(p, li) a {
	color: var(--sr-events-link);
	text-decoration: underline;
}

.sr-event__content :is(p, li) a:hover,
.sr-event__content :is(p, li) a:focus {
	color: var(--sr-events-link-hover);
}

.sr-event__content :is(h2, h3, h4) {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	color: var(--sr-events-ink);
}

/* Squarespace's Heading 2 in an event description (e.g. "Details" on Convergence 2026): 47.1px at 1440, 35.4px at 390. */
.sr-event__content h2 {
	margin: 32px 0;
	font-size: clamp(35.44px, 31.11px + 1.111vw, 47.104px);
	line-height: 1.3;
}

.sr-event__flyer {
	float: right;
	clear: right;
	width: calc(50% - 17px);
	margin: 0 0 17px 34px;
}

/* More than one flyer: stacked in the same column, 33px apart (as on Squarespace). */
.sr-event__flyer + .sr-event__flyer {
	margin-top: 16px;
}

.sr-event__flyer a {
	display: block;
}

.sr-event__flyer img {
	display: block;
	width: 100%;
	height: auto;
}

/* Previous and next events, full width under the event. */
.sr-event__pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 110px;
	margin: 15px calc(-1 * var(--sr-events-gutter)) 0;
	padding: 43.2px var(--sr-events-gutter);
}

.sr-event .sr-event__pagination-link {
	position: relative;
	display: flex;
	flex: 0 1 auto;
	box-sizing: border-box;
	max-width: calc(50% - 55px);
	flex-direction: column;
	min-width: 0;
	padding-left: 43px;
	text-decoration: none;
}

.sr-event .sr-event__pagination-link--next {
	align-items: flex-end;
	padding-right: 43px;
	padding-left: 0;
	text-align: right;
}

/* Thin chevrons, like Squarespace's. */
.sr-event__pagination-link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 4px;
	width: 15px;
	height: 15px;
	border-bottom: 1.5px solid currentColor;
	border-left: 1.5px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

.sr-event__pagination-link--next::before {
	right: 4px;
	left: auto;
	transform: translateY(-50%) rotate(-135deg);
}

span.sr-event__pagination-link::before {
	content: none;
}

.sr-event__pagination-date {
	margin-bottom: 16px;
	font-size: var(--sr-events-text);
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.sr-event__pagination-title {
	font-family: var(--wp--preset--font-family--heading);
	/* 36.7px at 1440px wide, 29px at 390px. */
	font-size: clamp(28.96px, 26.07px + 0.7406vw, 36.736px);
	line-height: 1;
}

.sr-event .sr-event__pagination-link:hover .sr-event__pagination-title,
.sr-event .sr-event__pagination-link:focus .sr-event__pagination-title {
	opacity: 0.8;
}

@media (max-width: 781px) {
	.sr-event .sr-event__back {
		margin-bottom: 51px;
	}

	.sr-event .sr-event__item {
		display: block;
	}

	.sr-event__meta {
		margin-bottom: 34px;
	}

	#tribe-events-pg-template .sr-event .sr-event__title,
	.sr-event .sr-event__title {
		margin-bottom: 17px;
	}

	.sr-event__content {
		padding: 0;
	}

	.sr-event__flyer {
		float: none;
		width: calc(100% - 17px);
		margin: 17px 0 34px 17px;
	}

	.sr-event__flyer + .sr-event__flyer {
		margin-top: 0;
	}

	.sr-event__pagination {
		gap: 16px;
		padding: 11.7px var(--sr-events-gutter);
	}

	.sr-event .sr-event__pagination-link {
		flex: 1 1 50%;
		max-width: none;
	}
}