/**
 * Accessibility Styles
 * WCAG 2.1 AA Compliant Focus States
 *
 * This file provides accessible focus indicators for all interactive elements.
 * Focus states must have a minimum contrast ratio of 3:1 against adjacent colors.
 */

/* ==========================================================================
   Global Focus States
   ========================================================================== */

/* Default focus style for all focusable elements */
:focus {
    outline: 2px solid var(--focus-color, #3b82f6);
    outline-offset: 2px;
}

/* Remove default focus and add custom for specific elements */
:focus:not(:focus-visible) {
    outline: none;
}

/* Keyboard focus only (modern browsers) */
:focus-visible {
    outline: 2px solid var(--focus-color, #3b82f6);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

/* Input fields, textareas, selects */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable="true"]:focus-visible {
    outline: 2px solid var(--focus-color, #3b82f6);
    outline-offset: 0;
    border-color: var(--focus-color, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Override inline styles that remove outline */
input[style*="outline: none"]:focus-visible,
input[style*="outline:none"]:focus-visible,
textarea[style*="outline: none"]:focus-visible,
textarea[style*="outline:none"]:focus-visible,
select[style*="outline: none"]:focus-visible,
select[style*="outline:none"]:focus-visible {
    outline: 2px solid var(--focus-color, #3b82f6) !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

/* ==========================================================================
   Buttons and Links
   ========================================================================== */

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--focus-color, #3b82f6);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}

/* Primary buttons - white outline for contrast */
.btn-primary:focus-visible,
button[class*="primary"]:focus-visible,
a[class*="primary"]:focus-visible {
    outline-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Custom Components
   ========================================================================== */

/* Cards and interactive containers */
.card:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--focus-color, #3b82f6);
    outline-offset: 2px;
}

/* Dropdown items */
.dropdown-item:focus-visible,
.suggestion-item:focus-visible,
[role="option"]:focus-visible,
[role="menuitem"]:focus-visible {
    outline: 2px solid var(--focus-color, #3b82f6);
    outline-offset: -2px;
    background-color: rgba(59, 130, 246, 0.1);
}

/* ==========================================================================
   Hero Form Components (Preventivatore)
   ========================================================================== */

.form-control-hero:focus,
.form-control-hero:focus-visible,
.hero-input-field input:focus,
.hero-input-field input:focus-visible {
    outline: 2px solid var(--company-primary, #3b82f6) !important;
    outline-offset: 0 !important;
    border-color: var(--company-primary, #3b82f6) !important;
    box-shadow: 0 0 0 4px rgba(var(--company-primary-rgb, 59,130,246), 0.2) !important;
}

/* ==========================================================================
   Skip Links (Screen Reader Navigation)
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--focus-color, #3b82f6);
    color: white;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *:focus,
    *:focus-visible {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
    :focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* ==========================================================================
   Screen Reader Only Utility
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}