/* ENHANCED hamburger-mobile-fix.css - Advanced fixes for mobile hamburger menu issues */

/* Target all mobile devices specifically with higher specificity */
@media only screen and (max-width: 768px) {
    /* Ensure hamburger display on all mobile browsers with maximum specificity */
    html body header.header .container nav.navbar .hamburger,
    html body .header .container .navbar .hamburger,
    header .hamburger,
    .navbar .hamburger,
    .hamburger {
        /* Basic structural styling */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        width: 30px !important;
        height: 24px !important;
        padding: 0 !important;
        margin: 10px !important;
        
        /* Positioning */
        position: relative !important;
        z-index: 1000 !important;
        
        /* Interaction */
        cursor: pointer !important;
        pointer-events: auto !important;
        
        /* Appearance */
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        min-height: 24px !important; /* Prevent collapsing */
        isolation: isolate !important; /* Create stacking context */
    }
    
    /* Force spans to be visible at all times with maximum specificity */
    html body header.header .container nav.navbar .hamburger span,
    html body .header .container .navbar .hamburger span,
    header .hamburger span,
    .navbar .hamburger span,
    .hamburger span,
    .hamburger span:nth-child(1),
    .hamburger span:nth-child(2),
    .hamburger span:nth-child(3) {
        /* Basic structural styling */
        display: block !important;
        width: 100% !important;
        height: 4px !important;
        
        /* Positioning */
        position: relative !important;
        z-index: 1001 !important;
        margin: 3px 0 !important;
        
        /* Appearance */
        background-color: #ffffff !important;
        border-radius: 3px !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        
        /* Prevent flicker */
        will-change: transform, opacity !important;
    }
      /* Better spacing between spans with exact measurements */
    .hamburger span:nth-child(1) {
        margin: 0 0 4px 0 !important;
    }
    
    .hamburger span:nth-child(2) {
        margin: 4px 0 !important;
    }
    
    .hamburger span:nth-child(3) {
        margin: 4px 0 0 0 !important;
    }
    
    /* Safari and iOS specific fixes */
    @supports (-webkit-touch-callout: none) {
        .hamburger {
            transform: translateZ(0) !important;
            -webkit-transform: translateZ(0) !important;
            -webkit-backface-visibility: hidden !important;
            -webkit-perspective: 1000 !important;
        }
        
        .hamburger span {
            -webkit-transform: translateZ(0) !important;
            -webkit-backface-visibility: hidden !important;
            -webkit-perspective: 1000 !important;
        }
    }
    
    /* Chrome mobile specific fixes */
    @supports (-webkit-appearance: none) {
        .hamburger {
            -webkit-backface-visibility: hidden !important;
            -webkit-transform-style: preserve-3d !important;
        }
        
        .hamburger span {
            -webkit-backface-visibility: hidden !important;
            -webkit-transform-style: preserve-3d !important;
        }
    }
    
    /* Firefox mobile specific fixes */
    @-moz-document url-prefix() {
        .hamburger {
            transform-style: preserve-3d !important;
            backface-visibility: hidden !important;
        }
        
        .hamburger span {
            transform-style: preserve-3d !important;
            backface-visibility: hidden !important;
        }
    }
    
    /* Force proper animation in active state with maximum specificity */
    html body .hamburger.active span:nth-child(1),
    .hamburger.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-6px, 6px) !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    html body .hamburger.active span:nth-child(2),    .hamburger.active span:nth-child(2) {
        opacity: 0 !important;
        display: block !important;
        visibility: hidden !important;
    }
    
    html body .hamburger.active span:nth-child(3),
    .hamburger.active span:nth-child(3) {
        transform: rotate(45deg) translate(-6px, -6px) !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Handle touch events better on mobile */
    .hamburger {
        touch-action: manipulation !important;
    }
    
    /* Add a larger click area for better touch handling */
    .hamburger::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: -10px !important;
        left: -10px !important;
        right: -10px !important;
        bottom: -10px !important;
        z-index: -1 !important;
    }
      /* Ensure all transitions are smooth but don't interfere with visibility */
    .hamburger, 
    .hamburger span {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        animation: none !important;
    }
    
    /* Make sure modal backdrop sits behind the hamburger but above the content */
    .menu-backdrop {
        z-index: 98 !important;
    }
}

/* Special handling for landscape mode */
@media only screen and (max-width: 768px) and (orientation: landscape) {
    /* Adjust hamburger position for landscape */
    .hamburger {
        top: 0 !important;
        right: 10px !important;
        position: absolute !important;
        margin: 15px !important;
    }
    
    /* Ensure the menu opens properly in landscape */
    .nav-menu.active {
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    
    /* Keep hamburger visible during scroll */
    .header {
        position: relative !important;
    }
}
    }
    
    .hamburger.active span:nth-child(3) {
        transform: rotate(45deg) translate(-6px, -6px) !important;
    }
}

/* Handle landscape orientation specifically */
@media only screen and (max-width: 768px) and (orientation: landscape) {
    .hamburger {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }
}