/*
 * YILLO responsiviteit
 *
 * Eén stijlblad dat op elke pagina als laatste laadt, zodat het bij gelijke
 * specificiteit wint van de opmaak die in de pagina zelf staat.
 *
 * Waarom apart en niet per pagina: de site telt 25 pagina's met elk hun eigen
 * <style>-blok, maar ze delen dezelfde chrome (nav, voettekst, kaarten,
 * tabellen). De regels die op alle 25 hetzelfde moeten zijn, horen op één
 * plaats. Wat echt eigen is aan een pagina blijft in die pagina staan.
 *
 * Uitgangspunt: nooit `overflow-x: hidden` op body om zijwaarts schuiven te
 * verbergen. Dat maakt de oorzaak onzichtbaar in plaats van weg, en het breekt
 * sticky-elementen. Alles hieronder pakt de oorzaak aan: dingen die niet kunnen
 * krimpen, dingen die breder zijn dan hun ouder, en tekst die niet mag afbreken.
 */

/* ── 1. Niets is breder dan zijn ouder ──────────────────────────────────────
 *
 * Een afbeelding of video zonder max-width duwt bij een smal scherm de hele
 * pagina open. Dit is de meest voorkomende oorzaak van zijwaarts schuiven.
 */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
}

img, video {
  height: auto;
}

/* ── 2. Flex- en gridkinderen mogen krimpen ─────────────────────────────────
 *
 * Een flex- of gridkind heeft standaard `min-width: auto`, en krimpt dus nooit
 * kleiner dan zijn inhoud. Eén lange titel of een knop met veel tekst maakt de
 * hele rij daardoor breder dan het scherm. Dit is de tweede grote oorzaak, en
 * ze is onzichtbaar tot iemand met een smal toestel langskomt.
 */
main > *, section > *, header > *, footer > *,
[class*="grid"] > *, [class*="row"] > *, [class*="flex"] > * {
  min-width: 0;
}

/* ── 3. Lange woorden en adressen breken af ────────────────────────────────
 *
 * Een e-mailadres, een URL of een lange samenstelling zonder spatie past op
 * 320 pixels niet op één regel en duwt anders de pagina open.
 */
p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6,
figcaption, blockquote, label, summary, .blk-waarde {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 4. Tabellen en codeblokken schuiven in hun eigen kader ────────────────
 *
 * Een brede tabel hoort horizontaal te schuiven binnen zijn eigen omhulsel,
 * nooit de pagina eronder mee te trekken.
 */
.table-wrap, .tabel-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre {
  overflow-x: auto;
  max-width: 100%;
}

/* ── 5. De navigatiebalk vouwt om in plaats van uit te steken ──────────────
 *
 * Op about.html stond een balk met logo, drie links, de taalkiezer, de
 * leesinstellingen en een inlogknop naast elkaar in één rij van vaste hoogte.
 * Op een telefoon van 320 pixels stak die ruim 250 pixels buiten beeld, en de
 * inlogknop was daardoor onbereikbaar. Omvouwen houdt alles bereikbaar, wat
 * beter is dan links verbergen achter een menuknop die er niet is.
 */
@media (max-width: 640px) {
  nav {
    height: auto !important;
    min-height: 56px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 16px !important;
    gap: 8px 14px !important;
  }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px !important;
    margin: 0;
    padding: 0;
  }

  /* Ruimte rond de link zelf, zodat hij met een duim te raken is zonder dat
     de regel visueel uit elkaar valt. */
  .nav-links a {
    display: inline-block;
    padding: 8px 2px;
  }

  .nav-logo {
    font-size: 1.05rem;
  }

  .nav-logo-mark {
    width: 28px;
  }

  .nav-cta {
    gap: 8px !important;
  }

  .btn-nav {
    padding: 10px 16px !important;
    font-size: 0.82rem !important;
  }
}

/* ── 6. Raakvlakken op een aanraakscherm ───────────────────────────────────
 *
 * `pointer: coarse` treft een vinger en niet een muis. Daarnaast geldt de regel
 * onder 640 pixels, want een venster van die breedte is vrijwel altijd een
 * telefoon, en zo is de regel ook na te meten in een gewone browser. 44 pixels
 * is de ondergrens waaronder mensen structureel mis beginnen te tikken.
 *
 * Bewust alleen op de navigatie en de voettekst: dat zijn losstaande
 * bedieningselementen. Een link midden in een lopende alinea krijgt geen extra
 * hoogte, want dan valt de alinea uit elkaar.
 */
