/**
 * MFV — accessibility baseline.
 *
 * Audit §18. A scan of first-party CSS found 344 `outline: none` declarations,
 * 59 of them applying to `:focus-visible`. Most of those legitimately replace
 * the outline with another cue — an underline, a colour shift — so rewriting
 * all of them would have been wrong. What was missing was a floor: a guarantee
 * that any interactive element which removes its outline and provides nothing
 * in its place still shows *something* to a keyboard user.
 *
 * The ring is drawn with box-shadow rather than outline, because `outline:
 * none` is by far the more common way styles suppress focus; a shadow-based
 * ring survives those rules while remaining easy to override deliberately.
 *
 * Scoped to :focus-visible only, so pointer users never see a ring — which is
 * the reason these outlines were removed in the first place.
 */

:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	/* :where() keeps specificity at zero, so any component that wants its own
	   indicator overrides this without a specificity fight or !important. */
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 5px #0e7490;
	border-radius: 3px;
}

/* Windows High Contrast Mode ignores box-shadow entirely, so an explicit
   outline is restored there. */
@media (forced-colors: active) {
	:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}
}

/**
 * Visually-hidden text that remains available to assistive technology.
 * WordPress ships .screen-reader-text, but it is not present on every
 * front-end surface, and first-party labels rely on it.
 */
.screen-reader-text,
.mfv-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;
	white-space: nowrap !important;
	border: 0 !important;
}

/* A visually-hidden skip link must become visible when focused, or it helps
   nobody. */
.screen-reader-text:focus,
.mfv-sr-only:focus {
	position: fixed !important;
	top: 8px !important;
	left: 8px !important;
	z-index: 100000 !important;
	width: auto !important;
	height: auto !important;
	padding: 12px 20px !important;
	clip: auto !important;
	background: #0e7490 !important;
	color: #fff !important;
	border-radius: 6px !important;
	font-size: 15px !important;
	text-decoration: none !important;
}

/**
 * WCAG 2.2 target-size floor for the small icon-only controls this codebase
 * uses for pagination and carousels.
 *
 * This must NOT be min-width/min-height on the control itself: both dots paint a
 * background through a `border-radius: 9999px` box, so growing the box to 24px
 * repaints them as fat circles — it flattened the hero's 8x20 active dash and the
 * cat-fan's 24x10 active pill into identical blobs. The target instead grows via a
 * transparent absolutely-positioned overlay, which is hit-tested for the host
 * button but paints nothing and takes no space in the flex row.
 */
:where(.mfl-cat-fan__dot, .mfl-hero-v2__indicator-dot) {
	position: relative;
}
:where(.mfl-cat-fan__dot, .mfl-hero-v2__indicator-dot)::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: max(100%, 24px);
	height: max(100%, 24px);
}

/* Respect a user's reduced-motion preference across first-party animation. */
@media (prefers-reduced-motion: reduce) {
	:where([class*="mfl-"], [class*="mfv-"]),
	:where([class*="mfl-"], [class*="mfv-"])::before,
	:where([class*="mfl-"], [class*="mfv-"])::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/**
 * The skip link specifically.
 *
 * Relying on the generic .screen-reader-text:focus rule was not enough: on the
 * My Listings and Add Listing screens something else wins and the link stays
 * 1x1 when focused, which makes it useless — a keyboard user tabs to an
 * invisible control. Targeting .mfv-skip-link directly, with an ID-level
 * specificity boost via :not(#\9), keeps it visible wherever it lands.
 */
.mfv-skip-link:not(#\9):focus,
.mfv-skip-link:not(#\9):focus-visible {
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	z-index: 2147483647 !important;
	width: auto !important;
	height: auto !important;
	min-width: 200px !important;
	padding: 14px 24px !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: nowrap !important;
	background: #0e7490 !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: underline !important;
	border-radius: 8px !important;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0e7490 !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}