@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* =====================================================================
   WellBased Kennisbank — custom stylesheet voor Help Scout Docs
   Plak deze code in: Manage → Docs → [WellBased Kennisbank] → Styles
   → Custom Stylesheet (CSS). Huisstijl juli 2026.
   ===================================================================== */

:root {
  --wb-ink:        #160E36;
  --wb-primary:    #32255B;
  --wb-purple:     #716198;
  --wb-purple-200: #B09DD5;
  --wb-purple-050: #E7D9F8;
  --wb-lavender:   #FDF9FF;

  --wb-teal:       #49ACB1;
  --wb-teal-050:   #C8E6E7;
  --wb-blue:       #497AB1;
  --wb-blue-050:   #E4F3FE;
  --wb-yellow:     #F5C338;
  --wb-yellow-050: #FFFBB6;
  --wb-pink:       #D982AD;
  --wb-pink-050:   #FBD3EE;
  --wb-orange:     #FF783D;
  --wb-orange-050: #FFDCCB;

  --wb-grey-050:   #F7F6FA;
  --wb-grey-100:   #E7E6EB;
  --wb-grey-400:   #8A869A;

  --wb-radius:     18px;
  --wb-radius-lg:  28px;
  --wb-shadow:     0 1px 2px rgba(22,14,54,.04), 0 8px 24px -12px rgba(22,14,54,.14);
  --wb-shadow-lg:  0 2px 4px rgba(22,14,54,.05), 0 18px 40px -16px rgba(22,14,54,.22);
  --wb-max:        1120px;
  --wb-inner:      calc(1120px - 48px);   /* zelfde tekstkolom als de menubalk */
}

/* ---------- basis ---------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  color: var(--wb-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.navbar .brand,
button, input, select, textarea {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4 { color: var(--wb-primary); letter-spacing: -.015em; }

a { color: var(--wb-purple); text-decoration: none; transition: color .15s ease; }
a:hover, a:focus { color: var(--wb-primary); text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--wb-purple-200);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Bootstrap-2 grid van Help Scout vervangen door flex */
.container-fluid {
  max-width: var(--wb-max);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.row-fluid { display: flex; gap: 48px; align-items: flex-start; margin: 0; }
.row-fluid::before, .row-fluid::after { display: none; }
.row-fluid > .span9 { flex: 1 1 auto; width: auto; min-width: 0; float: none; margin: 0; }
.row-fluid > .span3 { flex: 0 0 280px; width: 280px; float: none; margin: 0; }

/* ---------- header ----------------------------------------------------
   Menubalk en hero vormen samen één paars blok (#716198). De balk blijft
   ook op collectie- en artikelpagina's paars; alleen de hero eronder is
   van de homepage.                                                      */

#mainNav.navbar {
  margin: 0;
  background: var(--wb-purple);
  border: 0;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 50;
}
#mainNav .navbar-inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: none;
  padding: 0;
  min-height: 0;
  border-radius: 0;
}
#mainNav .container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  row-gap: 8px;
  min-height: 76px;
}

/* Help Scout toont onder 979px zijn eigen hamburgerknop, maar er is geen
   uitklapmenu meer om te openen — het menu staat altijd uitgeklapt. */
#mainNav .btn.btn-navbar { display: none !important; }

#mainNav .brand {
  padding: 0;
  margin: 0;
  margin-right: auto;
  display: flex;
  align-items: center;
  text-shadow: none;
  float: none;
}
/* Deze regels gaan uit van het witte logo (logo-wit.png) in Branding:
   het woordmerk zonder "Kennisbank". Dat woord staat hieronder als tekst,
   met een dun scheidingslijntje ervoor — zo blijft het scherp en kun je
   het aanpassen zonder nieuw plaatje.

   Staat het donkerpaarse logo er nog? Zet dan tijdelijk
   filter: brightness(0) invert(1); erbij, anders valt het weg op paars. */
#mainNav .brand img {
  max-height: 26px;
  width: auto;
  display: block;
}
#mainNav .brand::after {
  content: "Kennisbank";
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.45);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}

