/* =========================================================
   50 – Page / template-specific rules (BODY CLASS VARIANT)
   No :has(). Everything explicit & predictable.
   ========================================================= */


/* ---------------------------------------------------------
   NEWS (archive / blog overview)
   body class: fb-page-news
   --------------------------------------------------------- */
body.fb-page-news{
  background-color: var(--fb-section-bg) !important;
}

body.fb-page-news .wp-site-blocks,
body.fb-page-news main,
body.fb-page-news .wp-block-post-content,
body.fb-page-news .entry-content{
  background: transparent !important;
}


/* ---------------------------------------------------------
   HERO pages (kill Gutenberg gaps)
   body class: fb-page-hero
   --------------------------------------------------------- */
body.fb-page-hero .wp-site-blocks{
  --wp--style--block-gap: 0px;
}

body.fb-page-hero .wp-site-blocks > *{
  margin-block-start: 0;
}

body.fb-page-hero .hero-cover{
  margin-bottom: 0;
  padding-bottom: 0;
}

body.fb-page-hero .wp-block-html,
body.fb-page-hero .wp-block-custom-html{
  margin: 0;
  padding: 0;
}


/* ---------------------------------------------------------
   SINGLE POST (boxed content + mint background)
   body class: fb-page-single
   --------------------------------------------------------- */
body.fb-page-single{
  background-color: var(--fb-section-bg);
}

body.fb-page-single main,
body.fb-page-single .wp-site-blocks{
  background: transparent;
}

body.fb-page-single .entry-content{
  max-width: var(--fb-content-w);
  margin: 0 auto;
  padding: 56px clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}


/* Lokale FIXbrigades  */
/* Page background + transparante wrappers */
body.page-id-574{
  background-color: var(--fb-section-bg);
}


/* ---------------------------------------------------------
   ONTWIKKELPAD (body class: fb-page-ontwikkelpad)
   --------------------------------------------------------- */
body.fb-page-ontwikkelpad{
  background-color: var(--fb-section-bg);
}

body.fb-page-ontwikkelpad main,
body.fb-page-ontwikkelpad .wp-site-blocks{
  background: transparent;
}

body.fb-page-ontwikkelpad .entry-content{
  max-width: var(--fb-content-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px) 56px;
  box-sizing: border-box;
}

/* Cover full width (without touching header) */
body.fb-page-ontwikkelpad .wp-block-cover,
body.fb-page-ontwikkelpad .hero-cover{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* ---------------------------------------------------------
   OVER ONS – volledige FB achtergrond
   page-id-34
   --------------------------------------------------------- */
body.page-id-34{
  background-color: var(--fb-section-bg);
}

body.page-id-34 .wp-site-blocks,
body.page-id-34 main,
body.page-id-34 .wp-block-post-content,
body.page-id-34 .entry-content{
  background: transparent !important;
}


/* =========================================================
   NAVIGATIE – Submenu "Over Ons"
   compact, rechts uitgelijnd, onder elkaar
   ========================================================= */
.wp-block-navigation .wp-block-navigation__submenu-container{
  background-color: var(--fb-section-bg) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);

  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  width: auto !important;
  min-width: 0 !important;
  padding: 4px 0;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item{
  width: auto !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  display: flex !important;
  justify-content: flex-end !important;
  text-align: right !important;

  padding: 6px 14px !important;
  font-size: 0.9rem !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  background-color: rgba(128,224,81,0.18) !important;
}

/* ===== Onze mensen - Swiper slider (Buitenkunst-style) ===== */

.fb-people-swiper{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 22px 0 34px;
}

/* maak ‘m lekker breed binnen de page */
.fb-people-swiper{
  max-width: 1100px;               /* pas aan als je nog breder wil */
  padding-left: clamp(12px, 3vw, 28px);
  padding-right: clamp(12px, 3vw, 28px);
}

.fb-people-title{
  text-align: center;
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Swiper spacing */
.fb-people-swiper .swiper{
  padding: 10px 0 26px;
}

/* Kaarten: groter, strakker */
.fb-people-card{
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  height: 340px;                   /* dit maakt ‘m meteen “volwassener” */
  background: #111;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

/* Link vult kaart */
.fb-people-link{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Afbeelding als cover */
.fb-people-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* donker verloop onder voor leesbare naam */
.fb-people-link::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 60%);
}

/* Naam overlay */
.fb-people-name{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
}

/* active slide subtiel groter (Buitenkunst vibe) */
.fb-people-swiper .swiper-slide{
  transition: transform .25s ease, filter .25s ease;
  filter: saturate(1.02);
}
.fb-people-swiper .swiper-slide-active{
  transform: scale(1.03);
  filter: saturate(1.08) contrast(1.03);
}

/* Navigatieknoppen */
.fb-people-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.38);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  z-index: 6;
  backdrop-filter: blur(6px);
}

.fb-people-prev{ left: 6px; }
.fb-people-next{ right: 6px; }

.fb-people-nav:hover{
  background: rgba(0,0,0,.58);
}

/* Pagination dots */
.fb-people-pagination{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.fb-people-swiper .swiper-pagination-bullet{
  opacity: .35;
}
.fb-people-swiper .swiper-pagination-bullet-active{
  opacity: .95;
}

/* Responsive */
@media (max-width: 900px){
  .fb-people-card{ height: 300px; }
}
@media (max-width: 640px){
  .fb-people-card{ height: 260px; }
}

.wp-block-post-content .fb-video-wrap {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
}

.wp-block-post-content .fb-video-wrap video {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   Info voor Bewoners
   page-id-745
   --------------------------------------------------------- */
body.page-id-745{
  background-color: var(--fb-section-bg);
}


/* ---------------------------------------------------------
   Info voor Gemeenten
   page-id-735
   --------------------------------------------------------- */
body.page-id-735{
  background-color: var(--fb-section-bg);
}