/* Skip Links Fix - Properly hide accessibility skip links until focused */

/* Screen reader only - Hidden but accessible */
.sr-only,
.skip-link {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip link when focused - Make it visible */
.skip-link:focus,
.skip-link:active,
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 100000 !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background-color: #000 !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure skip links are properly hidden by default */
.skip-link:not(:focus):not(:active) {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Additional specificity for the navigation skip links */
a.skip-link {
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(100%) !important;
    height: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
}

/* Only show when focused */
a.skip-link:focus,
a.skip-link:active {
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    overflow: visible !important;
    position: absolute !important;
    white-space: normal !important;
    width: auto !important;
}

/* Fix for specific pages where skip links might show */
body .skip-link:not(:focus) {
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Ensure navigation component skip links are hidden */
.scroll-progress + .skip-link,
body > .skip-link:first-of-type {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    top: auto !important;
    overflow: hidden !important;
}