/* Wenen NU – compacte, snelle CSS */
:root{
  --maxw: 70rem;
  --pad: 1rem;
  --gap: .75rem;
  --radius: 14px;
  --border: #e6e6e6;
}

/* System font stack voor performance */
html{box-sizing:border-box;scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
body{
  margin:0;
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,"Noto Sans",sans-serif;
  color:#111;
  background:#fff;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:#0a66c2;text-decoration:none}
a:hover,a:focus{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.header{
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:#fff;z-index:50;
}
.header-inner{display:flex;align-items:center;gap:var(--gap);padding:.75rem 0}
.site-title{font-size:1.25rem;font-weight:700;margin:0}
.site-title a{color:inherit;text-decoration:none}
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0;flex-wrap:wrap}
.nav a{display:block;padding:.5rem;border-radius:8px}
.nav a:focus,.nav a[aria-current="page"]{outline:none;background:#f4f6f8}

.main{padding:1.25rem 0}
.post-card{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem;transition:transform .12s ease, box-shadow .12s ease;
}
.post-card:hover{transform:translateY(-1px);box-shadow:0 2px 12px rgba(0,0,0,.05)}
.post-card h2{margin:.25rem 0 .5rem;font-size:1.15rem}
.meta{font-size:.9rem;color:#666;margin:.25rem 0 .5rem}

.content{font-size:1.05rem}
.content > * + *{margin-top:1rem}
.content h1,.content h2,.content h3{line-height:1.25;margin:1.25rem 0 .75rem}
.content h1{font-size:2rem}
.content h2{font-size:1.5rem}
.content h3{font-size:1.25rem}
.content ul,.content ol{padding-left:1.25rem}
.content blockquote{margin:1rem 0;padding:.5rem 1rem;border-left:3px solid #0a66c2;background:#f8fafc}

.pagination{display:flex;gap:.5rem;align-items:center;justify-content:center;margin:2rem 0}
.pagination a,.pagination span{
  border:1px solid var(--border);padding:.5rem .75rem;border-radius:10px;
}
.footer{border-top:1px solid var(--border);padding:1rem 0;color:#666;font-size:.95rem}
.footer a{color:inherit}
/* Responsive tweaks */
@media (max-width:768px){
  .header-inner{flex-wrap:wrap}
  .nav{width:100%;order:2}
  .nav ul{justify-content:flex-start}
}

/* --- Wenen NU updates --- */
/* 1) Contentbreedte naar 640px */
:root{
  --maxw: 640px; /* voor een smalle, goed leesbare kolom */
}

/* 2) Afbeeldingen netjes schaalbaar in content en cards */
.content img,
.post-card img {
  display:block;
  max-width:100%;
  height:auto;
}

/* 3) Gekleurde blokken */
.bg-blue {
  background-color:#e6f0fa;
  border:2px solid #0a66c2;
  padding:1rem;
  border-radius:var(--radius);
}
.bg-green {
  background-color:#e8f8f0;
  border:2px solid #2ca36d;
  padding:1rem;
  border-radius:var(--radius);
}
.bg-red {
  background-color:#fde8e8;
  border:2px solid #d93025;
  padding:1rem;
  border-radius:var(--radius);
}

/* 4) Opvallende linkstijl: alleen in .content en alleen voor wenen.nu */
.content a[href*="wenen.nu"]{
  font-weight:600;
  color:#0a66c2;
  border-bottom:2px solid #0a66c2;
  padding-bottom:2px;
  text-decoration:none;
}
.content a[href*="wenen.nu"]:hover,
.content a[href*="wenen.nu"]:focus{
  color:#084d94;
  border-color:#084d94;
}

/* 5) Rank Math TOC – card look + collapsed state */
.rank-math-toc-block{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#f8fafc;
  padding:1rem;
  margin:1.25rem 0;
}
.rank-math-toc-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  margin:0 0 .5rem;
}
.rank-math-toc-block .rank-math-toc-content ul,
.rank-math-toc-block .rank-math-toc-content ol{
  margin:.25rem 0 0;
  padding-left:1.25rem;
}
.rank-math-toc-block .rank-math-toc-content a{
  text-decoration:none;
  border-bottom:1px dashed #c9d5e6;
}
.rank-math-toc-block .rank-math-toc-content a:hover{
  border-bottom-color:#0a66c2;
}
.rank-math-toc-block .toc-toggle{
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  padding:.35rem .6rem;
  font-weight:600;
  cursor:pointer;
}
.rank-math-toc-block.is-collapsed .rank-math-toc-content{
  display:none;
}

/* Rank Math Gutenberg block support */
.wp-block-rank-math-toc-block{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#f8fafc;
  padding:1rem;
  margin:1.25rem 0;
}
.wp-block-rank-math-toc-block > h2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  margin:0 0 .5rem;
}
/* collapse <nav> when wrapped OR when the block itself is collapsed */
.rank-math-toc-block.is-collapsed .rank-math-toc-content{ display:none; }
.wp-block-rank-math-toc-block.is-collapsed nav{ display:none; }
.wp-block-rank-math-toc-block .toc-toggle,
.rank-math-toc-block .toc-toggle{
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  padding:.35rem .6rem;
  font-weight:600;
  cursor:pointer;
}

/* --- Custom content blocks --- */

/* Local tip */
.local-tip {
  background-color: #f0f9f4;
  border-left: 6px solid #2ca36d;
  padding: 1rem;
  border-radius: var(--radius);
  position: relative;
}
.local-tip::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #2ca36d;
  border-radius: 2px;
}

/* Handige informatie */
.info-box {
  background-color: #f8fafc;
  border: 1px solid var(--border);
  border-top: 4px solid #0a66c2;
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Let op */
.alert-box {
  background-color: #fff5f5;
  border: 1px solid #d93025;
  padding: 1rem;
  border-radius: var(--radius);
  position: relative;
}
.alert-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #d93025 transparent transparent;
}

/* Interne links (zelfde domein) in .content */
.content a[href*="wenen.nu"]:not(.toc-toggle) {
  font-weight: 500;
  color: #0a66c2;
  border-bottom: 1px solid rgba(10,102,194,0.4);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.content a[href*="wenen.nu"]:not(.toc-toggle):hover {
  color: #084d94;
  border-color: rgba(8,77,148,0.8);
}

/* --- Content blocks (zonder emojis) --- */

/* 1) Local tip */
.local-tip {
  background-color: #f0f9f4;
  border-left: 6px solid #2ca36d;
  padding: 1rem;
  border-radius: var(--radius);
  position: relative;
}
.local-tip::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #2ca36d;
  border-radius: 2px;
}

/* 2) Handige informatie */
.info-box {
  background-color: #f8fafc;
  border: 1px solid var(--border);
  border-top: 4px solid #0a66c2;
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* 3) Let op */
.alert-box {
  background-color: #fff5f5;
  border: 1px solid #d93025;
  padding: 1rem;
  border-radius: var(--radius);
  position: relative;
}
.alert-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #d93025 transparent transparent;
}

/* 4) Interne links in content (wenen.nu) */
.content a[href*="wenen.nu"]:not(.toc-toggle) {
  font-weight: 500;
  color: #0a66c2;
  border-bottom: 1px solid rgba(10,102,194,0.4);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.content a[href*="wenen.nu"]:not(.toc-toggle):hover,
.content a[href*="wenen.nu"]:not(.toc-toggle):focus {
  color: #084d94;
  border-color: rgba(8,77,148,0.8);
}