/*
 * Mobiele aanpassingen — mobile UX/UI-audit juli 2026 (docs/MOBILE_UX_AUDIT.md).
 *
 * ALLE regels in dit bestand staan onder `@media (max-width: 639.98px)` (net
 * onder Tailwind's `sm`-breakpoint van 640px), zodat desktop (≥ 640px) exact
 * blijft zoals het was — géén desktop-regressie. Het bestand is bewust
 * unlayered (zoals de overige component-CSS) en wordt ná de andere componenten
 * geïmporteerd, waardoor het van Tailwind-utilities (bv. `text-sm`) wint op
 * telefoonbreedte.
 *
 * Criterium-ID's verwijzen naar docs/MOBILE_UX_AUDIT.md.
 */

@media (max-width: 639.98px) {
  /* FRM-1 — iOS Safari zoomt de hele viewport in zodra een tekstveld < 16px
     focus krijgt (en zoomt niet terug). Til daarom álle tekstinvoer naar 16px.
     Checkbox/radio/range/color/file/hidden zijn geen tekstinvoer en blijven
     ongemoeid. Dit dekt élk veld in de app in één regel, ook velden die per
     component `text-sm` (14px) of `text-lg` (18px) meekregen. */
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="submit"], [type="button"]),
  textarea,
  select,
  [contenteditable="true"] {
    font-size: 16px;
  }

  /* NAV-11 — de subnav-balk scrolt op telefoon horizontaal (overflow-x:auto),
     wat óók verticaal afknipt en de subpagina-dropdown onbereikbaar maakt.
     Zolang er een dropdown in de balk open staat, zetten we de scroller op
     overflow:visible zodat de dropdown volledig zichtbaar is; bij sluiten keert
     de horizontale scroll terug. Getarget met :has() (moderne mobiele browsers). */
  [data-test-id="subnav"]:has([data-dropdown-target="trigger"][aria-expanded="true"]) [data-scroll-edge-target="scroller"] {
    overflow: visible;
  }

  /* TYP-1 (beslissing V-2) — lopende tekst een maatje kleiner op telefoon:
     15px / regelafstand 1.5 (was 16px / 1.6). Chrome-elementen met een eigen
     expliciete text-sm/-xs/-lg blijven op hun eigen maat; dit raakt alleen wat
     de body-basis erft plus de twee lees-oppervlakken. */
  body {
    font-size: 15px;
    line-height: 1.5;
  }
  /* .ds-prose wordt co-gelokaliseerd in widget.css afgehandeld (die heeft een
     eigen unlayered 16px-basisregel die anders zou winnen). Hier alleen de
     post-body, die geen concurrerende component-regel heeft. */
  .ds-post-body {
    font-size: 15px;
    line-height: 1.5;
    /* TYP-2 — lange URL's/woorden breken binnen de kolom i.p.v. overlopen. */
    overflow-wrap: break-word;
  }
}