/* Mobile Mega Menu Improvements */

/* Target mobile screens */
@media (max-width: 576px) {
  /* Fix the menu overlay to be fully scrollable */
  .menu-overlay {
    overflow-y: auto !important;
    padding: 2rem 0 !important;
    max-height: 100vh !important;
    height: auto !important;
    display: block !important; /* Change from flex to block for better mobile layout */
  }
  
  /* Make the wrapper scrollable and take available space */
  .mega-menu-wrapper {
    overflow: visible !important;
    padding-bottom: 2rem !important;
    height: auto !important;
    flex: none !important; /* Remove flex which can cause sizing issues */
  }
  
  /* Fix container to show all content */
  .mega-menu-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem 1rem !important;
    overflow: visible !important;
    height: auto !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Remove internal scrolling and set proper height for sections */
  .mega-menu-section {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
  }
  
  /* Fix menu items list container */
  .mega-menu-items {
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Adjust the section titles to be shorter */
  .mega-menu-title {
    font-size: 18px !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.3rem !important;
    white-space: normal !important;
    width: 100% !important;
  }
  
  /* Make the menu items slightly smaller */
  .mega-menu-items a {
    font-size: 14px !important;
  }
  
  .mega-menu-items li {
    margin-bottom: 0.75rem !important;
  }
  
  /* Make social icons section smaller and ensure it's visible */
  .mega-menu-social {
    padding: 1.5rem 1.5rem 2rem !important;
    margin-top: 0 !important;
    position: static !important;
    height: auto !important;
  }
  
  .social-icons {
    padding-bottom: 1rem !important;
  }
}

/* Extremely small screens - switch back to single column */
@media (max-width: 360px) {
  .mega-menu-container {
    grid-template-columns: 1fr !important;
  }
}