/**
 * Skip Links Accessibility Styles
 * 
 * These styles ensure that skip links are hidden by default but become visible when focused,
 * allowing keyboard users to bypass blocks of content.
 */

.skip-links {
  margin: 0;
  padding: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #ffffff;
  color: #2563eb;
  padding: 10px 15px;
  z-index: 10001;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: top 0.3s ease;
  font-weight: bold;
  border: 2px solid #2563eb;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* Screen reader text - visually hidden but available to screen readers */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  clip: auto !important;
  clip-path: none;
  display: block;
  height: auto;
  left: 5px;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}