/* Events List View — Figma node 66:3911 (desktop), 532:3647 (mobile) */
/* Restyles The Events Calendar Pro's native List View at /events/. Zero
   template overrides — every selector below targets TEC's existing markup
   (see the-events-calendar/src/views/v2/list.php and its sub-templates). */
/* Enqueue-order note: this stylesheet loads before Kadence's own
   tribe-events.min.css and TEC Pro's views-skeleton.css — those two are the
   only later-loading stylesheets that could ever out-specificity a bare
   selector here via source order alone. Confirmed today (searched both) to
   have no competing ul/li/p/h3/subscribe-dropdown rules, but worth a quick
   lookup if a bare selector here ever behaves unexpectedly in the future. */

/* ==========================================================================
   Layout — desktop two-column grid
   ==========================================================================
   TEC's list.php renders the header, list, pagination, Subscribe-to-Calendar,
   and after-events-html block as flat siblings inside one <section> — no
   nested "main"/"sidebar" wrapper. Every child gets an explicit grid-column
   AND grid-row (never left to auto-placement) so the invisible utility
   templates (loader/json-ld-data/data/filter-bar) can't shift real content
   around depending on whether they render anything. */

@media (min-width: 768px) {
	/* Compound selector (not just .tribe-events-l-container) is required here:
	   TEC's own common-skeleton.css ships an unconditional
	   ".tribe-common section { display: block }" rule. That selector's
	   specificity (0,1,1) beats a bare ".tribe-events-l-container" (0,1,0)
	   since this element is a <section> inside a .tribe-common ancestor —
	   confirmed live via getComputedStyle, which showed display:block even
	   though this rule matched. Using both classes already on the element
	   (.tribe-common-l-container.tribe-events-l-container, specificity 0,2,0)
	   outranks it without resorting to !important. */
	.tribe-events-view--list .tribe-common-l-container.tribe-events-l-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		column-gap: 40px;
		align-items: start;
	}

	/* .tribe-events-l-container > * and its siblings below (all specificity
	   0,2,0 once scoped, i.e. tied with each other) have their relative
	   ordering resolved by source order intentionally, within this same
	   file — not a vendor-stylesheet conflict — so the later grid-row/
	   grid-column overrides for the list, nav, subscribe container, and
	   after-html block simply win by appearing after this catch-all rule.
	   Called out explicitly to keep this file's "no fragile ties" comments
	   honestly scoped to genuine cross-stylesheet conflicts only. */
	.tribe-events-view--list .tribe-events-l-container > * {
		grid-column: 1;
		grid-row: 1;
	}

	.tribe-events-view--list .tribe-events-calendar-list {
		grid-row: 2;
	}

	.tribe-events-view--list .tribe-events-calendar-list-nav {
		grid-row: 3;
	}

	.tribe-events-view--list .tribe-events-c-subscribe-dropdown__container {
		grid-column: 2;
		grid-row: 1;
	}

	.tribe-events-view--list .tribe-events-after-html {
		grid-column: 2;
		grid-row: 2 / span 2;
	}
}

/* ==========================================================================
   Layout — mobile stacking (<768px)
   ==========================================================================
   Grid is desktop-only (min-width: 768px above); below that, .tribe-events-l-container
   stays a normal block/flex flow. Accepted trade-off: DOM order is unchanged
   (list, then pagination, then Subscribe-to-Calendar, then the callout) for
   reading/tab order, but `order` visually promotes the Subscribe-to-Calendar
   + callout block above the list, matching the Figma mobile frame. This is
   visual-only — screen readers and keyboard tab order still hit the list
   and pagination first. */

@media (max-width: 767px) {
	/* Same specificity fix as the desktop grid block above — see that comment.
	   Without the compound selector, common-skeleton.css's unconditional
	   ".tribe-common section { display: block }" wins here too and the
	   container never becomes a flex container. */
	.tribe-events-view--list .tribe-common-l-container.tribe-events-l-container {
		display: flex;
		flex-direction: column;
	}

	.tribe-events-view--list .tribe-events-calendar-list,
	.tribe-events-view--list .tribe-events-calendar-list-nav {
		order: 1;
	}

	/* Fix pass (2026-08-12): the page's side margins on mobile (24px) didn't
	   match Figma's mobile mock (16px). Confirmed live via getComputedStyle
	   that this isn't set anywhere in this file — it traces to Kadence's own
	   global.min.css rule ".site-container, ... { padding: 0
	   var(--global-content-edge-padding) }", a sitewide mobile content-edge
	   token used on every page, currently 1.5rem (24px). Rather than
	   override that shared token globally (which would change every page's
	   margins) or fight the padding property directly, redefining the same
	   CSS variable scoped to this one template's real, stable body class
	   lets every rule that already consumes it — just this one, today, but
	   also any other Kadence rule built on the same token — pick up the
	   narrower value automatically, with no specificity fight needed.
	   Scoped to this same max-width:767px query since only the mobile mock
	   was compared against; desktop's margin was not evaluated against
	   Figma and is left on the sitewide default. */
	body.post-type-archive-tribe_events {
		--global-content-edge-padding: 16px;
	}
}

/* ==========================================================================
   Top bar — Today button, Upcoming date selector, List/Calendar switcher
   ========================================================================== */

/* Compound selector required: Kadence's parent theme ships
   ".tribe-events.tribe-common a.tribe-common-c-btn-border-small" (specificity
   0,3,1) as generic third-party-plugin button styling, which beats a bare
   ".tribe-events-c-top-bar__today-button" (0,1,0) and was overriding color/
   border-color with its own --global-palette vars — confirmed live via
   getComputedStyle (color/border-color were resolving to white/light-gray
   instead of #2577BD). Both classes below already exist on the element
   itself (the ancestor .tribe-common.tribe-events wrapper is also real, five
   levels up), giving (0,4,0) which outranks it without !important.
   Also confirmed live: background-color was resolving to Kadence's gold
   --global-palette9 (an un-overridden collision, see the CCGI ResourceHub
   palette9 gotcha) and border-width to 0px, making the old bare
   border-color declaration inert; text-decoration was resolving to
   underline. background-color/border (full shorthand, not just
   border-color)/text-decoration are added below to override all three at
   this same winning specificity. */
.tribe-common.tribe-events .tribe-events-c-top-bar__today-button.tribe-common-c-btn-border-small {
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	color: #2577BD;
	background-color: #ffffff;
	border: 1px solid #2577BD;
	border-radius: 6px;
	text-decoration: none;
}

/* Fix pass (2026-08-12): "Upcoming" was rendering as small (14px) uppercase
   text; Figma binds this text to its "Heading 2" type style (Poppins
   SemiBold, 28px) and shows it in title case. The uppercase transform is
   the same Kadence global-button inline style described in the pagination
   fix above — adding #primary here (this element is genuinely inside
   #primary on this template) gives an ID-based selector that beats that
   rule's pure-class (0,10,4) specificity outright. */
#primary .tribe-events-c-top-bar__datepicker-button {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 28px;
	color: #041F3D;
	text-transform: none;
}

.tribe-events-c-top-bar__datepicker-button-icon-svg {
	fill: #041F3D;
}

.tribe-events-c-view-selector__button {
	color: #041F3D;
}

/* Fix pass (2026-08-12): this is a real <button>, so absent an explicit
   background-color it inherits Kadence's global.min.css default button
   background (confirmed live: resolved to a dark navy, not the gold/amber
   this button should show as the active list-view indicator per Figma). A
   bare class selector (0,1,0) already outranks that bare "button" element
   default (0,0,1) — same reasoning already established for the Subscribe
   button fix below — so no compound is needed. */
.tribe-events-c-view-selector__button {
	background-color: #E7AF5B;
}

.tribe-events-c-view-selector__button-icon-svg,
.tribe-events-c-view-selector__button-icon-caret-svg {
	fill: #041F3D;
}

