/* =========================================================
   FONIFIX — HERO PHOTOX (FULL) + FIXES
   ✅ minder ruimte boven kicker
   ✅ offerbar (hero-bar) hoger laten overlappen op hero
   ✅ “witte band links” / 1–2px gap fix (pseudo elements bleed)
========================================================= */

/* =========================================================
   PATCH 2026-02-02 — full-bleed hero + overflow fixes
========================================================= */

/* ✅ FIX: 100vw scrollbar overflow -> geen witte band links/rechts + geen "vakje" rechtsboven */
html, body{
  overflow-x: clip !important;
}
@supports not (overflow: clip){
  html, body{ overflow-x: hidden !important; }
}

/* =========================================================
   HERO WRAPPER
========================================================= */

.fx-hero--photoX{
  width:100vw;
  max-width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;

  border-radius:0;
  overflow-y:visible;
  overflow-x:clip;

  z-index:1;

  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
  color:#fff;
  background:transparent;

  /* ✅ MINDER TOP SPACE (was 96–152) */
  padding:clamp(58px, 7.5vw, 96px) 0 clamp(120px, 12vw, 190px);
}

/* Zorg dat pseudo-elements altijd zichtbaar renderen */
.fx-hero--photoX{ isolation:isolate; }

/* BACKGROUND FOTO */
.fx-hero--photoX::before{
  content:"";
  position:absolute;

  /* ✅ bleed zodat je geen witte rand links/rechts ziet */
  inset:-2px;

  width:calc(100% + 4px);
  height:calc(100% + 4px);

  z-index:0;
  transform:scaleX(-1);
  background:
    url("https://sandbox.fonifix.be/wp-content/uploads/2026/01/ChatGPT-Image-27-jan-2026-01_21_26.png")
    center / cover no-repeat;
  filter:saturate(1.08) contrast(1.08) brightness(1.02);
}

.fx-hero--photoX::after{
  content:"";
  position:absolute;

  /* ✅ zelfde bleed */
  inset:-2px;

  width:calc(100% + 4px);
  height:calc(100% + 4px);

  z-index:1;
  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%
    );
}

/* INNER */
.fx-hero--photoX-inner{
  position:relative;
  z-index:2;
  overflow:hidden;
  max-width:1400px;
  margin:0 auto;
  padding:0 30px;
  box-sizing:border-box;
}

/* breadcrumbs (als je ze gebruikt) */
.fx-breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:14px;
  color:#1E293B;
  opacity:.85;
  margin:0 0 10px;
}
.fx-breadcrumbs a{
  color:#1E293B;
  text-decoration:none;
  font-weight:900;
}
.fx-breadcrumbs a:hover{
  text-decoration:none;
  opacity:.95;
}
.fx-breadcrumbs__current{
  font-weight:900;
  opacity:.9;
}

/* ✅ GRID: links content, rechts reviews */
.fx-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 760px) minmax(0, 1fr);
  gap:26px;
  align-items:end;
}

/* LEFT */
.fx-hero--photoX-content{
  position:relative;
  z-index:3;
  max-width:760px;

  /* ✅ MINDER ruimte boven kicker (was 14–40) */
  padding-top:clamp(6px, 1.8vw, 18px);

  box-sizing:border-box;
}

/* RIGHT reviews */
.fx-hero-reviews{
  position:relative;
  z-index:4;
  justify-self:end;
  align-self:end;
  width:min(520px, 100%);

  /* ✅ geen bottom push */
  margin-bottom:0;
  overflow:hidden;

  /* ✅ mini optische lift (subtiel) */
  transform:translateY(clamp(0px, 1.6vw, 10px));
}

/* Alles wit binnen hero (incl links) */
.fx-hero--photoX,
.fx-hero--photoX *{
  color:#fff !important;
}
.fx-hero--photoX a{
  color:inherit !important;
  text-decoration:none !important;
  border-bottom:0 !important;
}

/* =========================================================
   TYPO
========================================================= */

.fx-hero--photoX .fx-hero-kicker{
  margin:0 0 10px;
  font-weight:900;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75) !important;
}

/* Desktop/base H1 (mobile wordt hieronder overschreven) */
.fx-hero--photoX h1{
  margin:0 0 12px;
  font-size:54px;
  line-height:1.06;
  font-weight:950;
  letter-spacing:-.03em;
  color:#fff !important;
}

.fx-hero--photoX h1 a{
  color:inherit !important;
  text-decoration:none !important;
}

/* City highlight */
.fx-hero--photoX .fx-hl-city{
  color:#FF6B3B !important;
  font-weight:900;
}

/* Repair label underline */
.fx-hero--photoX .fx-hl-repair{
  position:relative;
  display:inline-block;
  font-weight:900;
  color:#fff !important;
}
.fx-hero--photoX .fx-hl-repair::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:4px;
  bottom:-6px;
  background:#FF6B3B;
  border-radius:999px;
  opacity:.95;
}

