// Focus styles for keyboard navigation accessibility
// See: https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

// Fallback for browsers without :focus-visible support
:focus {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
}

// Remove outline for mouse users in browsers that support :focus-visible
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

// Enhanced focus for keyboard navigation in browsers with :focus-visible support
:focus-visible {
  outline: 2px solid #1976d2; // Accessible blue, meets 3:1 contrast on white
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
  transition: outline-color 0.2s;
  z-index: 2;
}

// Remove focus ring for mouse users
body:not(.user-is-tabbing) :focus {
  outline: none;
  box-shadow: none;
}

// High contrast mode support (overridden in _high-contrast.scss)
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}