/* hamburger-fix.css - Critical fix for hamburger menu visibility */

/* Base hamburger styles - always applied regardless of viewport size */
.hamburger {
    display: none; /* Hidden by default on desktop */
}

/* Force hamburger to be visible on mobile screens - high specificity selector */
@media only screen and (max-width: 768px) {
    body .header .container .navbar .hamburger {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 24px !important;
        width: 30px !important;
        padding: 10px !important;
        cursor: pointer !important;
        z-index: 1000 !important;
        background-color: transparent !important; /* Ensure no background */
        position: relative !important;
    }
    
    /* Force bar visibility with high specificity */
    body .header .container .navbar .hamburger .bar {
        display: block !important;
        width: 30px !important;
        height: 3px !important;
        margin: 2px 0 !important;
        background-color: #333 !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Active state transformations */
    body .header .container .navbar .hamburger.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px) !important;
    }
    
    body .header .container .navbar .hamburger.active .bar:nth-child(2) {
        opacity: 0 !important;
    }
    
    body .header .container .navbar .hamburger.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px) !important;
    }
}