/* ===== THEME ===== */
:root{
  --blue:#2563eb;
  --green:#16a34a;
  --text:#0f172a;
  --text-light:#475569;
  --bg:#f8fafc;
  --white:#ffffff;
  --line:#e2e8f0;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* ===== BASISLAY-OUT (voor sticky footer) ===== */
html,
body{
  height:100%;
}

body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,Segoe UI,Roboto,Arial;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* main moet de ruimte opvullen tussen header en footer */
main{
  flex:1;
}

/* ===== LAYOUT (sitebreedte) ===== */
.container{width:92%;max-width:1100px;margin:0 auto}

/* ===== HEADER / NAV ===== */
.site-header{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:16px 0;
  margin-bottom:30px;
  position:sticky;
  top:0;
  z-index:50;
}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-size:22px;font-weight:800;color:var(--blue);text-decoration:none}

/* top menu roots */
.top-menu{display:flex;gap:20px;align-items:center}
.nav-item{position:relative;padding-bottom:12px} /* extra hover-zone */
.nav-root{
  text-decoration:none;color:var(--text);
  padding:8px 12px;border-radius:8px;font-weight:600;
}
.nav-root:hover{background:rgba(37,99,235,.10);color:var(--blue)}

/* ===== DROPDOWN (hover) ===== */
.flyout{
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  min-width:280px; background:var(--white);
  border:1px solid var(--line); border-radius:12px;
  padding:10px; box-shadow:0 8px 22px rgba(0,0,0,.06); z-index:60;
}
.nav-item:hover .flyout,
.nav-item:focus-within .flyout{display:block}

/* onzichtbare brug tussen root en menu om gap te voorkomen */
.nav-item::after{
  content:""; position:absolute; top:100%; right:0; width:100%; height:10px;
}

.flyout a{
  display:block; padding:8px 10px; border-radius:8px;
  text-decoration:none; color:var(--text); transition:.12s;
}
.flyout a:hover{background:#eef3ff;color:var(--blue)}
.flyout hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.flyout .all-link{font-weight:700;color:var(--green)}
.flyout .all-link:hover{background:#f0fff4}

/* ===== HERO ===== */
.hero{margin-bottom:40px}
.hero h1{font-size:38px;font-weight:800;margin-bottom:12px}
.hero p{max-width:800px;font-size:17px;color:var(--text-light)}

/* ===== GRID ===== */
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px}
@media (max-width:760px){.grid.two{grid-template-columns:1fr}}

/* ===== CARDS ===== */
.card{
  display:block;background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:20px;text-decoration:none;color:var(--text);
  transition:.12s ease;
}
.card:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:0 8px 18px rgba(0,0,0,.05)}
.card h2{font-size:22px;margin-bottom:6px;color:var(--blue)}
.card p{color:var(--text-light)}
.card{margin-bottom:8px} /* ruimte voor lijst eronder */

/* ===== ARTIKEL-LIJSTEN ONDER CARDS (zonder bullets) ===== */
.link-list{
  list-style:none;
  padding-left:0;
  margin-left:0;
}
.link-list li{
  list-style:none;
  padding-left:0;
  margin-left:0;
}
.link-list li::before{
  content:none;
}

/* ===== FOOTER ===== */
.site-footer{
  margin-top:50px;
  padding:20px 0;
  border-top:1px solid var(--line);
  background:var(--white);
}
.footer-grid{display:flex;align-items:center;gap:16px}
.footer-right{justify-content:flex-end}
.footer-grid a{text-decoration:none;color:var(--blue);font-weight:600}
.footer-grid small{color:var(--text-light)}

/* =======================================================
   ARTIKELPAGINA'S (vaste leesbreedte + typografie + blokken)
   ======================================================= */

/* Vast, rustiger leesformaat voor alle artikelpagina’s */
main.article, .article-wrapper{
  width:92%;
  max-width:760px;
  margin:0 auto;
}
.article-wrapper{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
}

/* Breadcrumbs */
.breadcrumb{font-size:14px;margin:8px 0 16px;color:var(--text-light)}
.breadcrumb a{color:var(--blue);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:2px}

/* Koppen in artikelen */
.article-wrapper h1{font-size:34px;line-height:1.2;font-weight:800;margin:.2rem 0 .8rem}
.article-wrapper h2{font-size:22px;margin:1.8rem 0 .8rem;font-weight:750}
.article-wrapper h3{font-size:18px;margin:1.2rem 0 .5rem;font-weight:700}
.article-wrapper p{margin:0 0 1.05rem;color:var(--text)}

/* Nette opsommingen (blauwe subtiele bullets) */
.ul-clean{list-style:none;margin:.2rem 0 1.05rem;padding-left:0}
.ul-clean li{position:relative;padding-left:22px;margin:.5rem 0}
.ul-clean li::before{
  content:"";position:absolute;left:8px;top:0.8em;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--blue);opacity:.55;
}

