/* De kleuren van de demo, op één plek.
   Stond zestien keer #4e7ca5 verspreid over vijf bestanden; verander je er dan
   één, dan lopen ze uiteen — precies hoe het hartje op de ene pagina rood werd
   bij hover en op de andere bonkte. Dit bestand is een paar regels en staat op
   elke pagina, dus de rest kan er gewoon naar wijzen.

   De naamgeving zegt wát het is, niet hoe het eruitziet: --gk-accent, niet
   --gk-blauw. Wordt het merk ooit groen, dan hoeft alleen dit bestand mee. */
:root {
  /* Het blauw uit hun logo. Op wit haalt het 2,0:1 — goed genoeg voor een vlak,
     te licht voor letters. */
  --gk-logo: #77bdfa;
  /* Diezelfde tint, donker genoeg voor tekst en randen: 4,87:1 op wit. */
  --gk-accent: #4e7ca5;
  --gk-accent-vlak: #f0f6fb;
  /* Het rood van een gevuld hartje; komt uit hun eigen stylesheet. */
  --gk-hart: #eb5e5e;
  --gk-inkt: #1c1c1c;
  --gk-zacht: #6b7378;
  --gk-rust: #999999;

  /* De bedieningen boven de lijst — Filter, de cijfers, het sorteerveld —
     delen één hoogte en één ronding. Dat is een ontwerpbesluit, geen detail van
     de paginering, dus hoort het hier. */
  --gk-knop-hoog: 29px;
  --gk-knop-rond: 8px;
}

/* Geen zijwaarts swipen op mobiel (Ries 06-09: op kaart- en andere pagina's kon
   je op de telefoon links/rechts uit beeld swipen; de homepage niet). Headless
   Chrome meet op alle pagina's scrollWidth = schermbreedte, dus dit is Safari-
   gedrag: Safari negeert overflow-x op <body> alleen, en laat de pagina
   pannen zodra iets breder is dan het scherm. Vandaar op html én body, en
   overscroll uit zodat een carrousel aan zijn einde niet doorschuift naar de
   pagina. */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; overscroll-behavior-x: none; }
  body { position: relative; }
}