/* De kennisbank, met een eigen stylesheet.
 *
 * Bewust los van de site: er wordt geen regel uit basis.css, shell.css of
 * dbr.css gebruikt. Zo kan deze laag groeien zonder dat er iets aan het
 * product kan verschuiven, en andersom.
 *
 * De opzet is leesbaarheid boven effect. Dit zijn pagina's waar iemand een
 * vraag komt beantwoorden, vaak op een telefoon, vaak tussen twee
 * vergaderingen door. Eén kolom, grote regelafstand, een maat van ongeveer
 * vijfenzestig tekens.
 */

:root {
  --inkt: #14150f;
  --papier: #fbfbf8;
  --lime: #c0f43c;
  --nacht: #16233b;
  --grijs: #6f7066;
  --zacht: #3c3d36;
  --lijn: #e4e5dd;
  --kop: 'Clash Display', 'General Sans', system-ui, sans-serif;
  --tekst: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 400 17px/1.7 var(--tekst);
  -webkit-font-smoothing: antialiased;
}

/* Dezelfde paginaovergang als de rest van de site. Zonder deze opt-in is elke
   klik binnen de kennisbank een harde knip, terwijl de rest van de site
   overvloeit. */
@view-transition { navigation: auto; }
.kop { view-transition-name: nexon-kop; }
.voet { view-transition-name: nexon-voet; }
.merk { view-transition-name: nexon-logo; }
.kennis-huis { view-transition-name: nexon-huis; }
::view-transition-old(nexon-kop), ::view-transition-new(nexon-kop) {
  animation-duration: .26s; animation-timing-function: cubic-bezier(.4,0,.2,1);
  mix-blend-mode: normal;
}
::view-transition-old(nexon-logo), ::view-transition-new(nexon-logo),
::view-transition-old(nexon-huis), ::view-transition-new(nexon-huis),
::view-transition-old(nexon-voet), ::view-transition-new(nexon-voet) {
  animation: none; mix-blend-mode: normal;
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ------------------------------------------------------------------ kop */

.kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--nacht);
  position: sticky; top: 0; z-index: 10;
}
.merk {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none;
  font: 600 15px/1 var(--kop); letter-spacing: -.2px;
}
.merk img { display: block; border-radius: 6px; }
/* De weg terug naar de homepage, dezelfde knop als op de rest van de site.
   Hier staat hij links van de call to action, want de merknaam ernaast is
   tekst en leest niet als een knop. */
.kennis-huis {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 30px; height: 30px; margin-left: auto; margin-right: 12px;
  color: rgba(255,255,255,.66);
  text-decoration: none;
  transition: color .2s, transform .2s;
}
.kennis-huis svg { width: 21px; height: 21px; display: block; }
.kennis-huis:hover, .kennis-huis:focus-visible {
  color: var(--lime); transform: translateY(-1px);
}
@media (max-width: 420px) {
  .kennis-huis { width: 33px; height: 33px; margin-right: 8px; }
  .kennis-huis svg { width: 16px; height: 16px; }
}
@media print { .kennis-huis { display: none; } }

.kop-cta {
  background: var(--lime); color: var(--inkt); text-decoration: none;
  font: 600 13.5px/1 var(--tekst);
  padding: 10px 15px; border-radius: 999px;
  white-space: nowrap;
}
.kop-cta:hover { filter: brightness(1.06); }

/* ------------------------------------------------------------ kruimels */

.kruimels {
  max-width: 760px; margin: 0 auto; padding: 18px 20px 0;
  font: 400 13px/1.6 var(--tekst); color: var(--grijs);
}
.kruimels a { color: var(--grijs); text-decoration: none; }
.kruimels a:hover { color: var(--inkt); text-decoration: underline; }
.kr-sep { padding: 0 7px; opacity: .5; }
.kruimels [aria-current] { color: var(--zacht); }

/* ----------------------------------------------------------- de inhoud */

main { max-width: 760px; margin: 0 auto; padding: 0 20px 72px; }

