/* ===============================
   My Creative Plan – Post styles
   Scope: enkel in blogberichten
   =============================== */

/* 0) Kleuren (gebruikt WP presets met fallback) */
:root{
  --mc-green: var(--wp--preset--color--mc-green, #00c875);
  --mc-cyan:  var(--wp--preset--color--mc-cyan,  #00fff0);
  --mc-dark:  var(--wp--preset--color--mc-dark,  #0b1b1a);
  --mc-light: var(--wp--preset--color--mc-light, #f8f8f8);
  --mc-shadow: 0 8px 32px rgba(0,200,117,.08);
  --mc-radius: 16px;
}

/* 0.5) Blog Hero Section */
.single-post .blog-hero {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(0,200,117,0.03) 0%, rgba(0,255,240,0.03) 100%);
  border-radius: var(--mc-radius);
  border: 1px solid rgba(0,200,117,0.1);
}

.single-post .hero-content {
  flex: 1;
}

/* Inhoudsopgave binnen hero content */
.single-post .hero-content .table-of-contents {
  margin-top: 24px;
}

.single-post .hero-content h1 {
  margin: 0 0 16px 0 !important;
  font-size: 2.2rem !important;
  line-height: 1.2 !important;
  background: linear-gradient(90deg, var(--mc-dark), var(--mc-green)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.single-post .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 0 !important;
}

.single-post .post-meta span {
  padding: 6px 12px;
  background: rgba(0,200,117,0.1);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mc-dark);
}

.single-post .hero-image {
  flex: 0 0 300px;
  position: relative;
}

.single-post .hero-image .featured-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--mc-radius) !important;
  box-shadow: var(--mc-shadow) !important;
  transition: transform 0.3s ease !important;
}

.single-post .hero-image .featured-image:hover {
  transform: translateY(-4px) !important;
}

/* Image overlay voor hero image */
.single-post .hero-image {
  position: relative;
  border-radius: var(--mc-radius);
  overflow: hidden;
}

.single-post .image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.single-post .hero-image:hover .image-overlay {
  transform: translateY(0);
}

.single-post .overlay-text {
  color: white;
  font-weight: 600;
  font-size: 14px;
}

/* 16) Responsive Design */
@media (max-width: 1024px) {
  .single-post .hero-image {
    flex: 0 0 250px;
  }
}

@media (max-width: 768px) {
  .single-post .blog-hero {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }
  
  .single-post .hero-image {
    flex: none;
    order: -1; /* Afbeelding bovenaan op mobiel */
  }
  
  .single-post .hero-content h1 {
    font-size: 1.8rem !important;
  }
  
  .single-post .post-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .single-post .entry-content h2,
  .single-post .wp-block-post-content h2,
  .single-post .post-content h2 {
    font-size: 1.5rem !important;
  }
  
  .single-post .entry-content h3,
  .single-post .wp-block-post-content h3,
  .single-post .post-content h3 {
    font-size: 1.3rem !important;
  }
}

@media (max-width: 480px) {
  .single-post .blog-hero {
    padding: 16px;
    margin-bottom: 24px;
  }
  
  .single-post .hero-content h1 {
    font-size: 1.6rem !important;
  }
  
  .single-post .table-of-contents {
    padding: 16px 20px !important;
  }
  
  .single-post .hero-image .featured-image,
  .single-post .content-featured-image .content-thumb {
    height: 150px;
  }
}

/* 17) Scroll Progress Indicator */
.single-post .reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0,200,117,0.2);
  z-index: 1001;
}

.single-post .reading-progress:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan));
  width: var(--progress, 0%);
  transition: width 0.3s ease;
}

/* 18) Back to top button */
.single-post .back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--mc-green), var(--mc-cyan));
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--mc-shadow);
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.single-post .back-to-top.show {
  opacity: 1;
  transform: translateY(0);
}

.single-post .back-to-top:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0,200,117,.3);
}

/* 19) Print styles */
@media print {
  .single-post .table-of-contents,
  .single-post .content-featured-image,
  .single-post .hero-image,
  .single-post .back-to-top {
    display: none !important;
  }
  
  .single-post .blog-hero {
    background: none !important;
    border: none !important;
    padding: 0 !important;
  }
}

/* 1) Basis typografie & leesbreedte */
.entry-content,
.wp-block-post-content{
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px;
  color: #222;
  font-size: 17px;
  line-height: 1.75;
  word-break: break-word;
}

