/* ========================================
   HAMBURGER MENU FIXES
   St. Lawrence Junior School - Kabowa
   
   Fixes for:
   - Squeezed hamburger icon appearance
   - Better mobile positioning and sizing
   - Consistent styling across all pages
   - Hide on desktop devices
   ======================================== */

/* ========== DESKTOP HIDING ========== */
/* Hide hamburger menu on desktop and tablet devices - AGGRESSIVE OVERRIDE */
@media (min-width: 992px) {
    .hamburger,
    #hamburger,
    button.hamburger,
    .hamburger-menu,
    .mobile-hamburger,
    nav .hamburger,
    header .hamburger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        z-index: -1 !important;
    }
}

/* Extra aggressive desktop hiding for any possible hamburger elements */
@media screen and (min-width: 992px) {
    .hamburger,
    #hamburger,
    button.hamburger {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* ========== HAMBURGER ICON IMPROVEMENTS ========== */
.hamburger {
    /* Better sizing and positioning */
    width: 48px !important;
    height: 48px !important;
    padding: 12px !important;
    
    /* Improved styling */
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    
    /* Better positioning */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    
    /* Smooth transitions */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    z-index: var(--z-hamburger, 10000) !important;
}

.hamburger:hover {
    background: rgba(0, 102, 204, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.05) !important;
}

/* ========== HAMBURGER LINES STYLING ========== */
.hamburger span {
    /* Better line dimensions */
    width: 22px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    
    /* Smooth transitions */
    transition: all 0.3s ease !important;
    transform-origin: center !important;
    
    /* Remove any conflicting styles */
    display: block !important;
    position: relative !important;
}

/* ========== ACTIVE STATE ANIMATIONS ========== */
.hamburger.active {
    background: rgba(220, 53, 69, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
}

.hamburger.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scale(0) !important;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
}

/* ========== MOBILE POSITIONING FIXES ========== */
@media (max-width: 992px) {
    .hamburger {
        /* Show on mobile */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        
        /* Stay inside navbar flow - NOT fixed */
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        
        /* Sizing */
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .hamburger span {
        width: 20px !important;
        height: 2px !important;
    }
    
    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 4px) !important;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -4px) !important;
    }
}

/* ========== DEVICE-SPECIFIC ADJUSTMENTS ========== */

/* Small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
    .hamburger {
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
        top: max(12px, env(safe-area-inset-top, 0px) + 8px) !important;
        right: max(12px, env(safe-area-inset-right, 0px) + 8px) !important;
    }
    
    .hamburger span {
        width: 18px !important;
    }
}

/* Large phones and tablets - REMOVE THIS SECTION AS IT CONFLICTS */
/* Tablets should use desktop navigation, not hamburger menu */

/* ========== ACCESSIBILITY IMPROVEMENTS ========== */
.hamburger:focus {
    outline: 2px solid #0066cc !important;
    outline-offset: 2px !important;
}

.hamburger:focus:not(:focus-visible) {
    outline: none !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hamburger {
        background: #000000 !important;
        border-color: #ffffff !important;
    }
    
    .hamburger span {
        background: #ffffff !important;
    }
    
    .hamburger.active {
        background: #cc0000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .hamburger,
    .hamburger span {
        transition: none !important;
    }
    
    .hamburger:hover {
        transform: none !important;
    }
}

/* ========== OVERRIDE CONFLICTING STYLES ========== */
@media (max-width: 992px) {
    /* Hamburger stays in navbar flow, right-aligned */
    #hamburger.hamburger {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
        flex-shrink: 0 !important;
    }
    
    .hamburger {
        z-index: 10000 !important;
    }
}

/* ========== ANIMATION STABILITY ========== */
@media (max-width: 992px) {
    .hamburger {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        will-change: opacity, background-color !important;
    }
    
    .hamburger span {
        -webkit-transform-origin: center !important;
        transform-origin: center !important;
        will-change: transform, opacity !important;
    }
}