/* Our Story Page - Hamburger Menu Consistency Fix
   This ensures the hamburger menu on the Our Story page looks identical to the homepage */

/* Only apply these styles on mobile devices */
@media screen and (max-width: 991px) {
  /* Force the correct hamburger menu styling */
  .menu-button, .w-nav-button {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    z-index: 2000 !important;
  }
  
  /* Completely hide the default menu icon */
  .w-icon-nav-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }
  
  /* Hide any elements inside the button */
  .menu-button *, .w-nav-button * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }
  
  /* Force hamburger icon */
  .menu-button:after, .w-nav-button:after {
    content: "☰" !important;
    font-size: 24px !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Ensure the menu button doesn't have any extra borders or decorations */
  .menu-button, .w-nav-button {
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: auto !important;
  }
  
  /* Ensure the right styling for open state */
  .menu-button.w--open, .w-nav-button.w--open {
    background-color: transparent !important;
  }
  
  /* Replace icon when menu is open */
  .menu-button.w--open:after, .w-nav-button.w--open:after {
    content: "✕" !important; /* Use X instead of hamburger when open */
  }
}