/* Verticale ritme - compactere spacing */
.single-post .entry-content > * + *,
.single-post .wp-block-post-content > * + *,
.single-post .post-content > * + *{ 
  margin-top: 0.8em !important; 
}

/* 2) Koppen met verbeterde spacing en styling */
.single-post .entry-content h1, 
.single-post .entry-content h2, 
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6,
.single-post .wp-block-post-content h1, 
.single-post .wp-block-post-content h2, 
.single-post .wp-block-post-content h3,
.single-post .wp-block-post-content h4,
.single-post .wp-block-post-content h5,
.single-post .wp-block-post-content h6,
.single-post .post-content h1,
.single-post .post-content h2,
.single-post .post-content h3,
.single-post .post-content h4,
.single-post .post-content h5,
.single-post .post-content h6{
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
  color: var(--mc-dark) !important;
  margin-top: 2.5em !important;
  margin-bottom: 0.8em !important;
  position: relative !important;
  scroll-margin-top: 100px !important; /* Voor smooth scroll met sticky header */
}

/* H2 koppen met gradient underline */
.single-post .entry-content h2,
.single-post .wp-block-post-content h2,
.single-post .post-content h2{
  display: inline-block !important;
  background-image: linear-gradient(90deg, rgba(0,200,117,.3), rgba(0,255,240,.3)) !important;
  background-position: 0 100% !important;
  background-repeat: no-repeat !important;
  background-size: 100% 0.5em !important;
  padding-bottom: 0.2em !important;
  font-size: 1.8rem !important;
}

/* H3 koppen met subtiele styling */
.single-post .entry-content h3,
.single-post .wp-block-post-content h3,
.single-post .post-content h3{
  border-left: 4px solid var(--mc-green) !important;
  padding-left: 16px !important;
  font-size: 1.5rem !important;
}

/* H4-H6 kleiner en subtieler */
.single-post .entry-content h4,
.single-post .wp-block-post-content h4,
.single-post .post-content h4{
  font-size: 1.3rem !important;
  color: var(--mc-green) !important;
}

.single-post .entry-content h5,
.single-post .wp-block-post-content h5,
.single-post .post-content h5{
  font-size: 1.1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--mc-green) !important;
}

.single-post .entry-content h6,
.single-post .wp-block-post-content h6,
.single-post .post-content h6{
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #666 !important;
}

/* 3) Links – nette underline */
.entry-content a,
.wp-block-post-content a{
  color: var(--mc-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entry-content a:hover,
.wp-block-post-content a:hover{
  color: #0a7;
  text-decoration-thickness: 2px;
}

/* 4) Lijsten – meer lucht + nette bullets */
.entry-content ul, .entry-content ol,
.wp-block-post-content ul, .wp-block-post-content ol{
  padding-left: 1.4em;
}
.entry-content li + li,
.wp-block-post-content li + li{
  margin-top: .35em;
}

/* Optionele checklist (voeg class "mc-checklist" aan je lijst toe) */
.entry-content .mc-checklist li,
.wp-block-post-content .mc-checklist li{
  list-style: none;
  padding-left: 28px;
  position: relative;
}
.entry-content .mc-checklist li::before,
.wp-block-post-content .mc-checklist li::before{
  content: "✔";
  position: absolute; left: 0; top: 0;
  color: var(--mc-green);
  font-weight: 700;
}

/* 5) Citaat & pullquote */
.entry-content blockquote,
.wp-block-post-content blockquote{
  margin: 1.5em 0;
  padding: 1em 1.25em;
  border-left: 4px solid var(--mc-green);
  background: #fff;
  border-radius: 8px;
  color: #333;
}
.wp-block-pullquote{
  border-top: 3px solid var(--mc-cyan);
  border-bottom: 3px solid var(--mc-green);
  padding: 1.2em 0;
  text-align: center;
}

/* 6) Afbeeldingen en figcaptions - ALLEEN in blog content */
.single-post .entry-content img:not(.site-logo):not(.header-img):not(.footer-img),
.single-post .wp-block-post-content img:not(.site-logo):not(.header-img):not(.footer-img),
.single-post .post-content img:not(.site-logo):not(.header-img):not(.footer-img),
.single-post .entry-content figure img:not(.site-logo):not(.header-img):not(.footer-img),
.single-post article img:not(.site-logo):not(.header-img):not(.footer-img){
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  height: auto !important;
  max-width: 100% !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.single-post .entry-content img:not(.site-logo):not(.header-img):not(.footer-img):hover,
.single-post .wp-block-post-content img:not(.site-logo):not(.header-img):not(.footer-img):hover,
.single-post .post-content img:not(.site-logo):not(.header-img):not(.footer-img):hover,
.single-post .entry-content figure img:not(.site-logo):not(.header-img):not(.footer-img):hover,
.single-post article img:not(.site-logo):not(.header-img):not(.footer-img):hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.16) !important;
}

/* Specifiek header en footer afbeeldingen UITSLUITEN */
.site-header img,
.site-footer img,
.site-branding img,
header img,
footer img,
nav img {
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.wp-block-image figcaption{
  color: #666;
  font-size: 14px;
  text-align: center;
  margin-top: .5em;
}

/* 7) Tabellen – zebra & randen */
.wp-block-table table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 10px;
}
.wp-block-table th, .wp-block-table td{
  padding: 12px 14px;
  border: 1px solid #eee;
}
.wp-block-table thead th{
  background: var(--mc-light);
  font-weight: 700;
}
.wp-block-table tbody tr:nth-child(odd){
  background: #fcfcfc;
}

/* 8) Code */
.entry-content code,
.wp-block-post-content code{
  background: #f3f6f6;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}
.entry-content pre code,
.wp-block-post-content pre code{
  display: block;
  padding: 16px;
  overflow: auto;
  background: #0b1b1a;
  color: #e3f8f4;
  border-radius: 12px;
}

/* 9) HR */
.entry-content hr,
.wp-block-post-content hr{
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan));
  border-radius: 2px;
  margin: 2em 0;
}

