/* Accessibility Improvements */

/* Focus Management */
*:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* High contrast focus for interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  background-color: rgba(0, 102, 204, 0.1);
}

/* Focus for icon links */
.icon:focus {
  outline: 3px solid #0066cc;
  outline-offset: 4px;
  border-radius: 50%;
}

/* Skip link for keyboard navigation */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 6px;
  background: #0066cc;
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 6px;
  outline: 3px solid #ffffff;
}

/* Improve button focus */
.button:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.2);
}

/* Focus-visible for modern browsers */
@supports selector(:focus-visible) {
  *:focus {
    outline: none;
  }
  
  *:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
  }
  
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    background-color: rgba(0, 102, 204, 0.1);
  }
  
  .icon:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 4px;
    border-radius: 50%;
  }
  
  .button:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.2);
  }
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  *:focus,
  *:focus-visible {
    outline-color: ButtonText;
    outline-width: 3px;
  }
}

/* Improve keyboard navigation for gallery */
.gallery article:focus-within {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Better focus for smooth scroll links */
.smooth-scroll-middle:focus {
  outline: 3px solid #0066cc;
  outline-offset: 3px;
}