/**
 * @file
 * We Mega Menu Accessibility Styles - WCAG 2.1 AA Compliant (Clean Version)
 */

/* ==========================================================================
   Screen Reader Only Text
   ========================================================================== */

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

/* ==========================================================================
   Focus Indicator - WCAG 2.4.7
   ========================================================================== */

.navbar-we-mega-menu a:focus,
.navbar-we-mega-menu button:focus,
.navbar-toggle:focus {
  outline: 3px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   Keyboard Accessibility - Submenu Visibility
   ========================================================================== */

/* ONLY open submenus when our JS class is applied */
.we-mega-menu-li.a11y-focus-within > .we-mega-menu-submenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

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

@media (prefers-reduced-motion: reduce) {
  .we-mega-menu-submenu,
  .navbar-toggle .icon-bar {
    transition: none;
  }
}

/* We Mega Menu button reset */
.we-mega-menu-li button.we-megamenu-nolink {
  background: none;
  border: none;
  padding: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.we-mega-menu-li button.we-megamenu-nolink:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

.video-wrapper {
  position: relative;
}

.video-toggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  z-index: 10;
}

.video-toggle:hover,
.video-toggle:focus {
  background: rgba(0, 0, 0, 0.8);
  outline: 2px solid #fff;
  outline-offset: 2px;
}