/* ===================================================
   COMPREHENSIVE FOCUS OUTLINE FIX
   =================================================== */

/* 1. GLOBAL FOCUS RESET - Remove outlines for mouse/touch users */
*:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* 2. KEYBOARD-ONLY FOCUS STYLES - Only show when using keyboard */
*:focus-visible {
    outline: 2px solid var(--accent-primary, #60a5fa) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2) !important;
}

/* 3. ENHANCED BUTTON FOCUS STYLES */
button:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.tab-button:focus-visible,
.social-link:focus-visible,
.theme-toggle:focus-visible,
.mobile-menu-toggle:focus-visible {
    outline: 2px solid var(--accent-primary, #60a5fa) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3) !important;
}

/* 4. FORM ELEMENT FOCUS STYLES */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-primary, #60a5fa) !important;
    outline-offset: 0px !important;
    box-shadow: none !important;
    border-color: var(--accent-primary, #60a5fa) !important;
}

/* 5. LINK FOCUS STYLES */
a:focus-visible,
.nav-links a:focus-visible,
.logo:focus-visible {
    outline: 2px solid var(--accent-primary, #60a5fa) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2) !important;
}

/* 6. CARD AND INTERACTIVE ELEMENT FOCUS */
.issue-card:focus-visible,
.value-card:focus-visible,
.feature-card:focus-visible,
.game-card:focus-visible,
.timeline-item:focus-visible {
    outline: 2px solid var(--accent-primary, #60a5fa) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2) !important;
}

/* 7. MODAL AND OVERLAY FOCUS */
.duplicate-link:focus-visible,
.modal button:focus-visible,
.issue-detail-modal button:focus-visible,
.duplicate-modal button:focus-visible {
    outline: 2px solid var(--accent-primary, #60a5fa) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3) !important;
}

/* 8. VOTE BUTTON FOCUS */
.vote-button:focus-visible {
    outline: 2px solid var(--accent-primary, #60a5fa) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3) !important;
}

/* 9. FEEDBACK FORM FOCUS */
.feedback-type-card:focus-visible,
.platform-btn:focus-visible,
.step-search-input:focus-visible,
.step-search-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #60a5fa) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2) !important;
}

/* 10. DISABLE FOCUS ON NON-INTERACTIVE ELEMENTS */
div:focus,
span:focus,
p:focus,
h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus,
img:focus,
.issue-detail-content:focus,
.issue-detail-content:focus-visible,
.issue-detail-modal:focus,
.issue-detail-backdrop:focus,
.issue-detail-header:focus,
.issue-detail-body:focus,
.issue-detail-main:focus,
.issue-detail-sidebar:focus,
.issue-detail-content-area:focus,
.modal-open .issue-detail-content,
.modal-open .issue-detail-content:focus,
.modal-open .issue-detail-content:focus-visible,
.issue-detail-content[tabindex="-1"]:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* 11. BROWSER-SPECIFIC FIXES */

/* Chrome, Safari, Edge - Remove default blue glow */
*:focus {
    outline: none !important;
}

/* Firefox - Remove default dotted outline */
*::-moz-focus-inner {
    border: 0 !important;
    outline: none !important;
}

/* Safari - Remove default blue glow on buttons */
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus {
    outline: none !important;
    -webkit-appearance: none !important;
}

/* 12. HIGH CONTRAST MODE SUPPORT */
@media (prefers-contrast: more) {
    *:focus-visible {
        outline: 3px solid var(--accent-primary, #60a5fa) !important;
        outline-offset: 3px !important;
        box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.4) !important;
    }
}

/* 13. REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
    *:focus-visible {
        transition: none !important;
        animation: none !important;
    }
}

/* 14. LIGHT THEME ADJUSTMENTS */
[data-theme="light"] *:focus-visible {
    outline-color: #0056b3 !important;
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.2) !important;
}

[data-theme="light"] input:focus-visible,
[data-theme="light"] textarea:focus-visible,
[data-theme="light"] select:focus-visible {
    border-color: #0056b3 !important;
    box-shadow: none !important;
}

/* 15. MOBILE TOUCH IMPROVEMENTS */
@media (max-width: 768px) {
    /* Ensure touch targets are large enough */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    .btn:focus-visible {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Slightly larger focus indicators on mobile */
    *:focus-visible {
        outline-width: 3px !important;
        outline-offset: 3px !important;
        box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.25) !important;
    }
}

/* 16. SPECIFIC ELEMENT OVERRIDES */

/* Remove focus from non-interactive card elements */
.issue-card:not([tabindex]):focus,
.game-card:not([tabindex]):focus,
.value-card:not([tabindex]):focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Only show focus on interactive cards that have tabindex */
.issue-card[tabindex]:focus-visible,
.game-card[tabindex]:focus-visible,
.value-card[tabindex]:focus-visible {
    outline: 2px solid var(--accent-primary, #60a5fa) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.2) !important;
}

/* Remove focus from decorative images */
img:not([tabindex]):focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 17. FALLBACK FOR OLDER BROWSERS */
@supports not selector(:focus-visible) {
    /* For browsers that don't support :focus-visible */
    .js-keyboard-navigation *:focus {
        outline: 2px solid var(--accent-primary, #60a5fa) !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
    }

    .js-mouse-navigation *:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}