/* Mobiele bovenbalk voor de marketingpagina's
   ============================================
   Deze pagina's hebben allemaal dezelfde inline navbalk: logo links, en rechts
   de taalschakelaar plus "Log in" en "Aanmelden". Op mobiel paste dat niet.

   Gemeten op 390px voor deze fix:
     logo 159 + taalschakelaar 80 + Log in 69 + Aanmelden 101 + gaps + padding
     = 442px nodig, 390px beschikbaar.
   Gevolg: #navAuth wrapte, "Log in" kwam boven "Aanmelden", het blok werd 62px
   hoog in een balk van 61px en de knoppen vielen zichtbaar buiten de balk.

   Het logo is een woordmerk van 910x160 (ratio 5,69), dus op 28px hoog al
   159px breed. Daar zit de meeste winst, samen met een compactere
   taalschakelaar en "Log in" als tekstlink in plaats van een omrande knop.

   Selectors zijn met nav#nav gescoped zodat ze de inline CSS van elke pagina
   verslaan, ongeacht of dit bestand voor of na het <style>-blok staat.

   Dit bestand hoort ALLEEN op de pagina's die de bug hebben. Gemeten in een
   iframe-harnas op 375px: de 12 blogartikelen, copetparent-blog.html,
   wat-is-co-pet-parenting.html en waar-wij-voor-staan.html wrapten
   (#navAuth 62px in een balk van 61px). index.html, copetparent-over-ons.html
   en copetparent-hoe-het-werkt.html verbergen #navAuth al op mobiel en
   copetparent-help-centre.html heeft het leeg; die hebben dit niet nodig.

   Gemeten na de fix: geen wrap en geen horizontale overflow op 390, 375 en
   320px, met de balk op 61px en #navAuth op 31 tot 32px.
*/

@media (max-width: 520px) {
  nav#nav .nav-in { padding: 0 14px; gap: 8px; flex-wrap: nowrap; }
  nav#nav .nav-logo { height: 23px; }
  nav#nav .nav-r { gap: 7px; flex-shrink: 0; }
  /* Bewust GEEN display hier: index, over-ons en hoe-het-werkt zetten
     #navAuth op mobiel op display:none. Een display:flex hier zou die
     knoppen daar juist terugbrengen. white-space:nowrap is genoeg om de
     twee inline-knoppen op een regel te houden. */
  nav#nav #navAuth { white-space: nowrap; flex-shrink: 0; }
  nav#nav #navAuth .n-up { margin-left: 6px; }
  /* "Log in" als tekstlink: scheelt de rand plus de horizontale padding */
  nav#nav .n-in {
    border: none; background: none;
    padding: 6px 2px; font-size: 13px; color: var(--mid, #555);
  }
  nav#nav .n-up { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
  nav#nav .copet-lang { padding: 2px; gap: 1px; }
  nav#nav .copet-lang-btn--flag { min-width: 28px; min-height: 26px; padding: 3px 4px; }
  nav#nav .copet-lang-btn--flag img { width: 19px; height: 19px; }
}

@media (max-width: 385px) {
  nav#nav .nav-in { padding: 0 12px; gap: 6px; }
  nav#nav .nav-logo { height: 21px; }
  nav#nav .n-up { padding: 8px 10px; font-size: 12.5px; }
  nav#nav .copet-lang-btn--flag { min-width: 26px; padding: 3px; }
  nav#nav .copet-lang-btn--flag img { width: 18px; height: 18px; }
}

/* Onder 360px is er geen ruimte voor beide acties. "Aanmelden" blijft, want
   dat is hier de belangrijkste stap; inloggen kan nog via de footer. */
@media (max-width: 360px) {
  nav#nav .n-in { display: none; }
}