/* Accessibility styles for mjs.art */

/* Visually hidden elements - accessible to screen readers but not visual users */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Focus visibility for keyboard navigation - light mode */
@media (prefers-color-scheme: light) {
  a:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: 2px;
  }

  /* Enhanced focus styles for buttons - light mode */
  .btn:focus-visible {
    outline: 3px solid #4a90e2;
    outline-offset: 2px;
  }

  /* Skip to content link - light mode */
  .skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #fff;
    color: #000;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s ease;
  }
}

/* Focus visibility for keyboard navigation - dark mode */
@media (prefers-color-scheme: dark) {
  a:focus-visible {
    outline: 3px solid #7ab5ff;
    outline-offset: 2px;
  }

  /* Enhanced focus styles for buttons - dark mode */
  .btn:focus-visible {
    outline: 3px solid #7ab5ff;
    outline-offset: 2px;
  }

  /* Skip to content link - dark mode */
  .skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #1e1e1e;
    color: #fff;
    border: 1px solid #666;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s ease;
  }

  /* Ensure skip link is visible against dark background when focused */
  .skip-to-content:focus {
    background: #333;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
  }
}

/* Common styles for both light and dark modes */
.skip-to-content:focus {
  top: 0;
}

/* Enhance keyboard accessibility for navigation */
[role="navigation"] a {
  display: inline-block; /* Ensures focus is visible on block elements */
}