/* Mobile Navigation Overflow Fix */
@media (max-width: 991px) {
  .wpo-site-header #navbar .navbar-nav {
    height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 60px;
  }
  
  /* Ensure the navbar container has proper height */
  .wpo-site-header #navbar {
    height: 100vh !important;
  }
  
  /* Add smooth scrolling for better UX */
  .wpo-site-header #navbar .navbar-nav {
    scroll-behavior: smooth;
  }
  
  /* Ensure sub-menus don't cause horizontal overflow */
  .wpo-site-header #navbar .sub-menu {
    max-width: 100%;
    word-wrap: break-word;
  }
  
  /* Improve mobile menu item spacing */
  .wpo-site-header #navbar ul li a {
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* Ensure sub-menu items are properly indented */
  .wpo-site-header #navbar ul li .sub-menu li a {
    padding-left: 40px !important;
  }
  
  /* Ensure nested sub-menus are properly indented */
  .wpo-site-header #navbar ul li .sub-menu .sub-menu li a {
    padding-left: 60px !important;
  }
  
  /* Add some breathing room at the top and bottom */
  .wpo-site-header #navbar .navbar-nav {
    padding-top: 20px;
    padding-bottom: 80px;
  }
  
  /* Ensure the close button doesn't interfere with scrolling */
  .wpo-site-header .menu-close {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
  }
}

/* Additional fixes for very small screens */
@media (max-width: 480px) {
  .wpo-site-header #navbar {
    width: 90% !important;
    /* left: -100% !important; */
  }
  
  .wpo-site-header #navbar .navbar-nav {
    padding-left: 15px;
    padding-right: 15px;
  }
}