/**
 * Mobile menu override for Tunmaksan Web
 * This file contains critical fixes for mobile menu at smaller screen sizes
 * Ensures menu doesn't slide off-screen at any width and menu items are visible
 */

/* Critical fix for mobile menu at all mobile sizes */
@media (max-width: 767.98px) {
  /* Core navbar collapse fixes */
  .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    transition: none !important;
    box-sizing: border-box !important;
    z-index: 1050 !important;
    background-color: white !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Force menu to stay within viewport when shown */
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0.5rem !important;
  }
  
  /* Ensure container is properly positioned */
  .navbar > .container {
    position: relative !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Ensure language switcher container is visible */
  .d-lg-none {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    text-align: center !important;
  }
  
  /* Ensure language switcher is properly positioned */
  .language-switcher {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto 1rem auto !important;
    flex-wrap: wrap !important;
  }
  
  /* Ensure language switcher buttons are visible */
  .language-switcher .btn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0.25rem !important;
  }
  
  /* Ensure mobile container is visible */
  .navbar-mobile-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Force navbar-nav to be visible */
  .navbar-nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Ensure nav items are visible */
  .nav-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  
  /* Ensure nav links are visible and properly styled */
  .nav-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    padding: 10px 15px !important;
    color: #333 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }
  
  /* Style for active nav links */
  .nav-link.active {
    background-color: #f8f9fa !important;
    color: #0d6efd !important;
    border-left: 3px solid #0d6efd !important;
  }
}

/* Extra small devices - additional fixes */
@media (max-width: 400px) {
  /* Ensure menu is fully visible on very small screens */
  .navbar-collapse.show {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
  
  /* Smaller font size for very small screens */
  .nav-link {
    font-size: 0.9rem !important;
    padding: 8px 10px !important;
  }
}

/* Extra small devices - additional fixes */
@media (max-width: 400px) {
  /* Smaller font size for very small screens */
  .nav-link {
    font-size: 0.9rem !important;
    padding: 0.5rem 0.25rem !important;
  }
}