/* Modern Focus Management System
 * Uses :focus-visible for better UX - shows focus only for keyboard navigation
 * Provides graceful fallbacks for older browsers
 */

/* Core focus-visible styles for modern browsers */
:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Remove default focus for mouse users in modern browsers */
:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus styles for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Specific focus styles for different element types */

/* Navigation and links */
.nav-links a:focus-visible,
.learn-more-btn:focus-visible,
.service-card:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Buttons */
.cta-primary:focus-visible,
.cta-secondary:focus-visible,
.emergency-btn:focus-visible,
.back-to-top:focus-visible,
.tab-button:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Form elements */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 1px;
    border-color: var(--primary-blue);
}

/* Messaging platform buttons */
.msg-btn:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Service cards focus management */
.service-card {
    position: relative;
}

.service-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(42, 135, 237, 0.2);
}

/* Tab buttons focus management */
.tab-button:focus-visible {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(42, 135, 237, 0.2);
}

/* Fallback for older browsers that don't support :focus-visible */
@supports not selector(:focus-visible) {
    /* Show focus for all focusable elements in older browsers */
    button:focus,
    a:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus {
        outline: 2px solid var(--primary-blue);
        outline-offset: 2px;
    }
    
    /* Enhanced focus for specific elements */
    .nav-links a:focus,
    .learn-more-btn:focus,
    .service-card:focus,
    .cta-primary:focus,
    .cta-secondary:focus,
    .emergency-btn:focus,
    .back-to-top:focus,
    .tab-button:focus,
    .msg-btn:focus {
        outline: 2px solid var(--primary-blue);
        outline-offset: 3px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :focus-visible {
        outline: 3px solid #000000;
        outline-offset: 1px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    :focus-visible {
        transition: none;
    }
    
    .service-card:focus-visible,
    .tab-button:focus-visible {
        transform: none;
    }
}

/* Print styles - hide focus indicators when printing */
@media print {
    :focus-visible {
        outline: none !important;
    }
}