/* ==========================================================================
   Month separator headings
   ========================================================================== */

/* Fix pass (2026-08-12): this was built from an assumption about the
   desktop node's typography rather than checking the actual bound Figma
   type style, and got it wrong on both breakpoints, not just mobile —
   confirmed via get_variable_defs on both the desktop (952:3895) and
   mobile (952:6398) text nodes, which both bind to the exact same "Lato
   Bold, 14px, letter-spacing 0.28px" token. Figma's own reference render
   also confirmed the text is title case ("August 2026"), not uppercase.
   Color was already correct. No competing rule exists for any of these
   properties (confirmed via document.styleSheets enumeration) — font-size
   isn't set at all here even though it needs to be: without it, this
   inherits 20px from TEC's own .tribe-common-h6/.tribe-common-h7 heading
   utility classes already on the element. */
.tribe-events-calendar-list__month-separator-text {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #041F3D;
	text-transform: none;
	letter-spacing: 0.28px;
}

/* ==========================================================================
   Previous/Next Events pagination
   ========================================================================== */

/* Compound selector required: Kadence's parent theme ships
   "#primary .tribe-events .tribe-common-b2" (specificity 1,2,0 — an ID
   selector) targeting its own generic "body copy" text-color utility class,
   which the nav buttons also carry (tribe-common-b2). That ID rule beats a
   bare ".tribe-events-c-nav__prev"/"__next" (0,1,0) — confirmed live via
   getComputedStyle, color was resolving to black instead of #2577BD. #primary
   is Kadence's real, stable content-area wrapper ID present on this template;
   including it plus two more real ancestor/element classes gives (1,3,0),
   which outranks the competing (1,2,0) rule without !important. Same fix
   needed on :hover since the base rule already loses on specificity alone,
   independent of pseudo-class. */
/* Fix pass (2026-08-12): Figma specifies title case, not TEC's default
   uppercase. That uppercase turned out to come from a THIRD source not
   documented above — Kadence's Customizer-generated global button style
   block (<style id="kadence-global-inline-css">, selector list ending in
   ".wp-block-button__link, ...", specificity (0,10,4), no !important) which
   applies to every real <button> on the site, including these nav buttons.
   Our rule already carries the #primary ID from the fix above, which beats
   ANY pure-class selector regardless of class count (ID always outranks
   class count in the specificity tuple) — text-transform just wasn't
   declared here yet, so that property fell through to the inline rule by
   default. Adding it now wins outright. Color is also updated here per
   Figma's spec: default #041F3D (Midnight Blue), hover #1C5482 (Blue II) —
   the hover value already matched what was here; only the default color
   and text-transform were changed. */
#primary .tribe-events.tribe-events-view--list .tribe-events-c-nav__prev,
#primary .tribe-events.tribe-events-view--list .tribe-events-c-nav__next {
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	color: #041F3D;
	text-decoration: underline;
	text-transform: none;
}

#primary .tribe-events.tribe-events-view--list .tribe-events-c-nav__prev:hover,
#primary .tribe-events.tribe-events-view--list .tribe-events-c-nav__next:hover {
	color: #1C5482;
}

/* Month View's mobile bottom nav ("Aug" / "This Month" / "Oct", TEC's own
   .tribe-events-calendar-month-nav — display:none above TEC's own
   .tribe-common--breakpoint-medium, confirmed live it's the real visible
   pagination row below 768px) shares this exact same TEC markup/classes
   (.tribe-events-c-nav__prev/__next, plus .tribe-events-c-nav__today for
   the middle link) but was never scoped for Month View above, so it fell
   through to TEC's own default: font-weight 400, confirmed live via
   getComputedStyle. No Figma node exists for this Month View mobile nav
   specifically (this file only implements the desktop 952:4490 frame — see
   the Month View section below), so this reuses the same 600-weight/navy
   convention already established for the identical component on List View
   above rather than leaving TEC's plain default. Scoped with
   .tribe-events-view--month (not .tribe-events-view--list) so List View is
   untouched; :hover is left alone since Figma gives no distinct hover spec
   for this instance. */
#primary .tribe-events.tribe-events-view--month .tribe-events-c-nav__prev,
#primary .tribe-events.tribe-events-view--month .tribe-events-c-nav__next,
#primary .tribe-events.tribe-events-view--month .tribe-events-c-nav__today {
	font-weight: 600;
	color: #041F3D;
}

/* Previous/next chevrons — both are TEC's own default markup already
   (.tribe-common-c-svgicon--caret-left/--caret-right svgs with the actual
   arrow <path>), not something missing from any template, but two separate
   bugs independently hide them:

   1) Desktop's top bar (.tribe-events-c-top-bar__nav-link--prev/--next,
      the visible chevron-only prev/next flanking the "This Month" button)
      renders its icon at a real 11x19 size, but the path itself was
      confirmed live to resolve fill: rgb(240,243,245) — this project's
      --global-palette6 (#F0F3F5), an off-white background/neutral token,
      not a visible-icon color. Traced to Kadence's own
      tribe-events.min.css: "#primary .tribe-events
      .tribe-common-c-btn-icon--caret-left/--caret-right
      .tribe-common-c-btn-icon__icon-svg path{fill:var(--global-palette6)}"
      (1,4,1, no !important) — Kadence assumed that palette slot would be a
      subtle icon-gray in its own default starter palette; this site's
      rebrand repurposed it as a light neutral/background tone instead, so
      the chevron renders effectively invisible against the white toolbar.
      Same category of collision as the already-documented palette9 gotcha
      elsewhere on this site. Fix chains one more real ancestor class
      (.tribe-common, already present) plus the element's own
      --prev/--next class for (1,6,1), beating Kadence's rule outright.

   2) Mobile's bottom nav (.tribe-events-c-nav__prev-icon-svg/
      -next-icon-svg, the "Aug"/"Oct" row styled just above) has its icon
      hidden outright — TEC's own views-skeleton.css ships
      ".tribe-events .tribe-events-c-nav__next-icon-svg,.tribe-events
      .tribe-events-c-nav__prev-icon-svg{display:none}" unconditionally, a
      deliberate TEC default for this specific mobile-nav variant (text-only
      by design), not scoped to any breakpoint. Un-hidden here since the
      selector the request named matches this exact mobile nav; #primary
      (1,1,0) beats TEC's bare 2-class rule (0,2,0). No explicit size/fill
      was ever set for this SVG (TEC only ever expected it hidden), so both
      are given explicitly here, matching the same navy already used for
      the nav text immediately above. */
#primary .tribe-common.tribe-events .tribe-common-c-btn-icon--caret-left.tribe-events-c-top-bar__nav-link--prev .tribe-common-c-btn-icon__icon-svg path,
#primary .tribe-common.tribe-events .tribe-common-c-btn-icon--caret-right.tribe-events-c-top-bar__nav-link--next .tribe-common-c-btn-icon__icon-svg path {
	fill: #041F3D;
}

#primary .tribe-events-c-nav__prev-icon-svg,
#primary .tribe-events-c-nav__next-icon-svg {
	display: inline-block;
	width: 7px;
	height: 11px;
	fill: #041F3D;
	vertical-align: middle;
}

#primary .tribe-events-c-nav__prev-icon-svg {
	margin-right: 6px;
}

#primary .tribe-events-c-nav__next-icon-svg {
	margin-left: 6px;
}

/* ==========================================================================
   Event cards
   ========================================================================== */

/* Compound selector required: TEC's own common-skeleton.css ships a giant
   CSS-reset rule (a 79-selector list including ".tribe-common article")
   that zeroes out border/margin/padding on every element in that list, at
   specificity (0,1,1) — one point higher than a bare ".tribe-events-
   calendar-list__event" (0,1,0) since the card is an <article> nested
   inside a real .tribe-common ancestor. Confirmed live via getComputedStyle:
   border and padding both computed as 0 despite this rule, while
   background-color/border-radius/box-shadow (not touched by the reset)
   applied fine. Adding the real .tribe-common ancestor class gives (0,2,0),
   which outranks it without !important. */
