/* ============================================================
   menu-mobiel.css — Stefan Desaeyere Fotografie
   Zorgt dat het overlaymenu op elke pagina hetzelfde werkt.

   Op 19 pagina's stond dit als los <style>-blok in de pagina,
   op de 76 andere niet. Daar bleef het menu op gsm een raster
   van twee kolommen dat niet meescrolde, waardoor de onderste
   items onbereikbaar waren.

   Inladen met één regel in de <head>:
     <link rel="stylesheet" href="menu-mobiel.css">
   ============================================================ */

@media (max-width: 860px) {

  /* Het menu moet kunnen scrollen als het niet op één scherm past */
  .nav-overlay {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Eén kolom in plaats van twee, en bovenaan beginnen */
  .nav-overlay .overlay-inner {
    grid-template-columns: 1fr !important;
    padding: 90px 8% 32px !important;
    align-items: start !important;
  }

  /* Het adresblok links kost te veel ruimte op een klein scherm */
  .nav-overlay .meta { display: none !important; }

  /* Menu-items leesbaar maar niet overdreven groot */
  .nav-overlay ul li a {
    font-size: clamp(22px, 5.5vw, 34px) !important;
  }

  /* Taalkeuze onderaan */
  .nav-overlay .overlay-lang-row { padding-top: 24px; }
  .nav-overlay .overlay-lang-row a { font-size: 28px !important; }
}
