/* =============================================================================
   Skip Links - Accessibility Navigation
   ============================================================================= */

/*
 * Skip links are hidden off-screen by default but become visible when focused
 * via keyboard (Tab key). This allows screen reader and keyboard users to
 * quickly jump to main content without tabbing through all navigation.
 */

.skip-links {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: top 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  outline: none;
}

/* Show skip link when focused */
.skip-link:focus {
  top: 0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Multiple skip links stack vertically */
.skip-link + .skip-link {
  margin-left: 0;
}

.skip-link:focus + .skip-link {
  top: 42px; /* Stack below first link when it's visible */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .skip-link {
    border: 2px solid currentColor;
  }
}

/* Dark mode adjustments */
html.dark .skip-link {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
              0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

html.dark .skip-link:focus {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
              0 4px 6px -2px rgba(0, 0, 0, 0.2);
}