/* Blauw info-kader (callout) */
.callout{
  background:#f3f6ff;
  border:1px solid #dbeafe;
  border-left:4px solid var(--blue);
  border-radius:10px;
  padding:12px 14px;
  margin:12px 0;
}
.callout p:last-child{margin-bottom:0}

/* Lichtblauw blok (voor voorbeelden/opsommingen) */
.box{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  margin:12px 0;
}

/* Uitklapblokken (details/summary) in nette box-stijl */
details{
  background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;margin:14px 0;
}
details summary{
  cursor:pointer;font-weight:700;list-style:none;
}
details[open]{border-color:#cfe0ff;box-shadow:0 4px 16px rgba(0,0,0,.04)}
details .box{background:#f6f9ff;border-color:#dbeafe}

/* Tabel-styling (voor jaar-overzichten) */
.table-wrapper{overflow-x:auto}
.styled-table{width:100%;border-collapse:collapse;font-size:15.5px}
.styled-table th,.styled-table td{
  padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap
}
.styled-table th{background:#eef3ff;font-weight:700}

/* Navigatieknoppen onderaan artikel */
.return-buttons{display:flex;gap:10px;margin-top:1.1rem;flex-wrap:wrap}
.return-buttons .btn{
  display:inline-block;padding:10px 14px;border-radius:10px;
  text-decoration:none;color:var(--text);background:#fff;border:1px solid var(--line)
}
.return-buttons .btn:hover{background:#eef3ff;color:var(--blue)}

/* Kleine hulpfuncties voor indent zonder bullets */
.indent{margin-left:12px;margin-top:4px}
.box-section + .box-section{margin-top:14px}

/* ===== Responsive voor artikelen ===== */
@media (max-width:760px){
  .article-wrapper{padding:18px}
  .article-wrapper h1{font-size:28px}
  .article-wrapper h2{font-size:20px}
  .styled-table{font-size:14.5px}
}

/* ============ MOBILE NAV (drawer rechts) ============ */
.hamburger{
  display: none;                   /* standaard: verbergen op desktop */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.hamburger span{
  display: block;
  width: 24px;
  height: 3px;
  background: #0f172a;
  margin: 3px 0;
  border-radius: 2px;
  transition: .2s;
}


@media (max-width:880px){
  .top-menu{display:none}
  .hamburger{display:flex}
}

.drawer-overlay{
  position:fixed;inset:0;background:rgba(15,23,42,.35);
  opacity:0;visibility:hidden;transition:.2s;z-index:98;
}
.drawer-overlay.open{opacity:1;visibility:visible}

.mobile-drawer{
  position:fixed;top:0;height:100dvh;width:320px;max-width:88%;
  background:#fff;border-left:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  z-index:99;display:flex;flex-direction:column;
  transition:transform .24s ease;
}
.mobile-drawer.right{right:0;transform:translateX(100%)}
.mobile-drawer.open{transform:translateX(0)}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.brand-mini{font-weight:800;color:var(--blue)}
.drawer-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer}

.drawer-nav{padding:12px 10px 24px;overflow:auto}
.drawer-group{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;margin:10px 0}
.drawer-title{font-weight:800;margin-bottom:6px}

.drawer-nav a{
  display:block;padding:8px 10px;margin-top:2px;border-radius:8px;
  color:var(--text);text-decoration:none;
}
.drawer-nav a:hover{background:#eef3ff;color:var(--blue)}
.drawer-nav hr{border:0;border-top:1px solid var(--line);margin:8px 0}

/* All-link in drawer: zelfde lichtgroene hover als desktop */
.drawer-nav a.all-link{font-weight:700;color:var(--green)}
.drawer-nav a.all-link:hover{background:#f0fff4;color:var(--green)}

body.noscroll{overflow:hidden}

/* Reacties-blok (Giscus) */
.comments-card{
  margin-top:1.25rem;
  background:#f3f6ff;
  border:1px solid #dbeafe;
  border-left:4px solid var(--blue);
  border-radius:12px;
  padding:14px;
}
.comments-title{
  font-size:1.1rem;
  font-weight:750;
  margin:0 0 .6rem;
  color:var(--text);
}
.giscus, .giscus-frame{width:100%}

.card-title-link {
  text-decoration: none;
  color: inherit;
}

.card-title-link h2 {
  margin-bottom: 8px;
  color: var(--blue);
}

/* ===== ARTIKEL-LIJSTEN ONDER CARDS (zonder bullets) ===== */
.link-list{
  list-style:none;
  padding-left:0;
  margin:0;
}

.link-list li{
  margin:6px 0;
}

.link-list a{
  display:inline-block;
  color:var(--text);
  text-decoration:none;
  padding:6px 4px;
  border-radius:6px;
  transition:.15s;
}

/* Groene hover op index-links (zoals dropdown All-link) */
.link-list a:hover{
  background:#f0fff4;   /* lichtgroene achtergrond */
  color:var(--green);   /* groene tekst */
  text-decoration:none;
}