/* =========================================================
FONIFIX — CLUSTERPAGE (WRAPPER + CONTENT)
✅ Centreert alle content (hero + partials)
✅ Extra top padding zodat content niet onder header valt
✅ Volledige hub-v1 content styling (ZONDER pricetable)
========================================================= */

/* Page wrapper (template gebruikt .fxWrap--clusterpage + .fxContent--clusterpage) */
.fxWrap--clusterpage{
  position:relative;
  width:100%;
  padding:96px 0 60px; /* ✅ ruimte onder header + onderaan */
  isolation:isolate;
}

/* achtergrond zoals in hub */
.fxWrap--clusterpage:before{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:#f8fafc;
  z-index:-1;
}

/* iPad/mobile: iets minder top padding */
@media(max-width:980px){
  .fxWrap--clusterpage{ padding:84px 0 52px; }
}
@media(max-width:600px){
  .fxWrap--clusterpage{ padding:78px 0 46px; }
}

/* Content container — centreren */
.fxContent--clusterpage{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 30px;
}
@media(max-width:980px){
  .fxContent--clusterpage{ padding:0 18px; }
}

/* =========================================================
   HUB V1 — CONTENT STYLES (werkt ook zonder .fxhubv1 wrapper)
   Scope: alleen binnen clusterpage wrapper
========================================================= */

.fxWrap--clusterpage{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  color:#0f2940;
}

/* clean links (alleen binnen clusterpage) */
.fxWrap--clusterpage a,
.fxWrap--clusterpage a:visited,
.fxWrap--clusterpage a:hover,
.fxWrap--clusterpage a:focus,
.fxWrap--clusterpage a:active{
  color:#0f2940 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  border-bottom:0 !important;
  background:transparent !important;
}
.fxWrap--clusterpage a:hover{ opacity:.92; }
.fxWrap--clusterpage a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(15,41,64,.18);
  border-radius:12px;
}

/* Hero spacing (niet dubbel compenseren: wrapper regelt header-offset) */
.fxWrap--clusterpage .hero{ padding:42px 0 18px; }

/* =========================================================
   “Snel navigeren” label + icon pills
========================================================= */
.fxWrap--clusterpage .jumpwrap{ margin-top:14px !important; }

.fxWrap--clusterpage .jumpLabel{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  font-weight:1000 !important;
  font-size:13px !important;
  color:rgba(15,41,64,.78) !important;
  margin:0 0 10px !important;
}
.fxWrap--clusterpage .jumpLabel:before{
  content:"⇣";
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(232,242,249,.75);
  border:1px solid rgba(15,41,64,.10);
  color:#0f2940;
  font-weight:1000;
}

.fxWrap--clusterpage .jumps{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px;
}

.fxWrap--clusterpage .jumps a.pill{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:10px 14px !important;
  border-radius:999px !important;
  background:#e8f2f9 !important;
  border:1px solid rgba(15,41,64,.12) !important;
  font-weight:1000 !important;
  font-size:13px !important;
  color:#0f2940 !important;
  cursor:pointer !important;
  box-shadow:0 10px 22px rgba(15,23,42,.06) !important;
}
.fxWrap--clusterpage .jumps a.pill:before{ content:"↗"; margin-right:8px; opacity:.9; }
.fxWrap--clusterpage .jumps a.pill:hover{ transform:translateY(-1px); }
.fxWrap--clusterpage .jumps a.pill:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(15,41,64,.18), 0 10px 22px rgba(15,23,42,.06) !important;
}

/* Title */
.fxWrap--clusterpage .heroTitle{
  margin:14px 0 10px;
  font-size:28px;
  line-height:1.18;
  letter-spacing:-.02em;
  font-weight:1000;
  color:#0f2940;
}
.fxWrap--clusterpage .lead{
  margin:0;
  max-width:860px;
  font-size:16px;
  line-height:1.65;
  color:rgba(15,41,64,.78);
}
@media(max-width:980px){
  .fxWrap--clusterpage .heroTitle{ font-size:24px; }
}

/* =========================================================
   SECTIONS — meer witruimte tussen topics (verbeterd)
========================================================= */
.fxWrap--clusterpage .section{
  padding:34px 0; /* was 18px → meer lucht */
  border-top:1px dashed rgba(15,41,64,.12);
}
.fxWrap--clusterpage .section:first-of-type{ border-top:none; }

@media(max-width:780px){
  .fxWrap--clusterpage .section{ padding:28px 0; }
}

