/* Macht aus dem BBQ-Kitchen-Eintrag im Dropdown "Grillen" das Weber-Logo.

   Der Eintrag selbst kommt aus dem Template-Override nebenan
   (Shop/Themes/All/layout_header_categories.html), hier geht es nur um die
   Optik. Erkannt wird er am Linkziel, nicht an der Position.

   Die ID im Selektor ist noetig, nicht Zierde: das Theme setzt Hoehe und
   Innenabstand der Dropdown-Links mit einem sehr tiefen Selektor
   (.navbar-collapse .navbar-categories ul.navbar-nav > li > .dropdown-menu
   > li > a), gegen den eine schlichte Klassenregel nicht ankommt. */

@media (min-width: 768px) {
    #header .navbar-categories .dropdown-menu > li.level-2-child > a[href*="do=BbqKitchen"] {
        /* 50 px statt der 27 px einer Textzeile - das Logo ist knapp doppelt
           so hoch wie breit zu klein, darunter wird "BBQ KITCHEN" unleserlich. */
        height: 50px;
        padding-top: 0;
        padding-bottom: 0;
        background-image: url("../../html/img/weber-bbq-kitchen-logo.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 86px auto;
        /* Schrift auf 0: der Linktext verschwindet optisch, steht aber weiter
           im Quelltext - fuer Vorleseprogramme bleibt er lesbar. */
        font-size: 0;
        line-height: 0;
    }
}

/* Am Handy bleibt es beim Text. Das Overlay-Menue stellt die Navigation als
   Liste von Zeilen dar und ueberschreibt dabei Schriftgroessen, wodurch Text
   und Logo uebereinander lagen. */