/* 10) Buttons (als fallback, bovenop je eigen button style) */
.single-post .wp-block-button .wp-block-button__link,
.single-post .entry-content button,
.single-post .wp-block-post-content button,
.single-post .post-content button,
.single-post .entry-content .btn,
.single-post .wp-block-post-content .btn,
.single-post .post-content .btn,
.single-post button,
.single-post .button,
.single-post a.button,
.single-post input[type="submit"],
.single-post input[type="button"]{
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-block !important;
  color: #fff !important;
  background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan)) !important;
}

.single-post .wp-block-button .wp-block-button__link:hover,
.single-post .entry-content button:hover,
.single-post .wp-block-post-content button:hover,
.single-post .post-content button:hover,
.single-post .entry-content .btn:hover,
.single-post .wp-block-post-content .btn:hover,
.single-post .post-content .btn:hover,
.single-post button:hover,
.single-post .button:hover,
.single-post a.button:hover,
.single-post input[type="submit"]:hover,
.single-post input[type="button"]:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.15) !important;
}

.single-post .wp-block-button.is-style-mc-gradient .wp-block-button__link{
  background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan)) !important;
  box-shadow: 0 4px 14px rgba(0,200,117,.25) !important;
  color: #fff !important;
}

/* 11) Info/warn/success callouts – voeg als Group extra class toe: notice notice--info|success|warn */
.notice{
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #eee;
}
.notice--info{    border-left: 4px solid var(--mc-cyan);  }
.notice--success{ border-left: 4px solid var(--mc-green); }
.notice--warn{    border-left: 4px solid #ffb300;       }

/* 12) Lead-paragraaf (eerste alinea extra opvallend) */
.entry-content p.lead,
.wp-block-post-content p.lead{
  font-size: 19px;
  line-height: 1.8;
  color: #111;
}

/* 13) Kleine CTA kaart (Group met class "mc-cta") */
.mc-cta{
  background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan));
  color: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.mc-cta a{ color:#0b1b1a; background:#fff; padding:10px 14px; border-radius:10px; font-weight:700; text-decoration:none; }

/* 14) Inhoudsopgave styling */
.single-post .table-of-contents {
  background: linear-gradient(135deg, rgba(0,200,117,0.05) 0%, rgba(0,255,240,0.05) 100%) !important;
  border: 1px solid rgba(0,200,117,0.2) !important;
  border-radius: 20px !important;
  padding: 20px 24px !important;
  margin: 20px 0 24px 0 !important;
  box-shadow: 0 8px 32px rgba(0,200,117,.08) !important;
  position: relative !important;
  overflow: hidden !important;
}

.single-post .table-of-contents:before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan)) !important;
}

