/* Stay In Your Home: focus styles. 3px solid, 2px offset (WCAG 2.4.7, 2.4.13).
   Navy on light surfaces, white on dark surfaces. Applies to everything. */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

/* Form fields: always show a ring on focus, including mouse focus. */
:where(input, select, textarea):focus {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

/* Dark surfaces. */
:is(.has-navy-background-color, .has-teal-dark-background-color, .has-teal-background-color, .siyh-footer, .siyh-dark):focus-visible,
:is(.has-navy-background-color, .has-teal-dark-background-color, .has-teal-background-color, .siyh-footer, .siyh-dark) :focus-visible,
:is(.has-navy-background-color, .has-teal-dark-background-color, .has-teal-background-color, .siyh-footer, .siyh-dark) :where(input, select, textarea):focus {
	outline-color: var(--wp--preset--color--white);
}

/* Amber buttons sit on whatever surface; a white halo keeps the ring visible on dark ones. */
:is(.has-teal-dark-background-color, .siyh-footer) .wp-element-button:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* The skip link must be unmistakable when focused. */
.skip-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--wp--preset--color--navy);
}

/* Whole-card links: ring the card, not the invisible stretched link. */
.siyh-card:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}
.siyh-card a:focus-visible {
	outline: none;
}

@media (forced-colors: active) {
	:focus-visible {
		outline: 3px solid CanvasText;
	}
}