/* =========================================================
FONIFIX — HUB CLUSTERPAGE FIX
Doel:
- Witte randen links/rechts weg (Astra container full width)
- Content opnieuw netjes gecentreerd (max-width + padding)
- “Groene balk” / top spacing weg
BELANGRIJK: haal alle eerdere FULL WIDTH / display:none overrides weg
========================================================= */

/* ---------------------------------------------
0) NOOIT dit laten staan (maakt pagina “blanco”)
---------------------------------------------- */
/* VERWIJDER/COMMENT dit als het nog ergens staat:
.fxWrap--clusterpage,
.fxContent--clusterpage{ display:none !important; }
*/

/* (veiligheid) forceer zichtbaarheid */
.fxWrap--clusterpage,
.fxContent--clusterpage{ display:block !important; }

/* ---------------------------------------------
1) Astra container: geen boxed layout voor deze page
(dit haalt de witte zijkanten weg)
---------------------------------------------- */
body .site-content .ast-container{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ---------------------------------------------
2) Buitenste cluster wrapper: geen top padding / geen “balk”
---------------------------------------------- */
body .fxWrap--clusterpage{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;              /* kill padding: 96px 0 60px */
  background:transparent !important; /* of #fff */
}

/* ---------------------------------------------
3) Binnenste cluster content: TERUG container maken
-> hier regel je de “mooie” breedte
---------------------------------------------- */
body .fxWrap--clusterpage .fxContent--clusterpage{
  width:100% !important;
  max-width:1180px !important;   /* <-- pas aan: 1200 / 1400 / 1600 */
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:30px !important;  /* gutters */
  padding-right:30px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* ---------------------------------------------
4) Soms is de “balk” margin-collapsing van first child
---------------------------------------------- */
body .fxWrap--clusterpage .fxContent--clusterpage > :first-child{
  margin-top:0 !important;
}

/* ---------------------------------------------
5) (Optioneel) Hero spacing fix, indien nodig
---------------------------------------------- */
.fxhub-heroWide{
  margin-top:0 !important;
}

/* =========================
PARTIAL: fxhub-heroWide.css
FONIFIX — HUB HERO (PhotoX overlay + title, IN de rounded card)
========================= */

/* Card: behoud formaat + rounding */
.fxhub-heroCard{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(15,41,64,.10);
  box-shadow:0 18px 44px rgba(15,23,42,.10);
  background:#fff !important;
  min-height:360px;
}

/* Image: crop behouden (object-position NIET wijzigen) */
.fxhub-heroCard .fxhub-heroImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.08) contrast(1.08) brightness(1.02);
  transform:scale(1.01);
}

/* Overlay: PhotoX */
.fxhub-heroCard::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(1000px 560px at 18% 12%, rgba(7,20,35,.24), transparent 62%),
    radial-gradient(900px 560px at 85% 18%, rgba(255,107,59,.06), transparent 62%),
    linear-gradient(180deg,
      rgba(7,20,35,.46) 0%,
      rgba(11,29,51,.40) 55%,
      rgba(7,20,35,.50) 100%
    );
}

/* Content boven overlay */
.fxhub-heroContent{
  position:relative;
  z-index:2;
  padding:26px 26px 22px;
  display:grid;
  gap:14px;
  max-width:820px;
}

/* Kicker: PhotoX stijl, enkel stad oranje */
.fxhub-kicker{
  margin:0 0 10px;
  font-weight:900;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75) !important;

  display:block;
  padding:0;
  border:0;
  background:transparent;
  backdrop-filter:none;
  width:auto;
}

/* Kicker: geen underline */
.fxhub-kicker *{
  color:rgba(255,255,255,.75) !important;
  text-decoration:none !important;
  border-bottom:0 !important;
}

/* Kicker: enkel stad oranje */
.fxhub-kicker .fxhub-hl-city{
  color:#FF6B3B !important;
  font-weight:900;
  text-decoration:none !important;
  border-bottom:0 !important;
}