/* Fix pass (2026-08-12), mobile whitespace regression: this card also
   carries TEC's own .tribe-common-g-row--gutters class, which gives it an
   unconditional margin: 0 -21px (a CSS Grid gutter-compensation technique —
   see the date-tag comment below for the full mechanism) at the exact same
   (0,2,0) specificity as this rule. Confirmed live via getBoundingClientRect
   that this card was bleeding 21px past its own containing column on BOTH
   sides — on mobile specifically, that pushed the card's right edge 5px
   past the viewport's right edge entirely (380px on a 375px-wide screen),
   and pulled its left edge in under the date-tag column. That gutter
   compensation makes sense for a true multi-column grid row; this card is
   a single decorative bordered box, not a grid column, so it should just
   respect its containing column's own boundaries. Neutralizing the margin
   here wins the tie via source order (this file loads after
   common-skeleton.css). */
.tribe-common .tribe-events-calendar-list__event {
	background-color: #ffffff;
	border: 1px solid #AFCBFF;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(4, 31, 61, 0.08);
	padding: 20px;
	margin-left: 0;
	margin-right: 0;
}

/* Compound selector required: TEC's views-skeleton.css ships
   ".tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-
   list__event-row" (specificity 0,3,0) as an unconditional top-margin on
   EVERY row, which beats the bare adjacent-sibling selector below (0,2,0)
   — confirmed live via getComputedStyle, margin-top resolved to 48px
   instead of 16px on a genuinely-adjacent row pair. Adding the real
   .tribe-common and .tribe-events ancestor classes gives (0,4,0), which
   outranks it without !important. (.tribe-common--breakpoint-medium was
   avoided because it's a JS-computed, container-width-dependent class,
   not a stable target.) */
.tribe-common.tribe-events .tribe-events-calendar-list__event-row + .tribe-events-calendar-list__event-row {
	margin-top: 16px;
}

/* Compound selector required: TEC's views-skeleton.css ships
   ".tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-
   list__event-row > .tribe-common-g-col" (specificity 0,4,0) targeting the
   date-tag's own gutter-column class, which beats a bare ".tribe-events-
   calendar-list__event-date-tag" (0,1,0) — confirmed live via
   getComputedStyle, padding resolved to "0px 24px" instead of "8px 12px"
   (background-color/border-radius, not touched by that rule, applied
   fine). Built from real classes already on the element/ancestors
   (.tribe-common, the .tribe-events-calendar-list__event-row parent via
   direct-child combinator, .tribe-common-g-col, and .hentry — a WordPress
   post class present on every published event) for (0,5,0), which
   outranks it without !important. */
/* Fix pass (2026-08-12): Figma has no filled box for the date tag at all —
   just a bare bold numeral. Stripping the box treatment added above; the
   compound selector is kept since it's still this same element/still needs
   to beat the same TEC padding rule described above.
   Second fix pass (mobile regression, same day, later superseded): the card
   sitting in this same row bleeds via TEC's own .tribe-common-g-row--gutters
   -21px margin (see the card's own rule above for the full mechanism),
   which used to visibly cut through the enlarged/unboxed "31"/"1" glyph. A
   same-day fix added padding-right: 24px here to give the glyph clearance
   from that bleed. Superseded by fixing the bleed at its actual source
   (neutralizing the card's own margin-left/right, see above) — restoring
   plain 0 padding here again, now that there's no bleed left to clear.
   Keeping padding-right here as a workaround instead would have cramped
   the glyph into a much narrower box than Figma's mobile mock shows,
   which is what led to catching this in the first place. */
.tribe-common .tribe-events-calendar-list__event-row > .tribe-events-calendar-list__event-date-tag.tribe-common-g-col.hentry {
	background-color: transparent;
	border-radius: 0;
	padding: 0;
}

/* Compound selector required: Kadence's own tribe-events.min.css (a
   per-plugin compatibility stylesheet shipped in the parent theme's assets
   folder, not authored by The Events Calendar plugin itself) ships
   "#primary .tribe-events .tribe-events-calendar-list__event-date-tag-
   weekday" (specificity 1,2,0 — an ID selector) setting color to
   var(--global-palette5), which beats a bare ".tribe-events-calendar-
   list__event-date-tag-weekday" (0,1,0) — confirmed live via
   getComputedStyle, color resolved to white (this site's --global-
   palette5 value) instead of #AFCBFF. #primary is a real, stable ancestor
   on this template; adding it plus the .tribe-events-view--list ancestor
   class gives (1,3,0), which outranks the competing (1,2,0) without
   !important. */
/* Fix pass (2026-08-12): Figma's mock doesn't show the weekday label at all.
   Safe to hide outright — this whole <time> is already aria-hidden="true"
   in TEC's markup (the accessible date lives in the datetime-wrapper's own
   <time> element elsewhere in the card), so removing it from the visual
   flow doesn't remove anything from assistive tech either. */
#primary .tribe-events.tribe-events-view--list .tribe-events-calendar-list__event-date-tag-weekday {
	display: none;
}

/* Compound selector required: Kadence's own tribe-events.min.css (a
   per-plugin compatibility stylesheet shipped in the parent theme's assets
   folder, not authored by The Events Calendar plugin itself) ships
   "#primary .tribe-events .tribe-common-h5" (specificity 1,2,0), a generic
   heading-utility-class rule that also matches this element (it carries
   .tribe-common-h5), setting color to var(--global-palette3) — this site's
   --global-palette3 happens to equal the date-tag's own navy background,
   so the day number was rendering invisible (navy text on navy). Confirmed
   both via getComputedStyle (color resolved to #041F3D, matching the
   badge's own background-color) and visually via screenshot zoom — "31"
   did not appear in the badge, only "MON". Same fix as the weekday rule
   above: #primary + .tribe-events-view--list gives (1,3,0), outranking the
   competing (1,2,0) without !important. */
/* Fix pass (2026-08-12): with the navy box removed above, white text would
   now be invisible against the page's white background — Figma's own
   bound color for this numeral is #000000 (not the site's navy), and its
   size in the mock is a large display numeral, not body-text size. */
#primary .tribe-events.tribe-events-view--list .tribe-events-calendar-list__event-date-tag-daynum {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 28px;
	color: #000000;
}

/* Fix pass (2026-08-12): the wrapper's own text (the plain date/time string)
   was rendering at body-text size/color instead of Figma's smaller muted
   caption style — confirmed live via document.styleSheets enumeration that
   Kadence's own tribe-events.min.css sets it via the generic
   "#primary .tribe-events .tribe-common-b2" rule (1,2,0). Same #primary +
   .tribe-events-view--list pattern used throughout this file for (1,3,0).
   This element also carries TEC's own recurring-event series link
   (.tribe-events-calendar-series-archive__link, only present on recurring
   events) as a child — that link already has its own explicit color rule
   elsewhere in the cascade (resolves to #2577BD live), so it is NOT
   affected by the color set here: an inherited value never overrides an
   element's own explicit rule, regardless of specificity. Confirmed live
   post-fix that the link stayed #2577BD. */
#primary .tribe-events.tribe-events-view--list .tribe-events-calendar-list__event-datetime-wrapper {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #757575;
}

/* No competing rule found: neither font-size nor font-weight is declared
   anywhere for this class combination in the enqueued skeleton-mode
   stylesheets (confirmed via document.styleSheets enumeration) — TEC's
   "--bold" utility class only gets its font-weight from common-full.css,
   which this site doesn't load (Settings → Display is "Skeleton Styles"),
   so the badge was rendering at the browser's inherited regular weight.
   Nothing to out-specificity, but scoped to .tribe-events-view--list anyway
   (rather than left fully bare) since this same badge markup is reused in
   Month view's day tooltips — this file's whole point is not touching
   Month view's default styling. Color is already correct (Figma's bound
   color for this text is also #000000). */
