/*
 * wordpress-plugins/bb-blog-menu/assets/bbm.css
 *
 * De vormgeving van het blogmenu, in de stijl van bajabikes.eu.
 *
 * Alle waarden zijn GEMETEN op de hoofdsite, niet geschat: de gele balk is
 * #FFD141 en 80px hoog, het paneel heeft ronde onderhoeken van 16px en schaduw
 * rgba(0,0,0,.15) 0 8px 16px, het landenvlak is #F3F9FD.
 *
 * Alles staat onder .bbm-nav. Het thema is een vijandige omgeving: zijn stijlen
 * mogen hier niet in lekken en die van ons niet naar buiten. Daarom een kleine
 * reset binnen de wortelklasse en nergens een globale selector.
 */
.bbm-nav {
  --bbm-yellow:  #FFD141;
  --bbm-primary: #2C508E;
  --bbm-ink:     #252525;
  --bbm-surface: #F3F9FD;
  --bbm-white:   #FFFFFF;
  --bbm-border:  #E5E5E5;
  --bbm-success: #00AB3C;
  --bbm-bar-h:   80px;
  --bbm-max:     1320px;
  --bbm-logo-ruimte: 240px;
  --bbm-font:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  position: relative;
  background: var(--bbm-yellow);

  /*
   * Het geel loopt door tot de schermranden.
   *
   * Onze balk zit in de container van het thema (1170px). Normaal valt dat niet
   * op omdat #navigation zelf ook geel is, maar in de sticky-stand verliest die
   * zijn volle breedte en zag je wit aan beide kanten.
   *
   * Een box-shadow zonder vervaging schildert links en rechts door zonder de
   * layout aan te raken. Bewust geen width:100vw: dat kan een horizontale
   * schuifbalk veroorzaken zodra er een verticale is.
   */
  box-shadow: -100vmax 0 0 var(--bbm-yellow), 100vmax 0 0 var(--bbm-yellow);
  font-family: var(--bbm-font);
  color: var(--bbm-ink);
  -webkit-font-smoothing: antialiased;
}

/*
 * Let op: hier staat BEWUST geen z-index.
 *
 * Het thema plaatst #logo absoluut over de linkerkant van dezelfde container.
 * Met z-index op deze nav schilderde de gele balk daar overheen en was het logo
 * weg. Het paneel heeft zijn eigen z-index; die is genoeg.
 */

/*
 * Reset binnen de wortel.
 *
 * Dit moet streng zijn. Het Soledad-thema zet op zijn menu-items hoofdletters,
 * rechtse uitlijning, randen en scheidingsstreepjes via ::after - en dat kwam
 * allemaal door een lichte reset heen. Een halve reset in een vijandige
 * omgeving is geen reset.
 *
 * Alles hieronder staat achter .bbm-nav, dus het lekt nergens naar buiten.
 */
.bbm-nav, .bbm-nav * {
  box-sizing: border-box;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-style: normal;
  float: none;
  text-shadow: none;
}

.bbm-nav ul, .bbm-nav ol, .bbm-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  background: none;
}

/* Thema's hangen streepjes en pijltjes aan menu-items; die horen hier niet. */
.bbm-nav li::before, .bbm-nav li::after, .bbm-nav a::before, .bbm-nav a::after, .bbm-nav .bbm-toplink::after {
  content: none !important;
  display: none !important;
}

.bbm-nav button {
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
  text-align: left; width: auto; height: auto;
  text-transform: none; box-shadow: none;
}

.bbm-nav a {
  color: inherit;
  text-decoration: none;
  border: 0;
  background: none;
  box-shadow: none;
  font-weight: inherit;
}

.bbm-nav a:hover, .bbm-nav a:focus { text-decoration: none; }

/* De caret is een eigen element en moet zijn randen juist wel houden. */
.bbm-nav .bbm-caret::before, .bbm-nav .bbm-caret::after { content: none !important; }

/* ---------- de hamburger ---------- */

