/* Force equal aspect ratio for Spectra Post Carousel */
.uagb-post-grid img,
.uagb-post__image img,
.wp-block-uagb-post-carousel img {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  display: block;
}
/* Remove the excerpt dots ("...") in Spectra Post Carousel */
.uagb-post__excerpt,
.uagb-post__excerpt:after {
  display: none !important;
  content: "" !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Centered short gold underline under the heading text */
.pp360-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.pp360-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 2px;
  background: #bfa35a;
  transform: translateX(-50%);
}

/* Adjust space between carousel and dots (mobile + desktop) */
.uagb-post-carousel .slick-dots,
.uagb-post-carousel .swiper-pagination {
  bottom: 4px !important;   /* dichterbij de carousel */
  margin-top: -10px !important; /* minder ruimte erboven */
}

.uagb-post-carousel .slick-dots li,
.uagb-post-carousel .swiper-pagination-bullet {
  margin: 0 3px !important; /* dots dichter bij elkaar */
}
/* ================================
   Puntjes direct onder de afbeelding
   Werkt voor Blocksy Posts (ct-posts) + Spectra (uagb)
   ================================ */

/* 1) Haal de extra onder-padding weg die Swiper toevoegt */
.ct-posts .swiper,
.uagb-post-carousel .swiper {
  padding-bottom: 0 !important;
}

/* 2) Positioneer de pagination (puntjes) in de normale flow, net onder de slide */
.ct-posts .swiper-pagination,
.uagb-post-carousel .swiper-pagination,
.uagb-post-carousel .slick-dots {
  position: relative !important;  /* niet absolute onderin: gewoon eronder */
  inset: auto !important;         /* reset top/right/bottom/left */
  bottom: 0 !important;
  margin-top: 6px !important;     /* klein beetje ruimte boven de puntjes */
  margin-bottom: 0 !important;    /* geen extra witruimte eronder */
  text-align: center !important;
}

/* 3) Maak de puntjes compacter */
.ct-posts .swiper-pagination-bullet,
.uagb-post-carousel .swiper-pagination-bullet,
.uagb-post-carousel .slick-dots li {
  margin: 0 4px !important;
}

/* 4) (Optioneel) actieve puntje goud */
.ct-posts .swiper-pagination-bullet-active,
.uagb-post-carousel .swiper-pagination-bullet-active,
.uagb-post-carousel .slick-dots li.slick-active button:before {
  background: #bfa35a !important;
  opacity: 1 !important;
}

/* 5) Voor Slick: reset pseudo-element zodat het mooi rond/compact blijft */
.uagb-post-carousel .slick-dots li button:before {
  font-size: 8px !important;      /* klein en strak */
  opacity: .6 !important;
}
/* Make entire B Slider slide clickable using the existing title link */
.pp360-slide-link .swiper-slide { position: relative; }
.pp360-slide-link .entry-title a,
.pp360-slide-link a.post-title,
.pp360-slide-link a.post-link {
  position: absolute;
  inset: 0;                 /* fill the whole slide */
  z-index: 5;
  text-indent: -9999px;     /* hide the text but keep it for accessibility */
  overflow: hidden;
}
.pp360-slide-link .swiper-slide { cursor: pointer; }
/* If a Read More/button exists, hide it */
.pp360-slide-link .read-more,
.pp360-slide-link a.button { display: none !important; }
/* Make the whole B Slider slide clickable via the Read More anchor */
.pp360-slide-link .swiper-slide,
.pp360-slide-link .slick-slide { position: relative; }

/* Stretch the Read More/button link to cover the entire slide */
.pp360-slide-link .read-more a,
.pp360-slide-link a.read-more,
.pp360-slide-link a.button,
.pp360-slide-link .entry-button a {
  position: absolute !important;
  inset: 0 !important;             /* full cover */
  z-index: 5 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px;            /* hide text, keep accessible */
  overflow: hidden;
}

/* If the title is also linked, keep it visible but beneath our overlay */
.pp360-slide-link .entry-title a,
.pp360-slide-link .post-title a {
  position: relative;
  z-index: 1;
}
/* Vogue-style mobile category bar */
@media (max-width: 1024px) {
  .pp-mobile-tabs {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    padding: 8px 0;
  }

  .pp-mobile-tabs a {
    display: inline-block;
    margin: 0 14px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #111;
    text-decoration: none;
    position: relative;
  }

  /* Hover effect */
  .pp-mobile-tabs a:hover {
    color: #000;
  }

  /* Active underline (voeg class="active" toe in HTML of via WP) */
 .pp-mobile-tabs a.active::after,
.pp-mobile-tabs a.current-cat::after,
.pp-mobile-tabs a.current-menu-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: currentColor;
}

  /* Sticky bovenaan */
  .pp-mobile-tabs {
    position: sticky;
    top: 0;
    z-index: 999;
  }
}
/* Tap/Click effect voor mobiel */
.pp-mobile-tabs a:active,
.pp-mobile-tabs a:focus {
  color: #000; /* maakt tekst zwart bij tik */
}

