/* 
 * MOBILE SUBMENU FIX FOR 3 ITEMS
 * QProNet Sdn Bhd - Current Configuration
 * 
 * Problem: Only shows 2 out of 3 project items on mobile
 * Solution: Adjust max-height and force scrollbar visibility
 */

@media (max-width: 767px) {
  /* Main fix: Enable proper scrolling for 3 items */
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
    max-height: 160px !important; /* Perfect for 3 items (shows all 3) */
    min-height: 50px !important;
    overflow-y: scroll !important; /* Force scrollbar (not 'auto') */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    position: relative !important;
  }

  /* Ensure proper submenu structure */
  .header-area .main-nav .nav li.submenu ul {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    transform: none !important;
    top: 0px !important;
    width: 100% !important;
    box-shadow: none !important;
    height: 0px;
    overflow: hidden;
    transition: none !important;
  }

  /* Consistent item height */
  .header-area .main-nav .nav li.submenu ul li {
    height: auto !important;
    min-height: 50px !important;
    max-height: 50px !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
  }

  /* Submenu item styling */
  .header-area .main-nav .nav li.submenu ul li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px 20px !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 400;
    background: #f7f7f7 !important;
    color: #191a20 !important;
    border-bottom: 1px solid #e7e7e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hover effects */
  .header-area .main-nav .nav li.submenu ul li a:hover {
    background: #eee !important;
    color: #30cf14 !important;
    padding-left: 25px;
  }

  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }

  /* Enhanced scrollbar - visible and touch-friendly */
  .header-area .main-nav .nav li.submenu ul::-webkit-scrollbar {
    width: 8px !important;
  }

  .header-area .main-nav .nav li.submenu ul::-webkit-scrollbar-track {
    background: #e7e7e7;
    border-radius: 4px;
    margin: 2px 0;
  }

  .header-area .main-nav .nav li.submenu ul::-webkit-scrollbar-thumb {
    background: #30cf14; /* QProNet brand green */
    border-radius: 4px;
    border: 1px solid #e7e7e7;
  }

  .header-area .main-nav .nav li.submenu ul::-webkit-scrollbar-thumb:hover {
    background: #015401; /* Darker green */
  }

  /* Prevent desktop hover from interfering */
  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }

  /* Smooth opening animation */
  .header-area .main-nav .nav li.submenu ul.active {
    animation: slideDown 0.3s ease-out;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      max-height: 0;
    }
    to {
      opacity: 1;
      max-height: 160px; /* Match the max-height above */
    }
  }
}

/*
 * CONFIGURATION NOTES:
 * ===================
 * Current: 3 items (Money Tracking, Money Lending, Legal Practice)
 * max-height: 160px (shows all 3 items perfectly)
 * 
 * If you add more items later:
 * - 4 items: Change to 200px
 * - 5 items: Change to 240px
 * - 6 items: Change to 240px
 * 
 * Formula: (number_of_items × 50px) + 10px buffer
 */