/* ========================================
   Hamburger Menu with slide in container 
=========================================== */

/*
  for more compact mobile menu - setup allows
  integration with Elementor containers
*/



/* ----- .hamburger-icon-mobile-button ----- */

.hamburger-icon-mobile-button {
  cursor: pointer;
  width: 40px; /* Icon width */
  height: 25px; /* Icon height */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 9999; /* Ensure it's on top of everything else */

  /* testing */
  border:1px solid orange !important; 
  background-color: pink !important;
}

.hamburger-icon-mobile-button span {
  display: block;
  height: 4px; /* Line thickness */
  width: 100%; /* Line width */
  background-color: #333; /* Line color */
  transition: transform 0.3s ease, opacity 0.2s ease;
}


/* ----- hamburger change of state into 'X' ----- */

.hamburger-icon-mobile-button.menu-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-icon-mobile-button.menu-open span:nth-child(2) {
  opacity: 0;
}

.hamburger-icon-mobile-button.menu-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ----- .custom-menu-slide-in-container (parent container) ----- */

.custom-menu-slide-in-container {
  position:fixed !important;
  top: 200px !important;
  right:0 !important;
  width: 100% !important; 
  z-index: 9997 !important;
  
  /* testing */
  border:1px solid red !important; 
  background-color: yellow !important;
}


/* ----- .custom-menu-slide-in (child container) ----- */

.custom-menu-slide-in {
  position:fixed !important;
  top: 200px !important;
  right: -200% !important;
  transition: right 0.3s ease !important; 
  z-index: 9998 !important;
  
  /* testing */
  border:1px solid green !important;
  background-color: blue !important;
}

/* Slide-in when menu is open */
.custom-menu-slide-in.menu-open {
   right:0 !important;

}