/**
 * Townblock — shared accessibility utilities (frontend).
 *
 * Loaded on every front-end request so every block can rely on the same
 * visually-hidden helper and on a focus ring that survives themes which
 * reset `outline`.
 */

/* Visible to assistive technology, invisible on screen. */
.tb-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Same helper, but revealed when it receives focus (skip-link pattern). */
.tb-sr-only-focusable:focus,
.tb-sr-only-focusable:focus-visible {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
}

/*
 * Baseline focus indicator for every interactive element Townblock renders.
 * Blocks may override it, but no block may end up with no visible focus:
 * that is WCAG 2.4.7 and it is the single most common regression when a
 * municipal theme sets `outline: none` globally.
 */
[class*="wp-block-townblock-"] a:focus-visible,
[class*="wp-block-townblock-"] button:focus-visible,
[class*="wp-block-townblock-"] input:focus-visible,
[class*="wp-block-townblock-"] select:focus-visible,
[class*="wp-block-townblock-"] textarea:focus-visible,
[class*="wp-block-townblock-"] summary:focus-visible,
[class*="wp-block-townblock-"] [tabindex]:focus-visible {
	/* Deliberately NOT the theme accent: several portals ship an accent that
	   does not reach 3:1, and the focus ring itself has to (WCAG 1.4.11).
	   The dark outline plus the light box-shadow ring means one of the two is
	   always visible, whatever the background underneath. */
	outline: 3px solid #103a5c;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #ffe14d;
	border-radius: 2px;
}

/* Windows High Contrast / forced-colors: keep the ring visible. */
@media (forced-colors: active) {
	[class*="wp-block-townblock-"] a:focus-visible,
	[class*="wp-block-townblock-"] button:focus-visible,
	[class*="wp-block-townblock-"] input:focus-visible,
	[class*="wp-block-townblock-"] select:focus-visible,
	[class*="wp-block-townblock-"] textarea:focus-visible,
	[class*="wp-block-townblock-"] [tabindex]:focus-visible {
		outline: 3px solid CanvasText;
		box-shadow: none;
	}
}

/* Carousel play/pause control (WCAG 2.2.2). */
.tb-autoplay-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 4px 10px;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: var(--wp--preset--color--base, #fff);
	color: inherit;
	font: inherit;
	font-size: 0.8rem;
	line-height: 1;
	cursor: pointer;
}

.tb-autoplay-toggle svg {
	inline-size: 16px;
	block-size: 16px;
	fill: currentColor;
}

.tb-autoplay-toggle .tb-autoplay-toggle__pause {
	display: inline-flex;
}

.tb-autoplay-toggle .tb-autoplay-toggle__play {
	display: none;
}

.tb-autoplay-toggle[aria-pressed="true"] .tb-autoplay-toggle__pause {
	display: none;
}

.tb-autoplay-toggle[aria-pressed="true"] .tb-autoplay-toggle__play {
	display: inline-flex;
}

/* Blocks that hide items client-side use the `hidden` attribute so the card
   also leaves the accessibility tree. Grid/flex display rules would otherwise
   win over the user-agent default. */
[class*="wp-block-townblock-"] [hidden] {
	display: none !important;
}