:root{
  --vl-primary: #FFED00;
  --vl-action:  #0055CC;

  --vl-grey-1000:#333332;
  --vl-grey-800: #687483;
  --vl-grey-300: #cfd5dd;
  --vl-grey-100: #F7F9FC;
  --vl-surface: #FFFFFF;
  --vl-maxw: 1500px;
  --vl-radius: 12px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  /* Zachtere tekst: gebruik grey-800 i.p.v. de donkerste */
  color: var(--vl-grey-800);
  background: var(--vl-grey-100);
  font-family: "Flanders Art Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.6;
}

.vl-topbar{ background:var(--vl-primary); border-bottom:1px solid rgba(0,0,0,.08); }
.vl-topbar__inner{
  max-width:var(--vl-maxw); margin:0 auto; padding:14px 16px;
  display:flex; gap:14px; align-items:center; justify-content:space-between;
}
.vl-brand{ font-weight:800; letter-spacing:.2px; color:var(--vl-grey-1000); }
.vl-nav a{
  color:var(--vl-grey-1000); text-decoration:none; font-weight:600;
  padding:6px 8px; border-radius:10px;
}
.vl-nav a:hover{ background:rgba(255,255,255,.55); }
.vl-nav a[aria-current="page"]{ outline:2px solid rgba(0,0,0,.18); }

.vl-container{ max-width:var(--vl-maxw); margin:18px auto 56px; padding:0 16px; }
.vl-card{
  background:var(--vl-surface);
  border:1px solid var(--vl-grey-300);
  border-radius:var(--vl-radius);
  padding:22px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

a{ color: var(--vl-action); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ text-decoration-thickness: 2px; }

h1,h2,h3{ line-height:1.2; }
h1,h2,h3{ color: var(--vl-grey-1000); }
h1{ font-size:2rem; margin:0 0 12px; }
h2{ font-size:1.45rem; margin:28px 0 10px; border-top:1px solid var(--vl-grey-300); padding-top:18px; }
h3{ font-size:1.15rem; margin:20px 0 8px; }

/* Make bold text more prominent */
strong, b {
    font-weight: 700 !important;
    color: var(--vl-grey-1000);
}

/* Make italic text more visible */
em, i {
    font-style: italic;
    color: var(--vl-grey-1000);
}

blockquote{
  margin:14px 0; padding:12px 14px;
  border-left:6px solid var(--vl-primary);
  background:#fffce0; border-radius:10px;
}

pre{
  background:#0b1020; color:#e9eefc;
  padding:14px; border-radius:12px; overflow-x:auto;
}
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.vl-footer{ color:var(--vl-grey-800); text-align:center; padding:18px 16px 42px; }
.vl-layout{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
}

.vl-layout--single{
  grid-template-columns: 1fr;   /* full width when no sidebar */
}

.vl-toc{
  background: var(--vl-surface, #fff);
  border: 1px solid var(--vl-grey-300, #cfd5dd);
  border-radius: 12px;
  padding: 14px;
  position: sticky;
  top: 12px;
}

.vl-toc__title{
  font-weight: 700;
  margin-bottom: 8px;
}

.vl-toc ul{ margin: 0 0 0 18px; padding: 0; }
.vl-toc a{ text-decoration: none; }
.vl-toc a:hover{ text-decoration: underline; }

.vl-toc__sep{
  margin: 12px 0;
  border-top: 1px solid var(--vl-grey-300, #cfd5dd);
}

/* Mobile: stack TOC above content */
@media (max-width: 900px){
  .vl-layout{ grid-template-columns: 1fr; }
  .vl-toc{ position: static; }
}

.vl-card img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 14px 0;
  border-radius: 12px;
}

/* Improved table styling */
.vl-data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: var(--vl-radius);
    overflow: hidden;
}

.vl-data-table th {
    background-color: var(--vl-grey-300);
    color: white;
    font-weight: 700;
    padding: 1rem 0.75rem;
    text-align: left;
    border: none;
}

.vl-data-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--vl-grey-300);
    vertical-align: top;
}

.vl-data-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.vl-data-table tbody tr:hover {
    background-color: #e3f2fd;
}

.vl-data-table tbody tr:last-child td {
    border-bottom: none;
}