/**
 * @file
 * Accessible Focus Indicators - WCAG 2.2 AA 2.4.11 Compliance
 * Ensures all interactive elements have visible, high-contrast focus indicators
 * that are not obscured by other content.
 *
 * WCAG Success Criteria:
 * - 2.4.11 Focus Not Obscured (Minimum) - Level AA
 * - 2.4.7 Focus Visible - Level AA
 * - 1.4.11 Non-text Contrast - Level AA
 */

/* ==========================================================================
   Global Focus Styles - All Interactive Elements
   ========================================================================== */

/**
 * Default focus indicator for all focusable elements
 * Provides 3:1 contrast ratio against adjacent colors (WCAG 1.4.11)
 */
*:focus {
  outline: 3px solid #0d3328 !important;
  /* MSU Engineering green - high contrast */
  outline-offset: 2px !important;
  /* Space between element and outline */
}

/**
 * Focus-visible (modern browsers only)
 * Only shows focus when navigating with keyboard, not on mouse click
 */
*:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(13, 51, 40, 0.2) !important;
  /* Additional glow for emphasis */
}

/**
 * Remove outline on mouse focus, but keep for keyboard focus
 * This improves UX without sacrificing accessibility
 */
*:focus:not(:focus-visible) {
  outline: none !important;
}

/* ==========================================================================
   Links - Enhanced Focus Indicators
   ========================================================================== */

a:focus,
a:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 3px !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  background-color: rgba(13, 51, 40, 0.05) !important;
}

/* Links within dark backgrounds */
.bg-dark a:focus,
.bg-dark a:focus-visible,
[class*="dark"] a:focus,
[class*="dark"] a:focus-visible {
  outline-color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   Buttons - High Visibility Focus
   ========================================================================== */

button:focus,
button:focus-visible,
.btn:focus,
.btn:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(13, 51, 40, 0.25) !important;
  z-index: 10 !important;
  /* Ensure focus is not obscured */
  position: relative !important;
}

/* Primary buttons - white outline for contrast */
.btn-primary:focus,
.btn-primary:focus-visible {
  outline-color: #ffffff !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3) !important;
}

/* ==========================================================================
   Form Elements - Clear Focus Indicators
   ========================================================================== */

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 1px !important;
  border-color: #0d3328 !important;
  box-shadow: 0 0 0 4px rgba(13, 51, 40, 0.15) !important;
}

/* Checkbox and radio buttons */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus,
input[type="radio"]:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(13, 51, 40, 0.2) !important;
}

/* ==========================================================================
   Paragraph Components - Accessible Focus
   ========================================================================== */

.paragraph:focus,
.paragraph:focus-visible,
.paragraph *:focus,
.paragraph *:focus-visible,
[class*="paragraph--"]:focus,
[class*="paragraph--"]:focus-visible,
[class*="paragraph--"] *:focus,
[class*="paragraph--"] *:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
}

/* Paragraph links */
.paragraph a:focus,
.paragraph a:focus-visible,
[class*="paragraph--"] a:focus,
[class*="paragraph--"] a:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 3px !important;
  background-color: rgba(13, 51, 40, 0.05) !important;
  text-decoration: underline !important;
}

/* Paragraph buttons */
.paragraph button:focus,
.paragraph button:focus-visible,
.paragraph .btn:focus,
.paragraph .btn:focus-visible,
[class*="paragraph--"] button:focus,
[class*="paragraph--"] button:focus-visible,
[class*="paragraph--"] .btn:focus,
[class*="paragraph--"] .btn:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(13, 51, 40, 0.25) !important;
  z-index: 10 !important;
  position: relative !important;
}

/* ==========================================================================
   EGR Menu Component - Clear Focus States
   ========================================================================== */

.egr-menu:focus,
.egr-menu:focus-visible,
.egr-menu *:focus,
.egr-menu *:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
}

.egr-menu__link:focus,
.egr-menu__link:focus-visible,
.egr-menu__item a:focus,
.egr-menu__item a:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
  background-color: rgba(13, 51, 40, 0.05) !important;
  text-decoration: underline !important;
  z-index: 10 !important;
  position: relative !important;
}

/* Preserve egr-menu border colors while adding focus */
.egr-menu__wrapper {
  border-color: #b9f0cd !important;
  border-top-color: #00c24e !important;
}

