/*------------------------------------
 * Focus rings
 *
 * Hand-authored, NOT part of the gulp/SASS build -- style.css at the theme
 * root is a build artifact and node-sass no longer compiles here.
 * See CLAUDE.md -> Build pipeline.
 *
 * build/sass/global/base/_typography.scss puts the ring on bare :focus:
 *
 *   a, button { &:focus { outline: 2px solid $color-copy; outline-offset: 1px } }
 *
 * :focus fires on mouse clicks and touch taps as well as keyboard, so every
 * link and button on the site -- the header logo most visibly -- grows a 2px
 * black box the moment it is clicked. :focus-visible is the same ring, shown
 * only when the browser judges the user to want it, which in practice means
 * keyboard.
 *
 * Enqueued immediately after unify2021-style so component stylesheets loaded
 * afterwards can still override per-element.
 *-----------------------------------*/

a:focus,
button:focus {
	outline: none;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid #000;
	outline-offset: 1px;
}