/* ═════════════════ SINGLE BERICHT — titel override ═════════════════ */
/* De gedeelde .hero-inner h1 uit nieuws.css is te groot voor lange
   berichttitels — hier specifiek verkleind voor losse berichten. */
.single-post-hero .hero-inner h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.7rem,3.6vw,2.7rem);
  letter-spacing:-.025em;line-height:1.15;
  color:var(--white);margin-bottom:0;
}

/* ═════════════════ Meebewegende gloed tijdens het scrollen ═════════════════ */
.scroll-glow{
  position:fixed;
  top:20%; left:50%;
  width:1100px; height:1100px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,32,32,.55) 0%, rgba(255,32,32,.18) 45%, transparent 72%);
  pointer-events:none;
  z-index:5;
  mix-blend-mode:screen;
  transition: top .25s linear;
  animation: dmc-glow-pulse 7s ease-in-out infinite;
}

/* ═════════════════ Fallback-stijl voor losse WordPress-blokken ═════════════════
   Voor als er ooit een Zoek-blok, Laatste-berichten-blok e.d. rechtstreeks
   in een bericht wordt ingevoegd, zodat het niet ongestileerd oogt. */
.entry-content .wp-block-search__input,
.entry-content input[type="search"]{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:10px 14px;color:var(--white);font-family:var(--font-body);
}
.entry-content .wp-block-search__button{
  background:var(--red);color:var(--white);border:none;border-radius:10px;
  padding:10px 18px;margin-left:8px;font-family:var(--font-mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;
}
.entry-content .wp-block-latest-posts,
.entry-content .wp-block-page-list{
  list-style:none;padding:0;margin:0 0 26px;
}
.entry-content .wp-block-latest-posts li,
.entry-content .wp-block-page-list li{
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.entry-content .wp-block-latest-posts li::before,
.entry-content .wp-block-page-list li::before{ content:none; }
.single-post-section{
  background:var(--black);
  padding:clamp(60px,8vw,100px) clamp(20px,6vw,80px) clamp(40px,5vw,60px);
}
.single-post-wrap{
  max-width:760px;
  margin:0 auto;
}
.single-post-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:36px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);
}
.single-post-meta .badge{
  background:rgba(227,4,4,.12);border:1px solid rgba(227,4,4,.3);
  color:var(--red);padding:5px 14px;border-radius:999px;
}
.single-post-meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.25);}

