/* =========================================
   MOBILE MENU FIXES (V20 - CLICKAREA FIX)
   ========================================= */

/* 1. HIDE DEFAULT HEADER BURGER */
@media only screen and (max-width: 767px) {
    .responsive-menu-toggle,
    a.open-mfn-popup,
    .open-mfn-popup,
    #Top_bar .menu_wrapper .responsive-menu-toggle {
        display: none !important;
    }
}

/* 2. CUSTOM STICKY MENU CONTAINER */
#odin-custom-menu-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 10000;
    font-family: 'ITC Odin Con', 'Cinzel', serif;
    display: block;
    opacity: 0;
    visibility: hidden;
    /* FIX: pointer-events nur auf Container wenn nicht sichtbar */
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s linear;
    width: auto;
    height: auto;
    right: auto;
    top: auto;
}

#odin-custom-menu-container.is-visible {
    opacity: 1;
    visibility: visible;
    /* FIX: NUR der Trigger bekommt pointer-events, nicht der ganze Container */
    pointer-events: none !important;
}

/* FIX: Trigger bekommt IMMER pointer-events wenn Container sichtbar */
#odin-custom-menu-container.is-visible #odin-custom-menu-trigger {
    pointer-events: auto !important;
}

/* FIX: Content bekommt pointer-events NUR wenn Menü OFFEN ist */
#odin-custom-menu-container #odin-custom-menu-content {
    pointer-events: none !important;
}

#odin-custom-menu-container.open #odin-custom-menu-content {
    pointer-events: auto !important;
}

@media only screen and (max-width: 950px) {
    #odin-custom-menu-container {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
    }
    
    /* Trigger immer klickbar auf Mobile */
    #odin-custom-menu-container #odin-custom-menu-trigger {
        pointer-events: auto !important;
    }
    
    /* Content NUR klickbar wenn Menü OFFEN */
    #odin-custom-menu-container #odin-custom-menu-content {
        pointer-events: none !important;
    }
    
    #odin-custom-menu-container.open #odin-custom-menu-content {
        pointer-events: auto !important;
    }
}

/* =========================================
   TABLET MENU SYSTEM - Smart Breakpoints
   ========================================= */

/* GROSSE TABLETS LANDSCAPE: Haupt-Menü mit größerer Font */
@media only screen and (min-width: 1200px) and (max-width: 1400px) {
    #Top_bar #menu > li > a,
    #menu-main > li > a,
    .menu-main-container #menu > li > a,
    #Top_bar .menu > li > a {
        font-size: clamp(1.8rem, 2.2vw, 2.5rem) !important;
        letter-spacing: 0.05em !important;
        padding: 0 10px !important;
    }

    #Top_bar #menu,
    #menu-main,
    .menu-main-container #menu {
        gap: clamp(8px, 1.5vw, 20px) !important;
    }

    #Top_bar #menu > li,
    #menu-main > li,
    .menu-main-container #menu > li {
        margin: 0 clamp(5px, 1vw, 15px) !important;
        padding: 0 !important;
    }
} 

/* TABLET PORTRAIT + KLEINERE: Verstecke Haupt-Menü, zeige Icon */
@media only screen and (max-width: 1199px) {
    #Top_bar .menu_wrapper,
    #Top_bar #menu,
    #Top_bar .menu-main-container,
    #Top_bar #menu-main,
    .responsive-menu-toggle {
        display: none !important;
    }
    
    #odin-custom-menu-container {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
    }
    
    #odin-custom-menu-container #odin-custom-menu-trigger {
        pointer-events: auto !important;
    }
    
    #odin-custom-menu-container #odin-custom-menu-content {
        pointer-events: none !important;
    }
    
    #odin-custom-menu-container.open #odin-custom-menu-content {
        pointer-events: auto !important;
    }
    
    /* Menu Content im Custom Container SICHTBAR halten */
    #odin-custom-menu-content .menu-main-container,
    #odin-custom-menu-content #menu-main,
    #odin-custom-menu-content nav,
    #odin-custom-menu-content li,
    #odin-custom-menu-content a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #odin-custom-menu-content ul,
    #odin-custom-menu-content ul#menu-main,
    #odin-custom-menu-content ul#menu-main-1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* TABLET: Gleiche Styles wie Desktop */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    #odin-custom-menu-trigger {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }
}

