/* Screen-reader-only text that remains available to assistive technology. */
.bf-a11y-visually-hidden {
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	white-space: nowrap !important;
	width: 1px !important;
}

/*
 * Keyboard/assistive-focus indicator.
 *
 * JavaScript adds bf-a11y-keyboard-user when keyboard input is detected and
 * bf-a11y-pointer-user before mouse/touch focus. This keeps the plugin's focus
 * ring out of ordinary pointer interactions while preserving :focus-visible
 * for assistive or programmatic focus that was not preceded by a pointer.
 */
:root {
	--bf-a11y-focus-outer-color: #111111;
	--bf-a11y-focus-inner-color: #ffffff;
	--bf-a11y-focus-width: 3px;
	--bf-a11y-focus-gap: 3px;
	--bf-a11y-focus-scroll-margin: 7rem;
}

html.bf-a11y-focus-enabled.bf-a11y-keyboard-user :where(
	a[href],
	area[href],
	button:not([disabled]),
	input:not([type="hidden"]):not([disabled]),
	select:not([disabled]),
	textarea:not([disabled]),
	summary,
	iframe,
	object,
	embed,
	[contenteditable="true"],
	[tabindex]:not([tabindex="-1"]),
	[role="button"],
	[role="link"],
	[role="menuitem"],
	[role="menuitemcheckbox"],
	[role="menuitemradio"],
	[role="tab"],
	[role="checkbox"],
	[role="radio"],
	[role="switch"],
	[role="option"],
	[role="treeitem"],
	[role="slider"],
	[role="spinbutton"]
):focus,
html.bf-a11y-focus-enabled:not(.bf-a11y-pointer-user) :where(
	a[href],
	area[href],
	button:not([disabled]),
	input:not([type="hidden"]):not([disabled]),
	select:not([disabled]),
	textarea:not([disabled]),
	summary,
	iframe,
	object,
	embed,
	[contenteditable="true"],
	[tabindex]:not([tabindex="-1"]),
	[role="button"],
	[role="link"],
	[role="menuitem"],
	[role="menuitemcheckbox"],
	[role="menuitemradio"],
	[role="tab"],
	[role="checkbox"],
	[role="radio"],
	[role="switch"],
	[role="option"],
	[role="treeitem"],
	[role="slider"],
	[role="spinbutton"]
):focus-visible {
	outline: var(--bf-a11y-focus-width) solid var(--bf-a11y-focus-outer-color) !important;
	outline-offset: var(--bf-a11y-focus-gap) !important;
	box-shadow:
		0 0 0 2px var(--bf-a11y-focus-inner-color),
		0 0 0 5px var(--bf-a11y-focus-outer-color) !important;
	scroll-margin-block: var(--bf-a11y-focus-scroll-margin) !important;
}

/*
 * Some Divi/filter-grid cards use an empty, positioned anchor as the clickable
 * surface. Show the same ring around the card when that empty anchor receives
 * keyboard focus, because a zero-content anchor may not paint a useful ring.
 */
@supports selector(:has(*)) {
	html.bf-a11y-focus-enabled.bf-a11y-keyboard-user :where(
		.dp-dfg-item,
		.et_pb_portfolio_item,
		.et_pb_post,
		.et_pb_module,
		.et_pb_image_wrap
	):has(a[href]:empty:focus),
	html.bf-a11y-focus-enabled:not(.bf-a11y-pointer-user) :where(
		.dp-dfg-item,
		.et_pb_portfolio_item,
		.et_pb_post,
		.et_pb_module,
		.et_pb_image_wrap
	):has(a[href]:empty:focus-visible) {
		outline: var(--bf-a11y-focus-width) solid var(--bf-a11y-focus-outer-color) !important;
		outline-offset: var(--bf-a11y-focus-gap) !important;
		box-shadow:
			0 0 0 2px var(--bf-a11y-focus-inner-color),
			0 0 0 5px var(--bf-a11y-focus-outer-color) !important;
	}
}

@media (forced-colors: active) {
	html.bf-a11y-focus-enabled.bf-a11y-keyboard-user :focus,
	html.bf-a11y-focus-enabled:not(.bf-a11y-pointer-user) :focus-visible {
		outline: 3px solid CanvasText !important;
		outline-offset: 3px !important;
		box-shadow: none !important;
	}
}