/**
 * WCAG 2.1 AA Compliant Focus Indicators
 * Success Criterion 2.4.7: Focus Visible
 * 
 * These styles ensure all interactive elements have visible focus indicators
 * with sufficient contrast (3:1) and clear visibility
 */

/* Remove browser default outlines to replace with custom styles */
*:focus {
    outline: none;
}

/* Base focus style for all focusable elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus,
[role="button"]:focus,
[role="link"]:focus,
.btn:focus,
.button:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
    position: relative;
    z-index: 1;
}

/* High contrast focus for dark backgrounds */
.footer-area a:focus,
.page-title-area a:focus,
.navbar-area a:focus {
    outline-color: #ffffff !important;
}

/* Form elements specific focus styles */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: #0066cc !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25) !important;
}

/* Button focus styles */
.btn:focus,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5) !important;
}

/* Navigation menu focus */
.navbar .navbar-nav .nav-link:focus {
    background-color: rgba(0, 102, 204, 0.1);
    outline: 2px solid #0066cc !important;
    outline-offset: -2px !important;
}

/* Skip link focus */
.skip-link:focus {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 999999 !important;
    padding: 15px 20px !important;
    background: var(--e-global-color-67ce4ad) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: 3px solid #ffffff !important;
    outline-offset: -3px !important;
}

/* Breadcrumb focus */
nav[aria-label="Brotkrümelnavigation"] a:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
    text-decoration: none !important;
}

/* Card and widget focus */
.widget a:focus,
.card a:focus,
.post-item a:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Social media icons focus */
.topbar-social-icon a:focus,
.footer-social a:focus {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
    transform: scale(1.1);
}

/* Search button focus */
.search-popup-btn:focus,
.nav-right-part .search a:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Mobile menu toggle focus */
.navbar-toggler:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Carousel controls focus */
.owl-prev:focus,
.owl-next:focus,
.slick-prev:focus,
.slick-next:focus,
.carousel-control-prev:focus,
.carousel-control-next:focus {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
    opacity: 1 !important;
}

/* Tab focus */
.nav-tabs .nav-link:focus,
.nav-pills .nav-link:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: -2px !important;
}

/* Accordion focus */
.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5) !important;
    z-index: 3;
}

/* Modal close button focus */
.modal .close:focus,
.btn-close:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Dropdown focus */
.dropdown-toggle:focus,
.dropdown-item:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: -2px !important;
}

/* Pagination focus */
.pagination .page-link:focus {
    z-index: 3;
    outline: 2px solid #0066cc !important;
    outline-offset: -2px !important;
}

/* Video/Audio controls focus */
video:focus,
audio:focus,
iframe:focus {
    outline: 3px solid #0066cc !important;
    outline-offset: 2px !important;
}

/* Cookie banner focus */
.cookie-consent-banner a:focus,
.cookie-consent-banner button:focus {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
}

/* Focus visible only for keyboard users */
@supports selector(:focus-visible) {
    /* Remove outline for mouse users */
    *:focus:not(:focus-visible) {
        outline: none !important;
    }
    
    /* Apply styles only for keyboard focus */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    [tabindex]:focus-visible,
    [role="button"]:focus-visible,
    [role="link"]:focus-visible {
        outline: 3px solid #0066cc !important;
        outline-offset: 2px !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    *:focus {
        outline-width: 4px !important;
        outline-style: solid !important;
    }
}

/* Ensure focus indicators are not cut off */
.overflow-hidden:focus-within {
    overflow: visible !important;
}

/* Fix for elements that might clip focus indicators */
.card:has(*:focus),
.widget:has(*:focus) {
    overflow: visible !important;
    z-index: 10;
}