/* Help Scout zet ul.nav op position:absolute en geeft .nav-collapse
   height:0 — daardoor valt het menu over het logo heen. Beide resetten. */
#mainNav .nav-collapse {
  float: none;
  margin: 0;
  margin-left: auto;
  height: auto !important;
  overflow: visible !important;
  flex: 0 1 auto;
  min-width: 0;
}
#mainNav ul.nav {
  position: static !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  row-gap: 2px;
  margin: 0;
  padding: 0;
  float: none;
  list-style: none;
}
#mainNav ul.nav > li { float: none; list-style: none; margin: 0; background: none; }
#mainNav ul.nav > li::before,
#mainNav ul.nav > li::after { display: none; }
#mainNav ul.nav > li > a {
  display: block;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-shadow: none;
  transition: background .15s ease, color .15s ease;
}
#mainNav ul.nav > li > a:hover,
#mainNav ul.nav > li > a:focus {
  background: rgba(255,255,255,.16);
  color: #fff;
}
/* Help Scout zet ál je collecties automatisch in het menu; er is geen
   instelling om dat uit te zetten. Met negen collecties wordt dat twee
   regels lang. Deze regel verbergt alleen de collectie-links — links die
   je zelf toevoegt (Contact, Naar het platform) blijven dus gewoon staan.
   Wil je de collecties tóch in het menu: verwijder de regel hieronder. */
#mainNav ul.nav > li:has(> a[href^="/collection/"]) { display: none; }

/* Contact uit de menubalk. Help Scout hangt het contactformulier aan een
   link met href="#"; dat is het enige menu-item met zo'n href. Het
   contactformulier blijft bereikbaar via "Kom je er niet uit?" onderaan
   elk artikel. Wil je Contact terug in het menu: haal deze regel weg. */
#mainNav ul.nav > li:has(> a[href="#"]) { display: none; }

/* ---------- hero + zoekbalk ------------------------------------------ */

#docsSearch {
  position: relative;
  /* geen overflow:hidden — de zoeksuggesties vallen buiten de hero en
     zouden anders worden afgekapt.
     Ook geen lichtplek of verloop: de menubalk is een apart element, dus
     alles wat hier begint tekent een zichtbare naad op de overgang. */
  overflow: visible;
  background: var(--wb-purple);
  border: 0;
  padding: 34px 24px 58px;
  text-align: left;
  margin: 0 0 8px;
}
#docsSearch::before,
#docsSearch::after { content: none; }

/* h1, zoekbalk en suggesties krijgen dezelfde kolom als de menubalk,
   zodat logo, vraag en zoekveld op één lijn beginnen. */
#docsSearch h1,
#docsSearch #searchBar,
#docsSearch #serp-dd {
  max-width: var(--wb-inner);
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  /* Help Scout centreert kop en zoekbalk zelf; die regels zitten op de
     elementen, niet op de sectie, dus hier expliciet terugzetten. */
  text-align: left;
}

#docsSearch h1 {
  position: relative;
  z-index: 1;
  margin-top: 0;
  margin-bottom: 26px;
  font-size: clamp(27px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  color: #fff;
  text-shadow: none;
}

#searchBar {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  padding: 0;          /* Help Scout zet hier 32px, dat verschuift de zoekknop */
}

/* --- het zoekveld in de hero: doorschijnend wit, vergrootglas links --- */
#docsSearch #searchBar input.search-query {
  max-width: 760px;
  height: 60px;
  padding: 0 22px 0 58px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 14px;
  background: rgba(255,255,255,.17);
  box-shadow: none;
  font-size: 16.5px;
  color: #fff;
}
#docsSearch #searchBar input.search-query::placeholder { color: rgba(255,255,255,.78); }
#docsSearch #searchBar input.search-query:focus {
  border-color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.22);
  box-shadow: none;
}
#docsSearch #searchBar button {
  top: 50%;
  left: 9px;
  right: auto;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: none;
}
#docsSearch #searchBar button:hover {
  background: rgba(255,255,255,.16);
  transform: translateY(-50%);
}
#docsSearch #searchBar button::after { background-size: 21px 21px; }
/* de suggestielijst is even breed als het zoekveld en begint op dezelfde
   lijn; het kader zit daarom op de ul, niet op #serp-dd zelf. */
