/**
 * Megamenu Styles for BV24 Luma Child Theme
 * Custom CSS for Megamenu Implementation
 */



/* Desktop Navigation - Level 0 horizontal, Submenüs beim Hover als Liste */
@media (min-width: 768px) {




    li.level0 {
        position: static !important;
    }

    .nav-sections-item-content {
        position: relative;
        background: #fff;
        z-index: 8;
    }

    /* Navigation Container */
    .navigation {
        position: relative;
    }

    .navigation ul {
        position: relative !important;
    }

    /* Level 0 - Hauptkategorien horizontal wie vorher */
    .navigation .level0 {
        display: inline-block !important;
        position: relative;
        margin: 0 15px 0 0 !important;
        border-bottom: none;
    }

    .navigation .level0>.level-top {
        display: inline-block !important;
        padding: 12px 15px;
        background: transparent;
        border: none !important;
        font-weight: bold;
        color: #333;
        text-decoration: none;
        position: relative;
    }

    .navigation .level0>.level-top::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background: linear-gradient(90deg, #990052, #bb0066);
        transform: translateX(-50%);
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 2px 2px 0 0;
    }

    .navigation .level0>.level-top:hover {
        color: #990052;
    }

    .navigation .level0>.level-top:hover::before {
        width: 100%;
    }

    /* Aktive Level 0 Einträge */
    .navigation .level0.active>.level-top,
    .navigation .level0.has-active>.level-top {
        border-bottom: 2px solid #990052;
    }

    /* Megamenü - große Breite nur für das erste Submenü (Level 1) */
    .navigation .level0>.submenu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 20px 0 20px !important;
        border: none !important;
        z-index: 1000 !important;
        backdrop-filter: blur(20px) !important;
        /* Modern animations */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
        overflow: hidden;
        box-sizing: border-box;

    }

    /* Before-Element für das Megamenü - volle Viewport-Breite */
    .navigation .level0>.submenu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50% !important;
        margin-left: -50vw !important;
        width: 100vw !important;
        height: 105% !important;
        background: #ffffff;
        z-index: -1 !important;
    }

    /* Arrows und Hover-Overlay entfernen - nur für verschachtelte ul Elemente */
    .navigation .level0>.submenu>ul:before,
    .navigation .level0>.submenu>ul:after {
        display: none !important;
    }

    /* Submenü beim Hover über Level 0 anzeigen (nur für Desktop mit Maus) */
    @media (hover: hover) and (pointer: fine) {
        .navigation .level0:hover>.submenu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }

    /* Touch/Tablet: Click-basiert mit .menu-open Klasse */
    .navigation .level0.parent.menu-open>.submenu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* Close Button für Tablets */
    .navigation .menu-close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        background: transparent;
        border: none;
        font-size: 40px;
        line-height: 1;
        color: #990052;
        cursor: pointer;
        padding: 5px 10px;
        z-index: 1001;
        transition: all 0.2s ease;
    }

    .navigation .menu-close-btn:hover {
        color: #bb0066;
        transform: scale(1.1);
    }

    .navigation .menu-close-btn:active {
        transform: scale(0.95);
    }

    /* Arrows und Hover-Overlay entfernen - nur für verschachtelte ul Elemente */
    .navigation .level0>.submenu>ul:before,
    .navigation .level0>.submenu>ul:after {
        display: none !important;
    }



    /* Level 1 - Horizontal anordnen (Hauptkategorien im Megamenü) */
    .navigation .submenu>li.level1 {
        display: inline-block !important;
        vertical-align: top !important;
        width: 200px !important;
        margin: 0 50px 20px 0 !important;
        position: relative;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    /* Animation nur wenn Menü offen ist */
    .navigation .level0:hover>.submenu>li.level1,
    .navigation .level0.menu-open>.submenu>li.level1 {
        opacity: 1;
        transform: translateY(0);
    }

    /* Gestaffelte Animation beim Öffnen */
    .navigation .level0:hover>.submenu>li.level1:nth-child(1),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(1) {
        transition-delay: 0.02s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(2),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(2) {
        transition-delay: 0.04s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(3),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(3) {
        transition-delay: 0.06s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(4),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(4) {
        transition-delay: 0.08s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(5),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(5) {
        transition-delay: 0.1s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(6),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(6) {
        transition-delay: 0.12s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(7),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(7) {
        transition-delay: 0.14s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(8),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(8) {
        transition-delay: 0.16s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(9),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(9) {
        transition-delay: 0.18s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(10),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(10) {
        transition-delay: 0.2s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(11),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(11) {
        transition-delay: 0.22s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(12),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(12) {
        transition-delay: 0.24s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(13),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(13) {
        transition-delay: 0.26s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(14),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(14) {
        transition-delay: 0.28s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(15),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(15) {
        transition-delay: 0.3s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(16),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(16) {
        transition-delay: 0.32s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(17),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(17) {
        transition-delay: 0.34s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(18),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(18) {
        transition-delay: 0.36s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(19),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(19) {
        transition-delay: 0.38s;
    }

    .navigation .level0:hover>.submenu>li.level1:nth-child(20),
    .navigation .level0.menu-open>.submenu>li.level1:nth-child(20) {
        transition-delay: 0.4s;
    }

    .navigation .submenu>li.level1.desktop-view-all-link {
        display: block !important;
        width: 100% !important;
    }


    /* Level 1 Links - als Überschriften */
    .navigation .submenu>li.level1:not(.desktop-view-all-link)>a {
        display: block !important;
        padding: 10px 15px 8px 15px !important;
        border: none !important;
        border-bottom: 2px solid #990052 !important;
        color: #333 !important;
        text-decoration: none;
        font-weight: bold !important;
        font-size: 1.7rem;
        position: relative;
        margin-bottom: 5px;
        transition: padding-left 0.2s ease, color 0.2s ease;
    }



    .navigation .submenu>li.level1>a:hover {
        background: transparent !important;
        padding-left: 23px !important;
        color: #990052 !important;
    }

    /* Aktive Level 1 Items */
    .navigation .submenu>li.level1.active>a {
        color: #990052 !important;
    }

    /* Desktop "Alle [Kategorie]" Link Styling */
    .navigation .submenu>li.desktop-view-all-link>a {
        font-weight: bold !important;
        transition: padding-left 0.2s ease, color 0.2s ease;
        padding: 10px 15px 8px 15px !important
    }

    .navigation .submenu>li.desktop-view-all-link>a:hover {
        padding-left: 23px !important;
        color: #990052 !important;
    }

    /* Level 2+ Submenüs - vertikal unter den Level 1 Kategorien */
    .navigation .submenu>li.level1 .submenu {
        position: static !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        min-width: 200px !important;
        padding: 0 !important;
        margin: 0 !important;
        left: auto !important;
        top: auto !important;
    }

    /* Alle verschachtelten Submenüs */
    .navigation .submenu .submenu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }

    /* Level 2 Links - unter den Level 1 Überschriften */
    .navigation .submenu>li.level1 .submenu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .navigation .submenu>li.level1 .submenu a {
        display: block !important;
        padding: 8px 16px !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        color: #666 !important;
        text-decoration: none;
        font-weight: normal !important;
        font-size: 1.5rem;
        position: relative;
        transition: padding-left 0.2s ease, color 0.2s ease;
    }

    .navigation .submenu>li.level1 .submenu a:hover {
        padding-left: 24px !important;
        color: #990052 !important;
    }

    /* Level 3+ verstecken - nur bis Level 2 anzeigen */
    .navigation .submenu>li.level1 .submenu .submenu,
    .navigation .level3,
    .navigation .level4,
    .navigation .level5 {
        display: none !important;
    }

    /* Aktive Level 2+ Items */
    .navigation .submenu>li.level1 .submenu .active>a {
        color: #990052 !important;
        font-weight: bold !important;
    }

    /* Parent-Icons beibehalten aber anpassen */
    .navigation .level0.parent>.level-top>.ui-menu-icon {
        position: absolute;
        right: 0;
        font-size: 12px;
        color: #990052;
    }



    .navigation .level0.parent>.level-top>.ui-menu-icon {
        right: -8px !important;
    }


    /* Sub-Level Icons entfernen */
    .navigation .submenu li.parent>a>.ui-menu-icon {
        display: none !important;
    }

    /* Hover-Verhalten für bessere UX */
    .navigation .level0.parent:hover>.submenu {
        display: block !important;
        overflow: visible !important;
    }

    /* Überschreibe alle JavaScript-generierten Styles für verschachtelte Submenüs */
    .navigation .submenu .submenu[style] {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: block !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Spezifisch für Level 2 Submenüs */
    .navigation .level1 .level2.submenu[style] {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }

    /* Generell alle tief verschachtelten Menüs */
    .navigation .submenu .submenu .submenu[style] {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }

    /* Mobile responsiveness für moderne Animationen */
    @media (max-width: 767px) {

        .navigation .level0>.level-top::before,
        .navigation .level0>.level-top::after {
            display: none;
        }

        .navigation .level0>.submenu {
            border-radius: 0;
            backdrop-filter: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
    }

    /* Smooth scroll für bessere UX */
    .navigation .submenu {
        scroll-behavior: smooth;
    }

}

/* ========================================== */
/* SIMPLE CSS-ONLY MOBILE NAVIGATION */
/* ========================================== */

@media (max-width: 767px) {

    /* Reset desktop megamenu styles for mobile */
    .navigation .level0>.submenu {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: auto !important;
        max-width: none !important;
        animation: none !important;
    }

    /* Simple CSS-only collapsible behavior */
    .navigation .submenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    /* Show submenu when expanded class is added */
    .navigation .level0.parent.expanded>.submenu,
    .navigation .level1.parent.expanded>.submenu {
        max-height: 1000px !important;
        /* Large enough value */
        display: block !important;
        /* Force display for Level 0 */
    }

    /* Level styling */


    .navigation ul.level0 li.level1,
    .navigation ul.level0,
    ul.level0 .all-category {
        margin-left: 20px;
    }

    .navigation ul.level0 li.level1:not(:last-child),
    .navigation ul.level0,
    ul.level0 .all-category {
        border-bottom: 1px solid #f5f5f5;
    }

    .navigation .level2 {
        margin-left: 40px;
    }

    /* Level 3+ verstecken - nur bis Level 2 anzeigen (Mobile) */
    .navigation .level3,
    .navigation .level4,
    .navigation .level5 {
        display: none !important;
    }

    /* Link styling */
    .navigation .level0>.level-top,
    .navigation .level1>a,
    .navigation .level2>a {
        display: block;
        padding: 14px 16px;
        color: #333;
        text-decoration: none;
        transition: all 0.2s ease;
        position: relative;
        /* For absolute positioned arrows */
    }

    .navigation .level1>a {
        font-size: 15px;
        padding-left: 12px;
    }

    .navigation .level2>a {
        color: #666;
        padding-left: 8px;
    }

    /* Hover effects */
    .navigation .level0>.level-top:hover,
    .navigation .level1>a:hover,
    .navigation .level2>a:hover {
        background: #f8f8f8;
        color: #990052;
    }

    /* Simple arrow indicators */
    .navigation .level0.parent>.level-top::after,
    .navigation .level1.parent>a::after {
        content: '\ea4e';
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #990052;
        font-family: 'remixicon' !important;
        transition: transform 0.3s ease;
        font-weight: 600 !important;
        font-size: 2.5rem !important;
        line-height: 1;
    }

    /* Rotate arrow when expanded */
    .navigation .level0.parent.expanded>.level-top::after,
    .navigation .level1.parent.expanded>a::after {
        transform: translateY(-50%) rotate(180deg);
    }

    /* Active category styling for mobile */
    .navigation .level0.active>.level-top,
    .navigation .level0.has-active>.level-top {
        border-left: 3px solid #990052 !important;
        background: rgba(153, 0, 82, 0.05) !important;
        font-weight: 600 !important;
    }

    .navigation .level1.active>a,
    .navigation .level1.has-active>a,
    .navigation .all-category.active>a {
        border-left: 3px solid #990052 !important;
        background: rgba(153, 0, 82, 0.05) !important;
        font-weight: 600 !important;
        padding-left: 15px !important;
        /* Adjust for border */
    }

    .navigation .level2.active>a,
    .navigation .level2.has-active>a,
    .navigation .view-all-link.active>a {
        border-left: 3px solid #990052 !important;
        background: rgba(153, 0, 82, 0.05) !important;
        padding-left: 15px !important;
        /* Adjust for border */
    }

    /* Current page indicator */
    .navigation .level0.current>.level-top,
    .navigation .level1.current>a,
    .navigation .level2.current>a {
        background: linear-gradient(135deg, rgba(153, 0, 82, 0.1), rgba(153, 0, 82, 0.05)) !important;
        border-left: 4px solid #990052 !important;
        color: #990052 !important;
        font-weight: bold !important;
    }

}


.navigation a {
    margin-top: 5px;
    margin-bottom: 5px;

}


.nav-toggle:before {
    color: #990052 !important;
}

.page-main,
.page-footer {
    position: relative
}

.page-wrapper::after {
    content: '';
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

@media screen and (min-width: 768px) {
    .menu-overlay-active::after {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -50vw;
        width: 100vw;
        background: rgba(0, 0, 0, 0.75);
        height: 100%;
        z-index: 1;
        /* Unter Megamenü (.navigation .submenu hat z-index:1000) */
        opacity: 1;
        pointer-events: none;
        /* Wenn Klicks blockiert werden sollen, auf "auto" setzen */
    }

}

.page-header,
.sections.nav-sections {
    background-color: white !important;

}

@media (min-width: 768px),
print {
    .navigation .level0.parent>.level-top>.ui-menu-icon:after {
        font-family: remixicon !important;
        content: "\ea4e" !important;
        font-size: 2.5rem !important;
        transition: transform 0.3s ease;
    }

    .navigation .level0.parent:hover>.level-top>.ui-menu-icon:after {
        transform: rotate(180deg);
    }
}