/* ===========================================================================
   De mobiele balk bovenaan

   Het volledige logo is ruim 200px breed. Samen met de vier iconen paste dat
   niet op één regel, en dan breekt Bootstrap de balk in tweeën — logo boven,
   iconen eronder.

   Oplossing: alleen het beeldmerk tonen. Niet met een tweede bestand (dat
   moet dan bijgehouden worden en ontbrak eerder ook), maar door een venster
   over de bestaande SVG: links staat het beeldmerk, het woord valt erbuiten.
   =========================================================================== */

#navbarMobile .container-fluid {
    /* Nooit afbreken naar een tweede regel. Zonder deze regel is het
       alleen een kwestie van een iets langer logo of een icoon erbij. */
    flex-wrap: nowrap;
}

.hsb-merk {
    display: block;
    flex: 0 0 auto;

    /* Dit is het venster. Valt er een stukje van de "S" in beeld, of mis je
       een randje van het beeldmerk, dan is dit het enige getal dat je hoeft
       bij te stellen. */
    width: 44px;
    height: 40px;
    overflow: hidden;

    padding: 0;
    margin: 0;
}

.hsb-merk img {
    display: block;
    height: 40px;
    width: auto;

    /* Bootstrap zet img op max-width:100%; dat zou de SVG in het venster
       persen in plaats van hem eruit te laten lopen. */
    max-width: none;
}

/* De iconen rechts krijgen de ruimte die overblijft en blijven op één regel
   staan, ook op een smalle telefoon. */
#navbarMobile .container-fluid > .d-flex {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}