/**
 * Civic Mega Menu - WCAG Button Fixes
 * CLEAN VERSION - Replace entire file contents
 */

/* ================================================
   WE-MEGAMENU BUTTON FIX - WCAG 2.1 AA
   ================================================ */

/* Level 0 (top-level) buttons - MUST match anchor styling */
@media (min-width: 992px) {
  .we-mega-menu-ul > .we-mega-menu-li > button,
  .we-mega-menu-ul > .we-mega-menu-li > button.we-megamenu-nolink,
  .we-mega-menu-ul > .we-mega-menu-li > button.we-mega-menu-li {
    background-color: #eff0f1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin-right: 0 !important;
    color: #666 !important;
    font-size: .8125rem !important;
    font-family: Quicksand, sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 1.125rem 1.5625rem !important;
    cursor: pointer !important;
    display: block !important;
    text-align: left !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  /* Dropdown menu buttons need extra right padding for arrow */
  .we-mega-menu-ul > .dropdown-menu > button,
  .we-mega-menu-ul > .dropdown-menu > button.we-megamenu-nolink {
    padding-right: 2.375rem !important;
  }

  /* Hover and focus states for top-level buttons */
  .we-mega-menu-ul > .we-mega-menu-li > button:focus,
  .we-mega-menu-ul > .we-mega-menu-li > button:hover {
    background: rgba(0, 0, 0, .1) !important;
    border: 0 !important;
    color: #666 !important;
    text-decoration: none !important;
    text-shadow: initial !important;
  }
}

/* Focus outline - matches existing navbar focus styles */
.navbar-we-mega-menu button:focus {
  outline: 3px solid #005fcc !important;
  outline-offset: 2px !important;
}

/* Submenu level buttons */
@media (min-width: 992px) {
  .we-mega-menu-submenu li.we-mega-menu-li button,
  .we-mega-menu-submenu li.we-mega-menu-li button.we-megamenu-nolink {
    border-radius: 0 !important;
    color: #666 !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 8px 15px !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .we-mega-menu-submenu li.we-mega-menu-li button:focus,
  .we-mega-menu-submenu li.we-mega-menu-li button:hover {
    background-color: transparent !important;
    color: #000 !important;
  }
}

/* Nav tabs subul buttons */
.we-mega-menu-submenu .nav.nav-tabs.subul li:not(.we-mega-menu-group) > button.we-mega-menu-li,
.we-mega-menu-submenu .nav.nav-tabs.subul li:not(.we-mega-menu-group) > button.we-megamenu-nolink {
  padding-left: 10px !important;
  transition: background-color 0.3s ease !important;
  border-bottom: 1px solid #ddd !important;
  background-clip: padding-box !important;
  background: transparent !important;
  font-family: 'Open Sans', sans-serif !important;
  cursor: pointer !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

/* ================================================
   CIVIC MEGA MENU (Mobile) - Button Fixes
   ================================================ */
.civic-mega-menu button.menu-item,
.civic-mega-menu button.menu-item--nolink {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
}

.civic-mega-menu button.menu-item:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
  .we-mega-menu-ul button {
    transition: none !important;
  }
}

@media (prefers-contrast: high) {
  .civic-mega-menu button.menu-item:focus,
  .we-mega-menu-ul button:focus {
    outline: 3px solid currentColor !important;
    outline-offset: 3px !important;
  }
}

/* Dropdown arrow for buttons - match anchor/span styling exactly */
@media (min-width: 992px) {
  .we-mega-menu-ul .dropdown-menu > button {
    position: relative;
  }
  
  .we-mega-menu-ul .dropdown-menu > button::before {
    content: '';
    position: absolute;
    right: .9375rem;
    top: 50%;
    margin-top: -.3125rem;
    width: .6875rem;
    height: .6875rem;
    background-image: url(/modules/contrib/we_megamenu/assets/images/ico-arrow.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    opacity: 1;
  }
}
/* Submenu buttons with children - right arrow instead of down */
@media (min-width: 992px) {
  .we-mega-menu-submenu .dropdown-menu > button::before,
  .we-mega-menu-submenu li.dropdown-menu > button::before {
    content: '';
    position: absolute;
    right: .9375rem;
    top: 50%;
    margin-top: -.3125rem;
    width: .6875rem;
    height: .6875rem;
    background-image: url(/modules/contrib/we_megamenu/assets/images/ico-arrow-right.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
  }
  
  .we-mega-menu-submenu .dropdown-menu > button,
  .we-mega-menu-submenu li.dropdown-menu > button {
    position: relative;
  }
}

/* Submenu buttons with children - rotate arrow to point right */
@media (min-width: 992px) {
  .we-mega-menu-submenu .dropdown-menu > button,
  .we-mega-menu-submenu li.dropdown-menu > button {
    position: relative;
  }

  .we-mega-menu-submenu .dropdown-menu > button::before,
  .we-mega-menu-submenu li.dropdown-menu > button::before {
    content: '';
    position: absolute;
    right: .3125rem;
    top: 50%;
    margin-top: -.3125rem;
    width: .6875rem;
    height: .6875rem;
    background-image: url(/modules/contrib/we_megamenu/assets/images/ico-arrow.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }
}

/* Submenu level buttons - match anchor font */
@media (min-width: 992px) {
  .we-mega-menu-submenu li.we-mega-menu-li button,
  .we-mega-menu-submenu li.we-mega-menu-li button.we-megamenu-nolink {
    border-radius: 0 !important;
    color: #666 !important;
    font-family: Quicksand, sans-serif !important;
    font-weight: 700 !important;
    font-size: .8125rem !important;
    border: 0 !important;
    background: transparent !important;
    padding: 8px 15px !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .we-mega-menu-submenu li.we-mega-menu-li button:focus,
  .we-mega-menu-submenu li.we-mega-menu-li button:hover {
    background-color: transparent !important;
    color: #000 !important;
  }
}