/* Enhanced Direct hamburger fix - Critical CSS with maximum specificity to force hamburger visibility */

/* Shows hamburger directly in HTML rather than waiting for CSS load */
.hamburger {
    position: relative !important;
    visibility: visible !important;
    width: 30px !important;
    height: 24px !important;
    padding: 10px !important;
    margin-right: 10px !important;
    z-index: 1000 !important;
    cursor: pointer !important;
    pointer-events: auto !important; /* Ensure clickable */
}

/* We need this for desktop mode - hide by default */
@media screen and (min-width: 769px) {
    .hamburger {
        display: none !important;
    }
}

/* Force visibility on mobile with extreme specificity */
@media screen and (max-width: 768px) {
    html body .header .container .navbar .hamburger,
    html body header.header .container nav.navbar .hamburger,
    html body .header .container nav .hamburger,
    html body header .container nav .hamburger,
    .hamburger,
    [class*="hamburger"] {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        height: 24px !important;
        width: 30px !important;
        padding: 10px !important;
        cursor: pointer !important;
        background-color: transparent !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        min-height: 24px !important;
    }
    
    /* Target direct spans for modern implementation */
    html body .header .container .navbar .hamburger span,
    html body header.header .container nav.navbar .hamburger span,
    html body .header .container nav .hamburger span,
    html body header .container nav .hamburger span,
    .hamburger span {
        display: block !important;
        width: 100% !important;
        height: 4px !important;
        margin: 3px 0 !important;
        background-color: #333 !important;
        border-radius: 3px !important;
        position: relative !important;
        z-index: 1001 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }
    
    /* Legacy support for .bar class */
    html body .header .container .navbar .hamburger .bar,
    html body header.header .container nav.navbar .hamburger .bar,
    html body .header .container nav .hamburger .bar,
    html body header .container nav .hamburger .bar,
    .hamburger .bar {
        display: block !important;
        width: 100% !important;
        height: 4px !important;
        margin: 3px 0 !important;
        background-color: #333 !important;        transition: transform 0.3s ease, opacity 0.3s ease !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        border-radius: 3px !important;
        z-index: 1001 !important;
    }
    
    /* Active state - even when active, ensure visibility */
    html body .header .container .navbar .hamburger.active span:nth-child(1),
    html body header.header .container nav.navbar .hamburger.active span:nth-child(1),
    .hamburger.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-6px, 6px) !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    html body .header .container .navbar .hamburger.active span:nth-child(2),
    html body header.header .container nav.navbar .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(2) {
        opacity: 0 !important;
        display: block !important;
    }
    
    html body .header .container .navbar .hamburger.active span:nth-child(3),
    html body header.header .container nav.navbar .hamburger.active span:nth-child(3),
    .hamburger.active span:nth-child(3) {
        transform: rotate(45deg) translate(-6px, -6px) !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    /* Legacy active state for .bar elements */
    html body .header .container .navbar .hamburger.active .bar:nth-child(1),
    html body header.header .container nav.navbar .hamburger.active .bar:nth-child(1),
    .hamburger.active .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px) !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    html body .header .container .navbar .hamburger.active .bar:nth-child(2),
    html body header.header .container nav.navbar .hamburger.active .bar:nth-child(2),
    .hamburger.active .bar:nth-child(2) {
        opacity: 0 !important;
        display: block !important;
    }
    
    html body .header .container .navbar .hamburger.active .bar:nth-child(3),
    html body header.header .container nav.navbar .hamburger.active .bar:nth-child(3),
    .hamburger.active .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px) !important;
        opacity: 1 !important;
        display: block !important;
    }
}

/* Enhanced click target and styling */
@media screen and (max-width: 768px) {
    .header .navbar {
        position: relative !important;
    }
    
    /* Add a larger click target */
    .hamburger::before {
        content: "";
        position: absolute;
        left: -5px;
        right: -5px;
        top: -5px;
        bottom: -5px;
        background-color: transparent;
        z-index: -1;
    }
    
    /* Force hamburger to be topmost element */
    .hamburger {
        isolation: isolate !important;
    }
    
    /* Prevent any CSS transitions from affecting the hamburger structure */
    .hamburger, 
    .hamburger span,
    .hamburger .bar {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        animation: none !important;
    }
}