/**
 * Responsive Menu Styles
 * Fixes for mobile/tablet menu display issues after migration from The Mag theme
 */

/* Mobile menu container styles */
.mobile-main-menu.we-mobile-megamenu-active {
  background-color: #263238;
  padding: 0;
  padding-top: 50px; /* Space for close button */
  width: 70%;
  max-width: 320px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

/* Close button container */
.mobile-main-menu .close-button,
.mobile-main-menu .navbar-toggle,
.mobile-main-menu .close-menu,
.mobile-main-menu .mobile-menu-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 10000;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Close button icon (X) */
.mobile-main-menu .close-button::before,
.mobile-main-menu .close-button::after,
.mobile-main-menu .navbar-toggle::before,
.mobile-main-menu .navbar-toggle::after,
.mobile-main-menu .close-menu::before,
.mobile-main-menu .close-menu::after,
.mobile-main-menu .mobile-menu-close::before,
.mobile-main-menu .mobile-menu-close::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}

.mobile-main-menu .close-button::before,
.mobile-main-menu .navbar-toggle::before,
.mobile-main-menu .close-menu::before,
.mobile-main-menu .mobile-menu-close::before {
  transform: rotate(45deg);
}

.mobile-main-menu .close-button::after,
.mobile-main-menu .navbar-toggle::after,
.mobile-main-menu .close-menu::after,
.mobile-main-menu .mobile-menu-close::after {
  transform: rotate(-45deg);
}

/* Hover state for close button */
.mobile-main-menu .close-button:hover::before,
.mobile-main-menu .close-button:hover::after,
.mobile-main-menu .navbar-toggle:hover::before,
.mobile-main-menu .navbar-toggle:hover::after,
.mobile-main-menu .close-menu:hover::before,
.mobile-main-menu .close-menu:hover::after,
.mobile-main-menu .mobile-menu-close:hover::before,
.mobile-main-menu .mobile-menu-close:hover::after {
  background-color: #e74c3c;
}

/* Main menu list styles */
.mobile-main-menu .we-mega-menu-ul {
  background-color: #263238;
  margin: 0;
  padding: 0;
}

/* Top level menu items */
.mobile-main-menu .we-mega-menu-li[data-level="0"] {
  display: block;
  width: 100%;
  border-bottom: 1px solid #37474f;
  margin: 0;
  padding: 0;
}

/* Hide "Previous Topics" menu item */
.mobile-main-menu .we-mega-menu-li[data-level="0"].dropdown-menu,
.mobile-main-menu .we-mega-menu-li[data-level="0"][data-submenu="1"] {
  display: none !important;
}

/* Top level menu links */
.mobile-main-menu .we-mega-menu-li[data-level="0"] > a {
  display: block;
  padding: 14px 20px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Hover state for top level links */
.mobile-main-menu .we-mega-menu-li[data-level="0"] > a:hover,
.mobile-main-menu .we-mega-menu-li[data-level="0"] > a:focus {
  background-color: #37474f;
  color: #ffffff;
}

/* Active menu item */
.mobile-main-menu .we-mega-menu-li.active > a,
.mobile-main-menu .we-mega-menu-li.active-trail > a {
  background-color: #37474f;
  color: #ffffff;
}

/* Dropdown/submenu container - HIDDEN (only show first level) */
.mobile-main-menu .we-mega-menu-submenu {
  display: none !important;
}

/* Keep submenus hidden even when parent is active/expanded */
.mobile-main-menu .we-mega-menu-li.open > .we-mega-menu-submenu,
.mobile-main-menu .we-mega-menu-li:hover > .we-mega-menu-submenu {
  display: none !important;
}

/* Submenu inner container */
.mobile-main-menu .we-mega-menu-submenu-inner {
  padding: 0;
}

/* Submenu row */
.mobile-main-menu .we-mega-menu-row {
  margin: 0;
  padding: 0;
}

/* Submenu column */
.mobile-main-menu .we-mega-menu-col {
  padding: 0;
}

/* Submenu list */
.mobile-main-menu .subul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Second level menu items */
.mobile-main-menu .we-mega-menu-li[data-level="1"] {
  display: block;
  width: 100%;
  border-bottom: 1px solid #2c3e50;
  margin: 0;
  padding: 0;
}

/* Second level menu links - HIDDEN */
.mobile-main-menu .we-mega-menu-li[data-level="1"] {
  display: none !important;
}

.mobile-main-menu .we-mega-menu-li[data-level="1"] > a {
  display: none !important;
}

/* Remove default Bootstrap navbar styles that conflict */
.mobile-main-menu.navbar-default {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  min-height: auto;
}

.mobile-main-menu .navbar-nav {
  margin: 0;
}

/* Container fluid adjustments */
.mobile-main-menu .container-fluid {
  padding: 0;
}

/* Ensure no floating elements */
.mobile-main-menu .nav-tabs,
.mobile-main-menu .nav {
  float: none;
}

/* Remove tab styling */
.mobile-main-menu .nav-tabs {
  border-bottom: none;
}

.mobile-main-menu .nav-tabs > li {
  float: none;
  margin-bottom: 0;
}

.mobile-main-menu .nav-tabs > li > a {
  border: none;
  border-radius: 0;
  margin-right: 0;
}

/* Dropdown toggle icon - HIDDEN (no submenus shown) */
.mobile-main-menu .we-mega-menu-li.dropdown-menu > a::after {
  display: none;
}

/* Media query for tablets and larger mobile devices */
@media (max-width: 991px) {
  .mobile-main-menu .we-mega-menu-li[data-level="0"] > a {
    font-size: 15px;
    padding: 15px 20px;
  }
}

/* Media query for smaller mobile devices */
@media (max-width: 575px) {
  .mobile-main-menu .we-mega-menu-li[data-level="0"] > a {
    font-size: 14px;
    padding: 14px 15px;
  }
}

/* Fix for nolink elements (like "Previous Topics") */
.mobile-main-menu .we-megamenu-nolink {
  cursor: pointer;
}

/* Ensure proper stacking and no overlaps */
.mobile-main-menu * {
  box-sizing: border-box;
}

.mobile-main-menu .we-mega-menu-li {
  position: relative;
  z-index: 1;
}

/* Remove any transforms that might cause issues */
.mobile-main-menu .we-mega-menu-ul,
.mobile-main-menu .we-mega-menu-li,
.mobile-main-menu .we-mega-menu-submenu {
  transform: none !important;
}