/**
 * Accessibility Styles
 * WCAG 2.1 AA Compliant Focus States
 *
 * Focus ring colour is derived from the SolarCRM accent token (--color-ring).
 * Hard-coded #3b82f6 blue references have been replaced with token values
 * so that white-label overrides and dark-mode correctly re-tint focus rings.
 */

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

/* Default focus style for all focusable elements */
:focus {
    outline: 2px solid var(--color-accent-fg, #082B4D);
    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(--color-accent-fg, #082B4D);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-ring, rgba(8, 43, 77, 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(--color-accent-fg, #082B4D);
    outline-offset: 0;
    border-color: var(--color-accent-fg, #082B4D) !important;
    box-shadow: 0 0 0 3px var(--color-ring, rgba(8, 43, 77, 0.25));
}

/* 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(--color-accent-fg, #082B4D) !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 3px var(--color-ring, rgba(8, 43, 77, 0.25)) !important;
}

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

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--color-accent-fg, #082B4D);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-ring, rgba(8, 43, 77, 0.25));
}

/* Primary buttons — white outline for contrast against dark accent fill */
.btn-primary:focus-visible,
button[class*="primary"]:focus-visible,
a[class*="primary"]:focus-visible {
    outline-color: var(--color-on-accent, #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(--color-accent-fg, #082B4D);
    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(--color-accent-fg, #082B4D);
    outline-offset: -2px;
    background-color: var(--color-navy-50, rgba(8, 43, 77, 0.06));
}

/* ==========================================================================
   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, var(--color-accent-fg, #082B4D)) !important;
    outline-offset: 0 !important;
    border-color: var(--company-primary, var(--color-accent-fg, #082B4D)) !important;
    box-shadow: 0 0 0 4px var(--color-ring, rgba(8, 43, 77, 0.2)) !important;
}

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

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-accent, #082B4D);
    color: var(--color-on-accent, #ffffff);
    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
   ========================================================================== */

/* Global guard: suppress all non-essential animation and transition when
   the user has requested reduced motion at the OS level (WCAG 2.1 SC 2.3.3).
   Near-zero durations are used instead of zero so that JS transitionend
   and animationend callbacks still fire, avoiding broken interactions. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Focus-specific reduced-motion: remove transitions on focus rings so that
   outline and box-shadow appear instantly without any animated entry. */
@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;
}