/* DESKTOP (>1400px): Mehr Abstand im Haupt-Menü */
@media only screen and (min-width: 1401px) {
    #Top_bar #menu > li,
    #menu-main > li,
    .menu-main-container #menu > li {
        margin: 0 clamp(10px, 1.8vw, 25px) !important;
        padding: 0 !important;
    }
}

/* 3. TRIGGER BUTTON */
#odin-custom-menu-trigger {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    background:
        linear-gradient(#0d0905, #0d0905) padding-box,
        linear-gradient(135deg, #946c35 0%, #E0AA5A 50%, #c5a059 100%) border-box !important;
    background-color: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    outline: none !important;
}

#odin-custom-menu-trigger:hover,
#odin-custom-menu-container.open #odin-custom-menu-trigger,
#viking-wave-trigger.is-active,
#odin-sticky-dock #viking-wave-trigger.is-active {
    transform: none !important;
    cursor: pointer !important;
    box-shadow: 0 0 25px rgba(197, 160, 89, 0.7) !important;
}

/* Burger Icon */
.burger-box {
    width: 20px;
    height: 18px;
    display: block;
    pointer-events: none;
}

.burger-inner,
.burger-inner::before,
.burger-inner::after {
    width: 20px;
    height: 2px;
    background-color: #c5a059;
    border-radius: 2px;
    position: absolute;
    display: block;
    content: "";
}

.burger-inner {
    top: 50%;
    margin-top: -2px;
}

.burger-inner::before {
    top: -7px;
}

.burger-inner::after {
    bottom: -7px;
}

.open #odin-custom-menu-trigger .burger-inner {
    background-color: transparent !important;
}

.open #odin-custom-menu-trigger .burger-inner::before {
    transform: translateY(7px) rotate(45deg);
}

.open #odin-custom-menu-trigger .burger-inner::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* 4. MENU CONTENT */
#odin-custom-menu-content {
    position: absolute;
    bottom: 80px;
    left: 0;
    min-width: 220px;
    background-color: #0d0905;
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0%, rgba(12, 8, 6, 0.8) 100%),
        url('/wp-content/themes/betheme-child/img/card_odin_game_bg_pattern_s.jpg');
    background-size: 200px;
    background-repeat: repeat;
    border: 2px solid #c5a059;
    border-radius: 12px;
    padding: 24px 24px 24px 20px;
    box-shadow: 0 0 50px 10px rgba(0, 0, 0, 1) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    display: flex !important;
    flex-direction: column !important;
    /* FIX: Standardmäßig keine pointer-events */
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.3s;
}

.open #odin-custom-menu-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* FIX: Nur wenn offen, dann pointer-events */
    pointer-events: auto !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

/* 5. CONTENT STYLES */
#odin-custom-menu-content ul,
#odin-custom-menu-content ul#menu-main,
#odin-custom-menu-content ul#menu-main-1 {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

#odin-custom-menu-content ul li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    line-height: 1.1 !important;
}

/* Alle Items: Heller Gold-Gradient — 1:1 wie Hauptmenü */
#odin-custom-menu-content ul li a {
    display: inline-block !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 2.1rem !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1.1 !important;
    letter-spacing: 0.04em !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    background: linear-gradient(120deg, #fada89 0%, #ffe3a0 40%, #fff0c4 70%, #ffe3a0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: none !important;
    transition: filter 1.6s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    will-change: filter !important;
    pointer-events: none !important;
    padding: 5px 10px 3px 8px !important;
    margin: 0 !important;
    border: none !important;
    height: auto !important;
}

/* iPad/Tablet: gleiche Werte wie Basis */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    #odin-custom-menu-content {
        padding: 24px 24px 24px 20px !important;
    }
    #odin-custom-menu-content ul {
        gap: 15px !important;
    }
}

/* Links NUR klickbar wenn Menü OFFEN */
.open #odin-custom-menu-content ul li a {
    pointer-events: auto !important;
}

/* Hover (ohne aktives Item): leichter Glow — schneller rein (.4s) */
#odin-custom-menu-content ul li a:hover,
#odin-custom-menu-content ul li a:focus {
    filter: drop-shadow(0 0 4px rgba(255, 230, 160, .3)) drop-shadow(0 0 8px rgba(255, 215, 130, .2)) !important;
    transition: filter .4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Aktives Item: volle Helligkeit + starker Glow */
#odin-custom-menu-content ul li.current-menu-item a,
#odin-custom-menu-content ul li.current_page_item a {
    filter: drop-shadow(0 0 10px rgba(244, 192, 100, 0.45)) !important;
}