#docsSearch #serp-dd:has(li) {
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
#docsSearch #serp-dd ul.result {
  max-width: 760px;
  box-sizing: border-box;
  border-radius: var(--wb-radius);
}
#docsSearch #serp-dd:has(li) ul.result {
  border: 1px solid var(--wb-grey-100);
  background: #fff;
  box-shadow: var(--wb-shadow-lg);
}
#searchBar input.search-query {
  width: 100%;
  height: 64px;
  box-sizing: border-box;
  padding: 0 68px 0 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--wb-shadow-lg);
  font-size: 17px;
  color: var(--wb-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#searchBar input.search-query::placeholder { color: var(--wb-grey-400); }
#searchBar input.search-query:focus {
  border-color: var(--wb-purple);
  outline: none;
  box-shadow: var(--wb-shadow-lg), 0 0 0 5px rgba(113,97,152,.16);
}
#searchBar button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wb-primary);
  box-shadow: none;
  text-shadow: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
#searchBar button:hover { background: var(--wb-purple); transform: scale(1.05); }
#searchBar button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#searchBar button i { display: none; }
/* het vergrootglas op de knop zelf: Help Scout verbergt het <i>-icoon,
   dus daar kunnen we het niet aan hangen. */
#searchBar button::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

/* autocomplete-dropdown — alleen als kader tonen wanneer er echt
   resultaten in staan, anders hangt er een leeg wit vlak met schaduw
   over de pagina. */
#serp-dd {
  margin-top: 10px;
  border: 0;
  border-radius: var(--wb-radius);
  background: none;
  box-shadow: none;
  overflow: hidden;
  text-align: left;
}
#serp-dd:has(li) {
  border: 1px solid var(--wb-grey-100);
  background: #fff;
  box-shadow: var(--wb-shadow-lg);
}
#serp-dd ul.result { margin: 0; padding: 6px; list-style: none; }
#serp-dd ul.result li a {
  display: block;
  padding: 11px 16px;
  border-radius: 12px;
  color: var(--wb-primary);
  font-weight: 500;
}
#serp-dd ul.result li a:hover,
#serp-dd ul.result li.active a { background: var(--wb-purple-050); }

/* ---------- content -------------------------------------------------- */

#contentArea { padding-top: 40px; padding-bottom: 24px; }

#noResults {
  margin: 0 auto 40px;
  padding: 28px;
  border: 1px dashed var(--wb-grey-100);
  border-radius: var(--wb-radius);
  background: var(--wb-grey-050);
  color: var(--wb-grey-400);
  text-align: center;
  font-weight: 500;
}
#noResults:empty { display: none; }

/* ---------- homepage: kaart per collectie -----------------------------
   Homepage-instelling: "Show on Home Page: Categories".
   Markup die Help Scout hier geeft:

     section.collection-category#collection-category-<id>
        h2 > a                       de collectienaam
        p.wb-oms                     omschrijving, door de head-code toegevoegd
        section.category-list
           a.category#category-<id>
              h3                     naam van de categorie
              p                      omschrijving (leeg, wordt verborgen)
              p.article-count        "N artikelen"

   Opzet: twee kolommen kaarten. Per kaart een lijnicoon in paars op licht
   lila, de titel, een regel omschrijving en daaronder de categorieen als
   klikbare regels met hun aantal.

   Alles is gescoped op #contentArea:has(> section.collection-category).
   Die combinatie komt alleen op de homepage voor, dus collectiepagina's,
   categoriepagina's, zoekresultaten en artikelpagina's blijven ongemoeid.
   #contentArea wordt namelijk op alle paginatypes gebruikt.
   ---------------------------------------------------------------------- */

#contentArea:has(> section.collection-category) {
  max-width: var(--wb-max) !important;   /* zelfde kolom als menubalk en hero */
  margin: 0 auto !important;
  padding: 48px 24px 80px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: start !important;
  float: none !important;
  width: auto !important;
}
#contentArea:has(> section.collection-category)::before,
#contentArea:has(> section.collection-category)::after { content: none !important; display: none !important; }
#contentArea:has(> section.collection-category) > #noResults { display: none !important; }
#contentArea:has(> section.collection-category) > footer { grid-column: 1 / -1 !important; margin-top: 32px !important; }

