/* mobiel.css: gedeelde vangnetregels voor de telefoon, op elke pagina met de
   gewone kop. De paginastijlen staan inline per pagina; dit bestand corrigeert
   alleen wat op 390px buiten beeld liep of te klein was om te tikken.
   Toegevoegd 1 oktober 2026. */

/* Brede blokken (ruwe meetdata, hashes) scrollen binnen hun eigen vak in
   plaats van de hele pagina breder te maken. */
pre { max-width: 100%; overflow-x: auto; }
pre > code { white-space: pre; }
:not(pre) > code { overflow-wrap: anywhere; }

/* Een rasterkolom mag nooit breder worden dan zijn vak. Zonder minmax(0, ...)
   duwt één lange domeinnaam het hele raster over de rand. */
.hero > *, .hero-getallen > *, .bb-kolommen > * { min-width: 0; }

@media (max-width: 700px) {
  .hero { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-getallen { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 1rem !important; }
  .bb-kolommen { grid-template-columns: minmax(0, 1fr) !important; }
  .bb-kolommen ul { grid-template-columns: minmax(0, 1fr) !important; }
  .bb-kolommen li { min-width: 0; }
  .bb-kolommen li, .bb-kolommen a { overflow-wrap: anywhere; }
  .sector-bars { grid-template-columns: minmax(0, 1fr) !important; }
  .sec-row { min-width: 0; }
  .sec-row > * { min-width: 0; overflow-wrap: anywhere; }

  /* Lange onafgebroken tekens (UUID's, TCF-strings, URL's) breken af in
     plaats van de regel over de rand te duwen. */
  main p, main li, main td, main th, main dd, main blockquote { overflow-wrap: break-word; }
  .sector-kop, .sector-kop-tekst { min-width: 0; }
  .sector-kop-tekst { overflow-wrap: anywhere; }

  /* Brede tabellen in artikelen: zijwaarts scrollen binnen de tabel. */
  main table { display: block; max-width: 100%; overflow-x: auto; }

  /* Tikvlakken in de voet: minstens 44px hoog. */
  .footer-nav { display: flex; flex-wrap: wrap; column-gap: 1.25rem; row-gap: 0; }
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Laatste vangnet: niets mag de pagina zijwaarts laten schuiven. */
  html, body { overflow-x: clip; }
}

/* ── Vloeiende overgang tussen pagina's (View Transitions, zelfde origin).
   Een artikelkop met dezelfde view-transition-name als de kaart op de
   voorpagina morpht mee. Browsers zonder ondersteuning laden gewoon. ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }

/* ── Compacte kop die bij scrollen krimpt (scroll-driven, geen JS). ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    body > nav {
      animation: kop-krimp linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 140px;
    }
    body > nav .nav-wapen { animation: kop-wapen linear both; animation-timeline: scroll(root block); animation-range: 0 140px; }
  }
}
@keyframes kop-krimp {
  to { padding-top: .3rem; padding-bottom: .3rem; box-shadow: 0 1px 0 var(--rule); }
}
@keyframes kop-wapen { to { transform: scale(.82); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}