/*
 * a11y-events.css  —  CGLJ Resource Hub, Accessibility Batch 2
 *
 * Focus visibility + small-viewport reflow fixes for The Events Calendar views.
 * Loaded only on tribe_events contexts (see functions.php: cglj_a11y_events_assets).
 *
 * Covers manual-audit items:
 *   CAL-002  "Find Events" button focus ring invisible (black on black)
 *   CAL-003  event links in calendar day cells have no visible focus indicator
 *   CAL-004  calendar day / datepicker controls don't reflow at 320px
 *   CAL-011  "This Month" link has no visible focus indicator
 *   HOME-003 / NE-001  global "no visible focus indicator" as it appears here
 * plus visual styling for the rebuilt category "Browse by category" <details> menu.
 *
 * Brand accent: #C8102E (Northeastern red).
 */

/* ------------------------------------------------------------------ *
 * 1. Baseline visible focus for every interactive element in a TEC
 *    view. The theme sets `outline: none` globally; restore it here,
 *    scoped, using :focus-visible so mouse clicks stay ring-free.
 * ------------------------------------------------------------------ */
.tribe-events a:focus-visible,
.tribe-events button:focus-visible,
.tribe-events input:focus-visible,
.tribe-events select:focus-visible,
.tribe-events [tabindex]:focus-visible,
.tribe-events summary:focus-visible,
.tribe-events-pro a:focus-visible,
.tribe-events-pro button:focus-visible {
	outline: 3px solid #C8102E;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Fallback for browsers without :focus-visible support. */
.tribe-events a:focus,
.tribe-events button:focus,
.tribe-events summary:focus {
	outline: 3px solid #C8102E;
	outline-offset: 2px;
}
.tribe-events a:focus:not(:focus-visible),
.tribe-events button:focus:not(:focus-visible),
.tribe-events summary:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------------ *
 * 2. Controls that sit on a dark or coloured fill need a two-tone
 *    ring so the indicator is visible whatever is behind it
 *    (CAL-002: focus ring and button both turn black).
 * ------------------------------------------------------------------ */
.tribe-events .tribe-events-c-events-bar__search-button:focus-visible,
.tribe-events .tribe-events-c-search__button:focus-visible,
.tribe-events .tribe-events-c-view-selector__button:focus-visible,
.tribe-events .tec-events-category-color-filter__summary:focus-visible,
.tribe-events .tribe-events-c-top-bar__datepicker-button:focus-visible,
.tribe-events .tribe-events-c-top-bar__today-button:focus-visible,
.tribe-events .tribe-events-c-nav__prev:focus-visible,
.tribe-events .tribe-events-c-nav__next:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #C8102E;
}

/* ------------------------------------------------------------------ *
 * 3. Event links inside month day cells (CAL-003). These are small and
 *    dense; give the ring a solid backing so it reads on any category
 *    colour.
 * ------------------------------------------------------------------ */
.tribe-events .tribe-events-calendar-month__calendar-event-title-link:focus-visible,
.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner:focus-visible,
.tribe-events .tribe-events-calendar-month__day-cell--mobile:focus-visible,
.tribe-events .tribe-events-calendar-day__event-title-link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 1px;
	box-shadow: 0 0 0 4px #C8102E;
	position: relative;
	z-index: 2;
}

/* ------------------------------------------------------------------ *
 * 4. "This Month" today link (CAL-011) — it is hidden until a
 *    breakpoint reveals it; make sure the focus ring is not clipped.
 * ------------------------------------------------------------------ */
.tribe-events .tribe-events-c-top-bar__today-button:focus-visible {
	overflow: visible;
}

/* ------------------------------------------------------------------ *
 * 5. Reflow at <=360px (CAL-004). Let the top bar wrap instead of
 *    forcing horizontal scroll.
 * ------------------------------------------------------------------ */
