/* ============================================
   BROWSER-SPECIFIC FIXES FÜR GENERATEPRESS MENU
   Getrennte Regeln für Edge vs Firefox vs andere
   ============================================ */

/* 1. ALLGEMEINE REGELN (für alle Browser) */
.main-navigation {
    position: relative;
    z-index: 1000;
}

/* Sticky State für alle Browser */
.main-navigation.stuckElement {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100000 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    margin-top: 0 !important;
    transform: none !important; /* WICHTIG: Kein transform auf fixed element! */
}

/* Inside Navigation für Performance */
.main-navigation .inside-navigation {
    position: relative;
}

/* 2. PRIMARY MENU */
#primary-menu {
    position: relative;
    z-index: 1001;
}

/* 3. MENU ITEMS - allgemein */
#primary-menu .menu-item {
    position: relative;
}

/* 4. SPEZIELL "ÜBER UNS" */
.menu-item-385 {
    z-index: 100;
}

/* 5. SUB-MENUS */
.sub-menu .sub-menu {
    left: 100%;
    top: 0;
    margin-left: 1px;
    z-index: 1002;
}

/* 6. HOVER STATES */
.menu-item-has-children:hover > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   MICROSOFT EDGE SPECIFIC FIXES (ONLY)
   ============================================ */

/* Diese Regeln NUR für Edge - Firefox ignoriert @supports (-ms-ime-align) */
@supports (-ms-ime-align:auto) or (-ms-accelerator:true) {
    /* Edge: Render-Layer erzwingen */
    .main-navigation:not(.stuckElement) {
        contain: layout style paint;
        will-change: transform;
        backface-visibility: hidden;
    }
    
    /* Edge: Inside Navigation */
    .main-navigation .inside-navigation {
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Edge: Menu Items Anti-Flicker */
    #primary-menu .menu-item {
        animation: edgeRenderFix 1ms;
        min-height: 1px;
        overflow: visible;
    }
    
    @keyframes edgeRenderFix {
        from { opacity: 0.999; }
        to { opacity: 1; }
    }
    
    /* Edge: Sub-Menus */
    .main-navigation:not(.stuckElement) .sub-menu {
        transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
    }
    
    /* Edge: Sticky Performance */
    .main-navigation.stuckElement {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ============================================
   FIREFOX SPECIFIC FIXES (ONLY)
   ============================================ */

/* Diese Regeln NUR für Firefox */
@-moz-document url-prefix() {
    /* Firefox: Sticky Menü korrigieren */
    .main-navigation.stuckElement {
        top: 0 !important;
        transform: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Firefox: Keine transform auf Navigation */
    .main-navigation {
        transform: none !important;
        contain: none !important;
        will-change: auto !important;
    }
    
    /* Firefox: Inside Navigation Reset */
    .main-navigation .inside-navigation {
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Firefox: Menu Items Reset */
    #primary-menu .menu-item {
        animation: none !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Firefox: Sub-Menus Reset */
    .sub-menu {
        transform: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
    }
}

/* ============================================
   CHROMIUM BROWSER (Chrome, Brave, Opera, etc.)
   ============================================ */

/* Regeln für alle WebKit/Blink Browser AUSSER Edge */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Prüfe ob NICHT Edge (Edge hat auch -webkit-min-device-pixel-ratio) */
    @supports not ((-ms-ime-align:auto) or (-ms-accelerator:true)) {
        /* Chrome/Blink: Leichte Performance-Optimierung */
        .main-navigation:not(.stuckElement) {
            will-change: transform;
        }
        
        .main-navigation .inside-navigation {
            transform: translateZ(0);
        }
    }
}

/* ============================================
   MOBILE vs DESKTOP
   ============================================ */

/* Desktop (ab 768px) */
@media (min-width: 768px) {
    .main-nav ul li.menu-item {
        position: relative;
    }
    
    /* Hover-Bereich */
    .main-nav ul li.menu-item-has-children > a:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 20px;
        bottom: -20px;
        left: 0;
        background: transparent;
    }
    
    /* Sticky Animation */
    .main-navigation.stuckElement {
        animation: stickySlideDown 0.3s ease;
    }
    
    @keyframes stickySlideDown {
        from { transform: translateY(-100%); }
        to { transform: translateY(0); }
    }
}

/* Mobile (unter 768px) */
@media (max-width: 767px) {
    /* Mobile: Sticky deaktivieren */
    .main-navigation.stuckElement {
        position: relative !important;
        top: auto !important;
    }
}

/* ============================================
   ADMIN BAR ANPASSUNGEN
   ============================================ */

.admin-bar .main-navigation.stuckElement {
    top: 32px !important;
}

@media (max-width: 782px) {
    .admin-bar .main-navigation.stuckElement {
        top: 46px !important;
    }
}

/* ============================================
   GENERATEPRESS COMPATIBILITY
   ============================================ */

/* GeneratePress defaults respektieren */
.stuckElement {
    transition: all 0.3s ease !important;
}

/* Slideout Menu (Mobile) */
#generate-slideout-menu,
.slideout-navigation {
    /* Keine transform/contain/will-change */
}
