/**
 * Header — responsive reparatie voor het gat tussen ~640px en 1023px.
 *
 * In dat bereik geldt de tabletopmaak uit style.css nog niet volledig:
 * het logo schuift naar rechts, de bovenbalk verspringt en de hoofdnavigatie
 * valt over twee regels (header wordt dan 248px hoog i.p.v. ~150px).
 *
 * Deze regels raken alleen het bereik 641–1023px; daarbuiten verandert er niets.
 * Terug te draaien door de enqueue van dit bestand in functions.php te verwijderen.
 */

@media (min-width: 641px) and (max-width: 1023px) {

    /* ---- bovenste rij: logo links, contactgegevens rechts ---- */
    div#inner-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 20px;
    }

    div#inner-header div.left {
        order: 0;
        float: none;
        width: 190px;
        max-width: 40%;
        margin: 0;
    }

    div#inner-header div.left a {
        display: block;
        width: 100%;
    }

    div#inner-header div.left a img.logo {
        width: 100%;
        height: auto;
        max-width: 190px;
    }

    div#inner-header div.header-top {
        order: 1;
        flex-basis: auto;
        width: auto;
        max-width: 60%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 4px 10px;
        text-align: right;
    }

    div#inner-header div.header-top > p.toptext {
        margin: 0;
        font-size: 13px;
        line-height: 20px;
    }

    div#inner-header div.reviews-score {
        order: 2;
        flex-basis: 100%;
        display: flex !important;
        justify-content: flex-end;
        margin-top: 2px;
    }

    /* ---- hoofdnavigatie: op één regel houden ---- */
    div#navbar {
        width: 100%;
        padding: 0 12px;
        clear: both;
    }

    #navbar nav#site-navigation {
        width: 100%;
    }

    ul.nav-menu,
    div.nav-menu > ul {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
        text-align: center;
    }

    ul.nav-menu > li {
        flex: 0 1 auto;
        min-width: 0;
    }

    /* Krappere items zodat alle zeven op één regel passen */
    ul.nav-menu > li > a,
    ul#menu-xcel-nieuw > li > a {
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 12px;
        letter-spacing: -.2px;
        white-space: nowrap;
    }

    /* het scheidingsstreepje tussen de items smaller maken */
    .nav-menu > li > a:after {
        right: -1px;
    }

    /* submenu's blijven normaal leesbaar */
    ul.nav-menu ul.sub-menu {
        text-align: left;
    }

    ul.nav-menu ul.sub-menu li a {
        font-size: 13px;
        white-space: normal;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* Tussen 641 en 800px is het nog krapper: iets kleinere letters */
@media (min-width: 641px) and (max-width: 800px) {
    ul.nav-menu > li > a,
    ul#menu-xcel-nieuw > li > a {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 11px;
    }

    div#inner-header div.left {
        width: 160px;
    }
}