.fxWrap--clusterpage h2{
  margin:0 0 14px; /* was 10px */
  font-size:18px;
  font-weight:1000;
  letter-spacing:-.01em;
}

/* Paragrafen: betere flow */
.fxWrap--clusterpage p{
  margin:0;
  color:rgba(15,41,64,.78);
  line-height:1.6;
}
.fxWrap--clusterpage .section p + p{ margin-top:12px; }

/* Subkoppen: consistent en met extra ruimte */
.fxWrap--clusterpage .section h3{
  margin:20px 0 10px !important;
  font-size:15px;
  font-weight:1000;
  letter-spacing:-.01em;
  color:#0f2940;
}

/* Soft note */
.fxWrap--clusterpage .note{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(15,41,64,.10);
  background:rgba(232,242,249,.55);
  color:rgba(15,41,64,.78);
  font-size:14.75px;
  line-height:1.6;
}
.fxWrap--clusterpage .note strong{ color:#0f2940; font-weight:900; }

/* ✅ No extra top line directly under intro */
.fxWrap--clusterpage .section.fx-noTopLine{ border-top:0 !important; padding-top:16px; }

/* =========================================================
   DEFAULT fx-faq-list BASE (neutraal)
   -> we restylen per sectie hieronder
========================================================= */
.fxWrap--clusterpage .fx-faq-list{
  max-width:820px;
  display:block;
  margin:14px 0 0; /* ✅ beetje lucht standaard */
  padding:0;
}
.fxWrap--clusterpage .fx-faq-item{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
}
.fxWrap--clusterpage .fx-line{
  margin:0 !important;
  padding:0 !important;
  color:rgba(15,41,64,.78) !important;
  font-weight:400 !important;
  line-height:1.6 !important;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:760px;
}
.fxWrap--clusterpage .fx-line strong{ font-weight:900; color:#0f2940; }

/* solution link default */
.fxWrap--clusterpage a.fx-solution{
  color:#0f2940 !important;
  text-decoration:none !important;
  font-weight:900;
  white-space:nowrap;
}
.fxWrap--clusterpage a.fx-solution:hover{ opacity:.92; }
.fxWrap--clusterpage a.fx-solution::after{ content:" →"; }

/* =========================================================
   PROBLEMEN — dashed ultra scanbaar (blijft zoals jij had)
========================================================= */
.fxWrap--clusterpage .section#problemen .fx-faq-list{ 
  max-width:820px;
  margin-top:12px;
}

.fxWrap--clusterpage .section#problemen .fx-faq-item{
  border-top:1px dashed rgba(15,41,64,.18) !important;
}
.fxWrap--clusterpage .section#problemen .fx-faq-item:first-child{ border-top:0 !important; }

.fxWrap--clusterpage .section#problemen .fx-line{
  padding:18px 0 !important; /* iets ruimer */
}

/* =========================================================
   KWALITEIT — cards grid (2 kolommen)
   - clean, rustig, geen dashed separators
========================================================= */
.fxWrap--clusterpage .section#kwaliteit{
  padding:38px 0; /* extra ademruimte want dit is “na tabel” */
}
@media(max-width:780px){
  .fxWrap--clusterpage .section#kwaliteit{ padding:30px 0; }
}

.fxWrap--clusterpage .section#kwaliteit .fx-faq-list{
  max-width:980px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:14px;
}
@media (max-width:780px){
  .fxWrap--clusterpage .section#kwaliteit .fx-faq-list{
    grid-template-columns:1fr;
  }
}
.fxWrap--clusterpage .section#kwaliteit .fx-faq-item{
  border:1px solid rgba(15,41,64,.10) !important;
  border-radius:18px !important;
  background:rgba(232,242,249,.55) !important;
  box-shadow:0 10px 22px rgba(15,23,42,.05) !important;
  padding:12px 12px !important;
}
.fxWrap--clusterpage .section#kwaliteit .fx-line{
  padding:0 !important;
  font-size:14.75px;
  line-height:1.55 !important;
  max-width:none;
}
.fxWrap--clusterpage .section#kwaliteit .fx-line strong{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:1000;
}
.fxWrap--clusterpage .section#kwaliteit .fx-line strong::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(15,41,64,.22);
  box-shadow:0 0 0 4px rgba(15,41,64,.06);
  flex:0 0 auto;
}
/* in kwaliteit: geen “actie-arrow” op eventuele links */
.fxWrap--clusterpage .section#kwaliteit a.fx-solution::after{ content:""; }

