/* Mobile Menu Fix - Gulf Rubber Theme */
/* Comprehensive fix for mobile menu scrolling and CTA visibility issues */

/* Mobile Menu Positioning Fix */
@media (max-width: 991px) {
  .site-header__menu {
    /* Ensure proper positioning and scrolling */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    z-index: 99 !important;
    
    /* Proper padding to account for header height */
    padding-top: 60px !important; /* Increased to ensure CTA is visible */
    padding-bottom: 40px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    
    /* Ensure scrolling works properly */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    
    /* Visual styling */
    background: #fff !important;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1) !important;
    
    /* Initially hidden above viewport */
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    
    /* Smooth transitions */
    transition: opacity 300ms ease, transform 300ms ease !important;
  }
  
  /* When menu is open */
  body.menu-open .site-header__menu {
    transform: translateY(0%) !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }
  
  /* Prevent body scroll when menu is open */
  body.menu-open {
    overflow: hidden !important;
  }
  
  /* Hide CTA by default, only show when menu is open */
  .site-header__cta {
    display: none !important;
  }
  
  /* Show CTA only when menu is open and position it at the end */
  body.menu-open .site-header__cta {
    display: block !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    width: 100% !important;
    order: 999; /* Ensure it appears at the end */
  }
  
  body.menu-open .site-header__cta .btn {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
  
  /* Ensure menu items are properly spaced */
  .site-header__menu nav > ul li.nav-depth--0 {
    padding: 1.5rem 0 !important;
    border-bottom: 1px solid #eee !important;
  }
  
  /* Make sure search form is visible */
  .site-header__search {
    margin-bottom: 20px !important;
    width: 100% !important;
  }
  
  /* Fix hamburger button - make it larger and ensure it's above overlay */
  .site-header__hamburger {
    width: 40px !important;
    height: 30px !important;
    z-index: 101 !important; /* Higher than menu overlay */
    position: relative !important;
  }
  
  .site-header__hamburger span {
    height: 3px !important;
    width: 100% !important;
    background: #333 !important;
    border-radius: 3px !important;
    position: absolute !important;
    transition: all 200ms ease !important;
  }
  
  .site-header__hamburger span:nth-child(1) {
    top: 0 !important;
  }
  
  .site-header__hamburger span:nth-child(2) {
    top: 13px !important;
  }
  
  .site-header__hamburger span:nth-child(3) {
    top: 26px !important;
  }
  
  /* Hamburger animation when menu is open */
  body.menu-open .site-header__hamburger span:nth-child(1) {
    top: 13px !important;
    transform: rotate(45deg) !important;
  }
  
  body.menu-open .site-header__hamburger span:nth-child(2) {
    opacity: 0 !important;
  }
  
  body.menu-open .site-header__hamburger span:nth-child(3) {
    top: 13px !important;
    transform: rotate(-45deg) !important;
  }
}

/* Additional mobile breakpoint for smaller screens */
@media (max-width: 768px) {
  .site-header__menu .container, 
  .site-header__menu nav {
    height: fit-content !important;
    margin-left: 0px !important;
    margin-top: 9px !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* Desktop positioning - restore original behavior */
@media (min-width: 992px) {  
  body.menu-open .site-header__menu {
    transform: translateY(0%) !important;
  }
}