@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;
}

/* ---------- 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 --------------------------------------------------- */

#mainNav.navbar {
  margin: 0;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--wb-grey-100);
  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;
}

#mainNav .brand {
  padding: 0;
  margin: 0;
  margin-right: auto;
  display: flex;
  align-items: center;
  text-shadow: none;
  float: none;
}
#mainNav .brand img { max-height: 42px; width: auto; display: block; }

/* 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: var(--wb-primary);
  text-shadow: none;
  transition: background .15s ease, color .15s ease;
}
#mainNav ul.nav > li > a:hover,
#mainNav ul.nav > li > a:focus {
  background: var(--wb-purple-050);
  color: var(--wb-primary);
}
/* 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; }

/* de laatste eigen link ("Naar het platform") als knop */
#mainNav ul.nav > li:last-child > a {
  background: var(--wb-primary);
  color: #fff;
}
#mainNav ul.nav > li:last-child > a:hover {
  background: var(--wb-purple);
  color: #fff;
}

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

#docsSearch {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--wb-lavender) 0%, var(--wb-purple-050) 55%, #FFF6E8 100%);
  border-bottom: 1px solid var(--wb-grey-100);
  padding: 76px 24px 84px;
  text-align: center;
  margin: 0 0 8px;
}
/* zachte vormen die het logo echoën */
#docsSearch::before,
#docsSearch::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
#docsSearch::before {
  width: 340px; height: 340px;
  top: -140px; left: -110px;
  background: radial-gradient(circle at 35% 35%, rgba(245,195,56,.55), rgba(245,195,56,0) 68%);
}
#docsSearch::after {
  width: 420px; height: 420px;
  bottom: -220px; right: -140px;
  background: radial-gradient(circle at 50% 50%, rgba(217,130,173,.45), rgba(217,130,173,0) 66%);
}

#docsSearch h1 {
  position: relative;
  z-index: 1;
  margin: 0 auto 32px;
  max-width: 18ch;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  line-height: 1.14;
  color: var(--wb-primary);
  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 */
}
#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; }

/* ---------- collecties + categorieën --------------------------------- */

.collection-category { margin: 0 0 56px; }

.collection-category > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wb-purple);
}
.collection-category > h2::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--wb-orange);
  flex: 0 0 auto;
}
.collection-category:nth-of-type(3n+2) > h2::before { background: var(--wb-teal); }
.collection-category:nth-of-type(3n+3) > h2::before { background: var(--wb-pink); }
.collection-category > h2 a { color: inherit !important; text-decoration: none !important; }

.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

a.category {
  position: relative;
  display: block;
  padding: 26px;
  border: 1px solid var(--wb-grey-100);
  border-radius: var(--wb-radius-lg);
  background: #fff;
  box-shadow: var(--wb-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.category, a.category:hover { color: inherit !important; text-decoration: none !important; }
a.category { display: block !important; }
a.category:hover {
  transform: translateY(-3px);
  box-shadow: var(--wb-shadow-lg);
  border-color: var(--wb-purple-200);
}
a.category h3 {
  margin: 0 0 8px;
  color: var(--wb-primary) !important;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wb-primary);
}
a.category p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5B5672;
}
a.category p.article-count {
  margin-top: 16px;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--wb-grey-050);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wb-purple);
}

/* ---------- homepage: collecties met artikelvoorbeelden --------------- */
/* Help Scout gebruikt .row-fluid ook voor de homepage-kolommen; die moet
   een grid zijn, niet de twee-koloms layout van een artikelpagina.
   De kaarten zelf worden bij Help Scout gestyled via .threeCol .collection,
   dus onze regels hebben een #contentArea-prefix nodig om te winnen.      */

section.row-fluid,
.oneCol.row-fluid,
.twoCol.row-fluid,
.threeCol.row-fluid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: start;
  gap: 20px;
  margin: 0 0 8px;
}

#contentArea .collection {
  position: relative;
  width: auto !important;      /* Help Scout zet hier een percentage */
  margin: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
  padding: 26px;
  cursor: pointer;
  border: 1px solid var(--wb-grey-100);
  border-radius: var(--wb-radius-lg);
  background: #fff;
  box-shadow: var(--wb-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#contentArea .collection:hover {
  transform: translateY(-3px);
  box-shadow: var(--wb-shadow-lg);
  border-color: var(--wb-purple-200);
}

#contentArea .collection-head {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 0;
}

/* aantal artikelen, wordt door de head-code toegevoegd */
#contentArea .collection-head p.wb-count {
  margin-top: 16px;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--wb-grey-050);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wb-purple);
}
#contentArea .collection-head,
#contentArea .collection-head h2,
#contentArea .collection-head p { text-align: left !important; }
#contentArea .collection-head h2 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}
#contentArea .collection-head h2 a { color: var(--wb-primary) !important; text-decoration: none !important; }
#contentArea .collection-head p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5B5672;
}

/* artikellijst binnen een collectiekaart: geen kaartjes in kaartjes */
#contentArea .collection-body,
#contentArea .collection-body ul.popArticles,
#contentArea .collection-body ul.popArticles li { text-align: left !important; }
/* De artikellijst binnen een collectiekaart is verborgen: op de homepage
   zie je alleen het thema, net als bij Moneybird. Wil je de artikelen
   tóch meteen tonen, haal dan 'display: none' hieronder weg. */
#contentArea .collection-body {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#contentArea .collection-body ul.popArticles { display: block !important; margin: 0 !important; padding: 0 !important; }
#contentArea .collection-body ul.popArticles li { margin: 0 !important; padding: 0 !important; }
#contentArea .collection-body ul.popArticles li a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
  padding: 7px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  transform: none !important;
}
#contentArea .collection-body ul.popArticles li a:hover { color: var(--wb-purple) !important; }
#contentArea .collection-body ul.popArticles li a i.icon-article-doc {
  width: 22px !important;
  height: 22px !important;
  margin-top: 1px;
  border-radius: 7px;
}
#contentArea .collection-body ul.popArticles li a i.icon-article-doc::before { background-size: 14px 14px; }

/* ---------- populaire artikelen -------------------------------------- */

.most-pop-articles { margin: 0 0 56px; }
.most-pop-articles h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wb-purple);
}
.most-pop-articles h2::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--wb-yellow);
  flex: 0 0 auto;
}

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: 52px 20px 60px; }
  #contentArea { padding-top: 40px; }
  ul.popArticles, ul.articleList, .category-list { grid-template-columns: 1fr; }
  section.row-fluid, .threeCol.row-fluid, .twoCol.row-fluid { 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: 34px; }
  #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; }
  .articleRatings { flex-direction: column; align-items: flex-start; }
  .articleRatings-actions { margin-left: 0; }
}

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

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