/* ── Entry content typografie ── */
.entry-content{
  font-family:var(--font-body);
  font-size:clamp(16px,1.6vw,18px);
  line-height:1.85;
  color:var(--muted);
}
.entry-content > *:first-child{ margin-top:0; }
.entry-content p{ margin:0 0 26px; }
.entry-content h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  letter-spacing:-.02em;color:var(--white);
  margin:52px 0 20px;line-height:1.25;
}
.entry-content h3{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.2rem,2.2vw,1.5rem);
  letter-spacing:-.015em;color:var(--white);
  margin:40px 0 16px;line-height:1.3;
}
.entry-content h4{
  font-family:var(--font-body);font-weight:700;
  font-size:1.05rem;color:var(--white);
  margin:32px 0 14px;
}
.entry-content a{
  color:var(--white);text-decoration:underline;
  text-decoration-color:rgba(227,4,4,.5);text-underline-offset:3px;
  transition:text-decoration-color .2s, color .2s;
}
.entry-content a:hover{ color:var(--red); text-decoration-color:var(--red); }
.entry-content strong{ color:var(--white); font-weight:700; }
.entry-content em{ font-style:italic; }
.entry-content ul,
.entry-content ol{
  margin:0 0 26px; padding-left:24px;
}
.entry-content ul{ list-style:none; }
.entry-content ul li{ position:relative; padding-left:22px; margin-bottom:10px; }
.entry-content ul li::before{
  content:''; position:absolute; left:0; top:11px;
  width:6px;height:6px;border-radius:50%;
  background:var(--red);
}
.entry-content ol{ list-style:decimal; }
.entry-content ol li{ margin-bottom:10px; padding-left:6px; }
.entry-content ol li::marker{ color:var(--red); font-family:var(--font-mono); }
.entry-content blockquote{
  margin:36px 0; padding:24px 28px;
  border-left:3px solid var(--red);
  background:rgba(255,255,255,.03);
  border-radius:0 12px 12px 0;
  font-style:italic; color:var(--white);
  font-size:1.1em;
}
.entry-content blockquote p{ margin-bottom:0; }
.entry-content img,
.entry-content figure img{
  display:block; width:100%; height:auto;
  border-radius:16px; margin:36px 0;
}
.entry-content figure{ margin:36px 0; }
.entry-content figcaption{
  font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.05em; color:var(--muted-2);
  text-align:center; margin-top:10px;
}
.entry-content hr{
  border:none; border-top:1px solid rgba(255,255,255,.08);
  margin:48px 0;
}
.entry-content code{
  background:rgba(255,255,255,.06); padding:2px 8px;
  border-radius:5px; font-family:var(--font-mono); font-size:.9em;
  color:var(--white);
}
.entry-content table{
  width:100%; border-collapse:collapse; margin:32px 0;
  font-size:.95em;
}
.entry-content table th,
.entry-content table td{
  padding:12px 16px; text-align:left;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.entry-content table th{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2); font-weight:400;
}
.entry-content iframe,
.entry-content .wp-block-embed{
  max-width:100%; border-radius:16px; margin:36px 0;
}
/* Video in post content: covers a bare <video> tag, the core Video block's
   <figure>, AND WordPress's wp_video_shortcode/MediaElement auto-embed
   wrapper (.wp-video / .mejs-container), which carries inline pixel
   width/height — hence !important everywhere.
   width:auto (not 100%) is deliberate: it lets the video's own aspect ratio
   decide its size, capped by max-width/max-height. Forcing width:100%
   stretches PORTRAIT clips (filmed vertically on a phone) to the full
   column width, which is what caused the oversized box — this fixes that
   for portrait and landscape clips alike, without needing to know which
   orientation any future video is beforehand. */
/* Video in post content: covers a bare <video> tag, the core Video block's
   <figure>, and WordPress's wp_video_shortcode wrapper (.wp-video), which
   carries an inline pixel width. MediaElement's JS skin (.mejs-container)
   is dequeued in functions.php, so this is the only sizing logic in play.
   width:auto (not 100%) is deliberate: it lets the video's own aspect ratio
   decide its size, capped by max-width/max-height. Forcing width:100%
   stretches PORTRAIT clips (filmed vertically on a phone) to the full
   column width, which is what caused the oversized box — this fixes that
   for portrait and landscape clips alike, without needing to know which
   orientation any future video is beforehand. */
.entry-content video,
.entry-content figure video,
.entry-content .wp-video{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:70vh !important;
  margin:36px auto !important;
  border-radius:16px;
  background:#000;
}

/* ── Terug-link + share ── */
.single-post-footer-nav{
  max-width:760px; margin:56px auto 0;
  padding-top:32px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.single-back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  transition:color .2s;
}
.single-back-link:hover{ color:var(--white); }
.single-back-link .arr{ transition:transform .2s; }
.single-back-link:hover .arr{ transform:translateX(-4px); }

/* ── Gerelateerde berichten ── */
.related-section{
  background:var(--black);
  padding:clamp(20px,4vw,40px) clamp(20px,6vw,80px) clamp(90px,10vw,130px);
}
.related-inner{ max-width:1200px; margin:0 auto; }
.related-inner .eyebrow{ margin-bottom:32px; display:block; }

/* Mobiel menu-knop passend maken (gedeeld component, elk bestand laadt eigen CSS) */
.mobile-menu .btn{
  margin-top: 12px;
  padding: 14px 26px;
  font-size: 12px;
  white-space: normal;
  text-align: center;
  max-width: 100%;
  box-sizing: border-box;
}