/**
 * ========================================
 * PAKET 3: CSS
 * ========================================
 * 
 * ANLEITUNG:
 * 1. Erstelle neue Datei: /css/megadropdown.css
 * 2. Kopiere ALLES von Zeile 1 bis zum Ende
 * 3. Speichern
 * 
 * WEG 1 - Via FTP/cPanel:
 * - Gehe zu: /wp-content/themes/DEIN-THEME/css/
 * - Erstelle Datei: megadropdown.css
 * - Füge Code ein
 * 
 * WEG 2 - Via WordPress Customizer:
 * - Design → Customizer → Zusätzliches CSS
 * - Füge Code ein
 * 
 * ========================================
 */

/* Megadropdown Navigation - WordPress Compatible CSS v1.1.0 */

:root {
    --megadropdown-primary-color: #BC78F6 !important;
}

.mega-nav {
    background-color: #fff;
    position: relative;
    z-index: 1000;
}

.mega-nav * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.main-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

}

.main-nav > .menu-item {
    position: relative;
    margin: 0;
}

.main-nav > .menu-item > a {
    display: block;
    padding: 18px 24px;
    text-decoration: none;
    color: #444;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-bottom: 2px solid transparent;
}

.main-nav > .menu-item > a:hover,
.main-nav > .menu-item:hover > a {
    color: var(--megadropdown-primary-color, #007cba);
    border-bottom-color: var(--megadropdown-primary-color, #007cba);
}

.main-nav > .menu-item.current-menu-item > a,
.main-nav > .menu-item.current-menu-parent > a,
.main-nav > .menu-item.current-menu-ancestor > a,
.main-nav > .menu-item.is-active > a {
    color: var(--megadropdown-primary-color, #007cba);
    border-bottom-color: var(--megadropdown-primary-color, #007cba);
}

.main-nav > .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
    z-index: 999;
    max-height: 0;
    overflow: hidden;
    list-style: none;
    margin: 0;
}

.main-nav > .no-child-children.menu-item-has-children {
    .sub-menu.dropdown-content {
        grid-template-columns: auto auto auto auto;
        gap: 10px;
    }
}



.main-nav > .menu-item-has-children:hover > .sub-menu,
.main-nav > .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 600px;
}



@media (min-width: 1025px) {
  .main-nav > .menu-item-has-children > .sub-menu {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;

    top: var(--mega-nav-bottom, 80px); /* wird per JS gesetzt */

    /* dein Look */
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
    max-height: 0;
    overflow: hidden;
    z-index: 999;

    /* Grid + “Inhalt wie 1400px Container” */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;

    max-width: none;
    margin: 0;
    padding-block: 32px;
    padding-inline: max(24px, calc((100% - 1400px) / 2));
    box-sizing: border-box;
  }

  .main-nav > .menu-item-has-children:hover > .sub-menu,
  .main-nav > .menu-item-has-children.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 600px;
  }
}



@supports not (display: grid) {
    .main-nav > .menu-item-has-children > .sub-menu {
        display: flex;
        flex-wrap: wrap;
    }
    .sub-menu > .menu-item {
        flex: 0 0 220px;
        margin-right: 40px;
        margin-bottom: 20px;
    }
}

.sub-menu > .menu-item {
    list-style: none;
    margin: 0;
}

.sub-menu > .menu-item > a {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    transition: color 0.2s ease;
}


.sub-menu > .menu-item > a:hover {
    color: var(--megadropdown-primary-color, #007cba);
}

.sub-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}


.sub-menu .sub-menu .menu-item a {
    display: block;
    color: #666;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sub-menu .sub-menu .menu-item a:hover {
    color: var(--megadropdown-primary-color, #007cba);
    padding-left: 6px;
}

.sub-menu .sub-menu .menu-item.current-menu-item a,
.sub-menu .sub-menu .menu-item.current-menu-parent a {
    color: var(--megadropdown-primary-color, #007cba);
    font-weight: 500;
}

body.admin-bar .mega-nav.sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .mega-nav.sticky {
        top: 46px;
    }
}

@media (max-width: 1024px) {
    .navigation {
        padding-left: 40px !important; 
        padding-right: 40px !important; 
    }
    
    .nav-container {
        padding: 0 20px;
    }
    .main-nav > .menu-item > a {
        padding: 16px 20px;
        font-size: 14px;
    }
    .main-nav > .menu-item-has-children > .sub-menu {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
        padding: 24px 20px;
    }
}

@media (max-width: 1024px) {
    .main-nav {
        flex-direction: column;
        border-bottom: none;
    }
    .main-nav > .menu-item {
        border-bottom: 1px solid #e5e5e5;
    }
    .main-nav > .menu-item > a {
        padding: 14px 20px;
    }
    .main-nav > .menu-item-has-children > .sub-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border-top: 1px solid #f0f0f0;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
    .main-nav > .menu-item-has-children > .sub-menu {
        opacity: 0;
        max-height: 0;
        visibility: hidden;
        display: none;
    }
    .main-nav > .menu-item-has-children.is-open > .sub-menu {
        opacity: 1;
        max-height: 2000px;
        visibility: visible;
            display: block;
    }
    .mega-nav {
        i.fa-bars {
                opacity: 1;
                visibility: visible;
                display: block;
        }
        i.fa-xmark {
            display: none !important;
        }
    }
    .mega-nav.is-open {
        i.fa-bars {
                display: none !important;
        }
        i.fa-xmark {
            display: block !important;
        }
    }
}

.main-nav a:focus {
    outline: 2px solid var(--megadropdown-primary-color, #007cba);
    outline-offset: 2px;
}

.mega-nav.loading {
    opacity: 0.6;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .main-nav > .menu-item > a,
    .main-nav > .menu-item-has-children > .sub-menu,
    .sub-menu .sub-menu .menu-item a {
        transition: none;
    }
}

@media print {
    .main-nav > .menu-item-has-children > .sub-menu {
        display: none !important;
    }
}



/* Mobile Burger */
@media (max-width: 1024px) {

  /* Burger Button sichtbar */
  .mega-nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 20px;
    color: #8B5CF6;
  }

  /* UL erstmal zu */
  .mega-nav .main-nav {
    display: none;
  }

  /* UL auf, wenn Burger aktiv */
  .mega-nav.is-open .main-nav {
    display: flex;
  }

  /* nice-to-have */
  .mega-nav .main-nav {
    width: 100%;
  }
}

:root {
  --mega-nav-height: 70px; /* ggf. anpassen */
}

@media (max-width: 1024px) {
:root {
  --mega-nav-height: 120px; /* ggf. anpassen */
    }
}
@media (max-width: 767px) {
:root {
  --mega-nav-height: 70px; /* ggf. anpassen */
    }
}


@media (max-width: 1024px) {
    .headerbar {
        gap: 0 !important;
    }
    
    .wp-block-search {
        display: none;
    }
    
  .mega-nav.is-open .main-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--mega-nav-height);
    left: 0;

    width: 100vw;
    height: 100vh;

    background: #fff;
    z-index: 9999;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }


  /* Grundzustand: alle Submenus zu */
  .mega-nav .main-nav li.has-dropdown > .sub-menu,
  .mega-nav .main-nav li.menu-item-has-children > .sub-menu {
    display: block;           /* wichtig, damit max-height wirkt */
    max-height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border-left: 2px solid rgba(0,0,0,0.06);
  }

  /* Offen */
  .mega-nav .main-nav li.has-dropdown.is-open > .sub-menu,
  .mega-nav .main-nav li.menu-item-has-children.is-open > .sub-menu {
    max-height: 2000px;       /* simpel/robust */
    padding: 8px 0 10px;
  }

  /* Einrückung je Ebene */
  .mega-nav .main-nav .sub-menu > li > a { padding-left: 28px; }
  .mega-nav .main-nav .sub-menu .sub-menu > li > a { padding-left: 44px; }
  .mega-nav .main-nav .sub-menu .sub-menu .sub-menu > li > a { padding-left: 60px; }

  /* Optional: Pfeil/Caret bei Dropdown-Items */
  .mega-nav .main-nav li.has-dropdown > a,
  .mega-nav .main-nav li.menu-item-has-children > a {
    position: relative;
    padding-right: 44px; /* Platz für Pfeil */
  }
/*
  .mega-nav .main-nav li.has-dropdown > a::after,
  .mega-nav .main-nav li.menu-item-has-children > a::after {
    content: "▾";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
  }

  .mega-nav .main-nav li.has-dropdown.is-open > a::after,
  .mega-nav .main-nav li.menu-item-has-children.is-open > a::after {
    content: "▴";
  }*/
}

@media (max-width: 1024px) {

  .mega-nav .main-nav li.has-dropdown,
  .mega-nav .main-nav li.menu-item-has-children {
    position: relative;
  }

  /* Link bleibt Link */
  .mega-nav .main-nav li.has-dropdown > a {
    display: block;
    padding-right: 56px; /* optischer Platz */
  }

  /* Toggle liegt rechts als eigene Klickzone */
  .mega-nav .main-nav .submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 56px;
    height: auto;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 2;
    padding: 14px 20px;
    font-family: "Font Awesome 7 Free";
  }

  .mega-nav .main-nav .submenu-toggle::before {
    content: "\f107";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: "Font Awesome 7 Free";
    font-size: 18px;
    opacity: .75;
  }

  .mega-nav .main-nav li.is-open > .submenu-toggle::before {
    content: "\f106";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: "Font Awesome 7 Free";
  }

  /* optional: auf Desktop Button ausblenden */
    
    #menu-hauptnavigation li.menu-item {
        padding: 0 !important;
        .sub-menu {
            padding: 0 !important;
        }
    }
}

@media (min-width: 1025px) {
  .mega-nav .main-nav .submenu-toggle { display: none; }
    
    
}