/*
 * Keyboard focus indicators (client feedback 2026-09, item 5).
 *
 * The client reported "a white box outline ... around a lot of the clickable
 * areas ... It looks like the default focus ring." It was not the browser's:
 * the theme had NO global focus rule, and fourteen components had each
 * hand-rolled `outline: 2px solid <ink|paper>` at a small offset, which is
 * visually indistinguishable from a UA ring. Five more elements had no rule at
 * all and therefore fell back to the real UA ring.
 *
 * So the fix is to ADD the missing global rule and then let each family
 * replace the SHAPE -- see the token block in style.css for the language, and
 * each component sheet for its own override.
 *
 * WHY THIS IS ITS OWN FRONT-END-ONLY SHEET (do not move it into style.css):
 * inc/hooks/setup.php calls add_editor_style( 'style.css' ), and WordPress
 * injects editor styles into the block editor canvas scoped with
 * :where(.editor-styles-wrapper), which adds ZERO specificity. A global
 * :focus-visible rule in style.css would therefore apply verbatim inside the
 * canvas -- and a contenteditable matches :focus-visible on ANY focus, so
 * every paragraph an editor clicked into would gain a 2px offset box on top of
 * Gutenberg's own selection UI. Enqueued from inc/hooks/enqueue.php alongside
 * the other classic-template sheets.
 */

/*
 * The theme's default indicator. Specificity is (0,1,0), so every component
 * rule overrides it with its own shape; what it guarantees is that nothing can
 * fall back to the browser's ring and nothing can end up with no indicator at
 * all. It is also the CORRECT final answer for rectangular image and card
 * links -- the header and footer logos, the footer gallery tiles, the case
 * study cards -- whose box IS their shape, so those carry no rule of their own.
 *
 * Deliberately NOT `outline: none`: a blanket reset is how a site ends up with
 * invisible focus the moment a component forgets its own rule.
 */
:focus-visible {
	outline: var(--hp-focus-width) solid var(--hp-focus-color);
	outline-offset: var(--hp-focus-offset);
}