/*
 * Boven 992px bestaat hij niet. Daaronder is hij het enige wat je ziet tot je
 * hem aantikt: zonder hamburger werd de hele balk een reeks gele vlakken onder
 * elkaar, en dat is geen menu maar een muur.
 */
.bbm-nav .bbm-burger {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bbm-ink);
}

/*
 * De drie streepjes staan absoluut in een kadertje van 20x14. Een eerdere
 * versie stapelde ze met negatieve marges; dat schoof ze bij het draaien de
 * knop uit.
 */
.bbm-nav .bbm-burger-icoon {
  position: relative;
  flex: none;
  width: 20px;
  height: 14px;
}

.bbm-nav .bbm-burger-lijn {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: top .18s ease, transform .18s ease, opacity .18s ease;
}

.bbm-nav .bbm-burger-lijn:nth-child(1) { top: 0; }
.bbm-nav .bbm-burger-lijn:nth-child(2) { top: 6px; }
.bbm-nav .bbm-burger-lijn:nth-child(3) { top: 12px; }

/* Open: de buitenste twee kruisen op het midden, de middelste verdwijnt. */
.bbm-nav.is-mobiel-open .bbm-burger-lijn:nth-child(1) { top: 6px; transform: rotate(45deg); }
.bbm-nav.is-mobiel-open .bbm-burger-lijn:nth-child(2) { opacity: 0; }
.bbm-nav.is-mobiel-open .bbm-burger-lijn:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Op desktop tekent het thema zijn eigen logo; het onze blijft daar weg. */
.bbm-nav .bbm-logo { display: none; }

/* ---------- alleen op mobiel ---------- */

/*
 * De kop "Ga naar..." en de terugknop horen bij het doorklikmenu op een
 * telefoon. Op desktop klapt een paneel gewoon open onder zijn kop; daar zou
 * een terugknop nergens op slaan.
 */
.bbm-nav .bbm-mobielkop,
.bbm-nav .bbm-terug { display: none; }

/* ---------- de balk ---------- */
.bbm-nav .bbm-bar {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;   /* zoals de blog nu: logo links, menu rechts */
  gap: 0;                      /* de hoofdsite laat de items tegen elkaar staan */
  max-width: var(--bbm-max);
  margin: 0 auto;
  min-height: var(--bbm-bar-h);

  /* Links ruimte houden voor het logo, dat daar absoluut overheen ligt. */
  padding: 0 16px 0 var(--bbm-logo-ruimte);
}

.bbm-nav .bbm-top { display: flex; align-items: center; position: static; }

.bbm-nav .bbm-toplink {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 24px 8px;   /* gemeten op bajabikes.eu */
  font-size: 14px;
  white-space: nowrap;
  font-weight: 700;   /* de hoofdsite is 14px VET; dat leest als groter */
  line-height: 1.2;
  color: var(--bbm-ink);
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.bbm-nav .bbm-toplink:hover, .bbm-nav .bbm-toplink:focus-visible { color: var(--bbm-primary); }

.bbm-nav .bbm-top.is-open > .bbm-toplink {
  color: var(--bbm-primary);
  border-bottom-color: var(--bbm-primary);
}

.bbm-nav :focus-visible { outline: 2px solid var(--bbm-primary); outline-offset: 2px; }

.bbm-nav .bbm-caret {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}

.bbm-nav .bbm-top.is-open .bbm-caret { transform: rotate(-135deg) translate(-2px, -2px); }

/* Het icoon neemt de kleur van de tekst over en krimpt nooit. */
.bbm-nav .bbm-icoon {
  flex: none;
  width: 20px;    /* gemeten op bajabikes.eu */
  height: 20px;
  opacity: .85;
}

.bbm-nav .bbm-toplabel { display: inline-block; }

/* ---------- het paneel ---------- */
.bbm-nav .bbm-panelwrap {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: min(var(--bbm-max), calc(100vw - 32px));
  background: var(--bbm-white);
  border-radius: 0 0 16px 16px;
  box-shadow: rgba(0, 0, 0, .15) 0 8px 16px 0;
  overflow: hidden;
  z-index: 3;
}

.bbm-nav .bbm-panelwrap[hidden] { display: none; }

/*
 * Het paneel stapelt: zoekveld boven, inhoud eronder. De twee vlakken naast
 * elkaar (landen | steden) zijn de taak van .bbm-body, niet van het paneel -
 * anders belandt het zoekveld naast de resultaten in plaats van erboven.
 */
.bbm-nav .bbm-panel { display: block; }

.bbm-nav .bbm-panel--flat { padding: 24px 8px; }

.bbm-nav .bbm-cols { display: flex; flex-wrap: wrap; width: 100%; }

.bbm-nav .bbm-col { flex: 1 1 0; min-width: 0; }

.bbm-nav .bbm-item > a, .bbm-nav .bbm-item > .bbm-parent {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  line-height: 1.35;
  border-radius: 800px;
  transition: background-color .12s ease, color .12s ease;
  overflow-wrap: anywhere;
}

.bbm-nav .bbm-item > a:hover, .bbm-nav .bbm-item > .bbm-parent:hover, .bbm-nav .bbm-item > a:focus-visible { background: var(--bbm-surface); }

/* landen links, steden rechts */
.bbm-nav .bbm-parents {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bbm-surface);
  padding: 24px 0 24px 8px;
}