@media (max-width: 360px) {
	.tribe-events .tribe-events-c-top-bar,
	.tribe-events .tribe-events-c-top-bar__nav,
	.tribe-events .tribe-events-header__top-bar {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.tribe-events .tribe-events-c-top-bar__datepicker {
		flex: 1 1 100%;
	}

	.tribe-events .tribe-events-c-events-bar__filters,
	.tribe-events .tec-events-category-color-filter {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.tribe-events .tec-events-category-color-filter__dropdown {
		width: 100%;
		left: 0;
		right: 0;
	}
}

/* ------------------------------------------------------------------ *
 * 5b. Events-bar keyword search (CAL-008).
 *
 *     BUGFIX (2026-09-16): .tribe-events-c-search__input-group is
 *     `display:flex` with no `flex-wrap` (TEC's own CSS) -- when the
 *     label was a visible flex item this caused the real input field to
 *     get squeezed down to fit both items on one line. Force the wrap so
 *     any visible sibling gets its own row; harmless now that the label
 *     is visually hidden (2026-09-16, see keyword.php) since an
 *     absolutely-positioned element isn't part of this flex layout at
 *     all, but kept in case that ever changes back.
 *
 *     The label itself uses the sitewide `.a11y-visual-hide` utility
 *     (assets/css/a11y-global.css) — it stays in the accessibility tree
 *     (still the field's accessible name) without taking up visual
 *     space. No rule needed here for it.
 * ------------------------------------------------------------------ */
.tribe-events-c-search__input-group {
	flex-wrap: wrap !important;
}

.tribe-events-c-search__input-group .tribe-events-c-search__input-control {
	flex: 1 1 auto;
	min-width: 0;
}

/* ------------------------------------------------------------------ *
 * 5c. Related-events thumbnail on single event pages: a giant, unclipped
 *     image covering the rest of the page (title showed, body copy/meta
 *     did not -- they were still there, just rendered underneath a
 *     full-bleed image).
 *
 *     Root cause: THIS IS a Batch 2 regression, just one level removed
 *     from where it looks. The Events Calendar core 6.17.3.1 ships a
 *     "crop to fill" technique for this thumbnail:
 *         .tribe-related-events-thumbnail a {
 *           display: block; overflow: hidden; padding-top: 75%; position: relative;
 *         }
 *         .tribe-related-events-thumbnail img {
 *           position: absolute; inset: 50% 0 0 50%;
 *           transform: translate(-50%, -50%) scale(2);
 *         }
 *     The container styling (overflow/position/aspect-ratio) is scoped to
 *     the `a` tag specifically. tribe-events/pro/related-events.php
 *     changed that wrapper from <a class="url" role="presentation"> to
 *     <span class="url"> (dropping the redundant/duplicate-announcement
 *     link -- rule 1097 / CAL-019) but the container CSS still asks for
 *     an `a`, which no longer exists there -- so it never applies, and
 *     the absolutely-positioned, 2x-scaled image renders with no clipping
 *     box at all. Re-supply the same container styling, scoped to the
 *     `.url` class instead of the tag, so it still finds our <span>.
 *
 *     NOTE: on this install, this rule (even with !important) does not
 *     reliably win the cascade for a reason not identified after
 *     extensive investigation (confirmed present in the loaded
 *     stylesheet, confirmed to match the element via .matches(), no
 *     competing rule found in any readable/same-origin stylesheet). The
 *     actual, confirmed-working fix is a JS runtime patch in
 *     cglj-a11y-events.php (fixRelatedEventsThumbnails). This CSS rule
 *     is kept as a harmless first line of defense in case that ever
 *     changes.
 * ------------------------------------------------------------------ */
.tribe-related-events-thumbnail .url {
	display: block !important;
	overflow: hidden !important;
	padding-top: 75% !important;
	position: relative !important;
}

/* ------------------------------------------------------------------ *
 * 6. "Browse by category" menu — now a native <details>/<summary>.
 *    Reproduce the previous dropdown look.
 *
 *    BUGFIX (2026-09-16): the Customizer "Additional CSS" field (DB-only,
 *    not in this repo — see _a11y/customizer/) contains TEC's OWN CSS for
 *    the *original* role="button" widget this batch replaced:
 *      .tec-events-category-color-filter { display: flex; ... }
 *      .tec-events-category-color-filter .tec-events-category-color-filter__dropdown
 *        { opacity: 0; visibility: hidden; pointer-events: none; position: absolute; ... }
 *      .tec-events-category-color-filter.tec-events-category-color-filter--open
 *        .tec-events-category-color-filter__dropdown { display: flex }
 *    Our <details class="tec-events-category-color-filter tec-events-category-color-filter--menu">
 *    still carries the base class (needed for the colour-dot/swatch CSS),
 *    so it inherits `display:flex` (wrong for a <details>) and the dropdown
 *    inherits permanent opacity:0/visibility:hidden — since we open via the
 *    native [open] attribute, not a "--open" class, that rule never
 *    matches and the menu could never actually become visible. Additional
 *    CSS loads after enqueued stylesheets (WordPress hooks it at a later
 *    priority on purpose), so on equal specificity it wins over the rules
 *    below unless we force it with !important.
 * ------------------------------------------------------------------ */
.tec-events-category-color-filter--menu {
	display: block !important;
	position: relative !important;
}

.tec-events-category-color-filter__summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
	padding: 6px 10px;
	font: inherit;
}

.tec-events-category-color-filter__summary::-webkit-details-marker {
	display: none;
}

.tec-events-category-color-filter__summary .tec-events-category-color-filter__dropdown-icon-svg {
	transition: transform 0.15s ease;
	width: 12px;
	height: 12px;
}

.tec-events-category-color-filter--menu[open] .tec-events-category-color-filter__dropdown-icon-svg {
	transform: rotate(180deg);
}

.tec-events-category-color-filter--menu .tec-events-category-color-filter__dropdown {
	position: absolute !important;
	z-index: 10;
	top: calc(100% + 4px) !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	transform: none !important;
	min-width: 220px;
	max-width: min(320px, 90vw);
	background: #ffffff;
	border: 1px solid #DDE3E5;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	padding: 6px;
	/* Closed state: hide (a legacy Additional CSS rule also sets these
	   properties unconditionally -- match it here so both agree, then the
	   [open] rule below is the one that has to win). */
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.tec-events-category-color-filter--menu[open] .tec-events-category-color-filter__dropdown {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

/* In the desktop top bar the trigger sits at the right, so anchor the menu
   to the right edge of the trigger to keep it on screen. */
.tribe-events-header__top-bar .tec-events-category-color-filter--menu .tec-events-category-color-filter__dropdown,
.tribe-events-c-top-bar .tec-events-category-color-filter--menu .tec-events-category-color-filter__dropdown {
	left: auto !important;
	right: 0 !important;
}

.tec-events-category-color-filter__dropdown-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tec-events-category-color-filter__dropdown-item .tec-events-category-color-filter__label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	text-decoration: none;
	color: #000000;
	border-radius: 2px;
}

.tec-events-category-color-filter__dropdown-item .tec-events-category-color-filter__label:hover {
	background: #E5F2F8;
}

.tec-events-category-color-filter__dropdown-item .tec-events-category-color-filter__label[aria-current="page"] {
	font-weight: 700;
}

.tec-events-category-color-filter__color-dot {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	/* space before the category name. The parent .__label already has
	   `gap: 8px` (flex), which should be enough on its own -- this margin
	   is redundant defense given this file's other rules have shown the
	   cascade can behave unreliably here (see the note above the
	   .tribe-related-events-thumbnail .url rule). */
	margin-right: 8px;
	border-radius: 50%;
	background: currentColor;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
	.tec-events-category-color-filter__dropdown-icon-svg {
		transition: none;
	}
}