/**
 * Tours & Tabs ADA Accessibility Styles
 *
 * Focus styles, visual enhancements, and screen reader utilities
 * for INEL Elements Box Plugin tours (vertical tabs) and tabs (horizontal tabs).
 *
 * @package Blade Child Theme
 * @since   1.0.0
 * @see     TOURS-ADA.md for documentation
 */

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

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

/* ==========================================================================
   Focus Styles - WCAG 2.4.7 Focus Visible
   ========================================================================== */

/**
 * High-visibility focus ring for keyboard navigation
 * Uses LA County orange color scheme for consistency
 */
.inel_tours .inel_tour_title:focus,
.inel_tour_title:focus,
.inel_tour_title[role="tab"]:focus,
.inel_tabs .inel_tab_title:focus,
.inel_tab_title:focus,
.inel_tab_title[role="tab"]:focus {
    outline: 3px solid #F5A623 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.25) !important;
    position: relative;
    z-index: 10;
}

/**
 * Keyboard-only focus styles (for browsers supporting :focus-visible)
 */
.inel_tours .inel_tour_title:focus-visible,
.inel_tour_title:focus-visible,
.inel_tour_title[role="tab"]:focus-visible,
.inel_tabs .inel_tab_title:focus-visible,
.inel_tab_title:focus-visible,
.inel_tab_title[role="tab"]:focus-visible {
    outline: 3px solid #F5A623 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.25) !important;
}

/**
 * Focus state via JS class (backup for CSS :focus issues)
 */
.inel_tour_title.grve-tour-focused,
.inel_tab_title.grve-tour-focused {
    outline: 3px solid #F5A623 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(245, 166, 35, 0.25) !important;
    position: relative;
    z-index: 10;
}

/**
 * Focus styles for links and interactive elements within panels
 */
.inel_tour_content a:focus,
.inel_tour_content button:focus,
.inel_tab_content a:focus,
.inel_tab_content button:focus {
    outline: 2px solid #F5A623 !important;
    outline-offset: 2px !important;
}

.inel_tour_content a:focus-visible,
.inel_tour_content button:focus-visible,
.inel_tab_content a:focus-visible,
.inel_tab_content button:focus-visible {
    outline: 2px solid #F5A623 !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   Cursor Styles - Visual Affordance
   ========================================================================== */

/**
 * Indicate clickability/interactivity on tabs
 */
.inel_tour_title,
.inel_tour_title[role="tab"],
.inel_tab_title,
.inel_tab_title[role="tab"] {
    cursor: pointer;
}

/**
 * Hover state for tabs
 */
.inel_tour_title:hover:not(.inel_tour_title_current),
.inel_tab_title:hover:not(.inel_tab_title_current) {
    background-color: rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   Selected Tab Visual Enhancement
   ========================================================================== */

/**
 * Ensure selected tab has sufficient visual distinction
 */
.inel_tour_title[aria-selected="true"],
.inel_tour_title_current[role="tab"],
.inel_tab_title[aria-selected="true"],
.inel_tab_title_current[role="tab"] {
    font-weight: 600;
}

/* ==========================================================================
   Hidden Panel Styles
   ========================================================================== */

/**
 * Ensure hidden panels are properly hidden
 * The plugin uses display:none, but we add aria-hidden support
 * Also prevent any focus/interaction with hidden panels
 */
.inel_tour_content[aria-hidden="true"],
.inel_tab_content[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
}

/**
 * Ensure elements in hidden panels cannot receive focus visually
 * (tabindex=-1 is set via JS, but this is a visual backup)
 */
.inel_tour_content[aria-hidden="true"] *,
.inel_tab_content[aria-hidden="true"] * {
    pointer-events: none !important;
}

/**
 * Inert polyfill styles for browsers that don't support inert attribute
 */
.inel_tour_content[inert],
.inel_tab_content[inert] {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

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

@media (forced-colors: active) {
    .inel_tour_title:focus,
    .inel_tour_title.grve-tour-focused,
    .inel_tab_title:focus,
    .inel_tab_title.grve-tour-focused {
        outline: 3px solid CanvasText !important;
        outline-offset: 2px !important;
        box-shadow: none !important;
    }

    .inel_tour_content[role="tabpanel"]:focus,
    .inel_tab_content[role="tabpanel"]:focus {
        outline: 2px solid CanvasText !important;
        outline-offset: 2px !important;
    }

    .inel_tour_title[aria-selected="true"],
    .inel_tab_title[aria-selected="true"] {
        forced-color-adjust: none;
        background-color: Highlight !important;
        color: HighlightText !important;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .inel_tours,
    .inel_tours *,
    .inel_tabs,
    .inel_tabs *,
    .inel_tour_title,
    .inel_tour_content,
    .inel_tab_title,
    .inel_tab_content {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Show all tab panels when printing */
    .inel_tour_content[aria-hidden="true"],
    .inel_tab_content[aria-hidden="true"] {
        display: block !important;
        visibility: visible !important;
    }

    .inel_tour_content[inert],
    .inel_tab_content[inert] {
        display: block !important;
    }

    /* Remove focus indicators in print */
    .inel_tour_title:focus,
    .inel_tour_content:focus,
    .inel_tab_title:focus,
    .inel_tab_content:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}