@media (pointer: coarse), (max-width: 640px) {
  /* Knoppen centreren hun tekst al verticaal, dus een ondergrens voor de
     hoogte volstaat. Hun `display` laten we met rust: een knop die op blok
     staat en de volle breedte vult, moet dat blijven doen. */
  button,
  [class*="btn"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }

  /* Een link is standaard inline en trekt zich niets aan van een hoogte, dus
     die heeft inline-flex nodig om het raakvlak echt te laten groeien. Alleen
     losstaande links: in de navigatie, de voettekst en de inhoudsopgave.
     Een link middenin een lopende zin blijft zoals hij is, want die valt
     buiten de richtlijn (WCAG 2.5.8 zondert tekst in een alinea uit) en zou
     de regelafstand van die alinea uit elkaar trekken. */
  nav a,
  footer a,
  /* Niet elke voettekst is een <footer>: privacy.html gebruikt een div met
     deze klasse. Zonder deze regel bleef die ene terugkeerlink op 15 pixels. */
  .page-footer a,
  .footer-links a,
  .toc a,
  .yillo-consent-link,
  /* Links die als knop ogen maar geen "btn" in hun naam dragen. De site kent
     er precies twee, nagelopen op alle anchor-klassen die er bestaan. Bewust
     geen brede regel als `a:not(p a)`: dan zou hij ook article-card,
     featured-card en related-card raken, en dat zijn links om een hele kaart
     heen die van inline-flex volledig uit hun voegen barsten. */
  .job-apply,
  .back-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Een lijst met losse links onder elkaar: genoeg tussenruimte zodat de
     vlakken elkaar niet raken en je nooit de verkeerde aantikt. */
  footer ul li,
  .footer-links li {
    margin-bottom: 4px;
  }
}

/* ── 7. Ondergrens voor de tekstgrootte ────────────────────────────────────
 *
 * Onder 12 pixels wordt tekst voor veel mensen onleesbaar, en op een telefoon
 * geldt dat des te sterker. Dit is een vangnet: het tilt alleen op wat er
 * onder zit en laat de rest ongemoeid.
 */
@media (max-width: 640px) {
  body, p, li, td, th, span, div, label, small, figcaption {
    font-size: max(1em, 12px);
  }

  small, .small, figcaption, .caption, .meta, .hint {
    font-size: max(0.8rem, 12px);
  }
}

/* ── 8. Zeer smalle schermen ───────────────────────────────────────────────
 *
 * 320 pixels is de smalste telefoon die nog serieus voorkomt. Daar telt elke
 * pixel binnenmarge, en juist daar liepen de blogkaarten en de cijferblokken
 * in de artikelen enkele pixels buiten beeld.
 */
@media (max-width: 360px) {
  .article-card,
  .article-thumb,
  .article-body-card,
  .related-card,
  .stat-desc,
  .stat-card,
  .newsletter-card {
    max-width: 100%;
    box-sizing: border-box;
  }

  .stat-desc {
    hyphens: auto;
  }

  section,
  .container,
  .wrap,
  main {
    padding-left: max(3vw, 12px);
    padding-right: max(3vw, 12px);
  }
}

/* ── 9. Liggend op een lage telefoon ───────────────────────────────────────
 *
 * Een telefoon in liggende stand heeft nauwelijks hoogte. Grote bovenmarges
 * duwen de inhoud dan volledig onder de vouw, en de bezoeker ziet een leeg
 * scherm bij het openen.
 */
@media (max-height: 460px) and (orientation: landscape) {
  section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  nav {
    position: static;
  }
}

/* ── 10. Zeer brede schermen ───────────────────────────────────────────────
 *
 * Op een breed bureaublad wordt een regel tekst anders zo lang dat het oog de
 * volgende regel niet meer terugvindt. Rond de 75 tekens is de grens.
 */
@media (min-width: 1600px) {
  .article-body,
  .privacy-section,
  .prose,
  article p,
  article li {
    max-width: 75ch;
  }
}