.pp-mobile-tabs a:active::after,
.pp-mobile-tabs a:focus::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: currentColor;
}
/* Hide ALL related-posts variants on mobile */
@media (max-width: 768px) {
  .single-post .related-posts,
  .single-post .ct-related-posts,
  .single-post .ct-related-posts-block,
  .single-post .entry-related,
  .single-post .wp-block-related-posts,
  .single-post .wp-block-jetpack-related-posts,
  .single-post .jetpack-related-posts,
  .single-post #jp-relatedposts,
  .single-post [class*="related-post"],
  .single-post [class*="relatedposts"],
  .single-post .ct-post-related,
  .single-post .ct-related {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* Verberg ALLE mogelijke related posts blokken (desktop + mobiel) */
.single-post .related-posts,
.single-post .ct-related-posts,
.single-post .ct-related-posts-block,
.single-post .entry-related,
.single-post .wp-block-related-posts,
.single-post .wp-block-jetpack-related-posts,
.single-post .jetpack-related-posts,
.single-post #jp-relatedposts,
.single-post [class*="related-post"],
.single-post [class*="relatedposts"],
.single-post .ct-post-related,
.single-post .ct-related {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Highlight active menu item */
.current-menu-item > a,
.current_page_item > a,
.current-menu-ancestor > a {
  border-bottom: 2px solid black; /* underline kleur aanpassen */
  color: black !important; /* optioneel, tekstkleur aanpassen */
  padding-bottom: 3px;
}
.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #000; /* zwart, past bij Posh Paper look */
  color: #fff !important;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.footer-contact-btn:hover {
  background-color: #333;
}

.footer-contact-btn i {
  font-size: 16px;
}
/* Zorg dat normale afbeeldingen altijd zichtbaar zijn */
.single-post .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1 !important;
  filter: none !important;
}
.single-post .wp-block-image {
  overflow: visible !important;
}
/* Centered short gold underline under the heading text */
.pp360-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.pp360-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 2px;
  background: #bfa35a;
  transform: translateX(-50%);
}

/* Adjust space between carousel and dots (mobile + desktop) */
.uagb-post-carousel .slick-dots,
.uagb-post-carousel .swiper-pagination {
  bottom: 4px !important;   /* dichterbij de carousel */
  margin-top: -10px !important; /* minder ruimte erboven */
}

.uagb-post-carousel .slick-dots li,
.uagb-post-carousel .swiper-pagination-bullet {
  margin: 0 3px !important; /* dots dichter bij elkaar */
}
/* ================================
   Puntjes direct onder de afbeelding
   Werkt voor Blocksy Posts (ct-posts) + Spectra (uagb)
   ================================ */

/* 1) Haal de extra onder-padding weg die Swiper toevoegt */
.ct-posts .swiper,
.uagb-post-carousel .swiper {
  padding-bottom: 0 !important;
}

/* 2) Positioneer de pagination (puntjes) in de normale flow, net onder de slide */
.ct-posts .swiper-pagination,
.uagb-post-carousel .swiper-pagination,
.uagb-post-carousel .slick-dots {
  position: relative !important;  /* niet absolute onderin: gewoon eronder */
  inset: auto !important;         /* reset top/right/bottom/left */
  bottom: 0 !important;
  margin-top: 6px !important;     /* klein beetje ruimte boven de puntjes */
  margin-bottom: 0 !important;    /* geen extra witruimte eronder */
  text-align: center !important;
}

/* 3) Maak de puntjes compacter */
.ct-posts .swiper-pagination-bullet,
.uagb-post-carousel .swiper-pagination-bullet,
.uagb-post-carousel .slick-dots li {
  margin: 0 4px !important;
}

/* 4) (Optioneel) actieve puntje goud */
.ct-posts .swiper-pagination-bullet-active,
.uagb-post-carousel .swiper-pagination-bullet-active,
.uagb-post-carousel .slick-dots li.slick-active button:before {
  background: #bfa35a !important;
  opacity: 1 !important;
}

