/* mobile-navbar-fix.css
   Restores Bootstrap 5 collapse behavior on small screens by overriding legacy off-canvas rules
*/

@media (max-width: 991.98px) {
  /* Unfix the legacy off-canvas navbar so Bootstrap's collapse works */
  .navbar-collapse {
    position: static !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Ensure collapsed state matches Bootstrap expectations */
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-collapse.collapse.show {
    display: block !important;
  }

  /* Make sure menu-open class doesn't force off-canvas behavior */
  .navbar-collapse.menu-open {
    left: auto !important;
  }
  
  /* Ensure navbar container is flexible on mobile */
  .navbar .container {
    flex-wrap: wrap !important;
  }
  
  .navbar-nav {
    width: 100%;
  }
}

/* Extra small devices (phones) */
@media (max-width: 576px) {
  .navbar-nav .nav-link {
    font-size: 0.9rem !important;
    padding: 0.5rem 1rem !important;
  }
  
  .btn-contact {
    font-size: 0.85rem !important;
    padding: 0.45rem 1rem !important;
  }
}

/* Small devices (tablets) */
@media (min-width: 577px) and (max-width: 991.98px) {
  .navbar-nav .nav-link {
    font-size: 0.92rem !important;
  }
}