/* ==========================================================
   ICE Teamseiten – dynamische Teamfarben
   Werte kommen aus System – ICE Team Context.

   team-headerfarbe        -> oberer Header
   team-menuefarbe         -> Hauptmenü + Dropdowns
   team-ueberschriftenfarbe -> Überschriften-Hintergrund
   team-schriftfarbe       -> kontrastierende Schriftfarbe

   Der eigentliche Seiteninhalt bleibt bewusst weiß.
   ========================================================== */

.ice-team-text {
    color: var(--ice-team-text-color);
}

/* ----------------------------------------------------------
   Desktop
   ---------------------------------------------------------- */
@media (min-width: 960px) {
    /* Oberer YOOtheme-Header: exakt die individuell gepflegte Headerfarbe. */
    .tm-header .uk-navbar-container.uk-navbar-primary {
        background-color: var(--ice-team-header-color);
        background-image: none;
        color: var(--ice-team-text-color);
    }

    .tm-header .uk-navbar-container.uk-navbar-primary .uk-navbar-nav > li > a,
    .tm-header .uk-navbar-container.uk-navbar-primary .uk-navbar-toggle {
        color: var(--ice-team-text-color);
    }

    /*
     * DJ-MegaMenu liegt in diesem Layout in
     * .tm-top > .ice-main-menu und setzt den Root-Hintergrund per ID.
     * Der Dummy-ID-Anteil in :is() sorgt für ausreichende Spezifität,
     * ohne die konkrete Joomla-Modul-ID fest zu codieren und ohne !important.
     */
    .tm-page > .tm-top,
    .tm-top .ice-main-menu,
    .tm-top .ice-main-menu .dj-megamenu-wrapper {
        background-color: var(--ice-team-menu-color);
        background-image: none;
    }

    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"]) {
        background: var(--ice-team-menu-color);
        background-image: none;
    }

    /* Hauptnavigation */
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    > li.dj-up,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    > li.dj-up > a.dj-up_a {
        background-color: transparent;
        background-image: none;
    }

    /* DJ-MegaMenu setzt diese beiden Trennerfarben separat. */
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    > li.dj-up > a.dj-up_a {
        border-left-color: var(--ice-team-menu-color);
        border-right-color: var(--ice-team-menu-color);
        color: var(--ice-team-text-color);
    }

    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    > li.dj-up > a.dj-up_a > span,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    > li.dj-up > a.dj-up_a .arrow,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    > li.dj-up > a.dj-up_a .dj-icon {
        color: var(--ice-team-text-color);
    }

    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    > li.dj-up:hover > a.dj-up_a,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    > li.dj-up.active > a.dj-up_a,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    > li.dj-up.hover > a.dj-up_a {
        background-color: rgb(255 255 255 / 8%);
        background-image: none;
        color: var(--ice-team-text-color);
    }

    /* Dropdowns / Untermenüs: gleiche Menüfarbe wie die Hauptnavigation. */
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, .dj-subwrap),
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, .dj-subwrap-in),
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, .dj-subcol),
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, ul.dj-submenu) {
        background: var(--ice-team-menu-color);
        background-image: none;
    }

    /* Dezente Untermenü-Trenner aus der kontrastierenden Schriftfarbe. */
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, ul.dj-submenu) > li,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, .dj-subrow_separator) {
        border-color: var(--ice-team-text-color-18, rgb(255 255 255 / 18%));
    }

    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, ul.dj-submenu) > li > a,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, ul.dj-submenu) > li > a > span,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, ul.dj-submenu) > li > a .arrow,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, ul.dj-submenu) > li > a .dj-icon {
        color: var(--ice-team-text-color);
        border-color: var(--ice-team-text-color-18, rgb(255 255 255 / 18%));
    }

    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, ul.dj-submenu) > li:hover > a,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, ul.dj-submenu) > li.hover > a,
    .tm-top .ice-main-menu
    :is(#ice-team-menu-color-override, ul[id^="dj-megamenu"])
    :is(#ice-team-submenu-color-override, ul.dj-submenu) > li.active > a {
        background: rgb(255 255 255 / 8%);
        color: var(--ice-team-text-color);
    }
}

/* ----------------------------------------------------------
   Mobile Header
   ---------------------------------------------------------- */
@media (max-width: 959px) {
    .tm-header-mobile .uk-navbar-container {
        background: var(--ice-team-header-color);
        color: var(--ice-team-text-color);
    }

    .tm-header-mobile .uk-navbar-nav > li > a,
    .tm-header-mobile .uk-navbar-toggle,
    .tm-header-mobile .uk-navbar-toggle-icon {
        color: var(--ice-team-text-color);
    }
}