/**
 * Enhanced focus outline styles for keyboard accessibility
 *
 * This CSS improves keyboard accessibility by ensuring all interactive elements
 * have a visible focus outline when navigated via keyboard, while hiding
 * outlines for mouse users to maintain visual aesthetics.
 */

/* Base focus style - applied regardless of input method */
:focus {
  outline: 3px solid var(--paletteColor1);
  outline-offset: 2px;
}

/* Hide focus outline for mouse users */
body:not(.is-keyboard-user) :focus:not(:focus-visible) {
  outline: none;
}

/* Ensure keyboard users always see focus outline */
body.is-keyboard-user :focus {
  outline: 3px solid var(--paletteColor1);
  outline-offset: 2px;
}

/* Make sure buttons and interactive elements have proper outlines */
body.is-keyboard-user button:focus,
body.is-keyboard-user [role="button"]:focus,
body.is-keyboard-user a:focus,
body.is-keyboard-user input:focus,
body.is-keyboard-user select:focus,
body.is-keyboard-user textarea:focus {
  outline: 3px solid var(--paletteColor1);
  outline-offset: 2px;
}

/* High contrast mode improvements */
@media (prefers-contrast: more) {
  body.is-keyboard-user :focus {
    outline: 3px solid #000;
    outline-offset: 3px;
  }
}

/* Ensure specific Blocksy elements get proper focus */
body.is-keyboard-user .ct-header-search:focus,
body.is-keyboard-user .ct-toggle:focus,
body.is-keyboard-user .ct-header-account:focus,
body.is-keyboard-user .sort-link:focus,
body.is-keyboard-user .filter-link:focus,
body.is-keyboard-user .author-card:focus {
  outline: 3px solid var(--paletteColor1);
  outline-offset: 2px;
}