/* de kaart */
#contentArea:has(> section.collection-category) > section.collection-category {
  margin: 0 !important;
  padding: 24px 22px 16px !important;
  width: auto !important;
  float: none !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid var(--wb-grey-100) !important;
  border-radius: var(--wb-radius) !important;
  background: #fff !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#contentArea:has(> section.collection-category) > section.collection-category:hover {
  border-color: #D9D4E6 !important;
  box-shadow: var(--wb-shadow) !important;
}

/* kop met icoon */
#contentArea:has(> section.collection-category) > section.collection-category > h2 {
  display: block !important;
  position: relative !important;
  margin: 0 0 4px !important;
  padding: 52px 0 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--wb-ink) !important;
}
#contentArea:has(> section.collection-category) > section.collection-category > h2::after { content: none !important; }
#contentArea:has(> section.collection-category) > section.collection-category > h2::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0; left: 0;
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  background-color: #F1EAFB !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
}
#contentArea:has(> section.collection-category) > section.collection-category > h2 a {
  color: var(--wb-ink) !important;
  text-decoration: none !important;
}

/* omschrijving, komt uit de head-code */
#contentArea:has(> section.collection-category) .wb-oms {
  margin: 0 0 14px !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--wb-grey-400) !important;
}

/* de categorieen als regels */
#contentArea:has(> section.collection-category) section.category-list {
  display: block !important;
  margin: 0 !important;
  padding: 6px 0 0 !important;
  width: auto !important;
  float: none !important;
  border-top: 1px solid #F0EEF4 !important;
}
#contentArea:has(> section.collection-category) a.category {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  width: auto !important;
  min-height: 0 !important;
  float: none !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  transition: background .14s ease;
}
#contentArea:has(> section.collection-category) a.category:hover {
  background: var(--wb-lavender) !important;
  transform: none !important;
  box-shadow: none !important;
}
#contentArea:has(> section.collection-category) a.category::before,
#contentArea:has(> section.collection-category) a.category::after { content: none !important; display: none !important; }
#contentArea:has(> section.collection-category) a.category h3 {
  flex: 1 1 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  color: var(--wb-primary) !important;
}
#contentArea:has(> section.collection-category) a.category:hover h3 { color: var(--wb-purple) !important; }
#contentArea:has(> section.collection-category) a.category > p:not(.article-count) { display: none !important; }
#contentArea:has(> section.collection-category) a.category .article-count {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  background: none !important;
  color: #B9B6C2 !important;
}

/* Icoon per collectie, op Help Scout-id (te vinden in de URL:
   /collection/107-de-lesbibliotheek -> 107).
   Deze selectors zijn bewust specifieker dan de basisregel hierboven,
   anders wint de background-shorthand daarvan en zie je geen icoon.
   Nieuwe collectie zonder regel hier krijgt een leeg lila vlakje.       */
