/*
 * Header Accessibility - Focus Indicators
 * Implements WCAG 2.4.7 Focus Visible (AA) compliance
 * Created for TIK-1669 additional accessibility fixes
 */

/* =================================================================
   Logo Focus Indicator - Issue #1
   ================================================================= */
.header .logo a:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
}

.header .logo a:focus img {
    opacity: 0.9; /* Subtle visual feedback */
}

/* For light backgrounds (if needed) */
.header.light-bg .logo a:focus {
    outline-color: #cf1c35; /* Use red on light backgrounds */
}

/* =================================================================
   Phone Number Focus Indicator - Issue #1
   ================================================================= */
.header .phone a:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 3px;
    text-decoration: underline; /* Additional indicator */
}

.header .phone a:focus span {
    text-decoration: underline;
}

/* For light backgrounds (if needed) */
.header.light-bg .phone a:focus {
    outline-color: #cf1c35;
}

/* =================================================================
   Mobile Menu Toggle Focus Indicator - Issue #5
   ================================================================= */
.header .menu #menu-toggle:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.1);
}

.header .menu #menu-toggle:focus img {
    opacity: 0.9;
}

/* =================================================================
   Search Button/Icon Focus Indicators - Issue #3
   ================================================================= */

/* Desktop search submit button */
.header .search-wrap .js-submit:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.header .search-wrap .js-submit:focus .glyphicon {
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* Mobile search toggle button */
.header .search-wrap.for-mobile button.navbar-toggle:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Search input focus */
.header .search-wrap .js-search.form-control:focus {
    outline: 2px solid #cf1c35;
    outline-offset: 0;
    border-color: #cf1c35;
    box-shadow: 0 0 0 0.2rem rgba(207, 28, 53, 0.25);
}

/* =================================================================
   Navigation Dropdown - Sub-category Focus Distinction - Issue #2
   ================================================================= */

/* Hover state - keep pink background (existing behavior) */
.header .nav-menu ul.nav li .dropdown-menu ul li:hover a {
    background: #cf1c35; 
    color: #fff; 
    border-radius: 3px;
}

/* Focus state - red background with black border for keyboard focus distinction */
.header .nav-menu ul.nav li .dropdown-menu ul li a:focus {
    background: #cf1c35 !important;
    color: #fff !important;
    border-radius: 3px;
    outline: 3px solid #000 !important;
    outline-offset: 2px;
    box-shadow: none;
}

/* Current category indicator (from hover/selection) - no outline */
.header .nav-menu ul.nav li .dropdown-menu ul li.current-cat a {
    background: #cf1c35; 
    color: #fff; 
    border-radius: 3px;
    /* No outline - only background color */
}

/* When focused AND current - still show black border */
.header .nav-menu ul.nav li .dropdown-menu ul li.current-cat a:focus {
    background: #cf1c35; 
    color: #fff; 
    border-radius: 3px;
    outline: 3px solid #000 !important;
    outline-offset: -3px;
    box-shadow: 0 0 0 1px #fff inset;
}

/* Performers column - same focus treatment */
.header .nav-menu .dropdown-menu.combined-column .performers-column ul li a:focus {
    background: #cf1c35; 
    color: #fff; 
    border-radius: 3px;
    outline: 3px solid #000 !important;
    outline-offset: -3px;
    box-shadow: 0 0 0 1px #fff inset;
}

/* Categories column - same focus treatment */
.header .nav-menu .dropdown-menu.combined-column .categories-column ul li a:focus {
    background: #cf1c35; 
    color: #fff; 
    border-radius: 3px;
    outline: 3px solid #000 !important;
    outline-offset: -3px;
    box-shadow: 0 0 0 1px #fff inset;
}

/* =================================================================
   Mobile Menu Items Focus
   ================================================================= */
#sidebar-wrapper .sidebar-nav li a:focus {
    outline: 2px solid #cf1c35;
    outline-offset: 2px;
    background-color: rgba(207, 28, 53, 0.1);
    text-decoration: underline;
}

/* =================================================================
   Typeahead Search Results Focus
   ================================================================= */
.tt-menu .tt-selectable:focus,
.tt-menu .tt-cursor {
    background-color: #f0f0f0;
    outline: 2px solid #cf1c35;
    outline-offset: -2px;
}

.tt-menu .tt-selectable:focus a,
.tt-menu .tt-cursor a {
    color: #cf1c35;
    font-weight: 600;
}

/* =================================================================
   High Contrast Mode Support
   ================================================================= */
@media (prefers-contrast: high) {
    .header .logo a:focus,
    .header .phone a:focus,
    .header .menu #menu-toggle:focus,
    .header .search-wrap .js-submit:focus,
    .header .nav-menu li a:focus {
        outline-width: 3px;
        outline-color: currentColor;
    }
}

/* =================================================================
   Reduced Motion Support
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    .header .logo a:focus img,
    .header .menu #menu-toggle:focus img {
        opacity: 1; /* No opacity transition */
    }
}

/* =================================================================
   Print Styles - Remove focus indicators
   ================================================================= */
@media print {
    .header *:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}