.egr-menu__item {
  border-color: #b9f0cd !important;
}

.egr-menu--default .egr-menu__list {
  border-top-color: #b9f0cd !important;
  border-bottom-color: #b9f0cd !important;
  border-left: none !important;
  border-right: none !important;
}

/* ==========================================================================
   Navigation Elements - Enhanced Focus
   ========================================================================== */

/* Main navigation */
.nav-link:focus,
.nav-link:focus-visible,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
  background-color: rgba(13, 51, 40, 0.05) !important;
}

/* Dropdown menus */
.dropdown-toggle:focus,
.dropdown-toggle:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(13, 51, 40, 0.2) !important;
}

.dropdown-item:focus,
.dropdown-item:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 1px !important;
  background-color: rgba(13, 51, 40, 0.1) !important;
}

/* Tabs */
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
  border-color: #0d3328 !important;
  z-index: 10 !important;
}

/* ==========================================================================
   Cards and Interactive Components
   ========================================================================== */

.card:focus,
.card:focus-visible,
.card-link:focus,
.card-link:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
  box-shadow: 0 4px 12px rgba(13, 51, 40, 0.3) !important;
}

/* Program cards (mobile) */
.program-card:focus,
.program-card:focus-visible,
.program-card .card:focus,
.program-card .card:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   Accordion Components
   ========================================================================== */

.accordion-button:focus,
.accordion-button:focus-visible,
.accordion-trigger:focus,
.accordion-trigger:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(13, 51, 40, 0.2) !important;
  z-index: 10 !important;
}

/* ==========================================================================
   Modal Dialogs - Focus Within
   ========================================================================== */

.modal:focus-within {
  outline: none !important;
  /* Modal itself doesn't need focus */
}

.modal-content *:focus,
.modal-content *:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
}

.modal .btn-close:focus,
.modal .btn-close:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(13, 51, 40, 0.3) !important;
}

/* ==========================================================================
   Skip Links - High Visibility
   ========================================================================== */

.skip-link:focus,
.skip-link:focus-visible,
.skip-nav:focus,
.skip-nav:focus-visible {
  outline: 4px solid #ffffff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 8px rgba(13, 51, 40, 1) !important;
  background-color: #0d3328 !important;
  color: #ffffff !important;
  z-index: 9999 !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  padding: 10px 20px !important;
}

/* ==========================================================================
   Table Navigation
   ========================================================================== */

table th:focus,
table th:focus-visible,
table td:focus,
table td:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: -2px !important;
  /* Inset outline for table cells */
}

table a:focus,
table a:focus-visible,
table button:focus,
table button:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   Video and Media Elements
   ========================================================================== */

video:focus,
video:focus-visible,
iframe:focus,
iframe:focus-visible,
audio:focus,
audio:focus-visible {
  outline: 4px solid #0d3328 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 8px rgba(13, 51, 40, 0.2) !important;
}

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

@media (prefers-contrast: high) {
  *:focus,
  *:focus-visible {
    outline: 4px solid #000000 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.5) !important;
  }

  .bg-dark *:focus,
  .bg-dark *:focus-visible,
  [class*="dark"] *:focus,
  [class*="dark"] *:focus-visible {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.5) !important;
  }
}

/* ==========================================================================
   Ensure Focus is Never Obscured (WCAG 2.2 AA 2.4.11)
   ========================================================================== */

/**
 * Ensure focused interactive elements have sufficient z-index
 * Only apply to actual focusable elements, not containers
 */
a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
  position: relative;
  z-index: 1;
}

/* Higher z-index for navigation elements */
.nav-link:focus,
.nav-link:focus-visible,
.dropdown-item:focus,
.dropdown-item:focus-visible {
  z-index: 10;
}

/* TB Mega Menu links and buttons */
.tbm-link:focus,
.tbm-link:focus-visible,
.tbm-submenu-toggle:focus,
.tbm-submenu-toggle:focus-visible {
  outline: 3px solid #0d3328 !important;
  outline-offset: 2px !important;
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   Print Styles - Maintain Focus Indicators
   ========================================================================== */

@media print {
  *:focus,
  *:focus-visible {
    outline: 2px solid #000000 !important;
    outline-offset: 1px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

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

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