/**
 * Mobile Menu Styles
 * Shared across all landing pages
 */

/* Mobile menu container */
.mobile-menu {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
  border-top: none !important;
}

.mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

@media (min-width: 768px) {
  .mobile-menu {
    display: none !important;
  }
}

/* Hamburger button animation */
#mobile-menu-btn .hamburger-line {
  transition: all 0.3s ease;
}

#mobile-menu-btn.open .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

#mobile-menu-btn.open .hamburger-line:nth-child(2) {
  opacity: 0;
}

#mobile-menu-btn.open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile nav overrides when scrolled */
@media (max-width: 767px) {
  /* Remove pill styling when menu is open - use full width unified look */
  #main-nav.scrolled.menu-open {
    padding: 0.5rem;
  }

  #main-nav.scrolled.menu-open .nav-inner {
    max-width: 100%;
    border-radius: 1rem 1rem 0 0;
    background: white;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.75rem 1rem;
    box-shadow: none;
  }

  /* Mobile menu - seamlessly connected to header */
  #main-nav.menu-open .mobile-menu {
    margin-top: -1px;
  }

  #main-nav .mobile-menu {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    background: white;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }

  /* Hide shadow when closed */
  #main-nav .mobile-menu:not(.open) {
    box-shadow: none;
  }
}