/* 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;
	}
}

/*
 * Resilient keyboard-focus fallback.
 * :focus-visible is controlled by the browser's input-modality heuristic, so
 * this remains keyboard/assistive-focus only even if the modality script is
 * delayed, optimized, or unavailable.
 */
: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="tab"],
	[role="checkbox"], [role="radio"], [role="switch"], [role="option"],
	[role="treeitem"], [role="slider"], [role="spinbutton"]
):focus-visible {
	outline: var(--bf-a11y-focus-width, 3px) solid var(--bf-a11y-focus-outer-color, #111111) !important;
	outline-offset: var(--bf-a11y-focus-gap, 3px) !important;
	box-shadow:
		0 0 0 2px var(--bf-a11y-focus-inner-color, #ffffff),
		0 0 0 5px var(--bf-a11y-focus-outer-color, #111111) !important;
	scroll-margin-block: var(--bf-a11y-focus-scroll-margin, 7rem) !important;
}

@supports selector(:has(*)) {
	: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, 3px) solid var(--bf-a11y-focus-outer-color, #111111) !important;
		outline-offset: var(--bf-a11y-focus-gap, 3px) !important;
		box-shadow:
			0 0 0 2px var(--bf-a11y-focus-inner-color, #ffffff),
			0 0 0 5px var(--bf-a11y-focus-outer-color, #111111) !important;
	}
}

/* OneTap control boundaries: scoped to the toolbar only. */
:where([class*="onetap"], [id*="onetap"], [class*="apop"], [id*="apop"])
:where(button, select, input[type="radio"], input[type="checkbox"], [role="button"], [role="switch"]) {
	border-color: #4a4a4a !important;
}

:where([class*="onetap"], [id*="onetap"], [class*="apop"], [id*="apop"])
:where(.onetap-box-feature, .onetap-btn, .close-accessibility-message, .close-box-hide-duration, .hide-toolbar, .onetap-skip-select) {
	border: 2px solid #4a4a4a !important;
}

/* Keep empty Divi/filter-grid overlay links above decorative card content while keyboard focused. */
:where(.dp-dfg-item, .et_pb_portfolio_item, .et_pb_post) > a[href]:empty:focus-visible,
:where(.dp-dfg-item, .et_pb_portfolio_item, .et_pb_post) a[href].dp-dfg-item-link:empty:focus-visible {
	z-index: 10 !important;
}

:where([class*="onetap"], [id*="onetap"], [class*="apop"], [id*="apop"])
:where(input[type="radio"], input[type="checkbox"]) {
	accent-color: #1f1f1f !important;
	outline: 2px solid #4a4a4a !important;
	outline-offset: 1px !important;
}