#contentArea > section#collection-category-107 > h2::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28113%2C97%2C152%29%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%205.5A1.5%201.5%200%200%201%205.5%204H9v16H5.5A1.5%201.5%200%200%201%204%2018.5z%27%2F%3E%3Cpath%20d%3D%27M9%204h5a1.5%201.5%200%200%201%201.5%201.5v13A1.5%201.5%200%200%201%2014%2020H9z%27%2F%3E%3Cpath%20d%3D%27m16.6%205.2%202.5.7a1.5%201.5%200%200%201%201%201.9l-3.1%2011.8%27%2F%3E%3C%2Fsvg%3E"); }   /* De lesbibliotheek */
#contentArea > section#collection-category-113 > h2::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28113%2C97%2C152%29%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M12%2016v4M8%2020h8%27%2F%3E%3Cpath%20d%3D%27m10.2%208%203.8%202-3.8%202z%27%2F%3E%3C%2Fsvg%3E"); }   /* De les */
#contentArea > section#collection-category-119 > h2::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28113%2C97%2C152%29%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203h10a1%201%200%200%201%201%201v16l-6-4-6%204V4a1%201%200%200%201%201-1z%27%2F%3E%3Cpath%20d%3D%27m9.6%209.6%201.8%201.8%203.1-3.3%27%2F%3E%3C%2Fsvg%3E"); }   /* Jouw lessen */
#contentArea > section#collection-category-14 > h2::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28113%2C97%2C152%29%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M8.5%206H14a3.5%203.5%200%200%201%200%207h-4a3.5%203.5%200%200%200%200%207h5.5%27%2F%3E%3C%2Fsvg%3E"); }   /* Routes */
#contentArea > section#collection-category-17 > h2::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28113%2C97%2C152%29%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%2010h18M8%203v4M16%203v4%27%2F%3E%3Cpath%20d%3D%27m8.6%2014.6%201.5%201.5%203-3%27%2F%3E%3C%2Fsvg%3E"); }   /* Jouw leerlijn */
#contentArea > section#collection-category-129 > h2::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28113%2C97%2C152%29%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M4.5%2020a7.5%207.5%200%200%201%2015%200%27%2F%3E%3C%2Fsvg%3E"); }   /* Jouw account */
#contentArea > section#collection-category-134 > h2::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27rgb%28113%2C97%2C152%29%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%275%27%20width%3D%2719%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M2.5%2010h19M6%2015h4%27%2F%3E%3C%2Fsvg%3E"); }   /* Licenties */

/* ---------- artikellijsten (categoriepagina, zoekresultaten) ---------- */

ul.popArticles,
ul.articleList {
  display: grid;
  text-align: left;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.popArticles li,
ul.articleList li { margin: 0; padding: 0; list-style: none; background: none; border: 0; }

/* !important omdat Help Scout deze links met een #contentArea-regel kleurt */
ul.popArticles li a,
ul.articleList li a {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0 !important;        /* Help Scout zet hier margin-left: -24px */
  width: auto !important;
  box-sizing: border-box !important;
  padding: 16px 18px;
  border: 1px solid var(--wb-grey-100);
  border-radius: var(--wb-radius);
  background: #fff;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--wb-primary) !important;
  text-align: left;
  text-decoration: none !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
ul.popArticles li a:hover,
ul.articleList li a:hover {
  border-color: var(--wb-purple-200);
  background: var(--wb-lavender);
  transform: translateX(2px);
}
ul.popArticles li a i.icon-article-doc,
ul.articleList li a i.icon-article-doc {
  flex: 0 0 auto;
  display: inline-block !important;
  width: 34px; height: 34px;
  border-radius: 11px;
  background: var(--wb-purple-050);
  font-size: 0;
  color: transparent;
  position: relative;
}
ul.popArticles li a i.icon-article-doc::before,
ul.articleList li a i.icon-article-doc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332255B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
}
ul.popArticles li a span,
ul.articleList li a span { flex: 1 1 auto; }

/* ---------- categoriepagina ------------------------------------------ */

hgroup#categoryHead {
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--wb-grey-100);
}
hgroup#categoryHead h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  line-height: 1.2;
}
hgroup#categoryHead p.descrip {
  margin: 0;
  max-width: 62ch;
  font-size: 16.5px;
  color: #5B5672;
}
hgroup#categoryHead .sort { margin-top: 18px; }
hgroup#categoryHead select#sortBy {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--wb-grey-100);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--wb-primary);
}

/* ---------- zoekresultaten ------------------------------------------- */

#serp h1 {
  margin: 0 0 6px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.2;
}
#serp h1 strong { color: var(--wb-primary); }
#serp p.articlesFound {
  margin: 0 0 26px;
  font-size: 15px;
  color: var(--wb-grey-400);
}
#serp p.articlesFound strong { color: var(--wb-primary); font-weight: 700; }

#serp ul.articleList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
#serp ul.articleList li {
  margin: 0 !important;
  padding: 20px 22px !important;
  border: 1px solid var(--wb-grey-100) !important;
  border-radius: var(--wb-radius) !important;
  background: #fff !important;
  list-style: none;
  transition: border-color .15s ease, transform .15s ease;
}
#serp ul.articleList li:hover {
  border-color: var(--wb-purple-200) !important;
  transform: translateY(-2px);
}
#serp ul.articleList li a {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  transform: none !important;
}
#serp ul.articleList li a i.icon-article-doc { margin-top: 1px; }
#serp ul.articleList li p {
  margin: 10px 0 0 46px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5B5672;
}

