/* Het blok dat de babynamen-gidsen en de kaartcategorieën verbindt.
   Zie tools/kruislinks.py voor waarom het er is. Het hoort bij de tekst, niet
   ernaast: geen banner, geen kader dat om aandacht schreeuwt. */
.gk-kruis {
  /* `clear` is hier de hele oplossing, en het kostte moeite om dat te zien.
     Op de namenpagina's staat een hoge zwevende kolom. Zonder clear wordt de kop
     van dit blok niet naast die kolom gezet maar eronder, en die hele tussenruimte
     telt mee als hoogte van de kop: één regel tekst werd 8.710 pixels hoog.
     Een verse kop ná die lijst was gewoon 30 pixels — dát verschil wees de weg. */
  clear: both;
  margin: 34px 0 10px;
  padding: 18px 20px 16px;
  border-left: 3px solid var(--gk-accent);
  background: var(--gk-accent-vlak);
  border-radius: 0 var(--gk-knop-rond, 8px) var(--gk-knop-rond, 8px) 0;
}
/* De kop staat expliciet vastgezet.
   Hun stylesheet doet iets met h2 waardoor die in dit blok 8717 pixels hoog werd
   — één regel tekst, geen kinderen, en toch de hele pagina hoog. Welke regel dat
   precies is heb ik niet gevonden; wat wél helpt is niets aan overerving
   overlaten. Een blok van ons hoort ook niet af te hangen van hun koptekststijlen:
   wijzigen zij daar iets, dan schuift onze pagina mee zonder dat iemand het
   merkt. */
.gk-kruis .gk-kruis-kop {
  height: auto;
  min-height: 0;
  max-height: none;
  contain: none;
  content-visibility: visible;
  display: block;
  margin: 0 0 4px;
  padding: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--gk-inkt);
}
.gk-kruis p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gk-zacht);
}
.gk-kruis ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.gk-kruis a {
  font-size: 14px;
  font-weight: 600;
  color: var(--gk-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gk-kruis a:hover { border-bottom-color: var(--gk-accent); }