/* Laten zien in welk deel van de site je zit. */

/* De veer is uitgerekend uit een gedempte harmonische oscillator (stijfheid 210,
   demping 17) en als linear() in CSS gezet. Een cubic-bezier kan maar één bocht;
   deze curve schiet even door en veert terug, zoals een echt tabblad dat op zijn
   plek valt. Oudere browsers vallen terug op een gewone bezier. */
:root {
  --gk-veer: cubic-bezier(.34,1.56,.64,1);
  --gk-veer-duur: 813ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --gk-veer: linear(0.0, 0.0157, 0.0583, 0.1212, 0.1986, 0.2853, 0.3768, 0.4696, 0.5604, 0.6469, 0.7274, 0.8005, 0.8655, 0.9219, 0.9698, 1.0093, 1.0408, 1.065, 1.0825, 1.0941, 1.1006, 1.1028, 1.1014, 1.0972, 1.0909, 1.083, 1.0742, 1.0648, 1.0553, 1.0459, 1.037, 1.0287, 1.0211, 1.0143, 1.0085, 1.0035, 0.9993, 0.996, 0.9935, 0.9916, 0.9904, 0.9897, 0.9894, 0.9896, 0.99, 0.9906, 0.9914, 0.9923, 0.9933, 0.9942, 0.9952, 0.9961, 0.997, 0.9978, 0.9985, 0.9991, 0.9996, 1.0, 1.0004, 1.0007, 1.0008, 1.001, 1.0011, 1.0011, 1); }
}

.top-level-link > a {
  position: relative;
  display: inline-block;
  transition: color .2s ease, transform .26s var(--gk-veer);
  transform-origin: center bottom;
}
/* De site onderstreept links bij hover; hier vertelt de streep al waar je bent,
   en twee lijnen onder elkaar is er één te veel. */
.top-level-link > a:hover,
.top-level-link > a:focus { text-decoration: none !important; }
/* Aanwijzen: het woord groeit een tikje en neemt vast de kleur van de keuze aan. */
.top-level-link > a:hover { color: var(--gk-accent, #4e7ca5); transform: scale(1.06); }
.top-level-link.gk-actief > a { color: var(--gk-accent, #4e7ca5); font-weight: 600; }

/* De streep loopt precies zo breed als het woord, niet zo breed als het tabblad
   met zijn opvulling — anders zweeft er links en rechts een stuk lijn naast de
   letters. */
.gk-nav-streep {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--gk-logo, #77bdfa);
  opacity: 0;
  transform: translateX(0);
  width: 0;
  transition: transform var(--gk-veer-duur) var(--gk-veer),
              width var(--gk-veer-duur) var(--gk-veer),
              opacity .2s ease;
  pointer-events: none;
  z-index: 2;
}
.gk-nav-streep.gk-zichtbaar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gk-nav-streep { transition: opacity .2s ease; }
  .top-level-link > a { transition: color .2s ease; }
  .top-level-link > a:hover { transform: none; }
}
/* In het uitgeklapte mobiele menu hetzelfde verhaal, maar dan een streep aan de
   zijkant — daar staan de items onder elkaar. */
.mm-listitem.gk-actief > a,
.mm-listitem.gk-actief > .mm-listitem__text {
  color: var(--gk-accent, #4e7ca5);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--gk-logo, #77bdfa);
}

/* Het hele menu in dezelfde tint. De site gebruikt #669999 als accent — dat is
   een groenige kleur die nergens in hun logo voorkomt. Binnen de kopbalk en het
   menu wordt dat het blauw uit het logo; buiten het menu blijft alles zoals het
   was, want dat viel niet onder de vraag. Tekst krijgt de donkere variant, want
   var(--gk-logo, #77bdfa) haalt op wit maar 2,0:1. */
#header_row .center form button { color: var(--gk-accent, #4e7ca5) !important; }
#header_row .right .lower li .list-item:hover,
#header_row .right .lower li .list-item:hover i,
#header_row .right .lower li .list-item.active { color: var(--gk-accent, #4e7ca5) !important; }
#header_row .right .lower li .list-item span.aantal { background-color: var(--gk-logo, #77bdfa) !important; }
#header_row .sub-menu-block .body .count,
#header_row .sub-menu-block .body .left.totaal span { color: var(--gk-accent, #4e7ca5) !important; }
#header_menu .icon a:hover { border-bottom-color: var(--gk-logo, #77bdfa) !important; }