/* kale h1 op een collectiepagina zonder categorieen */
#main-content .contentWrapper > h1 {
  margin: 0 0 24px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.2;
}

/* ---------- artikelpagina -------------------------------------------- */

/* Help Scout legt achter de content een PNG (bg-content2.png) die een
   papieren-vel-schaduw tekent. Die moet weg, anders zie je een grijze
   rand en schaduw langs je tekst. */
#main-content {
  background: none !important;
}
#main-content .contentWrapper {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

article#fullArticle { max-width: 72ch; position: relative; }

/* koppen binnen een artikel kleurt Help Scout zelf donkergrijs */
#main-content article#fullArticle h1.title,
#main-content article#fullArticle h2,
#main-content article#fullArticle h3,
#main-content article#fullArticle h4 { color: var(--wb-primary) !important; }

article#fullArticle h1.title {
  padding-right: 60px;      /* ruimte voor de printknop */
  margin: 0 0 28px;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.18;
}

article#fullArticle p,
article#fullArticle li { font-size: 17px; line-height: 1.75; color: #241B45; }
article#fullArticle p { margin: 0 0 18px; }

article#fullArticle h2 {
  margin: 44px 0 14px;
  font-size: 24px;
  font-weight: 700;
  scroll-margin-top: 100px;
}
article#fullArticle h3 {
  margin: 32px 0 10px;
  font-size: 19px;
  font-weight: 700;
  scroll-margin-top: 100px;
}

article#fullArticle ul,
article#fullArticle ol { margin: 0 0 20px; padding-left: 26px; }
article#fullArticle li { margin-bottom: 8px; }
article#fullArticle ul li::marker { color: var(--wb-purple-200); }
article#fullArticle ol li::marker { color: var(--wb-purple); font-weight: 700; }

article#fullArticle a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: var(--wb-purple-200); }
article#fullArticle a:hover { text-decoration-color: var(--wb-primary); }

article#fullArticle strong { color: var(--wb-primary); font-weight: 700; }

article#fullArticle img {
  max-width: 100%;
  height: auto;
  border-radius: var(--wb-radius);
  border: 1px solid var(--wb-grey-100);
  margin: 8px 0 22px;
}

article#fullArticle blockquote {
  margin: 24px 0;
  padding: 18px 24px;
  border: 0;
  border-left: 4px solid var(--wb-yellow);
  border-radius: 0 var(--wb-radius) var(--wb-radius) 0;
  background: #FFFDF3;
  font-size: 16.5px;
  color: var(--wb-primary);
}

article#fullArticle code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--wb-grey-050);
  font-size: 14.5px;
  color: var(--wb-primary);
}
article#fullArticle pre {
  padding: 18px 20px;
  border: 1px solid var(--wb-grey-100);
  border-radius: var(--wb-radius);
  background: var(--wb-grey-050);
  overflow-x: auto;
}

article#fullArticle table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 15.5px;
}
article#fullArticle th,
article#fullArticle td {
  padding: 12px 14px;
  border: 1px solid var(--wb-grey-100);
  text-align: left;
}
article#fullArticle th { background: var(--wb-grey-050); font-weight: 700; color: var(--wb-primary); }

article#fullArticle a.printArticle {
  position: absolute;
  top: 4px;
  right: 0;
  float: none;
  margin: 0;
  display: block;
  width: 38px; height: 38px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--wb-grey-100);
  background: #fff;
}
article#fullArticle a.printArticle:hover { background: var(--wb-grey-050); }
article#fullArticle a.printArticle i { font-size: 0; color: transparent; }
article#fullArticle a.printArticle i::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23716198' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
}

