/*
* ANIA – TEC V2 compatibility, Gap 1+2+3 patch (Round 2)
* =======================================================
*
* Loaded by lib/tec-v2-compat-gap123.php in addition to the base
* tec-v2-compat.css.
*
* ROUND 2 CHANGES vs round 1:
* - Section B (sub-header) — completely rewritten. Round 1 tried to
* style V2's split header_title + breadcrumbs inline-flex; that was
* wrong because V2 puts the CATEGORY name in header_title (not the
* month). Round 2 hides V2's three pieces and styles the SINGLE
* h1.tribe-events-page-title that our new header.php override
* emits via tribe_get_events_title().
* - Section C (day-of-week navy) — increased specificity by chaining
* `.tribe-events` to match V2's own selector weight, and added
* `!important` to background so the V2 base sheet can't win.
*
* Sections:
* A. Banner AGENDA (Gap 1) — unchanged from round 1.
* B. V1 single-line title (Gap 2, new approach)
* C. Navy day-of-week header (Gap 3) — specificity fix.
* D. Loading-spinner safety hide (defensive)
*/
/* =====================================================================
* A. AGENDA BANNER (Gap 1)
*
* V1 stylesheet already paints `.l-main .main-head .filter-nav` red
* with corner triangles (style.css lines 894–956). V2's `.tribe-common`
* wrapper adds a font-family that bleeds into the banner due to
* specificity. Lock the banner font.
* --------------------------------------------------------------------- */
.l-main .main-head .filter-nav li,
.l-main .fix-main-head .filter-nav li {
font-family: 'montserratregular', 'Source Sans Pro', sans-serif !important;
font-size: 24px !important;
line-height: 55px !important;
color: #fff !important;
background-color: #DA2028 !important;
}
/* V2 events-bar comes with its own top margin; tighten under the pink
* .main-event wrapper so spacing matches V1. */
.main-event .tribe-events-c-events-bar {
margin-top: 0;
}
/* =====================================================================
* B. V1 SINGLE-LINE TITLE (Gap 2)
*
* Our header.php override emits:
*
*
*
* The V1 stylesheet already has rules for `h2.tribe-events-page-title`
* (style.css lines 8671–8689):
* text-transform: none; font-family: 'omnesbold'; font-size: 29px;
* color: #193A84; margin-top: 21px; margin-bottom: 15px;
*
* Those rules use the H2 tag; V2 wants an H1 for a11y so we re-state
* them targeting H1 as well.
* --------------------------------------------------------------------- */
/* TRANSPARENT V2 view wrapper.
*
* V2 base CSS sets:
* .tribe-events-view { background-color: var(--tec-color-background-events) }
* which renders WHITE and covers up our `.main-event` pink background,
* leaving a white strip around the sub-header.
*
* We need to nuke the background on multiple V2 wrappers because TEC
* 6.x splits the view into nested containers each with their own
* `--tec-color-background-*` variable. `body` prefix bumps specificity
* over V2's own `.tribe-events ...` rules. */
body .main-event .tribe-events-view,
body .main-event .tribe-events.tribe-events-view,
body .main-event .tribe-common,
body .main-event .tribe-events-l-container,
body .main-event .tribe-common-l-container,
body .main-event section.tribe-common-l-container,
body .main-event .tribe-events-header,
body .main-event .ania-tec-header,
body .main-event .tribe-events-calendar-month,
body .main-event table.tribe-events-calendar-month {
background-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
/* CENTER the title row.
*
* H1 is block-level so `text-align: center` on the H1 centers its
* inline content. We add it on `.ania-tec-header` too so the H1 itself
* is centered should V2 set the header to flex/inline-block in a
* future update. !important everywhere because V2 inline-style overrides
* are aggressive. */
.ania-tec-header,
.main-event .ania-tec-header {
display: block !important;
text-align: center !important;
width: 100% !important;
}
/* Re-state the V1 h2 rule on our H1 (and keep H2 working too in case
* other archives still render h2).
*
* NOTE: `color` here is OMITTED on purpose. The header.php override
* may emit `style="color: $category_color"` inline on the H1. Setting
* `color: ...!important` here would override that inline style and
* break the V1 split-colour trick (linked part navy, " › Cat" purple).
* Default colour for non-tax pages is provided as a low-specificity
* fallback rule lower in this block. */
h1.tribe-events-page-title,
h2.tribe-events-page-title,
.ania-tec-page-title {
text-transform: none !important;
font-family: 'omnesbold', 'Source Sans Pro', sans-serif !important;
font-size: 29px !important;
line-height: 1.2 !important;
font-weight: 400 !important;
text-align: center !important;
display: block !important;
width: 100% !important;
margin-top: 21px;
margin-bottom: 15px;
padding: 0;
}
/* Low-specificity fallback colour. Inline style from header.php (when
* a category is active) outranks this. CSS class selector for non-tax
* pages outranks the bare tag rule, so navy lands when no inline. */
.ania-tec-page-title:not([style*="color"]) {
color: #193A84;
}
/* The linked first half ("Events for January 2024" as ) — ALWAYS
* navy, regardless of category inline style on the parent H1. This is
* the V1 split-colour trick: parent h1 has inline `color: $cat_color`
* (purple etc.), but `h1 a` is hard-pinned to navy by CSS specificity. */
h1.tribe-events-page-title a,
h2.tribe-events-page-title a,
.ania-tec-page-title a {
color: #193A84 !important;
text-decoration: none !important;
padding-right: 5px;
font: inherit !important;
}
h1.tribe-events-page-title a:hover,
h2.tribe-events-page-title a:hover,
.ania-tec-page-title a:hover,
h1.tribe-events-page-title a:focus,
.ania-tec-page-title a:focus {
color: #DA2028 !important;
text-decoration: none !important;
}
/* Hide V2's split title pieces — defensive. */
.ania-tec-header .tribe-events-header__title,
.ania-tec-header .tribe-events-header__breadcrumbs,
.ania-tec-header .tribe-events-header__content-title {
display: none !important;
}
/* Defensive — neutralise V2 stock title text if it somehow leaks. */
.ania-tec-header h1.tribe-events-header__title-text,
.ania-tec-header h2.tribe-events-header__title-text {
all: unset;
}
/* V1 also did NOT render V2's events-bar (the search input row) or
* the top-bar (prev/next/today/datepicker). Hide both entirely so the
* sub-header stands alone and centred, the way V1 production looked.
* Footer prev/next nav will land in Gap 6. */
.ania-tec-header .tribe-events-c-events-bar,
.ania-tec-header .tribe-events-c-top-bar,
.ania-tec-header .tribe-events-header__top-bar,
.tribe-events .tribe-events-c-top-bar,
.tribe-events .tribe-events-c-events-bar {
display: none !important;
}
/* =====================================================================
* C. DAY-OF-WEEK HEADER (Gap 3)
*
* Two cases:
* 1. Category page → calendar-header.php override emits inline
* `style="background: $category_color"` on + each | .
* Inline outranks anything here, so the category colour shows.
* 2. Non-category archive → no inline style → CSS `background: #193A84`
* fallback paints navy. NOT `!important` because we want category
* inline to win in case 1.
*
* Font + text colour rules use `!important` to win over V2 vars.
*
* CENTERING (Round 4.1 fix):
* V2 uses CSS Grid on the header row with `justify-items: start` at
* breakpoint medium (≥768px). That overrides every `text-align`
* directive on descendants because grid alignment is independent
* of text alignment.
*
* To fix we override `justify-items: center` on the tr AND force
* each | to `width: 100%` so the th fills its 1/7 grid track,
* then text-align inside it actually centres.
* --------------------------------------------------------------------- */
/* C0 — FIX day-of-week not centering. The two rules below are the
* critical ones; everything below is cosmetic. */
body .main-event .tribe-events-calendar-month__header tr,
body .main-event thead.ania-tec-month-header tr {
justify-items: center !important;
}
body .main-event thead.ania-tec-month-header th,
body .main-event thead.ania-tec-month-header th.tribe-events-calendar-month__header-column {
width: 100% !important;
min-width: 0 !important;
text-align: center !important;
}
/* Fallback navy when no inline category style. */
.tribe-events thead.tribe-events-calendar-month__header.ania-tec-month-header,
.tribe-events thead.ania-tec-month-header {
background: #193A84;
}
.tribe-events thead.ania-tec-month-header th.tribe-events-calendar-month__header-column,
.tribe-events thead.ania-tec-month-header .tribe-events-calendar-month__header-column {
background: #193A84;
border: 0 !important;
padding: 0.6em 0 !important;
}
.tribe-events thead.ania-tec-month-header .tribe-events-calendar-month__header-column-title {
font-family: 'omneslight', 'Source Sans Pro', sans-serif !important;
font-size: 18px !important;
font-weight: 600 !important;
font-style: normal !important;
text-transform: capitalize !important;
color: #fff !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0 !important;
display: block !important;
width: 100% !important;
}
/* Show full-name span as block + 100% so its text-align: center is
* literally horizontal centring of the span's content. */
.ania-tec-month-header .ania-tec-day-name-full {
display: block !important;
width: 100% !important;
text-align: center !important;
}
.ania-tec-month-header [aria-hidden="true"]:not(.ania-tec-day-name-full):not(.screen-reader-text) {
display: none !important;
}
/* =====================================================================
* D. LOADING SPINNERS + V2 DATEPICKER LABEL
*
* D1. V1 LEGACY AJAX SPINNER (root cause of the spinning circle)
* `tribe_events_before_html()` (V1 era) injects:
*
* 
*
* V2 never registers a JS handler to hide it after page load → it
* spins forever. Round 2.3 of this patch removes the call from our
* default-template.php override so it shouldn't appear, but we hide
* it defensively here in case another plugin/widget still calls the
* legacy hook.
*
* D2. V2 LOADER (.tribe-events-view-loader) — separate element.
* V2's own loader uses `.tribe-common-a11y-hidden` to hide by default
* and only shows during AJAX nav, but force-hide just in case JS
* leaves it visible. Trade-off: no spinner during next-month AJAX,
* but the grid refreshes anyway.
*
* D3. V2 DATEPICKER LABEL
* V2 top-bar shows a "January 2024 ▾" datepicker button. V1 didn't.
* Hide it to match V1.
* --------------------------------------------------------------------- */
/* D1: hide V1 legacy ajax spinner (the ACTUAL spinning circle in the
* screenshots). Defensive — root cause fixed in default-template.php. */
.tribe-events-ajax-loading,
.main-event .tribe-events-ajax-loading,
img.tribe-events-spinner-medium,
.tribe-events-spinner-medium {
display: none !important;
}
/* D2: force-hide V2 loader regardless of aria-busy. */
.tribe-events-view-loader,
.tribe-events .tribe-events-view-loader {
display: none !important;
}
/* D3 (datepicker + today button) removed in Round 3 — entire top-bar
* is now hidden in section B above, which covers these buttons too. */
/* =====================================================================
* E. EVENT BOX (Gap 4)
*
* V2 default styling makes event titles look like plain links in a
* thin row. V1 production renders each event in the month grid as a
* SOLID BLOCK in the category colour, with white text. On hover the
* block turns solid red (#df2e30, V1 brand red).
*
* Our `calendar-event.php` override applies the inline
* style="background-color: $cat_hex"
* (full hex). Here we set white text, padding, hover red, etc.
* --------------------------------------------------------------------- */
.main-event .tribe-events-calendar-month__calendar-event,
.main-event .ania-tec-event-block {
transition: background-color 200ms ease;
cursor: pointer;
border: 0 !important;
border-radius: 0 !important;
padding: 8px 6px !important;
margin: 0 !important;
min-height: 80px;
width: 100% !important;
box-sizing: border-box;
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main-event .ania-tec-event-block .tribe-events-calendar-month__calendar-event-title,
.main-event .ania-tec-event-block .tribe-events-calendar-month__calendar-event-title-link {
color: #ffffff !important;
font-family: 'omnesbold', 'Source Sans Pro', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: capitalize !important;
text-align: center;
text-decoration: none !important;
line-height: 1.2;
}
/* V2 prints a "date" line above the title; V1 didn't — hide it.
* (Same as Round 1 rule but scoped tighter.) */
.main-event .ania-tec-event-block .tribe-events-calendar-month__calendar-event-datetime-wrapper,
.main-event .ania-tec-event-block .tribe-events-calendar-month__calendar-event-datetime {
display: none !important;
}
/* Hover: solid red brand colour, white text. */
.main-event .ania-tec-event-block:hover,
.main-event .ania-tec-event-block:focus-within {
background-color: #df2e30 !important;
}
.main-event .ania-tec-event-block:hover .tribe-events-calendar-month__calendar-event-title-link,
.main-event .ania-tec-event-block:focus-within .tribe-events-calendar-month__calendar-event-title-link {
color: #ffffff !important;
}
/* =====================================================================
* F. TOOLTIP (Gap 4 — hover popup)
*
* ROUND 4.12 — STOP guessing values. V1's production stylesheet at
* `style.css` line 8922-8950 has the EXACT values used in production:
*
* #tribe-events-content .tribe-events-tooltip {
* border: solid 8px #193A84; ← 8px (not 4-5px we guessed!)
* border-radius: 5px;
* color: #193A84;
* font-family: 'omneslight' !important;
* font-size: 11px; ← 11px description
* }
* #tribe-events-content .tribe-events-tooltip h4 {
* font-family: 'omnessemibold' !important;
* font-size: 18px; ← 18px title (not 16px we guessed!)
* text-transform: capitalize;
* }
* #tribe-events-content .tribe-events-tooltip .tribe-events-arrow {
* bottom: -6px; ← arrow extends 6px below the tooltip
* }
*
* V1 used custom HTML/CSS tooltip with classes:
* .tribe-events-tooltip (container)
* .tribe-events-tooltip h4 (title)
* .tribe-events-tooltip .tribe-events-event-body .tribe-event-date-start (date)
* .tribe-events-tooltip .tribe-events-arrow (arrow)
*
* V2 uses tooltipster with different class names. The TRANSLATION map:
* V1 .tribe-events-tooltip → V2 .tooltipster-box (visible wrapper)
* V1 h4 inside tooltip → V2 .tribe-events-calendar-month__calendar-event-tooltip-title-link
* V1 .tribe-event-date-start → V2 .tribe-events-calendar-month__calendar-event-tooltip-datetime
* V1 .tribe-events-arrow → V2 .tooltipster-arrow + its two inner triangles
*
* Apply V1's EXACT property values to V2's selectors below.
* --------------------------------------------------------------------- */
/* Neutralise outer positioning wrapper - no visible chrome. */
.tooltipster-base.tribe-events-tooltip-theme,
.tooltipster-sidetip.tribe-events-tooltip-theme,
.tooltipster-base.tribe-events-tooltip-theme--hover {
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* V1 production values applied to V2's visible wrapper. */
.tooltipster-sidetip.tribe-events-tooltip-theme .tooltipster-box,
.tooltipster-base.tribe-events-tooltip-theme .tooltipster-box,
.tooltipster-base.tribe-events-tooltip-theme--hover .tooltipster-box {
background-color: #ffffff !important;
background: #ffffff !important;
border: solid 8px #193A84 !important; /* V1 line 8923 */
border-radius: 5px !important; /* V1 line 8924 */
box-shadow: none !important;
color: #193A84 !important; /* V1 line 8925 */
font-family: 'omneslight', 'Source Sans Pro', sans-serif !important; /* V1 line 8926 */
font-size: 11px !important; /* V1 line 8927 */
font-style: normal !important;
margin: 0 !important;
padding: 12px 14px !important;
}
/* Inner wrappers — fully transparent, no borders. */
.tooltipster-sidetip.tribe-events-tooltip-theme .tooltipster-content,
.tooltipster-sidetip.tribe-events-tooltip-theme .tribe-events-calendar-month__calendar-event-tooltip {
background-color: transparent !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
color: #193A84 !important;
}
/* Flex column so title/date/description can be re-ordered. */
.tribe-events-calendar-month__calendar-event-tooltip,
.tooltipster-sidetip.tribe-events-tooltip-theme .tribe-events-calendar-month__calendar-event-tooltip {
display: flex !important;
flex-direction: column !important;
}
.tribe-events-calendar-month__calendar-event-tooltip-featured-image-wrapper { order: 0; }
.tribe-events-calendar-month__calendar-event-tooltip-title { order: 1 !important; }
.tribe-events-calendar-month__calendar-event-tooltip-datetime,
.tribe-events-calendar-month__calendar-event-tooltip-datetime-wrapper { order: 2 !important; }
.tribe-events-calendar-month__calendar-event-tooltip-description { order: 3 !important; }
.tribe-events-calendar-month__calendar-event-tooltip-cost { order: 4 !important; }
/* TITLE — V1 line 8930 values. V1 used |