/* SUB */
.fx-hero--photoX .fx-hero-sub{
  margin:0 0 8px;
  font-size:16.5px;
  line-height:1.65;
  color:rgba(255,255,255,.85) !important;
  max-width:640px;
}
.fx-hero--photoX .fx-hero-sub strong{ color:#fff !important; }

.fx-hero--photoX .fx-hero-seo{
  display:inline-block;
  font-weight:900;
  color:rgba(255,255,255,.92) !important;
}

/* =========================================================
   ADRESSEN
========================================================= */

.fx-hero-addresses{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
  margin-bottom:16px;
}
.fx-hero-addresses--row{ align-items:center; }

.fx-hero-address{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  font-weight:900;
  font-size:14px;
}

.fx-hero--photoX a.fx-hero-addresslink,
.fx-hero--photoX a.fx-hero-addresslink:link,
.fx-hero--photoX a.fx-hero-addresslink:visited{
  color:rgba(255,255,255,.92) !important;
  text-decoration:none !important;
  border-bottom:0 !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.fx-hero--photoX a.fx-hero-addresslink:hover,
.fx-hero--photoX a.fx-hero-addresslink:active{
  color:#fff !important;
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22);
  transform:translateY(-1px);
}

.fx-hero--photoX a.fx-hero-addresslink:focus,
.fx-hero--photoX a.fx-hero-addresslink:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 4px rgba(255,255,255,.12);
}

.fx-loc-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#FF6B3B;
  box-shadow:0 0 0 4px rgba(255,107,59,.2);
}

/* =========================================================
   ✅ CTA ROW (label boven CTA) — minder “lucht”
========================================================= */

.fx-hero-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;

  /* ✅ was huge -> nu normaal */
  margin-bottom:clamp(10px, 2vw, 18px);
}

.fx-hero-cta .fonifix-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* 2 winkels label */
.fx-hero-two-shops{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:14px 20px;
  line-height:1;
  font-size:inherit;
  font-weight:900;

  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);

  color:rgba(255,255,255,.92) !important;
}

.fx-hero-two-shops::before{
  content:"";
  width:16px;
  height:16px;
  flex:0 0 16px;
  display:inline-block;
  background:#FF6B3B;

  /* ✅ FIX: jouw snippet was afgekapt — hier correct gesloten */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22s7-4.438 7-11a7 7 0 1 0-14 0c0 6.562 7 11 7 11Zm0-10a2 2 0 1 1 0-4a2 2 0 0 1 0 4Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22s7-4.438 7-11a7 7 0 1 0-14 0c0 6.562 7 11 7 11Zm0-10a2 2 0 1 1 0-4a2 2 0 0 1 0 4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* =========================================================
   PATCH 2026-02-02 — bulletproof contact link
========================================================= */

.fx-hero--photoX .fx-hero-contactlink,
.fx-hero--photoX .fx-hero-contactlink:link,
.fx-hero--photoX .fx-hero-contactlink:visited,
.fx-hero--photoX .fx-hero-contactlink:hover,
.fx-hero--photoX .fx-hero-contactlink:active{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  font-weight:900 !important;
  font-size:16px !important;
  line-height:1.2 !important;

  color:rgba(255,255,255,.92) !important;
  text-decoration:none !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;

  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
}

.fx-hero--photoX .fx-hero-contactlink::after{
  content:"→" !important;
  font-weight:1000 !important;
  opacity:.95 !important;
  transform:translateY(1px) !important;
}

.fx-hero--photoX .fx-hero-contactlink:hover{
  color:#fff !important;
  opacity:.98 !important;
}

/* =========================================================
   ✅ MOBILE PATCH — HERO PHOTOX
   Doel:
   ✅ H1 proportioneel op mobiel (niet huge)
   ✅ iets meer leesbare line-height op smalle schermen
   ✅ underline iets subtieler + dichter bij tekst
   ✅ grid -> 1 kolom, reviews onder content
========================================================= */

@media (max-width: 768px){

  /* 1 kolom */
  .fx-hero-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .fx-hero--photoX-content{
    max-width: 100% !important;
    padding-top: 8px !important;
  }

  .fx-hero-reviews{
    justify-self: start !important;
    align-self: start !important;
    width: 100% !important;
    transform: none !important;
    margin-top: 10px !important;
  }

  /* H1: proportioneel op mobiel */
  .fx-hero--photoX h1{
    font-size: clamp(30px, 7.2vw, 40px) !important;
    line-height: 1.10 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.02em !important;
  }

  .fx-hero--photoX .fx-hero-sub{
    font-size: 15.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 6px !important;
  }

  .fx-hero--photoX .fx-hl-repair::after{
    height: 3px !important;
    bottom: -4px !important;
    opacity: .9 !important;
  }

  .fx-hero-cta{
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  .fx-hero-two-shops{
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .fx-hero--photoX-inner{
    padding: 0 18px !important;
  }

  .fx-hero--photoX{
    padding: clamp(46px, 10vw, 72px) 0 clamp(96px, 18vw, 140px) !important;
  }
}

/* Extra small phones (320–360px): nóg compacter */
@media (max-width: 380px){
  .fx-hero--photoX h1{
    font-size: clamp(28px, 8.2vw, 36px) !important;
  }
}