/* BB POH GGZ – opmaak van de inhoud en de secties (geladen op de site én in de editor). */
:root{
  --yellow:#ffc82f;
  --grey-box:#838383;
  --page:#fafafa;
  --muted:#87837e;
  --f-head:'Poppins',sans-serif;
  --f-body:'Nunito Sans','Avenir Next','Avenir',sans-serif;
  --f-btn:'Assistant',sans-serif;
}

/* Gewone inhoud: leesbare kolom; secties (volledige breedte) lopen door. */
.entry-content > :not(.alignfull):not(.alignwide),
.is-root-container > :not(.alignfull):not(.alignwide){max-width:780px;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.entry-content > :not(.alignfull){padding-left:24px;padding-right:24px}
.entry-content > .alignwide{max-width:980px;margin-left:auto;margin-right:auto}
.entry-content > .alignfull{margin-left:0;margin-right:0;max-width:none}
.entry-content strong,.is-root-container strong{font-weight:800}
.entry-content h2,.entry-content h3,.is-root-container h2,.is-root-container h3{font-family:var(--f-head);font-weight:600;line-height:1.25}
.entry-content p,.is-root-container p{line-height:1.45}
.wp-block-group.alignfull{margin-top:0;margin-bottom:0}

/* Knoppen in de huisstijl */
.wp-block-button .wp-block-button__link,
.bbp-btn .wp-block-button__link{background:#000;color:var(--yellow);font-family:var(--f-body);font-weight:300;font-size:14px;letter-spacing:.05em;text-transform:uppercase;border-radius:8px;padding:11px 30px;text-decoration:none;line-height:1.2}
.wp-block-button .wp-block-button__link:hover{background:#2b2b2b;color:var(--yellow)}

/* Titels met geel icoon */
.bbp-title{font-family:var(--f-head)!important;font-weight:900!important;font-size:50px;line-height:1.4;margin:0;text-transform:uppercase;letter-spacing:-.01em;text-align:center;color:#000}
.bbp-title::after{content:"";display:inline-block;vertical-align:middle;width:61px;height:59px;margin-left:14px;margin-top:-8px;background:var(--bbp-icon) center/contain no-repeat}

/* ---------- 1. Introductie ---------- */
.bbp-hero{position:relative;min-height:931px;padding:124px 24px 60px;background:#fafafa var(--bbp-hero) center top/cover no-repeat;overflow:hidden}
.bbp-hero .bbp-brand{max-width:980px;margin:0 auto 181px!important;padding-left:7px}
.bbp-hero .bbp-brand img{width:600px;max-width:100%;display:block}
.bbp-hero .bbp-sub{font-family:var(--f-head);font-weight:600;font-size:21px;text-align:center;margin:0 auto 30px}
.bbp-hero .bbp-lead{max-width:784px;margin:0 auto;text-align:center;font-size:19px;line-height:26.6px}

/* ---------- 2. Grijs blok ---------- */
.bbp-pillars-section{padding:59px 24px 87px}
.bbp-greybox{max-width:906px;margin:0 auto;background:var(--grey-box);border-radius:20px;color:#fff;text-align:center;padding:40px 61px 38px}
.bbp-greybox p{margin:0;font-weight:800;line-height:26.6px;font-size:19px}
.bbp-pillars{list-style:none;margin:45px 0 0!important;padding:0!important;display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.bbp-pillars li{display:flex;align-items:center;gap:6px;font-family:Helvetica,Arial,sans-serif;font-weight:400;font-size:19px;margin:0}
.bbp-pillars li::before{content:"";flex:0 0 24px;width:24px;height:24px;background:var(--bbp-icon) center/contain no-repeat}

/* ---------- 3. Foto met tekst ---------- */
.bbp-about{padding:86px 24px 68px}
.bbp-about .bbp-about-cols{max-width:980px;margin:0 auto;gap:41px}
.bbp-about .bbp-photo{margin:0 0 0 19px}
.bbp-about .bbp-photo img{width:463px;max-width:100%;display:block}
.bbp-about .bbp-about-text{text-align:center;max-width:380px}
.bbp-about .bbp-about-text p{margin:0;line-height:26.6px;font-size:19px}
.bbp-about .bbp-buttons{justify-content:center;margin-top:49px}
.bbp-about .wp-block-button__link{min-width:201px}

/* ---------- 4. Titel + tekst (Ons aanbod) ---------- */
.bbp-offer{position:relative;padding:84px 24px 95px;overflow:hidden;text-align:center}
.bbp-offer::before{content:"";position:absolute;left:calc(50% - 422px);top:61px;width:610px;height:609px;background:var(--bbp-ring) center/contain no-repeat;opacity:.22;pointer-events:none}
.bbp-offer > *,.bbp-offer .wp-block-group__inner-container > *{position:relative}
.bbp-offer .bbp-title::after{display:block;margin:2px auto 25px;width:60px;height:59px}
.bbp-offer p{max-width:760px;margin:0 auto 1em;line-height:26.6px;font-size:19px}

/* ---------- Mobiel / tablet ---------- */
@media (max-width:1020px){
  .bbp-hero{min-height:0}
  .bbp-hero .bbp-brand{margin-bottom:110px!important;padding-left:0}
  .bbp-hero .bbp-brand img{margin:0 auto;width:min(600px,90%)}
  .bbp-about .bbp-photo{margin:0 auto}
  .bbp-about .bbp-photo img{margin:0 auto}
  .bbp-about .bbp-about-text{max-width:520px;margin:0 auto}
  .bbp-offer::before{left:50%;transform:translateX(-50%);width:min(610px,110%)}
}
@media (max-width:760px){
  .bbp-title{font-size:34px}
  .bbp-title::after{width:42px;height:41px;margin-left:10px}
  .bbp-hero{padding-top:60px}
  .bbp-hero .bbp-brand{margin-bottom:60px!important}
  .bbp-hero .bbp-lead,.bbp-greybox p,.bbp-about .bbp-about-text p,.bbp-offer p,.bbp-pillars li{font-size:16px;line-height:1.5}
  .bbp-greybox{padding:32px 22px}
  .bbp-pillars{flex-direction:column;align-items:center;gap:12px;margin-top:28px!important}
}