/* beoordeling */
.articleRatings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 72ch;
  margin: 48px 0 0;
  padding: 22px 26px;
  border: 1px solid var(--wb-grey-100);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-lavender);
}
.articleRatings-question {
  font-size: 16px;
  font-weight: 700;
  color: var(--wb-primary);
}
.articleRatings-actions { display: flex; gap: 10px; margin-left: auto; }
.articleRatings .rateAction {
  width: 46px; height: 46px;
  border: 1px solid var(--wb-grey-100);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.articleRatings .rateAction:hover { transform: translateY(-2px); }
.articleRatings .rateAction--positive:hover { border-color: var(--wb-teal); background: var(--wb-teal-050); }
.articleRatings .rateAction--negative:hover { border-color: var(--wb-pink); background: var(--wb-pink-050); }

.articleFoot {
  max-width: 72ch;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}
.articleFoot time.lu { font-size: 13.5px; color: var(--wb-grey-400); }

/* ---------- sidebar -------------------------------------------------- */

#sidebar { position: sticky; top: 100px; }
#sidebar #searchBar.sm { max-width: none; padding: 0; }
#sidebar #searchBar.sm input.search-query {
  height: 48px;
  padding: 0 48px 0 18px;
  font-size: 15px;
  border: 1px solid var(--wb-grey-100);
  box-shadow: none;
}
#sidebar #searchBar.sm input.search-query:focus {
  border-color: var(--wb-purple);
  box-shadow: 0 0 0 4px rgba(113,97,152,.14);
}
#sidebar #searchBar.sm button {
  top: 6px; right: 6px;
  width: 36px; height: 36px;
}
#sidebar #searchBar.sm button::after { background-size: 17px 17px; }

/* ---------- footer --------------------------------------------------- */

hr.sep {
  margin: 56px 0 0;
  border: 0;
  border-top: 1px solid var(--wb-grey-100);
}

#contentArea > footer,
footer.center {
  padding: 28px 0 56px;
  text-align: center;
  font-size: 13.5px;
  color: var(--wb-grey-400);
}
footer.center a { color: var(--wb-purple); font-weight: 600; }
footer.center a:hover { color: var(--wb-primary); }

/* ---------- responsive ----------------------------------------------- */