/* 5) Voor Slick: reset pseudo-element zodat het mooi rond/compact blijft */
.uagb-post-carousel .slick-dots li button:before {
  font-size: 8px !important;      /* klein en strak */
  opacity: .6 !important;
}
/* Make entire B Slider slide clickable using the existing title link */
.pp360-slide-link .swiper-slide { position: relative; }
.pp360-slide-link .entry-title a,
.pp360-slide-link a.post-title,
.pp360-slide-link a.post-link {
  position: absolute;
  inset: 0;                 /* fill the whole slide */
  z-index: 5;
  text-indent: -9999px;     /* hide the text but keep it for accessibility */
  overflow: hidden;
}
.pp360-slide-link .swiper-slide { cursor: pointer; }
/* If a Read More/button exists, hide it */
.pp360-slide-link .read-more,
.pp360-slide-link a.button { display: none !important; }
/* Make the whole B Slider slide clickable via the Read More anchor */
.pp360-slide-link .swiper-slide,
.pp360-slide-link .slick-slide { position: relative; }

/* Stretch the Read More/button link to cover the entire slide */
.pp360-slide-link .read-more a,
.pp360-slide-link a.read-more,
.pp360-slide-link a.button,
.pp360-slide-link .entry-button a {
  position: absolute !important;
  inset: 0 !important;             /* full cover */
  z-index: 5 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px;            /* hide text, keep accessible */
  overflow: hidden;
}

/* If the title is also linked, keep it visible but beneath our overlay */
.pp360-slide-link .entry-title a,
.pp360-slide-link .post-title a {
  position: relative;
  z-index: 1;
}
/* Vogue-style mobile category bar */
@media (max-width: 1024px) {
  .pp-mobile-tabs {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    padding: 8px 0;
  }

  .pp-mobile-tabs a {
    display: inline-block;
    margin: 0 14px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #111;
    text-decoration: none;
    position: relative;
  }

  /* Hover effect */
  .pp-mobile-tabs a:hover {
    color: #000;
  }

  /* Active underline (voeg class="active" toe in HTML of via WP) */
 .pp-mobile-tabs a.active::after,
.pp-mobile-tabs a.current-cat::after,
.pp-mobile-tabs a.current-menu-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: currentColor;
}

  /* Sticky bovenaan */
  .pp-mobile-tabs {
    position: sticky;
    top: 0;
    z-index: 999;
  }
}
/* Tap/Click effect voor mobiel */
.pp-mobile-tabs a:active,
.pp-mobile-tabs a:focus {
  color: #000; /* maakt tekst zwart bij tik */
}

.pp-mobile-tabs a:active::after,
.pp-mobile-tabs a:focus::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: currentColor;
}
/* Hide ALL related-posts variants on mobile */
@media (max-width: 768px) {
  .single-post .related-posts,
  .single-post .ct-related-posts,
  .single-post .ct-related-posts-block,
  .single-post .entry-related,
  .single-post .wp-block-related-posts,
  .single-post .wp-block-jetpack-related-posts,
  .single-post .jetpack-related-posts,
  .single-post #jp-relatedposts,
  .single-post [class*="related-post"],
  .single-post [class*="relatedposts"],
  .single-post .ct-post-related,
  .single-post .ct-related {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* Verberg ALLE mogelijke related posts blokken (desktop + mobiel) */
.single-post .related-posts,
.single-post .ct-related-posts,
.single-post .ct-related-posts-block,
.single-post .entry-related,
.single-post .wp-block-related-posts,
.single-post .wp-block-jetpack-related-posts,
.single-post .jetpack-related-posts,
.single-post #jp-relatedposts,
.single-post [class*="related-post"],
.single-post [class*="relatedposts"],
.single-post .ct-post-related,
.single-post .ct-related {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Highlight active menu item */
.current-menu-item > a,
.current_page_item > a,
.current-menu-ancestor > a {
  border-bottom: 2px solid black; /* underline kleur aanpassen */
  color: black !important; /* optioneel, tekstkleur aanpassen */
  padding-bottom: 3px;
}
.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #000; /* zwart, past bij Posh Paper look */
  color: #fff !important;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.footer-contact-btn:hover {
  background-color: #333;
}

.footer-contact-btn i {
  font-size: 16px;
}
/* Zorg dat normale afbeeldingen altijd zichtbaar zijn */
.single-post .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1 !important;
  filter: none !important;
}