.single-post .toc-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  cursor: pointer !important;
  user-select: none !important;
}

.single-post .toc-header:hover {
  opacity: 0.8 !important;
}

.single-post .toc-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 5px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
}

.single-post .toc-toggle:hover {
  background: rgba(0,200,117,0.1) !important;
}

.single-post .toggle-icon {
  font-size: 16px !important;
  color: var(--mc-green) !important;
  transition: transform 0.3s ease !important;
  display: inline-block !important;
}

.single-post .table-of-contents.collapsed .toggle-icon {
  transform: rotate(-90deg) !important;
}

.single-post .table-of-contents h3 {
  margin: 0 !important;
  color: var(--mc-dark) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.single-post .table-of-contents ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  max-height: 400px !important;
  overflow: hidden !important;
  transition: max-height 0.4s ease, opacity 0.3s ease !important;
  opacity: 1 !important;
}

.single-post .table-of-contents ul.collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
}

.single-post .table-of-contents.collapsed {
  padding-bottom: 20px !important;
}

.single-post .table-of-contents li {
  margin: 6px 0 !important;
  position: relative !important;
  padding: 0 !important;
  border-top: none !important;
}

.single-post .table-of-contents li:before {
  content: "📖" !important;
  margin-right: 8px !important;
  font-size: 14px !important;
  position: static !important;
  background: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  left: auto !important;
  top: auto !important;
}

.single-post .table-of-contents a {
  color: #2c3e50 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  text-underline-offset: 0 !important;
  text-decoration-thickness: 0 !important;
}

.single-post .table-of-contents a:hover {
  color: var(--mc-dark) !important;
  background: linear-gradient(90deg, rgba(0,200,117,.15), rgba(0,255,240,.15)) !important;
  transform: translateX(6px) !important;
  box-shadow: 0 2px 8px rgba(0,200,117,.2) !important;
}

/* Verschillende niveaus van koppen */
.single-post .table-of-contents .toc-level-3 {
  margin-left: 20px !important;
}

.single-post .table-of-contents .toc-level-4 {
  margin-left: 40px !important;
}

.single-post .table-of-contents .toc-level-5 {
  margin-left: 60px !important;
}

.single-post .table-of-contents .toc-level-6 {
  margin-left: 80px !important;
}

/* Smooth scroll voor anker links */
html {
  scroll-behavior: smooth;
}

/* 15) Extra visuele verbeteringen */

/* Mooiere paragrafen */
.single-post .entry-content p,
.single-post .wp-block-post-content p,
.single-post .post-content p {
  line-height: 1.75 !important;
  margin-bottom: 1.2em !important;
  color: #2c3e50 !important;
}

/* Lead paragraaf (eerste paragraaf) */
.single-post .entry-content > p:first-of-type,
.single-post .wp-block-post-content > p:first-of-type,
.single-post .post-content > p:first-of-type {
  font-size: 1.15em !important;
  font-weight: 500 !important;
  color: var(--mc-dark) !important;
  margin-bottom: 1.5em !important;
}

/* Quote blocks */
.single-post .wp-block-quote,
.single-post blockquote {
  border-left: 4px solid var(--mc-green) !important;
  background: linear-gradient(135deg, rgba(0,200,117,0.05), rgba(0,255,240,0.05)) !important;
  margin: 2em 0 !important;
  padding: 20px 24px !important;
  border-radius: 0 var(--mc-radius) var(--mc-radius) 0 !important;
  position: relative !important;
  font-style: italic !important;
}

.single-post .wp-block-quote:before,
.single-post blockquote:before {
  content: '"' !important;
  font-size: 4em !important;
  color: var(--mc-green) !important;
  position: absolute !important;
  top: -10px !important;
  left: 16px !important;
  opacity: 0.3 !important;
}

/* Highlight boxes */
.single-post .wp-block-group.has-background {
  border-radius: var(--mc-radius) !important;
  padding: 24px !important;
  margin: 2em 0 !important;
  box-shadow: var(--mc-shadow) !important;
  border: 1px solid rgba(0,200,117,0.1) !important;
}

/* Code blocks verbeteren */
.single-post .wp-block-code,
.single-post pre {
  background: var(--mc-dark) !important;
  color: var(--mc-cyan) !important;
  border-radius: var(--mc-radius) !important;
  padding: 20px !important;
  margin: 2em 0 !important;
  overflow-x: auto !important;
  box-shadow: var(--mc-shadow) !important;
  position: relative !important;
}

