/* Frontend Styles for SkipTo Accessibility Widget */

.skip-to-button {
    position: fixed !important;
    transition: all 0.2s ease-in-out !important;
}

.skip-to-button:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

.skip-to-menu {
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.skip-to-menu [role="menuitem"]:hover,
.skip-to-menu [role="menuitem"]:focus {
    transform: translateX(4px);
}

/* Hide original skip links */
.skipto-a11y-active a[href^="#main"],
.skipto-a11y-active a[href^="#content"],
.skipto-a11y-active .skip-link:not(.skip-to-button) {
    display: none !important;
}

/* Popup style */
.skip-to-button.popup-style:not(:focus) {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .skip-to-button {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }
    .skip-to-menu {
        max-width: 90vw !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .skip-to-button {
        border: 2px solid currentColor !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .skip-to-button,
    .skip-to-menu,
    .skip-to-menu [role="menuitem"] {
        transition: none !important;
    }
}

/* Print - hide when printing */
@media print {
    .skip-to-button,
    .skip-to-menu {
        display: none !important;
    }
}

/* RTL support */
[dir="rtl"] .skip-to-menu [role="menuitem"]:hover {
    transform: translateX(-4px);
}