/**
 * Mobile Menu Improvements
 * Makes mobile menu more professional and easier to navigate
 *
 * @package Bucksalc
 */

/* Reduce font size for menu items */
#mobile-menu ul li a {
  font-size: 16px !important;
  line-height: 1.4 !important;
  padding: 10px 0 !important;
}

/* Add subtle borders between menu items */
#mobile-menu ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#mobile-menu ul li:last-child {
  border-bottom: none;
}

/* Adjust padding for better spacing */
#mobile-menu .mobile-wrapper ul {
  padding: 15px 30px !important;
}

/* Nested submenu adjustments */
#mobile-menu ul.children,
#mobile-menu ul.sub-menu {
  padding: 15px 30px !important;
  padding-top: 60px !important;
}

/* Make menu arrows more subtle */
#mobile-menu .menu-arrow {
  opacity: 0.7;
  width: 18px !important;
  height: 18px !important;
}

/* Back button wrapper (li element for valid HTML) */
#mobile-menu .menu-back-item {
  position: absolute;
  top: 15px;
  left: 30px;
  z-index: 10;
  border-bottom: none !important;
  list-style: none;
}

/* Adjust back button styling */
#mobile-menu .menu-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 5px 0;
  min-height: 44px;
  min-width: 44px;
}

#mobile-menu .menu-back::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../images/chevron-right.svg) no-repeat center center;
  background-size: contain;
  transform: rotate(180deg);
  filter: brightness(0) invert(1);
}

#mobile-menu .menu-back:hover,
#mobile-menu .menu-back:focus {
  opacity: 0.8;
}

#mobile-menu .menu-back:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Top menu styling improvements */
.mobile-top-menu .top-menu-mobile {
  padding: 15px 30px 0 !important;
  gap: 0 !important;
}

.mobile-top-menu .top-menu-mobile li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-top-menu .top-menu-mobile li:last-child {
  border-bottom: none;
}

.mobile-top-menu .top-menu-mobile li a {
  font-size: 14px !important;
  padding: 10px 0 !important;
  font-weight: 500 !important;
}

/* Improve hover states */
#mobile-menu ul li a:hover {
  background: rgba(255, 255, 255, 0.05);
  padding-left: 10px !important;
  transition: all 0.2s ease;
}

/* Add visual hierarchy for parent items */
#mobile-menu li.page_item_has_children > a,
#mobile-menu li.menu-item-has-children > a {
  font-weight: 500 !important;
}

/* Better spacing for nested items */
#mobile-menu ul.children li a,
#mobile-menu ul.sub-menu li a {
  padding-left: 15px !important;
  font-size: 15px !important;
}

/* Third level nested items */
#mobile-menu ul.children ul.children li a,
#mobile-menu ul.sub-menu ul.sub-menu li a {
  padding-left: 30px !important;
  font-size: 14px !important;
}

/* Maintain solid background for WCAG accessibility (color contrast) */
#mobile-menu {
  background: var(--color-secondary) !important;
}

/* Improve menu wrapper scrolling */
#mobile-menu .mobile-wrapper {
  -webkit-overflow-scrolling: touch;
}

/* Add slight shadow to top menu separator */
.mobile-top-menu {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
}

/* Compact the menu vertically */
#mobile-menu ul {
  margin: 0 !important;
}