/* ===========================================================================
 * FHK Shop — seitenweite Anpassungen (NICHT nur Shop-Bereich!)
 * Wird auf allen Seiten geladen, weil das Theme-Menü überall vorkommt.
 *
 * Zweck: Hauptmenü in der MOBILANSICHT sauber auf mehrere Zeilen umbrechen
 *        lassen — kein Burger, keine gequetschte Einzeile.
 *
 * Hinweis zur Spezifität: Das Theme (Twenty-Twelve-Abkömmling "heinke") setzt
 * die Menüpunkte per @media (min-width:100px) auf "inline-table" mit riesiger
 * Zeilenhöhe. Wir schlagen das gezielt über den #site-navigation-Vorsatz
 * (ID = höhere Gewichtung) plus !important an den entscheidenden Stellen.
 * =========================================================================== */

@media screen and (max-width: 767px) {

    /* "Menü"-Umschalter (Burger-Ersatz) in der Mobilansicht sicher ausblenden */
    #site-navigation .menu-toggle {
        display: none !important;
    }

    /* Menüliste: zentrierte, umbrechende Reihe statt inline-table */
    #site-navigation ul.nav-menu,
    #site-navigation div.nav-menu > ul {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 18px;          /* 8px zwischen Zeilen, 18px zwischen Punkten */
        width: 100%;
        margin: 0;
        padding: 4px 0;
        list-style: none;
    }

    /* Einzelne Menüpunkte: Block statt inline-table, keine Floats/Ränder */
    #site-navigation ul.nav-menu > li {
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        width: auto !important;
    }

    /* Links: normale Zeilenhöhe (Theme hat 3.69!), kompakter Tap-Bereich */
    #site-navigation ul.nav-menu > li > a {
        display: block;
        padding: 4px 2px !important;
        line-height: 1.4 !important;
        font-size: 14px !important;
        white-space: nowrap;
    }

    /* Etwaige Untermenüs nicht ins Flex-Layout zwingen */
    #site-navigation ul.nav-menu li ul {
        display: none;
    }
}