/*
 * Mobile Menu Accordion Styles
 * Clean implementation without background bloat on toggle.
 */

.mobile-menu-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mobile-menu-item,
.mobile-menu-sub-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

.mobile-menu-item > a,
.mobile-menu-sub-item > a {
  text-decoration: none;
  background: transparent;
  transition: color 0.3s ease;
  line-height: 1.2;
}

/* Base toggle styles */
.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  margin: 0;
  margin-left: 8px; /* space between text and icon if they are side-by-side */
  transition: color 0.3s ease;
  user-select: none;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
}

/* Ensure no focus outlines on click */
.mobile-menu-toggle:focus {
  outline: none;
}

.mobile-menu-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  display: block;
}

.mobile-menu-toggle .icon-close {
  display: none;
}

/* Active State toggles icons */
.mobile-menu-item.active > .mobile-menu-toggle .icon-open,
.mobile-menu-sub-item.active > .mobile-menu-toggle .icon-open {
  display: none;
}

.mobile-menu-item.active > .mobile-menu-toggle .icon-close,
.mobile-menu-sub-item.active > .mobile-menu-toggle .icon-close {
  display: block;
}

/* Submenu container */
.mobile-menu-submenu {
  width: 100%;
  flex: 1 1 100%; /* forces it to next row below a and toggle in wrapping flex */
  display: none;
  box-sizing: border-box;
}