/* Inaktive Items: 60% opacity — nur wenn es ein aktives Item gibt */
#odin-custom-menu-content ul:has(.current-menu-item) li:not(.current-menu-item) a,
#odin-custom-menu-content ul:has(.current_page_item) li:not(.current_page_item) a {
    opacity: 0.6 !important;
    filter: drop-shadow(0 0 6px rgba(255, 230, 160, 0)) drop-shadow(0 0 12px rgba(255, 215, 130, 0)) drop-shadow(0 0 20px rgba(241, 198, 91, 0)) !important;
}

/* Hover auf inaktiven: volle Opacity + Glow */
#odin-custom-menu-content ul:has(.current-menu-item) li:not(.current-menu-item) a:hover,
#odin-custom-menu-content ul:has(.current_page_item) li:not(.current_page_item) a:hover {
    opacity: 1 !important;
    filter: drop-shadow(0 0 10px rgba(244, 192, 100, 0.45)) !important;
    transition: filter .4s cubic-bezier(0.25, 0.1, 0.25, 1), opacity .4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* Seiten OHNE aktives Item (z.B. Cart/Checkout): alle Items 60% opacity */
#odin-custom-menu-content ul:not(:has(.current-menu-item)):not(:has(.current_page_item)) li a {
    opacity: 0.6 !important;
    filter: drop-shadow(0 0 6px rgba(255, 230, 160, 0)) drop-shadow(0 0 12px rgba(255, 215, 130, 0)) drop-shadow(0 0 20px rgba(241, 198, 91, 0)) !important;
}

/* Hover auf alle Items wenn kein aktives: volle Opacity + Glow */
#odin-custom-menu-content ul:not(:has(.current-menu-item)):not(:has(.current_page_item)) li a:hover {
    opacity: 1 !important;
    filter: drop-shadow(0 0 10px rgba(244, 192, 100, 0.45)) !important;
    transition: filter .4s cubic-bezier(0.25, 0.1, 0.25, 1), opacity .4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* 6. Z-INDEX */
.player-dropdown,
.odin-cart-widget,
#player-dropdown {
    z-index: 2147483647 !important;
}

/* 7. AGE-LOCKED: Verstecke Sticky Menu und Dock */
html.age-locked #odin-custom-menu-container,
body.age-locked #odin-custom-menu-container,
html.age-locked #odin-sticky-dock,
body.age-locked #odin-sticky-dock {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Bienen Partikel bei Age Gate verstecken */
html.age-locked .odin-menu-bee,
body.age-locked .odin-menu-bee {
    display: none !important;
    opacity: 0 !important;
}

/* 8. ALLE BUTTONS GLEICH GROSS (60px) */
@media only screen and (max-width: 1199px) {
    #odin-custom-menu-trigger,
    #viking-wave-trigger,
    #odin-sticky-horn,
    #odin-sticky-dock #viking-wave-trigger,
    #odin-sticky-dock #odin-sticky-horn {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }
}

/* 9. LANDSCAPE FIX */
@media only screen and (orientation: landscape) and (max-height: 500px) {
    #odin-custom-menu-trigger,
    #viking-wave-trigger,
    #odin-sticky-horn {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }
}


/* Performance: Backdrop-filter auf Mobile reduzieren */
@media (hover: none) and (pointer: coarse) {
    .odin-welcome-backdrop,
    .odin-cart-panel,
    #odin-custom-menu-content {
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   ALLE TOUCH-GERÄTE (iPad Pro etc.): Sticky Custom Menu sichtbar
   ══════════════════════════════════════════════════════════════ */
@media (pointer: coarse) and (hover: none) {
    #odin-custom-menu-container {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
    }
    #odin-custom-menu-container #odin-custom-menu-trigger {
        pointer-events: auto !important;
    }
    #odin-custom-menu-container #odin-custom-menu-content {
        pointer-events: none !important;
    }
    #odin-custom-menu-container.open #odin-custom-menu-content {
        pointer-events: auto !important;
    }
    /* Menu Content im Custom Container SICHTBAR halten */
    #odin-custom-menu-content .menu-main-container,
    #odin-custom-menu-content #menu-main,
    #odin-custom-menu-content #menu-main-1,
    #odin-custom-menu-content nav,
    #odin-custom-menu-content li,
    #odin-custom-menu-content a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #odin-custom-menu-content ul,
    #odin-custom-menu-content ul#menu-main,
    #odin-custom-menu-content ul#menu-main-1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}