/* =========================================================
   RISICO’S — inline “chips” met bolletje tussen
   - makkelijk leesbaar, voelt anders dan andere blokken
========================================================= */
.fxWrap--clusterpage .section#risicos{
  padding:34px 0;
}
.fxWrap--clusterpage .section#risicos .fx-faq-list{
  max-width:980px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.fxWrap--clusterpage .section#risicos .fx-faq-item{
  padding:0 !important;
}
.fxWrap--clusterpage .section#risicos .fx-line{
  max-width:none;
  padding:9px 12px !important;
  border-radius:999px;
  border:1px solid rgba(15,41,64,.10);
  background:rgba(15,41,64,.04);
  font-size:14px;
  line-height:1.35 !important;
  white-space:nowrap;
}
@media(max-width:780px){
  .fxWrap--clusterpage .section#risicos .fx-line{
    white-space:normal;
  }
}
/* De “titel” in risicos: geen bullet gevoel, gewoon sterk */
.fxWrap--clusterpage .section#risicos .fx-line strong{
  font-weight:1000;
}
/* Bolletje scheiding na strong (zoals “Waterdichting • ...”) */
.fxWrap--clusterpage .section#risicos .fx-line strong::after{
  content:" •";
  font-weight:900;
  opacity:.55;
}

/* =========================================================
   BESCHIKBAARHEID — tekst-only (geen bullets meer nodig)
   (je HTML is nu een p, dus we houden het clean)
========================================================= */
.fxWrap--clusterpage .section#beschikbaarheid{
  padding:34px 0;
}
.fxWrap--clusterpage .section#beschikbaarheid p{
  margin-top:2px;
  max-width:900px;
}

/* =========================================================
   FAQ — flat (integrated)
========================================================= */
.fxWrap--clusterpage .faq{ margin-top:14px; }

.fxWrap--clusterpage .faq details{
  border:0;
  border-bottom:1px solid rgba(15,41,64,.10);
  background:transparent !important;
  padding:0;
}

.fxWrap--clusterpage .faq summary{
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 0; /* iets ruimer */
  cursor:pointer;
  font-weight:900;
  color:#0f2940;
  -webkit-tap-highlight-color:transparent;
  min-width:0;
}
.fxWrap--clusterpage .faq summary::-webkit-details-marker{ display:none; }
.fxWrap--clusterpage .faq summary::marker{ content:""; }

.fxWrap--clusterpage .faq summary .q{
  min-width:0;
  flex:1 1 auto;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.25;
}

.fxWrap--clusterpage .faq summary::after{
  content:"+";
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:999px;
  background:rgba(15,41,64,.06);
  border:1px solid rgba(15,41,64,.10);
  display:grid;
  place-items:center;
  font-weight:1000;
  color:#0f2940;
}
.fxWrap--clusterpage .faq details[open] summary::after{ content:"−"; }

.fxWrap--clusterpage .faq .answer{
  padding:0 0 16px;
  color:rgba(15,41,64,.78);
  line-height:1.55;
  font-size:15px;
}

/* Bottom */
.fxWrap--clusterpage .endlinks{
  margin-top:22px;
  padding-top:0;
  border-top:0 !important;
}
.fxWrap--clusterpage .endlinks h3{
  margin:0 0 12px;
  font-size:16px;
  font-weight:1000;
  letter-spacing:-.01em;
  color:#0f2940;
}
.fxWrap--clusterpage .linkrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.fxWrap--clusterpage .textlink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(15,41,64,.10);
  background:rgba(15,41,64,.04);
  font-weight:900;
  font-size:13px;
  color:#0f2940;
}
.fxWrap--clusterpage .textlink::after{ content:"→"; }
.fxWrap--clusterpage .textlink:hover{ opacity:.92; }

.fxWrap--clusterpage .ctahelp{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(15,41,64,.10);
  background:rgba(232,242,249,.55);
  color:rgba(15,41,64,.78);
  font-size:14.75px;
  line-height:1.6;
}
.fxWrap--clusterpage .ctahelp strong{ color:#0f2940; font-weight:900; }
.fxWrap--clusterpage .ctahelp a{
  font-weight:900;
  color:#0f2940 !important;
  text-decoration:none !important;
}

/* Route block */
.fxWrap--clusterpage .route{
  display:grid;
  gap:12px;
  max-width:900px;
  margin-top:6px;
}
.fxWrap--clusterpage .route .mini{
  color:rgba(15,41,64,.72);
  line-height:1.6;
}