h1 {
  font: 600 clamp(27px, 4.4vw, 38px)/1.2 var(--kop);
  letter-spacing: -.5px;
  margin: 22px 0 0;
  text-wrap: balance;
}

h2 {
  font: 600 clamp(20px, 2.6vw, 24px)/1.3 var(--kop);
  letter-spacing: -.3px;
  margin: 44px 0 14px;
}

p { margin: 0 0 18px; }

a { color: #2f5d1f; text-underline-offset: 2px; }
a:hover { color: var(--inkt); }

/* het antwoordblok: wat een taalmodel eruit knipt en wat een mens als eerste
   leest. Daarom bovenaan, afgebakend, en zelfstandig leesbaar. */
.antwoord {
  margin: 26px 0 34px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--lime);
  border-radius: 3px;
}
.antwoord p { margin: 0; font-size: 17.5px; }
.antwoord-kop {
  font: 600 11px/1 var(--tekst);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--grijs);
  margin: 0 0 9px !important;
}

.stappen { margin: 0 0 18px; padding-left: 22px; }
.stappen li { margin-bottom: 10px; }

/* -------------------------------------------------------------- lijsten */

.lijst { list-style: none; margin: 0 0 18px; padding: 0; }
.lijst li { border-bottom: 1px solid var(--lijn); }
.lijst li:first-child { border-top: 1px solid var(--lijn); }
.lijst a {
  display: block; padding: 15px 2px;
  text-decoration: none; color: var(--inkt);
}
.lijst a:hover { background: #fff; }
.lijst strong { display: block; font-weight: 600; line-height: 1.4; }
.lijst span {
  display: block; margin-top: 4px;
  font-size: 14.5px; line-height: 1.55; color: var(--grijs);
}
.lijst.kort a { padding: 11px 2px; }

.cat-in { color: var(--grijs); font-size: 15.5px; margin-bottom: 14px; }

.begrippen { margin: 0; }
.begrippen dt { margin-top: 22px; font-weight: 600; }
.begrippen dt:first-child { margin-top: 0; }
.begrippen dd {
  margin: 5px 0 0; padding: 0 0 18px;
  border-bottom: 1px solid var(--lijn);
  color: var(--zacht); font-size: 15.5px; line-height: 1.6;
}

.meer { font-weight: 600; }

/* ---------------------------------------------------------- uitnodiging */

.uitnodiging {
  margin: 48px 0 0;
  padding: 24px 24px 20px;
  background: var(--nacht);
  border-radius: 4px;
  color: #dfe2d8;
}
.uitnodiging p { font-size: 15.5px; line-height: 1.65; }
.uit-kop {
  font: 600 18px/1.35 var(--kop);
  color: #fff;
  margin-bottom: 10px !important;
}
.knop {
  display: inline-block;
  background: var(--lime); color: var(--inkt);
  text-decoration: none; font: 600 14.5px/1 var(--tekst);
  padding: 13px 20px; border-radius: 999px;
}
.knop:hover { filter: brightness(1.06); color: var(--inkt); }

.verwant { margin-top: 40px; }
.verwant h2 { font-size: 17px; margin-bottom: 10px; }
.verwant ul { margin: 0; padding-left: 20px; }
.verwant li { margin-bottom: 7px; }

/* ----------------------------------------------------------------- voet */

.voet {
  border-top: 1px solid var(--lijn);
  padding: 26px 20px 40px;
  max-width: 760px; margin: 0 auto;
  font-size: 14.5px; color: var(--zacht);
}
.voet p { margin: 0 0 10px; }
.voet-klein { font-size: 13px; line-height: 1.6; color: var(--grijs); }

/* --------------------------------------------------------------- scherm */

@media (max-width: 600px) {
  body { font-size: 16.5px; }
  main { padding-bottom: 54px; }
  .antwoord { padding: 17px 18px; }
  .uitnodiging { padding: 20px 18px 18px; }
}

@media print {
  .kop, .kruimels, .uitnodiging { display: none; }
  body { background: #fff; font-size: 11pt; }
  a { color: #000; }
}