.tribe-events-view--list .tribe-common-b2--bold.tribe-events-virtual-virtual-event {
	font-weight: 700;
	font-size: 14px;
}

/* Compound selector required: Kadence's own tribe-events.min.css (a
   per-plugin compatibility stylesheet shipped in the parent theme's assets
   folder, not authored by The Events Calendar plugin itself) ships
   "#primary .tribe-events .tribe-events-calendar-list__event-title-link"
   (specificity 1,2,0) setting color to var(--global-palette3). On this
   site --global-palette3 currently resolves to the same #041F3D we want,
   so the rest-state color coincidentally matched under getComputedStyle —
   but the hover rule below revealed the conflict is real: TEC's generic
   ".tribe-common a:hover" (0,2,1) also beats our bare ":hover" selector
   (0,2,0) and forces hover color back to var(--global-palette3) (navy)
   instead of the intended #2577BD. Fixing both rest and hover with the
   same #primary + .tribe-events-view--list pattern used elsewhere in this
   file gives (1,3,0)/(1,3,1), clearly outranking (1,2,0)/(0,2,1) without
   !important and without relying on the coincidental palette match. */
#primary .tribe-events.tribe-events-view--list .tribe-events-calendar-list__event-title-link {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: #041F3D;
	text-decoration: none;
}

#primary .tribe-events.tribe-events-view--list .tribe-events-calendar-list__event-title-link:hover {
	color: #2577BD;
}

/* Compound selector required: the venue block (list/event/venue.php) only
   renders when an event has a venue attached, and every event currently
   on this site is a virtual/no-venue test event, so this could not be
   confirmed live via getComputedStyle (no matching element exists in the
   DOM to test). Static analysis of the same stylesheets found the same
   conflict pattern as the excerpt below: the venue <address> carries
   TEC's own "tribe-common-b2" utility class, and "#primary .tribe-events
   .tribe-common-b2" (specificity 1,2,0) in Kadence's own tribe-events.min.css
   (a per-plugin compatibility stylesheet shipped in the parent theme's
   assets folder, not authored by The Events Calendar plugin itself) sets
   color to var(--global-palette4), which would beat a bare
   ".tribe-events-calendar-list__event-venue" (0,1,0). Applying the same
   #primary + .tribe-events-view--list fix preemptively for (1,3,0). */
#primary .tribe-events.tribe-events-view--list .tribe-events-calendar-list__event-venue {
	font-family: 'Lato', sans-serif;
	color: #4C4E4F;
}

/* No competing rule found for this class in any enqueued stylesheet
   (checked via static selector search, since no venue markup exists live
   to test with getComputedStyle) — left as a bare selector. */
.tribe-events-calendar-list__event-venue-title {
	color: #1C5482;
}

/* Compound selector required: Kadence's own tribe-events.min.css (a
   per-plugin compatibility stylesheet shipped in the parent theme's assets
   folder, not authored by The Events Calendar plugin itself) ships
   "#primary .tribe-events .tribe-common-b2" (specificity 1,2,0) — the
   excerpt <div> carries TEC's own "tribe-common-b2" utility class, and
   this generic rule sets color to var(--global-palette4), beating a bare
   ".tribe-events-calendar-list__event-description" (0,1,0). Confirmed
   live via getComputedStyle, color resolved to black instead of #757575.
   Same #primary + .tribe-events-view--list fix as elsewhere in this file
   for (1,3,0). Separately confirmed live: despite carrying TEC's
   "tribe-common-a11y-hidden" class, the excerpt IS visually rendered at
   desktop width (1280px) — getBoundingClientRect showed a real width/
   height and visible text, so that class is not simple display:none here
   (breakpoint-controlled, per TEC's own CSS) and the color fix is not
   moot. */
#primary .tribe-events.tribe-events-view--list .tribe-events-calendar-list__event-description {
	font-family: 'Lato', sans-serif;
	color: #757575;
}

/* ==========================================================================
   Subscribe to Calendar (sidebar)
   ========================================================================== */

/* Compound selector required: two real conflicts found live via
   getComputedStyle on this div (class "tribe-common-c-btn-border
   tribe-events-c-subscribe-dropdown__button"):
   (1) common-skeleton.css ships ".tribe-common .tribe-common-c-btn-border"
   (specificity 0,2,0) setting padding: 11px 20px — this TIES a bare
   ".tribe-events-c-subscribe-dropdown__button" (0,1,0) would lose
   outright, and only "wins" here by loading later in the cascade, which
   is fragile.
   (2) common-skeleton.css also ships a global ".tribe-common div"
   border-reset (0,1,1) that outright beats the same bare selector —
   confirmed live, border resolved to "0px none" instead of our
   1px solid before this fix. Using the real ancestor classes present
   on this element (.tribe-common wrapper + .tribe-events-c-subscribe-dropdown
   parent) for (0,3,0) fixes both deterministically, no !important. */
.tribe-common .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	background-color: #ffffff;
	border: 1px solid #2577BD;
	border-radius: 8px;
	padding: 12px 16px;
}

/* Deviation from the brief: the visible pill background is not painted
   by the outer div above — it's painted by this inner <button> element,
   which (being a real <button> tag) inherits Kadence parent theme's
   global.min.css rule "button, .button, .wp-block-button__link, ... {
   background: var(--global-palette-btn-bg); }" (specificity 0,0,1).
   Confirmed live: before this fix, getComputedStyle on this exact
   element returned background-color rgb(28, 84, 130) (dark navy), which
   is what was visually painting the whole control navy regardless of
   the outer div's white background-color — the outer div's white was
   only ever visible in the thin padding strip around this inner
   button. A bare class here (0,1,0) already outranks Kadence's bare
   "button" element rule (0,0,1), so no compound is needed for this —
   just the background-color declaration the brief's snippet omitted,
   added here to let the outer div's white/blue-border pill actually
   show through. This fix's correctness assumes TEC's Settings → Display
   style setting is "Skeleton Styles" (confirmed currently the case on
   this site — only common-skeleton.css is enqueued, not common-full.css,
   which carries its own .tribe-common-c-btn--clear background reset that
   would otherwise make this fix unnecessary); re-verify if that TEC
   display-style setting is ever changed. */
/* Fix pass (2026-08-12): "SUBSCRIBE TO CALENDAR" was rendering uppercase;
   Figma shows title case. Same Kadence global-button inline style culprit
   documented in the pagination/Upcoming fixes above — adding #primary
   (a real ancestor here too) gives this rule an ID, which beats that
   rule's pure-class (0,10,4) specificity outright. */
#primary .tribe-events-c-subscribe-dropdown__button-text {
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	color: #2577BD;
	background-color: transparent;
	text-transform: none;
}

.tribe-events-c-subscribe-dropdown__button-icon {
	fill: #2577BD;
}

/* Compound selector required: the same ".tribe-common div" (0,1,1)
   border-reset noted above also matches this div, beating a bare
   ".tribe-events-c-subscribe-dropdown__content" (0,1,0) — confirmed
   live, border resolved to "0px none" pre-fix. The real parent class
   ".tribe-events-c-subscribe-dropdown" gives (0,2,0), winning
   outright. */
.tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__content {
	border: 1px solid #AFCBFF;
	border-radius: 8px;
}

/* Compound selector required: Kadence's own tribe-events.min.css (a
   per-plugin compatibility stylesheet shipped in the parent theme's assets
   folder, not authored by The Events Calendar plugin itself; it loads AFTER
   this stylesheet in the enqueue order) ships ".tribe-common a"
   (0,1,1), setting color: var(--global-palette3) on every link inside
   .tribe-common — this beats a bare
   ".tribe-events-c-subscribe-dropdown__list-item-link" (0,1,0) both on
   specificity and on source order. The real parent class
   ".tribe-events-c-subscribe-dropdown__content" gives (0,2,0), winning
   outright. */
