/**
 * Elementor Nested Tabs Hotfix - Styles
 * 
 * @package ElementorNestedTabsHotfix
 * @author Tristan @ Silverlake
 * @version 1.0.0
 */

/* Fixed CSS */

/* Base accessibility improvements for all tab elements */
.e-n-tabs [role="tab"] {
    position: relative;
    transition: all 0.2s ease-in-out;
}

/* Remove focus styles for mouse clicks */
.e-n-tabs [role="tab"]:focus {
    outline: none;
    box-shadow: none;
}

/* Enhanced focus visibility - keyboard navigation only */
.e-n-tabs [role="tab"]:focus-visible {
    outline: 2px solid #0073aa !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2) !important;
    z-index: 1 !important;
}

/* Focus styles for nested tabs - keyboard navigation only */
.e-n-tabs .e-n-tabs [role="tab"]:focus-visible {
    outline-color: #d63638 !important;
    box-shadow: 0 0 0 2px rgba(214, 54, 56, 0.2) !important;
}

/* Ensure active tabs maintain visibility */
.e-n-tabs [role="tab"][aria-selected="true"] {
    position: relative;
    z-index: 0;
}

/* Focused active tabs should be above other elements */
.e-n-tabs [role="tab"][aria-selected="true"]:focus-visible {
    z-index: 2 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .e-n-tabs [role="tab"]:focus-visible {
        outline: 3px solid currentColor !important;
        outline-offset: 2px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .e-n-tabs [role="tab"] {
        transition: none;
    }
}

/* Screen reader only content */
.enth-sr-only {
    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;
}

/* Ensure tab content doesn't interfere with focus */
.e-n-tabs-content {
    position: relative;
    z-index: 0;
}

/* Mobile responsiveness improvements */
@media (max-width: 768px) {
    .e-n-tabs [role="tab"]:focus-visible {
        outline-width: 3px !important;
        outline-offset: 1px !important;
    }
}

/* Touch device improvements */
.e-n-tabs[data-touch-mode="true"] [role="tab"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure keyboard navigation works in RTL languages */
[dir="rtl"] .e-n-tabs [role="tab"]:focus-visible {
    outline-offset: 2px !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .e-n-tabs [role="tab"]:focus-visible {
        outline-color: #4f94d4 !important;
        box-shadow: 0 0 0 2px rgba(79, 148, 212, 0.3) !important;
    }
    
    .e-n-tabs .e-n-tabs [role="tab"]:focus-visible {
        outline-color: #f56565 !important;
        box-shadow: 0 0 0 2px rgba(245, 101, 101, 0.3) !important;
    }
}

/* Prevent layout shifts when focus styles are applied */
.e-n-tabs [role="tab"] {
    box-sizing: border-box;
}

/* Ensure sufficient contrast for focus indicators */
.e-n-tabs [role="tab"]:focus-visible::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

/* Ensure focus styles work with various Elementor themes */
.elementor-widget-n-tabs .e-n-tabs [role="tab"]:focus,
.elementor-widget-nested-tabs .e-n-tabs [role="tab"]:focus {
    outline: none;
    box-shadow: none;
}

.elementor-widget-n-tabs .e-n-tabs [role="tab"]:focus-visible,
.elementor-widget-nested-tabs .e-n-tabs [role="tab"]:focus-visible {
    outline: 2px solid #0073aa !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2) !important;
}

/* Nested tabs within widgets */
.elementor-widget-n-tabs .e-n-tabs .e-n-tabs [role="tab"]:focus-visible,
.elementor-widget-nested-tabs .e-n-tabs .e-n-tabs [role="tab"]:focus-visible {
    outline-color: #d63638 !important;
    box-shadow: 0 0 0 2px rgba(214, 54, 56, 0.2) !important;
}

/* Ensure compatibility with popular Elementor themes */
.elementor-kit-default .e-n-tabs [role="tab"]:focus {
    outline: none;
    box-shadow: none;
}

.elementor-kit-default .e-n-tabs [role="tab"]:focus-visible {
    outline: 2px solid #0073aa !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2) !important;
}

/* Ensure tab panels don't interfere with tab focus */
.e-n-tabs [role="tabpanel"] {
    position: relative;
    z-index: 0;
}

/* Loading state improvements */
.e-n-tabs:not(.e-activated) [role="tab"] {
    pointer-events: none;
}

.e-n-tabs.e-activated [role="tab"] {
    pointer-events: auto;
}