@media (max-width: 880px) {
  .row-fluid { flex-direction: column; gap: 32px; }
  .row-fluid > .span3 { flex: 1 1 auto; width: 100%; }
  #sidebar { position: static; order: -1; }
  #docsSearch { padding: 28px 20px 52px; }
  #contentArea { padding-top: 40px; }
  ul.popArticles, ul.articleList { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  #mainNav .container-fluid { min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  #mainNav .brand img { max-height: 22px; }
  #mainNav .brand::after { font-size: 15px; margin-left: 10px; padding-left: 10px; }
  #mainNav ul.nav { flex-wrap: wrap; }
  #searchBar input.search-query { height: 56px; font-size: 16px; padding-right: 60px; }
  #searchBar button { width: 42px; height: 42px; top: 7px; right: 7px; }
  #docsSearch #searchBar input.search-query { height: 54px; font-size: 16px; padding: 0 18px 0 52px; }
  #docsSearch #searchBar button { width: 38px; height: 38px; top: 50%; left: 8px; }
  .articleRatings { flex-direction: column; align-items: flex-start; }
  .articleRatings-actions { margin-left: 0; }
}

/* ---------- mobiel ----------------------------------------------------
   De homepage-kaarten staan met !important op twee kolommen; op een
   telefoon moet dat er één zijn. Ook de menubalk en de hero zijn hier
   krapper gezet. Breekpunt op 760px: daaronder past een tweede kolom
   niet meer zonder dat titels en aantallen over elkaar vallen.        */

@media (max-width: 760px) {

  /* --- menubalk --- */
  #mainNav .container-fluid {
    min-height: 58px;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-wrap: nowrap;
  }
  #mainNav .brand img { max-height: 22px; }
  #mainNav .brand::after { font-size: 14px; margin-left: 9px; padding-left: 9px; }
  #mainNav ul.nav { flex-wrap: nowrap; }
  #mainNav ul.nav > li > a { padding: 7px 0; font-size: 13.5px; }

  /* --- hero ---
     Op een telefoon telt elke pixel boven de vouw: het paarse blok is
     hier krapper, het zoekveld iets duidelijker (op een klein scherm valt
     doorschijnend wit op paars bijna weg) en de onderkant is afgerond,
     zodat de overgang naar de kaarten geen harde streep is. */
  #docsSearch {
    padding: 18px 18px 22px;
    margin-bottom: 0;
    border-radius: 0 0 20px 20px;
  }
  #docsSearch h1 {
    font-size: 24px;
    line-height: 1.22;
    margin-bottom: 14px;
  }
  #docsSearch #searchBar input.search-query {
    height: 50px;
    font-size: 16px;
    padding: 0 16px 0 46px;
    border-radius: 12px;
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.23);
  }
  #docsSearch #searchBar input.search-query::placeholder { color: rgba(255,255,255,.85); }
  #docsSearch #searchBar button { width: 34px; height: 34px; left: 7px; }
  #docsSearch #searchBar button::after { background-size: 19px 19px; }

  /* --- homepage: één kolom --- */
  #contentArea:has(> section.collection-category) {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 20px 18px 48px !important;
  }
  #contentArea:has(> section.collection-category) > section.collection-category {
    padding: 18px 16px 10px !important;
  }
  /* icoon naast de titel in plaats van erboven: scheelt per kaart ruim
     50px hoogte, en met zeven kaarten telt dat op. */
  #contentArea:has(> section.collection-category) > section.collection-category > h2 {
    display: flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 0 0 50px !important;
    margin-bottom: 6px !important;
    font-size: 16.5px !important;
  }
  #contentArea:has(> section.collection-category) > section.collection-category > h2::before {
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 38px !important;
    height: 38px !important;
    background-size: 21px 21px !important;
  }
  #contentArea:has(> section.collection-category) .wb-oms {
    margin: 0 0 12px 50px !important;
    font-size: 13px !important;
  }
  #contentArea:has(> section.collection-category) a.category {
    padding: 11px 8px !important;
    gap: 10px !important;
  }
  #contentArea:has(> section.collection-category) a.category h3 {
    min-width: 0 !important;
    font-size: 14.5px !important;
  }
  #contentArea:has(> section.collection-category) a.category .article-count {
    font-size: 11.5px !important;
  }
  #contentArea:has(> section.collection-category) > footer { margin-top: 20px !important; }

  /* --- artikel- en categoriepagina --- */
  #contentArea { padding-left: 18px; padding-right: 18px; padding-top: 24px; }
  .row-fluid { gap: 22px; }
  article#fullArticle h1.title { font-size: 26px; padding-right: 52px; }
  article#fullArticle p,
  article#fullArticle li { font-size: 16px; }
  article#fullArticle h2 { font-size: 21px; margin-top: 32px; }
  article#fullArticle table { font-size: 14.5px; }
  article#fullArticle th,
  article#fullArticle td { padding: 10px; }
}

/* Onder 560px passen logo, "Kennisbank" en de menulink niet meer naast
   elkaar; dan valt het woord weg. Het logo zegt al genoeg. */
@media (max-width: 560px) {
  #mainNav .brand::after { display: none; }
  #mainNav ul.nav > li > a { font-size: 13px; }
}

/* Help Scout's stylesheet is gebouwd op Bootstrap 2, en dat zet onder
   768px `padding: 0 20px` op de <body>. Daardoor is niets meer
   schermvullend: de paarse balk en de hero houden links en rechts een
   witte rand van 20px over. De marges die we zelf willen staan al op
   #contentArea en #docsSearch, dus deze mag weg.                      */
@media (max-width: 767px) {
  body { padding-left: 0 !important; padding-right: 0 !important; }
  /* Bootstrap compenseert die body-padding met margin-left: -20px op de
     kolommen. Halen we alleen de padding weg, dan schuift de artikeltekst
     20px buiten beeld. Dus allebei terugzetten. */
  .row-fluid > [class*="span"] { margin-left: 0 !important; width: auto !important; }
}

/* ---------- print ---------------------------------------------------- */

@media print {
  #mainNav, #docsSearch, #sidebar, .articleRatings, a.printArticle, footer { display: none !important; }
  article#fullArticle { max-width: none; }
}