.tribe-events-c-subscribe-dropdown__content .tribe-events-c-subscribe-dropdown__list-item-link {
	font-family: 'Lato', sans-serif;
	color: #041F3D;
}

/* ==========================================================================
   Callout box (sidebar) — content comes from TEC's native "After Events
   HTML" setting (Events → Settings → Display), not from this stylesheet.
   Values below checked against Figma's actual bound tokens on both the
   desktop node (952:4337) and mobile node (532:3659), not assumed to be
   the same — they aren't: padding and every font-size step down on
   mobile. Fill is a 20%-tint of the gold with a solid gold border (not
   the solid opaque gold this box originally shipped with), and list/body
   text is Graphite (#4C4E4F) — navy is reserved for headings only.
   ========================================================================== */

/* Compound selector required: common-skeleton.css ships a global
   ".tribe-common div" reset (0,1,1) setting padding, margin-top, AND
   border all to 0 — confirmed live via getComputedStyle pre-fix
   (padding resolved to "0px", margin-top to "0px"). A bare
   ".tribe-events-after-html" (0,1,0) loses outright. The real ancestor
   class ".tribe-common-l-container" (on the wrapping <section>) gives
   (0,2,0), winning outright. */
.tribe-common-l-container .tribe-events-after-html {
	background-color: rgba(253, 185, 42, 0.2);
	border: 1px solid #FDB92A;
	border-radius: 12px;
	padding: 24px;
	margin-top: 24px;
}

.tribe-common-l-container .tribe-events-after-html h3 {
	font-family: 'Poppins', sans-serif;
	/* Figma specs this face as "Bold" (700), but Kadence's Google Fonts
	   loader only ever fetches Poppins 600 on this site (confirmed via
	   document.fonts) — 600 is the actual bold face rendered here, not a
	   deviation. Requesting 700 would silently fall back rather than
	   pull in a variant this site doesn't load. */
	font-weight: 600;
	font-size: 16px;
	color: #041F3D;
	margin: 0 0 16px;
}

/* Lightbulb glyph above the box's heading (Figma 952:6558, exported at its
   native 32x32 with stroke="#FDB92A" — same gold as this box's own border,
   confirmed via get_design_context, not redrawn/approximated). The "After
   Events HTML" field is freeform admin content with no <img> of its own, so
   the icon is added as a ::before on the first heading rather than markup;
   :first-child keeps it to one icon even if an event's content has more
   than one <h3>. Baked-in fill color (not currentColor + mask, unlike the
   single-event nav chevron elsewhere in this codebase) because this icon
   never changes color — no hover/active state to track. margin-bottom: 16px
   reproduces Figma's exact 16px gap between the icon (y 0–32) and the
   heading text (y 48) below it. */