.bbm-nav .bbm-children {
  flex: 0 0 220px;
  background: var(--bbm-white);
  padding: 24px 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.bbm-nav .bbm-item[data-bbm-off] { display: none; }

.bbm-nav .bbm-item[data-bbm-nomatch] { display: none; }

/* Zoeken kijkt door de landenverdeling heen: dan tellen de merkjes niet meer. */
.bbm-nav .bbm-panel.is-zoeken .bbm-item[data-bbm-off] { display: block; }

.bbm-nav .bbm-panel.is-zoeken .bbm-item[data-bbm-nomatch] { display: none; }

.bbm-nav .bbm-parent.is-active {
  background: var(--bbm-primary);
  color: var(--bbm-white);
}

.bbm-nav .bbm-parent.is-active:hover { background: var(--bbm-primary); }

/* ---------- kopjes boven de lijsten ---------- */
.bbm-nav .bbm-kop {
  margin: 0 0 16px;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bbm-ink);
}

/* ---------- zoekveld ---------- */
.bbm-nav .bbm-search { padding: 16px 24px 8px; }

/*
 * Het veld staat gecentreerd en is smaller dan het paneel. Over de volle
 * breedte oogt een zoekbalk als een formulier; hier is het een hulpmiddel bij
 * een lange lijst, en dan mag hij bescheiden zijn.
 */
.bbm-nav .bbm-search-veld {
  position: relative;
  display: block;
  max-width: 420px;
  margin: 0 auto;
}

.bbm-nav .bbm-search-input {
  width: 100%;
  min-height: 44px;

  /* Rechts 56px vrij voor de knop. In de shorthand, niet als losse
     padding-right ervoor - die werd hierdoor stilletjes overschreven en de
     tekst liep onder de knop door. */
  padding: 10px 56px 10px 16px;
  font: inherit;
  font-size: 14px;
  color: var(--bbm-ink);
  background: var(--bbm-white);
  border: 1px solid var(--bbm-border);
  border-radius: 800px;
  appearance: none;
}

/* De groene knop, zoals op de hoofdsite. Decoratief: filteren gaat vanzelf. */
.bbm-nav .bbm-zoekknop {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bbm-success);
  color: var(--bbm-white);
  pointer-events: none;
}

