/* F6 — page heading for The Events Calendar archive views, which ship none.
   Styled to match the Stitch page headings rather than TEC's own scale. */
.tec-a11y-archive-title {
	font-family: 'Noto Serif', serif;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.15;
	color: #003345;
	margin: 0 0 24px;
}

/* ---------------------------------------------------------------------------
   F3 — navigation dropdowns must not hold focusable links while invisible.

   WCAG 2.4.3 Focus Order (A), 2.4.7 Focus Visible (AA).

   GeneratePress 3.6.1 hides submenus with `left: -99999px; opacity: 0;
   height: 0; overflow: hidden` and reveals them on :hover / .sfHover. None of
   those properties removes an element from the tab order, so a keyboard user
   could land on ~24 navigation links that were not drawn. `visibility` does
   remove them, natively and without JavaScript, and adding :focus-within to
   the reveal rule brings the submenu back the instant a link inside it is
   focused. This is why the production site needed a runtime patch script to
   sync aria-hidden on focus (finding F17) — with visibility there is nothing
   to sync.
   --------------------------------------------------------------------------- */
.main-navigation ul ul {
	visibility: hidden;
}

.main-navigation:not(.toggled) ul li:hover > ul,
.main-navigation:not(.toggled) ul li.sfHover > ul,
.main-navigation:not(.toggled) ul li:focus-within > ul {
	visibility: visible;
	opacity: 1;
	left: auto;
	height: auto;
	overflow: visible;
	pointer-events: auto;
}

/* The stacked mobile panel renders submenus inline and already forces
   visibility: visible; keep that true when the nav is toggled open. */
.main-navigation.toggled ul ul {
	visibility: visible;
}

/* ---------------------------------------------------------------------------
   F4 — the focus indicator must be visible, and must itself have contrast.

   WCAG 2.4.7 Focus Visible (AA), 1.4.11 Non-text Contrast (AA).

   The Customizer stylesheet already draws a ring, but in the site's accent gold
   (#C8892A), which measures 2.68:1 on the card surface (#f6f3ee), 2.83:1 on the
   page background (#fcf9f4) and 2.97:1 on white — all below the 3:1 an
   indicator needs. On the dark primary it is fine (4.53:1), so the colour is
   split by background rather than replaced outright.

   #005f7a on the light surfaces measures 6.50:1 / 6.85:1 / 7.20:1.
   #bfe8ff on the dark surfaces measures 7.41:1 (#004b63), 10.39:1 (#003345)
   and 13.16:1 (#001f2b).

   !important is deliberate: Tailwind is loaded from its CDN and injects its
   preflight at runtime, so it can land after this sheet in document order and
   reset outline-width to 0 on any element carrying a utility class. The
   production audit measured exactly that — `outline: rgb(28,28,25) solid 0px`
   on the quick-action tiles. Guarding the ring is cheaper than guessing at the
   load order.

   :focus-visible rather than :focus, so a mouse click leaves no ring behind.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 3px solid #005f7a !important;
	outline-offset: 3px !important;
	border-radius: 4px;
}

/* Light ring on the dark surfaces, where the teal would disappear.
   #bfe8ff measures 9.28:1 on the skip link's green (#1A3D2B) and 4.55:1 on
   The Events Calendar's button blue (#334aff). */
.bg-primary a:focus-visible,
.bg-primary button:focus-visible,
.bg-primary-container a:focus-visible,
.bg-primary-container button:focus-visible,
a.bg-primary:focus-visible,
a.bg-primary-container:focus-visible,
.site-footer-custom a:focus-visible,
.site-footer-custom button:focus-visible,
.skip-link:focus-visible,
.skip-link:focus,
.tribe-common-c-btn:focus-visible,
.tribe-events-c-search__button:focus-visible {
	outline-color: #bfe8ff !important;
}

/* The Stitch plugin ships its own focus safety layer as
   `.stitch-page a:focus-visible { outline: 3px solid #005f7a !important }`
   (0,2,1). The two selectors above are (0,2,0), so on any page carrying the
   stitch-page body class that shorthand won and repainted the ring teal —
   1.67:1 on the skip link's green and 1.22:1 on The Events Calendar's button
   blue. Repeating them with the .stitch-page prefix clears the specificity;
   the unprefixed pair above still covers templates without that body class. */
.stitch-page a.skip-link:focus-visible,
.stitch-page a.skip-link:focus,
.stitch-page a.tribe-common-c-btn:focus-visible,
.stitch-page button.tribe-common-c-btn:focus-visible,
.stitch-page button.tribe-events-c-search__button:focus-visible {
	outline-color: #bfe8ff !important;
}

/* The skip link lands on the main landmark; it should not draw a ring there. */
#main-content[tabindex="-1"]:focus {
	outline: 0;
}

/* ---------------------------------------------------------------------------
   F11 — the Google Maps link must not rely on colour alone.

   WCAG 1.4.1 Use of Color (A).

   On an event page with a venue address, this link sits inside a text block
   with no underline, and its colour differs from the surrounding text by only
   2.99:1 — just under the 3:1 a colour-only distinction needs. An underline
   satisfies 1.4.1 outright and removes the dependence on that ratio entirely.
   --------------------------------------------------------------------------- */
.tribe-events-gmap {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Reflow — a horizontally scrolling table must not scroll the whole page.

   WCAG 1.4.10 Reflow (AA).

   On /government/meeting-agendas-minutes/ the meetings table is 786px wide at
   a 320px viewport. It sits in a .overflow-x-auto wrapper and does scroll
   correctly inside it — but the page scrolled sideways as well, 474px into
   completely blank space. A data table is allowed to need horizontal scrolling;
   the page around it is not.

   The wrapper clips its content, yet the overflow still reached the document's
   scroll area: documentElement.scrollWidth measured 794 while body.scrollWidth
   stayed at 320. Neither overflow-x: hidden nor clip on html or body stopped
   it, and max-width on the wrapper made no difference. Layout containment does
   — it makes the wrapper a containment boundary so its overflow cannot
   contribute to the page's scrollable area.

   `contain: layout` is the narrowest value that works. It changes nothing about
   how the table is laid out or painted, and the table keeps its own horizontal
   scrollbar. Verified at 320px, 640px (200% zoom) and 1280px.
   --------------------------------------------------------------------------- */
.stitch-page .overflow-x-auto {
	contain: layout;
}

/* A flex item defaults to min-width: auto, so it refuses to shrink below its
   content and pushes past its container. On /government/ that put the "Email"
   label 8px beyond a 320px viewport and scrolled the whole page. Letting flex
   children shrink is the standard fix and changes nothing at wider widths. */
.stitch-page .flex > * {
	min-width: 0;
}

/* The Events Calendar pulls its "Latest Past Events" rows out with
   margin: -21px to align them against a padded parent that is not there at
   narrow widths, overshooting the viewport by 2px. Zeroing the pull is more
   surgical than clipping the block, which would cut focus rings at the edges. */
.tribe-events-calendar-latest-past__event.tribe-common-g-row--gutters {
	margin-left: 0;
	margin-right: 0;
}