.tribe-common-l-container .tribe-events-after-html h3:first-child::before {
	content: '';
	display: block;
	width: 32px;
	height: 32px;
	margin-bottom: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M20 18.6669C20.2667 17.3334 20.9333 16.4 22 15.3333C23.3333 14.1332 24 12.3997 24 10.6662C24 8.54434 23.1571 6.50934 21.6569 5.00893C20.1566 3.50852 18.1217 2.6656 16 2.6656C13.8783 2.6656 11.8434 3.50852 10.3431 5.00893C8.84285 6.50934 8 8.54434 8 10.6662C8 11.9997 8.26667 13.5998 10 15.3333C10.9333 16.2667 11.7333 17.3334 12 18.6669M12 24.0006H20M13.3333 29.3344H18.6667' stroke='%23FDB92A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* The "After Events HTML" content is freeform admin-entered copy, so it
   doesn't map 1:1 onto the Figma mock's icon+heading layout — but every
   <p> in the real content is a short label immediately followed by a
   <ul> (e.g. "The ideal audience for these workshops:"), which matches
   Figma's small uppercase "eyebrow" label style (952:4344 / 532:3666)
   rather than the plain Lato body-text style this rule originally used. */
.tribe-common-l-container .tribe-events-after-html p {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	color: #041F3D;
	margin: 0 0 16px;
}

/* Figma (952:4343 / 532:3665) separates each label+list section after the
   first with a divider: a 1px #eaeaea top border plus 24px of padding
   above the label text — identical value at both breakpoints. Targeting
   "a label that follows a previous list" via the adjacent-sibling
   combinator reproduces that without assuming a fixed number of
   sections, so it still holds if an editor adds/removes a list from the
   After Events HTML field later. */
.tribe-common-l-container .tribe-events-after-html ul + p {
	border-top: 1px solid #eaeaea;
	padding-top: 24px;
}

/* common-skeleton.css ships ".tribe-common ul { list-style: none }" —
   specificity (0,1,1) — which ties in specificity with a bare
   ".tribe-events-after-html ul" (0,1,0) would actually lose against, and
   only "won" here by relying on source order, which is fragile. This rule
   never declared list-style itself, so both callout bullet lists rendered
   with no glyph. Raising specificity to (0,2,0) via the real
   .tribe-common-l-container ancestor AND declaring list-style explicitly
   fixes both the fragility and the missing bullets. */
.tribe-common-l-container .tribe-events-after-html ul {
	padding-left: 20px;
	list-style: disc;
	margin-bottom: 24px;
}

.tribe-common-l-container .tribe-events-after-html li {
	font-family: 'Lato', sans-serif;
	color: #4C4E4F;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 8px;
}

/* Desktop-only bump, checked directly against the desktop Figma node
   (952:4337) rather than assumed — padding and every font-size step up
   one notch from the mobile values above. */
@media (min-width: 768px) {
	.tribe-common-l-container .tribe-events-after-html {
		padding: 40px;
	}

	.tribe-common-l-container .tribe-events-after-html h3 {
		font-size: 18px;
	}

	.tribe-common-l-container .tribe-events-after-html p {
		font-size: 14px;
	}

	.tribe-common-l-container .tribe-events-after-html li {
		font-size: 15px;
	}
}

/* ==========================================================================
   Month View — Figma node 952:4490 ("Main - masthead", desktop, 1440px)
   ==========================================================================
   Restyles The Events Calendar Pro's native Month View at /events/month/.
   Zero template overrides — every selector below targets TEC's existing
   markup (the-events-calendar/src/views/v2/month/*.php and TEC Pro's
   events-virtual-skeleton.css for the virtual-event icon). No Figma node
   exists for a Month View mobile grid layout at the time of this pass —
   only desktop (952:4490) was implemented; mobile is out of scope here. */

/* ==========================================================================
   Top bar — Today button and view-selector icon (Month-view-specific
   overrides; List View keeps its own values from the section above)
   ==========================================================================
   Month View's Figma header (952:4490 → 952:4491 → 952:4492) specifies
   DIFFERENT values than List View's Figma reference for these same two
   shared-markup controls — confirmed via get_design_context on 952:4492
   directly, not assumed from the List View pass. Per this project's own
   scoping rule, Month View's Figma reference wins on this page. Both
   controls live in the same shared .tribe-events-c-top-bar markup as List
   View, so every rule here is scoped with the real .tribe-events-view--month
   ancestor class (present on the same wrapper as .tribe-common.tribe-events)
   to avoid bleeding into List View. */

/* Today button: List View's Figma shows an outlined pill (see the base rule
   above); Month View's Figma shows a solid navy pill instead — bg #041F3D,
   white text, no border, 13px Bold. Adding .tribe-events-view--month to the
   existing selector's own ancestor classes gives (0,5,0), beating the base
   rule's (0,4,0) without !important — same compound-selector pattern used
   throughout this file. Font-family/font-weight-as-inherited/border-radius/
   text-decoration are left alone since the base rule already sets them
   correctly for both pages (radius 6px, no underline); only the properties
   that actually differ for this page are overridden here. */
.tribe-common.tribe-events.tribe-events-view--month .tribe-events-c-top-bar__today-button.tribe-common-c-btn-border-small {
	background-color: #041F3D;
	border-color: #041F3D;
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
	padding: 8px 16px;
}

/* View-selector icon button: List View's Figma shows this as a small
   icon+caret dropdown pill (see the base rule above, bg #E7AF5B); Month
   View's Figma shows the same control redesigned as a bigger solid 48x48
   gold square (#FDB92A) holding just the calendar-grid icon — no visible
   caret. The caret SVG and "Month" label text stay in the DOM (the label
   was already visually hidden site-wide via TEC's own
   tribe-common-a11y-visual-hide class) so the control's accessible name and
   dropdown behavior are unaffected; only the caret is hidden here, purely
   visual, same reasoning as the weekday-label hide in the List View section
   above. .tribe-events-view--month .tribe-events-c-view-selector__button
   (0,2,0) beats the base rule's bare (0,1,0) without !important. Icon fill
   color (#041F3D navy) is already correct via the existing bare rule below
   this file's List View section — not repeated here. */
.tribe-events-view--month .tribe-events-c-view-selector__button {
	background-color: #FDB92A;
	width: 48px;
	height: 48px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}

.tribe-events-view--month .tribe-events-c-view-selector__button-icon-caret-svg {
	display: none;
}

.tribe-events-view--month .tribe-events-c-view-selector__button-icon-svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Day-of-week header row (M T W T F S)
   ==========================================================================
   Confirmed via get_design_context on 952:4752 (Header → Row): Lato Bold,
   12px, uppercase. Color is already correct live (#000000, set by Kadence's
   own tribe-events.min.css via the --tec-color-text-day-of-week-month
   variable) and padding-bottom is already correct (16px, TEC's own
   var(--tec-spacer-3)) — neither is touched here. Font-size/weight/transform
   were NOT set by any enqueued stylesheet (confirmed via document.styleSheets
   enumeration); the live 16px was inherited from this element's own
   tribe-common-b3 utility class. A compound selector using the real
   th.tribe-events-calendar-month__header-column ancestor (0,2,1) is used
   instead of a bare class (which would tie with tribe-common-b3's own
   (0,1,0) and rely on fragile source order). */
th.tribe-events-calendar-month__header-column .tribe-events-calendar-month__header-column-title {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
}

/* ==========================================================================
   Grid lines and cell backgrounds
   ==========================================================================
   Confirmed live via document.styleSheets that TEC's own views-skeleton.css
   and Kadence's tribe-events.min.css both derive the day-cell border, the
   week row's border-left, AND the tbody's border-top from the SAME custom
   property, --tec-color-border-secondary-month-grid (currently unset,
   falling back to --tec-color-border-default, #CBD5E0). Redefining just the
   custom property here — scoped to the real .tribe-events-view--month
   class, same technique already used for --global-content-edge-padding in
   the mobile section above — fixes all three border rules at once with no
   specificity fight needed, and without touching the --tec-color-border-
   default token other components may rely on elsewhere. */
.tribe-events-view--month {
	--tec-color-border-secondary-month-grid: #e4e4e4;
}

/* Trailing next-month days (e.g. Oct 1 at the end of the September grid) get
   a light gray tint per Figma (952:4988) — confirmed via get_design_context
   on that node directly: bg rgba(228,228,228,0.3). No competing rule sets
   background-color for this class (confirmed via document.styleSheets), so
   a bare selector is safe. Leading previous-month days (e.g. Aug 31) are
   NOT styled to match: Figma's own screenshot of 952:4775 shows them with
   the same gray tint, but TEC's real markup gives leading days from the
   previous month no distinguishing class at all (confirmed live: zero
   elements match .tribe-events-calendar-month__day--previous-month) — the
   number of leading days changes every month with no stable selector to
   hook, so matching Figma there would need a template-level change. Per
   direction, left as TEC's default (white) rather than adding one. */
.tribe-events-calendar-month__day--next-month {
	background-color: rgba(228, 228, 228, 0.3);
}

/* ==========================================================================
   Day number ("31", "1", etc.)
   ==========================================================================
   Confirmed via get_design_context on the actual Figma text node (952:4779):
   Lato Bold, 24px, line-height 34px, color #000000. Color is already correct
   live (the visible glyph is the child <a class="...day-date-link">, not the
   wrapping <time> — confirmed via getComputedStyle on the link itself, which
   resolves to #000000 via Kadence's own --tec-color-day-marker-month
   variable) so it's not repeated here. Font-size/line-height were being set
   to 20px/24px by this element's own tribe-common-h6 utility class; the
   compound selector below (0,2,0) beats that bare class (0,1,0) without
   !important.

   Fix pass (2026-08-12): reported too-heavy on mobile — confirmed live the
   day-number on empty ("0 events") mobile day cells rendered at font-weight
   900, while days with at least one event rendered at 700, despite both
   using the exact same wrapper classes ("...day-date tribe-common-h6
   tribe-common-h--alt"). Root cause: TEC only wraps the day-date in an <h3>
   when the day has events; empty days get the identical classes on a plain
   <div> instead (confirmed live via outerHTML) — Kadence/TEC's own CSS
   apparently keys weight off the h3 element specifically, so the div
   variant falls through to a heavier default. font-weight was never set by
   this rule at all (only size/line-height), so it's added explicitly here
   to make it consistent regardless of which wrapper tag TEC renders. */
.tribe-events-calendar-month__day-date .tribe-events-calendar-month__day-date-daynum {
	font-size: 24px;
	line-height: 34px;
	font-weight: 700;
}

/* Fix pass (2026-08-12): reported still too heavy on mobile even after the
   700 fix above. Root cause: that fix was based on the DESKTOP day-number
   node (952:4779, Lato Bold 24px) and applied it universally to both
   breakpoints. Mobile has its own separate Figma node (953:6876,
   "Button - September 18, 0 events, upcoming day") specifying Lato REGULAR
   (400) at 16px/24px line-height, not desktop's Bold 24px/34px — confirmed
   via get_design_context. Scoped to the real .day-cell--mobile ancestor
   class (already established elsewhere in this file for the mobile-only
   button-background fix above) rather than a max-width media query, since
   that's the actual markup TEC swaps to, matching its own JS breakpoint
   exactly. Same (0,2,0) specificity as the rule above — this one wins by
   source order alone since it's declared later. */
.tribe-events-calendar-month__day-cell--mobile .tribe-events-calendar-month__day-date-daynum {
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
}

/* ==========================================================================
   Events — multiday pill (recurring/virtual webinars) and single-day events
   ==========================================================================
   TEC renders two structurally different event types in Month View,
   confirmed live on the Sept 14 test cell: recurring/multiday events render
   as article.tribe-events-calendar-month__multiday-event (a rounded pill),
   single-day events render as the sibling
   article.tribe-events-calendar-month__calendar-event (a plain time+title
   block, no pill, no icon). Figma's own examples (952:4776, 952:4988,
   952:4885) only ever show the multiday pill — every test event on this
   page happens to be a recurring virtual webinar — so the single-day
   treatment below is an intentional extension of the confirmed pill spec
   to the sibling class, not a value pulled directly from a Figma node. */

/* Multiday pill: background rgba(175,203,255,0.3) and the icon's 4px gap
   (via TEC's own --tec-spacer-0) were already correct live (the latter from
   Kadence/TEC's own CSS, confirmed via document.styleSheets) — not repeated
   here. Missing live: the 9.5px rounded corners (confirmed via
   getComputedStyle: border-radius resolved to 0px) and the pill's own text
   size, which was rendering at 16px (from this element's tribe-common-h8
   utility class) instead of Figma's 12px. Background is set via the same
   --tec-color-background-primary-multiday custom property Kadence's own
   tribe-events.min.css already reads (confirmed via document.styleSheets),
   scoped to .tribe-events-view--month rather than overriding the shared
   --global-palette7 token other components on this site also use. */
.tribe-events-view--month {
	--tec-color-background-primary-multiday: rgba(175, 203, 255, 0.3);
}

.tribe-events-calendar-month__multiday-event-bar {
	border-radius: 9.5px;
}

.tribe-events-calendar-month__multiday-event-bar-inner .tribe-events-calendar-month__multiday-event-bar-title {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: #041F3D;
}

/* Single-day events: per direction, given the same rounded-pill treatment
   as the multiday event above (background/radius/font) rather than left as
   TEC's plain default, so every event in the grid reads consistently. No
   icon is added — TEC only renders the virtual-event icon markup on events
   actually marked virtual, and this class covers non-virtual single-day
   events, so there is nothing to align an icon with here.
   Compound selector required: common-skeleton.css ships the same giant
   ".tribe-common div" reset documented in the Subscribe to Calendar section
   below (specificity 0,1,1), which beat a bare
   ".tribe-events-calendar-month__calendar-event-details" (0,1,0) —
   confirmed live via getComputedStyle, padding resolved to 0px despite this
   rule. The real .tribe-common ancestor class gives (0,2,0), winning
   outright, same fix pattern already used for the Subscribe dropdown
   content div. */
.tribe-common .tribe-events-calendar-month__calendar-event-details {
	display: flex;
	align-items: center;
	gap: 4px;
	background-color: rgba(175, 203, 255, 0.3);
	border-radius: 9.5px;
	padding: 1px 16px;
	overflow: hidden;
}

.tribe-events-calendar-month__calendar-event-details .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event-details .tribe-events-calendar-month__calendar-event-title {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: #041F3D;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tribe-events-calendar-month__calendar-event-title-link {
	color: #041F3D;
	text-decoration: none;
}

/* ==========================================================================
   Mobile day-cell button — background color fix
   ==========================================================================
   Below TEC's own .tribe-common--breakpoint-medium breakpoint, TEC swaps to
   a completely different markup: a real <button class="...day-cell--mobile">
   fills the whole cell (views-skeleton.css gives it no background-color of
   its own — confirmed via document.styleSheets, only layout/position rules
   exist for this class). Being a real <button>, it falls back to Kadence's
   parent theme global.min.css rule "button, .button, ... { background:
   var(--global-palette-btn-bg); color: var(--global-palette-btn); padding:
   0.4em 1em; border-radius: 3px; }" — the same collision documented for the
   Subscribe-to-Calendar and view-selector buttons elsewhere in this file.
   Confirmed live via getComputedStyle: background-color resolved to
   rgb(28,84,130) (--global-palette-btn-bg, this site's Blue II) and color to
   white, painting every day cell solid navy edge-to-edge on mobile. A bare
   class selector (0,1,0) already outranks Kadence's bare "button" element
   selector (0,0,1), same reasoning as those other fixes.
   Color is reset to the same navy (#041F3D) the day-number glyph already
   uses (via --tec-color-day-marker-month), rather than left as inherited
   white, because the event-day indicator dot
   (.tribe-events-calendar-month__mobile-events-icon--event) paints itself
   via background-color: currentColor — confirmed live it was only visible
   before this fix because it inherited the button's white text color against
   the navy background; on a transparent/white cell it needs to inherit navy
   instead to stay visible. Padding/border-radius are also zeroed since
   TEC's own layout for this button is absolutely positioned/flex, not a
   visual pill, and Kadence's global padding was never designed for this
   element. */
.tribe-events-calendar-month__day-cell--mobile {
	background-color: transparent;
	color: #041F3D;
	padding: 0;
	border-radius: 0;
}

/* ==========================================================================
   Event hover popup — Figma node 952:5070
   ==========================================================================
   Month View's event tooltips are rendered by the third-party Tooltipster
   library, not TEC's own template markup: .tooltipster-base (carrying TEC's
   own "tribe-events-tooltip-theme" theme class) wraps .tooltipster-box,
   which wraps .tooltipster-content, which finally wraps TEC's real content
   div, .tribe-events-calendar-month__calendar-event-tooltip. The visible box
   chrome (background/border/radius) is painted by .tooltipster-box itself —
   confirmed live via getComputedStyle pre-fix: background rgb(86,86,86),
   border 2px solid black, radius 4px, all from TEC's own theme, not
   anything in this file. Figma specifies a white card instead: 1px solid
   #AFCBFF border, 8px radius, 20px padding, soft navy drop-shadow. The
   arrow/tip (.tooltipster-arrow) is already display:none via TEC's own
   theme — confirmed live, nothing to adjust there.
   Every selector below is prefixed with the tooltip's own real, already-
   present classes (.tooltipster-base.tribe-events-tooltip-theme.tribe-common
   .tribe-events) rather than just ".tooltipster-box"/".tooltipster-content"
   bare: this stylesheet enqueues BEFORE views-skeleton.css and Kadence's
   tribe-events.min.css (see this file's top note), so on any tied
   specificity the later-loading vendor rule would otherwise win by source
   order alone (confirmed via document.styleSheets: views-skeleton.css sets
   ".tooltipster-base.tribe-events-tooltip-theme .tooltipster-box .tooltipster-content
   { padding: 0 }" at (0,4,0), and tribe-events.min.css sets a (0,4,0)/(0,4,1)
   color on the datetime wrapper and every link inside). Chaining all four
   real classes already on .tooltipster-base gives every rule below a
   comfortable specificity margin over those, without !important. */
/* Fix pass (2026-08-12): reported "cramped" on desktop — confirmed live the
   open tooltip's box was only 248px wide (479px tall) against Figma's 353px
   (285px). Root cause: TEC's own views-skeleton.css hardcodes
   ".tooltipster-base.tribe-events-tooltip-theme{max-width:254px}" — a fixed
   ceiling Tooltipster's JS then sizes its inline width against, unrelated to
   this file's own box/content rules below (which target the descendant
   .tooltipster-box, never the width-constraining .tooltipster-base itself).
   Confirmed live via a throwaway override that only max-width (not width)
   is the constraining property, and that raising it lets Tooltipster's own
   JS naturally recalculate a wider inline width to match — no !important
   or fighting the JS needed. This file's existing 4-class chain on
   .tooltipster-base (0,4,0) already beats TEC's bare 2-class rule (0,2,0)
   on specificity alone. */
.tooltipster-base.tribe-events-tooltip-theme.tribe-common.tribe-events {
	max-width: 353px;
}

.tooltipster-base.tribe-events-tooltip-theme.tribe-common.tribe-events .tooltipster-box {
	background-color: #ffffff;
	border: 1px solid #AFCBFF;
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(4, 31, 61, 0.06);
}

.tooltipster-base.tribe-events-tooltip-theme.tribe-common.tribe-events .tooltipster-box .tooltipster-content {
	padding: 20px;
}

/* TEC's tooltip content isn't always the same shape: some events carry a
   featured image (.tribe-events-calendar-month__calendar-event-tooltip-
   featured-image-wrapper), some carry the virtual-event badge, some carry
   neither — Figma's own reference (952:5070) happens to show the
   virtual-event variant with no image. No Figma guidance exists for the
   image case, so it's given a plain, low-risk treatment (cropped/rounded,
   sized to the card) rather than an invented pixel-exact spec. */
.tribe-events-calendar-month__calendar-event-tooltip-featured-image-wrapper {
	order: 0;
	margin-bottom: 16px;
}

.tribe-events-calendar-month__calendar-event-tooltip-featured-image {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

/* Figma stacks these sections datetime -> title -> virtual-event badge ->
   description (952:5075, 952:5079, 952:5087, 952:5090), but TEC's real
   markup nests the virtual-event badge INSIDE the same wrapper div as the
   date/time text, both ahead of the title div entirely (confirmed live via
   outerHTML on an actual virtual/recurring event's open tooltip). Reordering
   across that parent/child boundary needs the same display:contents
   flattening technique already used for the Kadence rowlayout column
   reorder elsewhere in this project: making the wrapper `display: contents`
   promotes its children (the virtual-event badge, the <time>, and the
   recurring-series link) to real flex items of the tooltip container
   alongside the title/description divs, so `order` can place them relative
   to title/description. This is visual-only, same accepted tradeoff as the
   mobile List View column reorder above — screen readers still hit the
   badge text before the title in DOM/tab order. */
.tribe-events-calendar-month__calendar-event-tooltip {
	display: flex;
	flex-direction: column;
}

.tribe-events-calendar-month__calendar-event-tooltip-datetime {
	display: contents;
}

.tribe-events-calendar-month__calendar-event-tooltip-datetime > time {
	order: 1;
	color: #757575;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 14px;
}

/* Fix pass (2026-08-12): reported the date-to-title whitespace didn't match
   design — confirmed live the margin-top below was never actually applying
   (computed 0px, not 8px): common-skeleton.css ships a giant reset
   (".tribe-common div,..." — the same one already documented in the
   Single-day events and Subscribe-to-Calendar sections elsewhere in this
   file) at specificity (0,1,1), one class + one element, beating this
   rule's bare single class (0,1,0) outright regardless of load order.
   Adding the real .tribe-common ancestor class gives (0,2,0), winning on
   class-count alone. Separately, the title link below had no explicit
   line-height, so it rendered with the browser's default ~1.2 leading
   instead of Figma's tight 100%-of-font-size metrics (952:5076/952:5077,
   confirmed via get_design_context) — combined with the reset bug above,
   the gap was inconsistent and looser than intended. Both fixed together;
   verified live against a fresh Figma screenshot of 952:5070 side-by-side. */
.tribe-common .tribe-events-calendar-month__calendar-event-tooltip-title {
	order: 2;
	margin-top: 8px;
}

.tooltipster-base.tribe-events-tooltip-theme.tribe-common.tribe-events .tooltipster-box .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title-link {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	color: #041F3D;
	text-decoration: none;
}

.tooltipster-base.tribe-events-tooltip-theme.tribe-common.tribe-events .tooltipster-box .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-title-link:hover {
	color: #2577BD;
}

/* Virtual-event badge: order:3 places it after the title once the datetime
   wrapper above is flattened. Scoped to the tooltip specifically — this
   same badge markup is also reused as a direct flex child inside the
   Month-view grid's own multiday event pill
   (.tribe-events-calendar-month__multiday-event-bar-inner, itself
   display:flex) and inside List View's event cards; an unscoped `order`
   rule was confirmed live to also reorder the badge in the grid pill
   (icon+"Virtual Event" text jumped after the pill's title), which is not
   wanted there. */
.tribe-events-calendar-month__calendar-event-tooltip-datetime .tribe-events-virtual-virtual-event {
	order: 3;
	margin-top: 8px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #000000;
}

/* Figma shows "Virtual Event" as visible text next to the icon (952:5087),
   but TEC's own events-virtual-skeleton.css / views-skeleton.css ship this
   exact text span as screen-reader-only in the Month View tooltip context
   specifically — a classic clip-rect a11y-hide (border:0, clip:rect(0,0,0,0),
   height/width:1px, position:absolute, overflow:hidden) — confirmed live via
   getBoundingClientRect (1x1px) before this fix. Unhidden only inside the
   tooltip, not the grid's own day-cell pill, since Figma's day-cell examples
   also only ever show the bare icon there, matching TEC's existing
   (unmodified) icon-only default in that context. .tribe-common ancestor
   class added for (0,4,0), beating the existing (0,3,0) rule despite this
   stylesheet loading first. */
.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-tooltip .tribe-events-virtual-virtual-event__text {
	position: static;
	clip: auto;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
	white-space: nowrap;
}

/* Per direction, sit the recurring-series icon on the same line as "Virtual
   Event" rather than its own line below (no Figma node covers this
   combination — 952:5070's own reference event isn't a recurring series).
   Both this and the virtual-event badge above share order:3 in the
   flattened flex column, but each is still its own full-width flex item
   (stretched to the container's width via the flex parent's default
   align-items:stretch, confirmed live), so they land on separate rows
   despite the matching order. Pulling this one out of that stretched-block
   flow — align-self:flex-start + width:auto shrinks it to its own icon-only
   content — and repositioning it with a negative margin-top (its own
   measured row height) and a margin-left (the badge's own measured
   icon+text content width, confirmed live via getBoundingClientRect: 45px
   container inset + ~106px of icon/gap/text — safe to hardcode since
   "Virtual Event" is static, unlike the event-specific title/description)
   places it immediately after the badge text instead. archives.css's own
   ".tribe-events .tribe-events-calendar-series-archive__container{margin-
   left:2px}" (0,2,0) required the extra .tribe-common ancestor class here
   for (0,3,0) to actually win. */
.tribe-common .tribe-events-calendar-month__calendar-event-tooltip-datetime .tribe-events-calendar-series-archive__container {
	order: 3;
	align-self: flex-start;
	width: auto;
	height: 18px;
	display: inline-flex;
	align-items: center;
	margin-top: -18px;
	margin-left: 106px;
}

.tooltipster-base.tribe-events-tooltip-theme.tribe-common.tribe-events .tooltipster-box .tooltipster-content .tribe-events-calendar-series-archive__link {
	color: #041F3D;
}

/* Fix pass (2026-08-12): reported not enough whitespace between the
   "Virtual Event" line and the description on desktop — confirmed live the
   margin-top below was never actually applying (computed 0px, not 16px),
   the exact same common-skeleton.css ".tribe-common div{margin:0}" reset
   bug (0,1,1) already documented and fixed the same way on the title rule
   above. Adding the real .tribe-common ancestor gives (0,2,0), winning
   outright. Figma (952:5070) confirms 16px is the correct gap: the
   Header frame (datetime+title+badge) ends exactly at the badge's visual
   bottom edge with no internal padding, and the description container
   starts 16px below that — so this was a genuine rendering bug, not just
   a value that needed increasing. */
.tribe-common .tribe-events-calendar-month__calendar-event-tooltip-description {
	order: 4;
	margin-top: 16px;
}

.tooltipster-base.tribe-events-tooltip-theme.tribe-common.tribe-events .tooltipster-box .tooltipster-content .tribe-events-calendar-month__calendar-event-tooltip-description p {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #757575;
	margin: 0;
}

/* ==========================================================================
   Whitespace before the footer — List View, Month View, and the single-
   event template (Figma 66:3911: the "Main - masthead" section's own frame
   is exactly 60px taller than its inner content on both top and bottom, i.e.
   a 60px section padding, not a gap between two separate elements).
   ========================================================================== */

/* Confirmed live on all three Events templates that #primary's rendered
   bottom edge sits flush against the footer (0px between them) even though
   Kadence's Customizer has its own "Vertical Content Padding" toggle set to
   "show" here (body class "content-vertical-padding-show" is present) — that
   toggle isn't wired to any CSS rule that actually reaches TEC's templates,
   so on ordinary pages the equivalent whitespace only ever came from trailing
   space in the page's own content, which these dynamically-rendered TEC
   templates don't have. "tribe-events-page-template" is a real body class
   TEC/Kadence adds on all three templates (confirmed live: List, Month, and
   single-event), so one rule covers all of them without duplicating it in
   events-single.css. #primary sits inside a flex column layout
   (body.footer-on-bottom > #wrapper { display:flex; flex-direction:column })
   with the footer as its next flex sibling, so padding-bottom here inserts
   real visible space directly above the footer rather than just resizing an
   element with no visual effect. */
body.tribe-events-page-template #primary {
	padding-bottom: 60px;
}