/* ============================================================================
   K9 Ventures — our own styles.
   ----------------------------------------------------------------------------
   Everything under /wp-content/ and /wp-includes/ is MIRRORED verbatim from the
   live WordPress site and must not be edited — the parity tiers compare against
   it. This file is the opposite: it is ours, it layers on top, and it is where
   deliberate changes go.
   ============================================================================ */

/* ---------------------------------------------------------------- focus rings
   The design system extraction found the theme defines :hover and :active on
   every interactive element but never :focus-visible — so keyboard users get no
   indication of where they are. See design-system/components/buttons.html.

   :focus-visible rather than :focus, so a mouse click doesn't leave a ring
   behind. This adds nothing to the default rendering: it is invisible until
   somebody actually tabs. */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Pill buttons: match the shape so the ring hugs the button rather than boxing it. */
.button:focus-visible,
.form-submit input[type='submit']:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 100px;
}

/* The nav rail needs two fixes, not one.

   Its links sit at opacity:.5 and — when the rail is collapsed — the label is
   `color: transparent`, not hidden. So a keyboard user tabbing through the rail
   would otherwise focus a label they cannot see, with no ring and no text.
   Focusing an item now reveals it exactly as hovering does.

   currentColor is transparent in that state, so the ring needs an explicit
   colour or it would be invisible too. */
nav .menu > ul > li > a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
  opacity: 1;
  color: #fff;
}

/* Social chips are icon-only links with no text; currentColor is unreliable. */
nav .social li a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Search inputs sit on the dark rail and on the header. */
#search input[type='text']:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}