/* Titel/lead */
.fxhub-h1{
  margin:0;
  font-size:54px;
  line-height:1.06;
  font-weight:950;
  letter-spacing:-.03em;
  color:#fff;
  text-shadow:0 8px 18px rgba(7,20,35,.25);
}
.fxhub-lead{
  margin:0;
  font-size:16.5px;
  line-height:1.65;
  color:rgba(255,255,255,.85)!important;
  max-width:680px;
  text-shadow:0 8px 18px rgba(7,20,35,.18);
}

/* Titel: “scherm” underline (alleen in H1) */
.fxhub-h1 .fxhub-hl-scherm{
  position:relative;
  display:inline-block;
  font-weight:900;
  color:#fff !important;
  text-decoration:none !important;
}
.fxhub-h1 .fxhub-hl-scherm::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:4px;
  bottom:-6px;
  background:#FF6B3B;
  border-radius:999px;
  opacity:.95;
}

/* Kicker: “scherm” NIET underlinen */
.fxhub-kicker .fxhub-hl-scherm{
  color:rgba(255,255,255,.75) !important;
  font-weight:900;
  text-decoration:none !important;
}
.fxhub-kicker .fxhub-hl-scherm::after{ content:none !important; }

/* Links clean (Astra-proof) */
.fxhub-page a,
.fxhub-page a:visited,
.fxhub-page a:hover,
.fxhub-page a:focus,
.fxhub-page a:active{
  color:inherit !important;
  text-decoration:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

/* USP row */
.fxhub-usps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:2px;
}
.fxhub-usp{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.16);
  color:#0f2940;
  font-weight:850;
  font-size:13px;
  line-height:1;
  backdrop-filter:saturate(1.1) blur(6px);
  -webkit-tap-highlight-color:transparent;
}
.fxhub-uspDot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 10px;
  background:rgba(255,107,59,.18);
  border:1px solid rgba(255,107,59,.28);
}
/* =========================================
PRIJSBLOK: geen witruimte L/R rond de tabel
(laat de rest van de page wél netjes in container)
========================================= */

/* 1) Haal de container-padding weg enkel in de prijssectie */
.fx-priceblock{
  margin-left: calc(30px * -1);
  margin-right: calc(30px * -1);
}

/* 2) Zorg dat de inner wrapper echt full width gaat */
.fx-priceblock .fx-inner{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3) Card/tabel mogen de volle breedte nemen */
.fx-priceblock .fx-card,
.fx-priceblock .fx-tablewrap,
.fx-priceblock table{
  width: 100% !important;
}
/* =========================================================
CLUSTERPAGE: “extra” witruimte links/rechts uitschakelen
ZONDER je hele page full width te maken
========================================================= */

/* 1) Hou de algemene container (mooi) */
body .fxWrap--clusterpage .fxContent--clusterpage{
  width:100% !important;
  max-width:1400px !important;
  margin:0 auto !important;
  padding:0 30px !important;   /* jouw standaard gutters */
}

/* 2) Maar: blocks die een extra inner wrapper hebben -> die moet géén eigen gutters/max-width doen */
body .fxWrap--clusterpage .fxContent--clusterpage .fx-inner{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* 3) Sections die ook nog padding/margin toevoegen */
body .fxWrap--clusterpage .fxContent--clusterpage .section{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* 4) Specifiek: prijsblok volledig “flush” binnen clusterpage */
body .fxWrap--clusterpage .fxContent--clusterpage .fx-priceblock{
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
body .fxWrap--clusterpage .fxContent--clusterpage .fx-priceblock .fx-card,
body .fxWrap--clusterpage .fxContent--clusterpage .fx-priceblock .fx-tablewrap,
body .fxWrap--clusterpage .fxContent--clusterpage .fx-priceblock table{
  width:100% !important;
}

/* 5) Hero / jump nav ook geen extra “inner” padding */
body .fxhub-inner{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}