/**
 * Centralized Accessibility Styles
 *
 * WCAG 2.2 Compliance:
 * - 2.4.7 Focus Visible: Focus indicator must be visible
 * - 2.4.13 Focus Appearance: 2px minimum, 3:1 contrast ratio
 * - 1.4.11 Non-text Contrast: UI components need 3:1 contrast
 */

/* ==========================================================================
   FOCUS INDICATOR STYLES
   Using black/white double outline for maximum visibility on any background
   ========================================================================== */

/**
 * Global Focus Reset
 * Only remove default browser outline when :focus-visible is supported
 * This prevents accessibility regression on older browsers
 */
@supports selector(:focus-visible) {
    *:focus:not(:focus-visible) {
        outline: none;
    }
}

/**
 * Custom Focus Indicator
 * Double outline technique: white inner + black outer = visible on any bg
 * Meets WCAG 2.4.13: 2px+ thickness, 3:1+ contrast
 */
*:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
}

/**
 * Button Focus Styles
 * .btn class and native buttons
 */
.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
}

/**
 * Link Focus Styles
 * All anchor elements
 */
a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
}

/**
 * Navigation Link Focus
 * Specific styles for nav items
 */
.menu-items a:focus-visible,
.child-dropdown a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
}

/**
 * Navigation Dropdown Trigger Focus
 * The parent item that opens dropdown
 */
.menu-items > li > span:focus-visible,
.menu-item-has-children > span:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
}

/* ==========================================================================
   ACCORDION FOCUS STYLES
   ========================================================================== */

/**
 * Accordion Header Focus (button-based)
 * For accordion-with-highlights and accordion-with-tabs
 */
.accordion-header:focus-visible,
button.accordion-header:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
}

/**
 * Accordion Header Focus (converted from p to button)
 * For accordion-v1, accordion-v2, degrees-accordion
 */
.acc-header:focus-visible,
.degrees-acc-header:focus-visible,
button.acc-header:focus-visible,
button.degrees-acc-header:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
}

/**
 * Tab Focus Styles
 * For tabbed interfaces within accordions
 */
.tab-header:focus-visible,
.degrees-tab-header:focus-visible,
[role="tab"]:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
}

/* ==========================================================================
   FORM ELEMENT FOCUS STYLES
   ========================================================================== */

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #000;
}

/* ==========================================================================
   SKIP LINK (Screen Reader / Keyboard Navigation)
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    display: none;
}

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

/* ==========================================================================
   SCREEN READER ONLY (Visually Hidden)
   ========================================================================== */

.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;
}

/* ==========================================================================
   REDUCED MOTION
   Respect user preference for reduced motion
   ========================================================================== */

@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;
    }
}

/* ==========================================================================
   HIGH CONTRAST MODE SUPPORT
   ========================================================================== */

@media (forced-colors: active) {
    *:focus-visible {
        outline: 3px solid CanvasText;
        outline-offset: 2px;
    }
}