/* ===========================================================================
   KENMERKEN - alleen wat stuk zou gaan zonder
   ---------------------------------------------------------------------------
   Dit bestand bepaalt met opzet niets over hoe iets eruitziet: geen kleur,
   geen maat, geen positie, geen beweging. Dat staat in styles.css, per site
   anders. Hier staat alleen het handjevol regels dat gedrag is en dat je
   anders per site opnieuw vergeet.

   Koppel het na je eigen stylesheet, zodat je hier nog iets kunt overschrijven
   als een recept dat echt vraagt.
   =========================================================================== */

/* Een lade die openstaat over een pagina die eronder doorscrolt, is de
   klassieke fout: je swipet de lade weg en de pagina eronder is verschoten. */
body.menu-open {
  overflow: hidden;
  /* Op iOS is overflow op body niet genoeg om het meescrollen te stoppen. */
  touch-action: none;
}

/* De "nu geopend"-melding staat op hidden tot de JavaScript hem echt heeft
   ingevuld. Veel resets zetten display op elk element en slopen daarmee het
   hidden-attribuut, waardoor er een leeg vlak of, erger, een lege bewering
   blijft staan bij een bezoeker zonder JavaScript. */
[hidden] {
  display: none !important;
}

/* inert wordt door elke doelbrowser begrepen, maar een oudere die het attribuut
   negeert laat de pagina achter de lade gewoon aanklikbaar. Dit vangt dat af
   zonder iets aan het uiterlijk te veranderen. */
[inert] {
  pointer-events: none;
  user-select: none;
}

/* Zonder de klasse js op html (zie KENMERKEN.md, kenmerk 6) is er geen
   JavaScript geweest dat is-onthuld ooit gaat zetten, dus [data-onthul] mag
   dan nooit de verborgen ruststand van jouw eigen CSS krijgen: dat zou content
   permanent onzichtbaar maken voor precies de bezoeker die het meest op een
   eenvoudige pagina aangewezen is. Stijl de ruststand daarom altijd als
   `html.js [data-onthul]:not(.is-onthuld)`, nooit als `[data-onthul]` alleen. */
[data-onthul] {
  opacity: 1;
  transform: none;
}