.bbm-nav .bbm-search-input::placeholder { color: #9E9E9E; }

.bbm-nav .bbm-search-input:focus-visible {
  outline: 2px solid var(--bbm-primary);
  outline-offset: 1px;
  border-color: var(--bbm-primary);
}

/* ---------- zoeken: hoe de resultaten zich gedragen ---------- */
.bbm-nav .bbm-body { display: flex; align-items: stretch; width: 100%; }

.bbm-nav .bbm-leeg { margin: 0; padding: 16px 24px; font-size: 14px; color: #9E9E9E; }

.bbm-nav .bbm-panel.is-leeg .bbm-leeg { display: block; }

/*
 * Tijdens het zoeken vervalt de kolomindeling.
 *
 * De kolommen zijn vaste blokken; als daar items uit wegvallen ontstaan er
 * gaten en staan drie treffers verspreid over vijf kolommen. display:contents
 * haalt de kolomwikkels weg, waarna de treffers netjes in een raster
 * doorstromen.
 */
.bbm-nav .bbm-panel.is-zoeken .bbm-col { display: contents; }

/*
 * Het raster geldt ALLEEN tijdens het zoeken. In rust is de stedenlijst een
 * smalle kolom van 220px; daar vijf kolommen in persen zette elke stadsnaam
 * verticaal, letter voor letter.
 */
.bbm-nav .bbm-panel.is-zoeken .bbm-cols, .bbm-nav .bbm-panel.is-zoeken .bbm-cols-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
}

/* Zoeken gaat over alles, dus de landenkolommen maken plaats. */
.bbm-nav .bbm-panel--nested.is-zoeken .bbm-parents { display: none; }

.bbm-nav .bbm-panel--nested.is-zoeken .bbm-children { flex: 1 1 auto; }

.bbm-nav .bbm-panel--nested.is-zoeken .bbm-kop { display: none; }

/* Een lange lijst mag het scherm niet uitlopen. */
.bbm-nav .bbm-panel--flat .bbm-cols, .bbm-nav .bbm-parents .bbm-cols { max-height: min(70vh, 640px); overflow-y: auto; }

/* ---------- de sticky balk van het thema ---------- */

/*
 * Bij het scrollen krimpt het thema zijn balk van 82 naar 60px en maakt hij
 * hem position:fixed. Onze balk bleef 80px staan en is 270px smaller dan het
 * geel eronder - daardoor stak er een smalle gele strook onder de balk uit,
 * als een trapje. Gemeten op de blog: 21px overstek.
 *
 * Twee regels lossen het op:
 *  - onze balk krimpt mee. De lucht om de menu-items valt weg (24px boven en
 *    onder), waarmee de balk van 71 naar 60px gaat en de items gecentreerd
 *    blijven staan.
 *  - op desktop schildert het THEMA het geel, niet wij. Zo kan er niets van
 *    ons meer buiten die balk vallen, ook geen enkele pixel. Op mobiel doen we
 *    het wel zelf, want daar breekt onze balk juist uit de container.
 */
@media (min-width: 992px) {
  .bbm-nav { background: transparent; }

  .is-sticky .bbm-nav,
  .is-sticky .bbm-nav .bbm-bar { min-height: 60px; }

  .is-sticky .bbm-nav .bbm-toplink { padding-top: 0; padding-bottom: 0; }
}

/* ---------- onder 992px: alles onder elkaar ---------- */

@media (max-width: 991.98px) {
  /*
   * Open menu = schermvullend wit vlak.
   *
   * Onze nav zit in de container van het thema (1170px, gecentreerd) en het
   * thema geeft #navigation zelf een gele achtergrond. Binnen die container
   * blijven betekent dus gele randen links en rechts. Met position:fixed
   * stappen we uit de container en vullen we het scherm - precies wat de
   * hoofdsite doet.
   */
  .bbm-nav.is-mobiel-open {
    position: fixed;
    inset: 0;
    width: auto;          /* inset regelt de breedte al */
    margin-left: 0;
    box-shadow: none;
    background: var(--bbm-white);   /* open = wit, zoals de hoofdsite */
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /*
     * Alles bovenaan houden.
     *
     * De gesloten balk is een flexrij met wrap (logo links, hamburger rechts,
     * paneel eronder). Zodra hij opengaat wordt hij schermvullend, en dan
     * verdeelt de standaardwaarde van align-content de twee regels over de
     * hele hoogte. Gemeten bij een scherm van 778px: kruisje op 179, paneel
     * op 580 - twee gaten van honderden pixels. Met flex-start staat het
     * kruisje op 0 en het paneel op 43.
     */
    align-content: flex-start;
  }

  /*
   * Het logo verdwijnt zodra het menu opengaat. Het open vlak is wit en het
   * logo is wit met blauw: daar blijft alleen "BIKES" van over. Het hoort bij
   * de gele merkbalk, niet bij het menu zelf - de hoofdsite doet dat ook zo.
   */
  .bbm-nav.is-mobiel-open .bbm-logo { display: none; }

  /* De X blijft bovenaan staan terwijl de lijst eronder scrolt. */
  .bbm-nav.is-mobiel-open .bbm-burger {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bbm-white);
    border-bottom: 1px solid var(--bbm-border);

    /* Het kruisje naar rechts: daar zit je duim. Het woord "Menu" hoeft er
       dan niet meer bij - een X spreekt voor zich. */
    width: 100%;
    justify-content: flex-end;
  }

  .bbm-nav.is-mobiel-open .bbm-burger-tekst { display: none; }

  .bbm-nav .bbm-icoon { width: 22px; height: 22px; opacity: 1; }

  /*
   * Kop boven de lijst, zoals "Ga naar..." op de hoofdsite.
   *
   * ALLEEN als het menu open is. Zonder die voorwaarde stond hij ook in
   * gesloten toestand onder de hamburger, en dan lijkt er een stuk menu open
   * te staan dat er niet is.
   */
  .bbm-nav .bbm-mobielkop { display: none; }

  .bbm-nav.is-mobiel-open .bbm-mobielkop {
    display: block;
    margin: 0;
    padding: 16px 16px 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--bbm-ink);
  }

  /*
   * Doorklikmenu: staat er een paneel open, dan verdwijnen de andere koppen en
   * de titel. Je ziet dan alleen waar je bent, met een weg terug.
   */
  .bbm-nav.is-paneel-open .bbm-mobielkop { display: none; }
  .bbm-nav.is-paneel-open .bbm-top:not(.is-open) { display: none; }
  .bbm-nav.is-paneel-open .bbm-top.is-open > .bbm-toplink { display: none; }

  .bbm-nav .bbm-terug {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbm-ink);
    border-bottom: 1px solid var(--bbm-border);
  }

  .bbm-nav .bbm-terug-pijl {
    flex: none;
    width: 10px;
    height: 10px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  /* Het pijltje per kop wijst naar rechts: er zit een niveau achter. */
  .bbm-nav .bbm-caret {
    transform: rotate(-45deg) translate(-2px, 2px);
  }
  .bbm-nav .bbm-top.is-open .bbm-caret { transform: rotate(-45deg) translate(-2px, 2px); }

  /*
   * Op een telefoon blijft de balk GEEL en loopt hij van rand tot rand.
   *
   * Geel is de merkbalk - de hoofdsite doet het net zo, en het logo van het
   * thema is wit met blauw en alleen daarop leesbaar. Pas het OPEN menu is wit.
   *
   * De breedtetruc is nodig omdat onze nav in de container van het thema zit
   * (1170px, gecentreerd) terwijl #navigation zelf al geel is over de volle
   * breedte. Zonder deze regel zou onze balk smaller zijn dan het geel eronder.
   */
  .bbm-nav {
    background: var(--bbm-yellow);
    width: 100vw;
    margin-left: calc(50% - 50vw);

    /* De breedtetruc gaat uit van een GECENTREERDE container. Op een telefoon
       klopt dat niet altijd; deze doorloop dekt wat er overblijft. */
    box-shadow: -100vmax 0 0 var(--bbm-yellow), 100vmax 0 0 var(--bbm-yellow);

    /* Logo links, hamburger rechts, het paneel op een eigen regel eronder. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  /*
   * Het logo op de gele balk: klein en links.
   *
   * De breedte staat op het logo, niet op de afbeelding. Gemeten op de blog:
   * met alleen een hoogte en width:auto belandt de afbeelding in een
   * cirkelredenering met zijn krimpende ouder en komt hij op 22px uit. Met een
   * vaste breedte en height:auto volgt de hoogte de verhouding van het bestand
   * zelf (230x62), en klopt hij: 104x28.
   */
  .bbm-nav .bbm-logo {
    display: flex;
    align-items: center;
    padding: 8px 16px;
  }

  .bbm-nav .bbm-logo img {
    display: block;
    width: 104px;
    height: auto;
  }

  /* Het paneel krijgt een eigen regel onder logo + hamburger. */
  .bbm-nav .bbm-paneel-mobiel { flex: 1 0 100%; }

  /* Hamburger rechts, zoals op de hoofdsite en binnen duimbereik. */
  .bbm-nav .bbm-burger { margin-left: auto; }

  /* De hamburger bestaat alleen hier. */
  .bbm-nav .bbm-burger { display: flex; }

  /* En de balk bestaat pas als je hem aantikt. */
  .bbm-nav .bbm-bar { display: none; }
  .bbm-nav.is-mobiel-open .bbm-bar { display: flex; }

.bbm-nav .bbm-bar {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
  }

.bbm-nav .bbm-top { display: block; }

.bbm-nav .bbm-toplink {
    width: 100%;
    /*
     * Links uitlijnen, niet space-between. Met space-between zweefde het label
     * tussen het icoon en het pijltje in het midden, en werd het pijltje tegen
     * de rand geduwd. Icoon en label horen bij elkaar; het pijltje gaat rechts
     * staan via margin-left op de caret.
     */
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;          /* tikdoel */
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
  }

  .bbm-nav .bbm-toplink .bbm-caret { margin-left: auto; }

.bbm-nav .bbm-top.is-open > .bbm-toplink { border-bottom-color: var(--bbm-primary); }

.bbm-nav .bbm-panelwrap {
    position: static;
    transform: none;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: var(--bbm-white);
  }

.bbm-nav .bbm-panel { display: block; }

.bbm-nav .bbm-panel--flat { padding: 8px 0; }

/*
   * GEEN scrollgebied binnenin op mobiel.
   *
   * De desktopregel is .bbm-nav .bbm-panel--flat .bbm-cols en dus specifieker
   * dan een kale .bbm-nav .bbm-cols; die won hier en gaf Bezienswaardigheden
   * een eigen scroller terwijl Kies je bestemming er geen had. Vandaar dat de
   * een wel meeveegde op een iPhone en de ander niet.
   *
   * Alles scrolt nu in het schermvullende vlak zelf. Een scroller in een
   * scroller is op iOS sowieso onbetrouwbaar.
   */
  .bbm-nav .bbm-cols,
  .bbm-nav .bbm-panel--flat .bbm-cols,
  .bbm-nav .bbm-parents .bbm-cols,
  .bbm-nav .bbm-childlist {
    display: block;
    max-height: none;
    overflow: visible;
  }

.bbm-nav .bbm-col { width: 100%; }

  /*
   * Op een telefoon vervalt de landenlaag: je ziet meteen alle steden, in een
   * alfabetische lijst met een zoekveld erboven. Zo doet de hoofdsite het ook.
   * Door 30 landen scrollen om er een aan te tikken en dan pas steden te zien,
   * is op dit formaat twee stappen te veel.
   */
.bbm-nav .bbm-body { display: block; }

.bbm-nav .bbm-parents { display: none; }

.bbm-nav .bbm-children {
    flex: none; width: 100%; max-height: none; overflow: visible;
    padding: 8px 0;
    background: var(--bbm-white);
  }

  /* Het merkje van het land telt hier niet: alles is zichtbaar. */
.bbm-nav .bbm-item[data-bbm-off] { display: block; }

.bbm-nav .bbm-item[data-bbm-nomatch] { display: none; }

.bbm-nav .bbm-search { padding: 12px 16px; }

.bbm-nav .bbm-panel.is-zoeken .bbm-cols, .bbm-nav .bbm-panel.is-zoeken .bbm-cols-grid { display: block; }

.bbm-nav .bbm-item > a, .bbm-nav .bbm-item > .bbm-parent {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 0;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {.bbm-nav *, .bbm-nav *::before, .bbm-nav *::after {
    transition: none !important;
    animation: none !important;
  }
}