.single-post .wp-block-code:before,
.single-post pre:before {
  content: '</>' !important;
  position: absolute !important;
  top: 8px !important;
  right: 12px !important;
  font-size: 12px !important;
  color: var(--mc-green) !important;
  opacity: 0.7 !important;
}

/* Links verbeteren */
.single-post .entry-content a,
.single-post .wp-block-post-content a,
.single-post .post-content a {
  color: var(--mc-green) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

.single-post .entry-content a:hover,
.single-post .wp-block-post-content a:hover,
.single-post .post-content a:hover {
  border-bottom-color: var(--mc-green) !important;
  background: linear-gradient(90deg, rgba(0,200,117,0.1), rgba(0,255,240,0.1)) !important;
  padding: 2px 4px !important;
  border-radius: 4px !important;
}

/* Dividers/HR styling */
.single-post .wp-block-separator,
.single-post hr {
  border: none !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan)) !important;
  border-radius: 3px !important;
  margin: 3em auto !important;
  width: 60% !important;
  opacity: 0.8 !important;
}

/* Lists verbeteren */
.single-post .entry-content ul,
.single-post .wp-block-post-content ul,
.single-post .post-content ul {
  padding-left: 0 !important;
  list-style: none !important;
}

.single-post .entry-content ul li,
.single-post .wp-block-post-content ul li,
.single-post .post-content ul li {
  position: relative !important;
  padding-left: 30px !important;
  margin-bottom: 8px !important;
}

.single-post .entry-content ul li:before,
.single-post .wp-block-post-content ul li:before,
.single-post .post-content ul li:before {
  content: '✓' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: var(--mc-green) !important;
  font-weight: bold !important;
  font-size: 1.1em !important;
}

/* Ordered lists */
.single-post .entry-content ol,
.single-post .wp-block-post-content ol,
.single-post .post-content ol {
  counter-reset: custom-counter !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.single-post .entry-content ol li,
.single-post .wp-block-post-content ol li,
.single-post .post-content ol li {
  counter-increment: custom-counter !important;
  position: relative !important;
  padding-left: 40px !important;
  margin-bottom: 12px !important;
}

.single-post .entry-content ol li:before,
.single-post .wp-block-post-content ol li:before,
.single-post .post-content ol li:before {
  content: counter(custom-counter) !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan)) !important;
  color: white !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: bold !important;
}

/* Extra styling voor alle afbeeldingen in content - alleen in blog content */
.single-post .post-content img:not(.site-logo):not(.header-img):not(.footer-img),
.single-post article .post-content img:not(.site-logo):not(.header-img):not(.footer-img) {
  border-radius: 16px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.single-post .post-content img:not(.site-logo):not(.header-img):not(.footer-img):hover,
.single-post article .post-content img:not(.site-logo):not(.header-img):not(.footer-img):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.16) !important;
}

/* Specifiek voor de groene button zoals in je screenshot */
a[style*="background-color: rgb(0, 200, 117)"],
a[style*="background: rgb(0, 200, 117)"],
.green-button {
  background: linear-gradient(90deg, var(--mc-green), var(--mc-cyan)) !important;
  color: #fff !important;
  border-radius: 25px !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 16px rgba(0,200,117,.3) !important;
}

a[style*="background-color: rgb(0, 200, 117)"]:hover,
a[style*="background: rgb(0, 200, 117)"]:hover,
.green-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,200,117,.4) !important;
}

/* Extra button styles voor verschillende situaties */
.post-content a[href*="download"],
.post-content a[class*="button"],
.post-content a[style*="background"],
.entry-content a[href*="download"],
.entry-content a[class*="button"],
.entry-content a[style*="background"],
.wp-block-post-content a[href*="download"],
.wp-block-post-content a[class*="button"],
.wp-block-post-content a[style*="background"] {
  border-radius: 12px !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.post-content a[href*="download"]:hover,
.post-content a[class*="button"]:hover,
.post-content a[style*="background"]:hover,
.entry-content a[href*="download"]:hover,
.entry-content a[class*="button"]:hover,
.entry-content a[style*="background"]:hover,
.wp-block-post-content a[href*="download"]:hover,
.wp-block-post-content a[class*="button"]:hover,
.wp-block-post-content a[style*="background"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.15) !important;
}