/**
 * Accessibility
 */


/*! - Settings */

:root {
	/*! Focus Outlines */
	/* --theme--focus-outline--color:            currentcolor;  /* unset to use native browser color for standard outlines */
	--theme--focus-outline--background-color: #fff;
	--theme--focus-outline--border-radius:    3px;
	--theme--focus-outline--pad:              0.3em;
	--theme--focus-outline--blur:             2px;
	--theme--focus-outline--size:             2px;
}




/*! - Restore standard focus states for keyboard navigation */

:focus-visible {
	outline: var(--theme--focus-outline--size) auto Highlight;  /* Firefox default color keyword */
	outline-color: var(--theme--focus-outline--color, -webkit-focus-ring-color);
	outline-offset: var(--theme--focus-outline--pad);
}



/*! - Fancy Focus */

body.theme--fancy-focus {
	--theme--focus-outline--color: currentcolor;
}

.theme--fancy-focus :focus-visible {
	outline: none;
}


/*! Fancy Focus: General elements */
/* Able to use a pseudo element to add transparent padding */

.theme--fancy-focus :is(
	a:not(
		.et_pb_button,
		:has( #logo )
	)
):focus-visible {
	position: relative;  /* support positioning the pseudo element */
}

.theme--fancy-focus :is(
	a:not(
		.et_pb_button,
		.icon,
		:has( #logo )
	)
):focus-visible::before,
/* ...elements where ::before is in use */
.theme--fancy-focus :is(
	a.icon,
	/* toggles (focusable via JS) */
	.et_pb_toggle_title
):focus-visible::after {
	content: '';
	position: absolute;
	top:    calc( -1 * var(--theme--focus-outline--pad) );
	left:   calc( -1 * var(--theme--focus-outline--pad) );
	right:  calc( -1 * var(--theme--focus-outline--pad) );
	bottom: calc( -1 * var(--theme--focus-outline--pad) );
	border-radius: var(--theme--focus-outline--border-radius);
	box-shadow: 0 0 var(--theme--focus-outline--blur) var(--theme--focus-outline--size) var(--text-color, var(--theme--focus-outline--color));
}


/*! Fancy Focus: Buttons and Fields */
/* May be already using the pseudo elements, or do not support them */

.theme--fancy-focus :is(
	button,
	input,
	select,
	textarea,
	.et_pb_button
):focus-visible,
/* header logo */
.theme--fancy-focus a:has( #logo ):focus-visible img {
	box-shadow: 0 0 0 var(--theme--focus-outline--size) var(--background-color, var(--theme--focus-outline--background-color)),
	            0 0 var(--theme--focus-outline--blur) calc(2 * (var(--theme--focus-outline--size))) var(--text-color, var(--theme--focus-outline--color));
}



/*! Social Icons */

/* Inherit text color for links for outline styling */

.et_pb_social_icon a {
	color: inherit;
}