/* =========================================================
   Navigation – Styling & Interaktion
   ---------------------------------------------------------
   Zweck:
   Enthält alle Formatierungen für die Hauptnavigation,
   Untermenüs, Hover-Effekte und Dropdown-Menüs.
   ---------------------------------------------------------
   Dateiname: navigation.css
   Ort: /custom/css/navigation.css
   Autor: Wimmer IT-Services
   ========================================================= */


/* ---------------------------------------------
   UNTERMENÜ GRUNDLAYOUT (ERSTE EBENE)
   --------------------------------------------- */

/* Untermenü-Container (erste Ebene) */
#header-outer #top nav > ul > li:not(.megamenu) > .sub-menu.tracked-pos {
    background-color: rgba(255, 255, 255, 1);
    margin-top: 0px;
    border-radius: 0px 0px 10px 10px;
}

/* Einzelne Menüpunkte im Untermenü (erste Ebene) */
.sf-menu > li > ul > li {
    font-size: 12px;
    width: 100%;
    border-radius: 10px;
    margin: 5px 10px;
    transition: all 0.3s ease;
    background-color: transparent;
}


/* ---------------------------------------------
   SUB-SUB-MENÜ (ZWEITE EBENE)
   --------------------------------------------- */

/* Sub-Sub-Menü Container */
.sf-menu ul ul.sub-menu {
    background-color: rgba(255, 255, 255, 1) !important;
    border-radius: 10px;
    left: 0;
    margin-left: 0px;
}

/* Einzelne Menüpunkte im Sub-Sub-Menü */
.sf-menu > li > ul > li > ul > li {
    font-size: 12px;
    width: 100%;
    border-radius: 10px;
    padding: 5px 10px;
    margin: 5px 10px;
    transition: all 0.3s ease;
    background-color: transparent;
}


/* ---------------------------------------------
   AKTIVE SEITE / CURRENT PAGE
   --------------------------------------------- */

/* Aktiver Menüpunkt - Erste Ebene (Untermenü) */
.sf-menu > li > ul > li.current-menu-item,
.sf-menu > li > ul > li.current_page_item,
.sf-menu > li > ul > li.current-menu-ancestor {
    background-color: transparent !important;
}

.sf-menu > li > ul > li.current-menu-item > a,
.sf-menu > li > ul > li.current_page_item > a,
.sf-menu > li > ul > li.current-menu-ancestor > a {
    background-color: transparent !important;
}

.sf-menu > li > ul > li.current-menu-item > a span,
.sf-menu > li > ul > li.current_page_item > a span,
.sf-menu > li > ul > li.current-menu-ancestor > a span {
    color: #54ae31 !important;
    font-weight: 700 !important;
}

/* Aktiver Menüpunkt - Zweite Ebene (Sub-Sub-Menü) */
.sf-menu > li > ul > li > ul > li.current-menu-item,
.sf-menu > li > ul > li > ul > li.current_page_item {
    background-color: transparent !important;
}

.sf-menu > li > ul > li > ul > li.current-menu-item > a,
.sf-menu > li > ul > li > ul > li.current_page_item > a {
    background-color: transparent !important;
}

.sf-menu > li > ul > li > ul > li.current-menu-item > a span,
.sf-menu > li > ul > li > ul > li.current_page_item > a span {
    color: #54ae31 !important;
    font-weight: 700 !important;
}


/* ---------------------------------------------
   HOVER-EFFEKTE FÜR UNTERMENÜ (ERSTE EBENE)
   --------------------------------------------- */

/* Hover-Effekt auf Untermenü-Einträgen (erste Ebene) */
.sf-menu > li > ul > li:hover {
    border-radius: 10px;
    background-color: #54ae31 !important;
}

/* Text-Farbe bei Hover (NUR erste Ebene, NICHT zweite) */
.sf-menu > li > ul > li:hover > a span {
    color: white !important;
    font-weight: 400 !important;
}


/* ---------------------------------------------
   HOVER-EFFEKTE FÜR SUB-SUB-MENÜ (ZWEITE EBENE)
   --------------------------------------------- */

/* Hover-Effekt auf Sub-Sub-Menü-Einträgen */
.sf-menu > li > ul > li > ul > li:hover {
    border-radius: 10px;
    background-color: #54ae31 !important;
}

/* Text-Farbe bei Hover (zweite Ebene) - wird weiß */
.sf-menu > li > ul > li > ul > li:hover > a span {
    color: white !important;
    font-weight: 400 !important;
}


/* ---------------------------------------------
   LINK-STYLING IN UNTERMENÜS
   --------------------------------------------- */

/* Standard-Link-Farbe (alle Ebenen) */
.sf-menu ul li a,
.sf-menu ul li a span {
    color: #323232 !important;
}

/* Link-Farbe bei Hover - wird überschrieben durch spezifischere Regeln oben */
.sf-menu ul li:hover > a,
.sf-menu ul li:hover > a span {
    color: white !important;
}

/* Hintergrund-Farbe auf transparent beim Link-Hover */
#header-outer #top nav > ul > li:not(.megamenu) ul a:hover {
    background-color: transparent !important;
}


/* ---------------------------------------------
   DROPDOWN-POSITIONIERUNG
   --------------------------------------------- */

/* Abstand des Untermenüs vom Hauptmenü */
#header-outer #top nav > ul > li:not(.megamenu) .sub-menu {
    top: 100%;
    margin-top: 10px;
}


/* ---------------------------------------------
   PFEILE/INDIKATOREN
   --------------------------------------------- */

/* Pfeil bei Menüpunkten mit Untermenü (erste Ebene) */
.sf-menu > li > ul > li.menu-item-has-children > a .sf-sub-indicator {
    /* Pfeil wird rechts angezeigt */
}

/* Pfeil bei Menüpunkten mit Sub-Sub-Menü (zweite Ebene) */
.sf-menu > li > ul > li > ul > li.menu-item-has-children > a .sf-sub-indicator {
    /* Pfeil wird rechts angezeigt */
}


/* ---------------------------------------------
   TRANSPARENTER HEADER (STARTSEITE)
   --------------------------------------------- */

/* Untermenü auf transparentem Header (erste Ebene) */
#header-outer.transparent #top nav > ul > li:not(.megamenu) > .sub-menu.tracked-pos {
    margin-top: 10px;
}

/* Sub-Sub-Menü auf transparentem Header */
#header-outer.transparent .sf-menu ul ul.sub-menu {
    margin-top: -5px;
}


/* ---------------------------------------------
   RESPONSIVE ANPASSUNGEN
   --------------------------------------------- */

@media screen and (max-width: 999px) {
    /* Mobile Navigation - Erste Ebene */
    .sf-menu > li > ul > li {
        margin: 3px 5px;
        padding: 8px 10px;
    }
    
    /* Mobile Navigation - Zweite Ebene */
    .sf-menu > li > ul > li > ul > li {
        margin: 2px 5px;
        padding: 6px 8px;
    }
}