/**
 * Mobile Menu Styles
 * Standalone CSS for hamburger menu functionality (no Webflow dependency)
 */

/* Mobile menu open state - override Webflow's height:0 */
.nav-menu.w--open {
  height: auto !important;
  overflow: visible !important;
  padding: 1rem 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Prevent body scroll when menu is open */
body.nav-open {
  overflow: hidden;
}

/* Hamburger lines - only add transition, don't override existing styles */
.menu-icon .top-line,
.menu-icon .middle-line,
.menu-icon .bottom-line {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger to X animation */
.menu-icon.w--open .top-line {
  transform: rotate(45deg) translate(6px, 6px);
}

.menu-icon.w--open .middle-line {
  opacity: 0;
}

.menu-icon.w--open .bottom-line {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Ensure menu icon is clickable and visible */
.menu-icon {
  cursor: pointer;
  z-index: 100;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  min-height: 24px !important;
  min-width: 2rem !important;
}

/* Ensure hamburger lines are visible (override any hidden overflow issues) */
.menu-icon .top-line,
.menu-icon .middle-line,
.menu-icon .bottom-line {
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  background-color: var(--social-cream, #faf0c8) !important;
  flex-shrink: 0 !important;
}

.menu-icon .middle-line {
  margin: 6px 0 !important;
}