/* FW3 section + hero waves (v10) — één golf per naad; gradientvlakken krijgen een egale aanzetstrook in de golfkleur */

/* — Hero — */
.fw3-hero {
  position: relative;
  z-index: 2;
  overflow: visible !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: clamp(2.75rem, 5vw, 4rem) !important;
  /* Zelfde palet als homepage: #1f7eb0 naar donkerder */
  background-image:
    linear-gradient(180deg, rgba(31,126,176,0) 0%, rgba(31,126,176,0) calc(100% - 11rem), #1f7eb0 calc(100% - 2.5rem), #1f7eb0 100%),
    linear-gradient(155deg, #062f48 0%, #0a3d5c 28%, #155c84 58%, #1f7eb0 100%) !important;
}

.fw3-hero-wave {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  z-index: 3 !important;
  width: 140% !important;
  height: clamp(4.5rem, 8vw, 7rem) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  pointer-events: none !important;
  background-image: none !important;
  background-color: #1f7eb0 !important;
  transform: translate(-50%, 50%) !important;
}

.fw3-hero-blob-b {
  background-image: radial-gradient(circle at 60% 40%, rgba(98,196,230,.2), transparent 70%) !important;
}

@media (max-width: 767px) {
  .fw3-hero {
    border-radius: 0 !important;
    padding-bottom: 3.25rem !important;
    margin-bottom: 0 !important;
  }
  .fw3-hero-wave {
    width: 160% !important;
    height: 4rem !important;
  }
  /* foto + reviewkaart boven de ellips laten renderen */
  .fw3-hero .fw3-hero-media-wrap {
    position: relative;
    z-index: 5 !important;
  }
}

/* — Homepage-secties: vlak op elkaar, golven mogen overhangen — */
.home .fw3-page > .fw3-band {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.home .fw3-page > .fw3-band-cyan {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  /* egale aanzetstrook in de golfkleur bovenaan */
  background-image:
    linear-gradient(180deg, #1f7eb0 0%, #1f7eb0 1.5rem, rgba(31,126,176,0) 8rem),
    linear-gradient(160deg, #1f7eb0 0%, #3aa0cc 55%, #62c4e6 100%) !important;
}

.home .fw3-page > .fw3-band.fw3-band-services {
  overflow: hidden !important;
  margin-top: 0 !important;
  background-image:
    linear-gradient(180deg, #0f2a3d 0%, #0f2a3d 1.5rem, rgba(15,42,61,0) 9rem),
    linear-gradient(158deg, #0f2a3d 0%, #16384f 48%, #1a5570 100%) !important;
}

.home .fw3-page > .fw3-band.fw3-band-booking {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background-image:
    linear-gradient(180deg, #0f2a3d 0%, #0f2a3d 1.5rem, rgba(15,42,61,0) 9rem),
    linear-gradient(165deg, #0f2a3d 0%, #16384f 100%) !important;
}

.home .fw3-page > .fwhb-band {
  position: relative;
  isolation: isolate;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* legacy golf-pseudo's uitschakelen */
.home .fw3-page > .fw3-band::after {
  content: none !important;
}

/* — Eén golf per naad: golf = topkleur van de onderliggende sectie, over de sectie erboven — */
.home .fw3-page > .fw3-band-paper::before,
.home .fw3-page > .fw3-band-mist::before,
.home .fw3-page > .fw3-band-cyan::before,
.home .fw3-page > .fw3-band-booking::before,
.home .fw3-page > .fwhb-band::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(-1 * var(--fw3-wave-h, clamp(2.25rem, 4vw, 3.5rem)) + 2px) !important;
  bottom: auto !important;
  height: var(--fw3-wave-h, clamp(2.25rem, 4vw, 3.5rem)) !important;
  width: auto !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center bottom !important;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
  inset-inline: 0 !important;
}

.home .fw3-page > .fw3-band-paper::before {
  background-image: url("/wp-content/uploads/fw3-wave-top-paper.svg") !important;
}
.home .fw3-page > .fw3-band-mist::before {
  background-image: url("/wp-content/uploads/fw3-wave-top-mist.svg") !important;
}
.home .fw3-page > .fw3-band-cyan::before {
  background-image: url("/wp-content/uploads/fw3-wave-top-cyan.svg") !important;
}
.home .fw3-page > .fw3-band-booking::before {
  background-image: url("/wp-content/uploads/fw3-wave-top-ink.svg") !important;
}
.home .fw3-page > .fwhb-band::before {
  background-image: url("/wp-content/uploads/fw3-wave-top-paper.svg") !important;
}

/* afwisseling: elke tweede golf gespiegeld */
.home .fw3-page > .fw3-band-cyan::before,
.home .fw3-page > .fwhb-band::before {
  transform: scaleX(-1) !important;
}

/* hero → eerste sectie: ellips i.p.v. golf */
.home .fw3-page > .fw3-hero + .fw3-band {
  padding-top: clamp(4rem, 8vw, 5.75rem) !important;
}
.home .fw3-page > .fw3-hero + .fw3-band::before {
  content: none !important;
}

/* mist → services: services' ::before is de textuur-laag, dus golf op de mist-sectie zelf */
.home .fw3-page > .fw3-band-mist:has(+ .fw3-band-services)::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: var(--fw3-wave-h, clamp(2.25rem, 4vw, 3.5rem)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: url("/wp-content/uploads/fw3-wave-top-ink.svg") no-repeat center bottom / 100% 100% !important;
}

/* — Google-kaart lager zodat die de CTA vrijlaat — */
div.fw3-hero-media-wrap > div.fw3-float-card,
.fw3-hero-media-wrap .fw3-float-card {
  top: auto !important;
  right: auto !important;
  bottom: -12% !important;
  left: 34% !important;
  z-index: 6 !important;
}

@media (max-width: 1023px) {
  div.fw3-hero-media-wrap > div.fw3-float-card,
  .fw3-hero-media-wrap .fw3-float-card {
    bottom: -4% !important;
    left: 48% !important;
  }
}

@media (max-width: 767px) {
  div.fw3-hero-media-wrap > div.fw3-float-card,
  .fw3-hero-media-wrap .fw3-float-card,
  .fw3-page .fw3-hero-media-wrap .fw3-float-card {
    bottom: -2% !important;
    left: 42% !important;
  }
}

@media (max-width: 479px) {
  div.fw3-hero-media-wrap > div.fw3-float-card,
  .fw3-hero-media-wrap .fw3-float-card {
    bottom: 2% !important;
    left: 34% !important;
  }
}

/* services: textuur-overlay bovenaan laten infaden zodat er geen harde rand onder de golf ontstaat */
.home .fw3-page > .fw3-band.fw3-band-services::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9rem) !important;
  mask-image: linear-gradient(180deg, transparent 0, #000 9rem) !important;
}

/* hero-inhoud (foto, reviewkaart) boven de overgangsellips */
.fw3-hero .fw3-hero-grid {
  position: relative;
  z-index: 4 !important;
}


/* Over Fris Webdesign: meer ademruimte boven en onder */
.home #over-ons-band.fw3-band {
  padding-top: clamp(5.5rem, 10vw, 7.5rem) !important;
  padding-bottom: clamp(4.5rem, 8vw, 6.5rem) !important;
}

@media (min-width: 768px) {
  .home #over-ons-band.fw3-band {
    padding-top: calc(clamp(5.5rem, 10vw, 7.5rem) + 40px) !important;
  }

  .home .fw3-page > .fw3-hero + .fw3-band {
    padding-top: calc(clamp(4rem, 8vw, 5.75rem) + 40px) !important;
  }
}

@media (max-width: 767px) {
  .home #over-ons-band.fw3-band {
    padding-top: clamp(4.25rem, 14vw, 5.5rem) !important;
    padding-bottom: clamp(3.5rem, 10vw, 4.75rem) !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   Aandacht & contrast — n.a.v. Attention Insight-rapport
   Probleem: lime (#b6e33a) heeft bijna dezelfde helderheid als wit,
   dus op lichte secties had elke CTA maar 1,4–1,5:1 vormcontrast.
   Oplossing: donkere rand + lift op lichte vlakken, meer omvang.
   ───────────────────────────────────────────────────────────── */

.fw3-btn {
  font-size: 17px !important;
  padding: 18px 32px !important;
  box-shadow: 0 14px 26px -12px rgba(15, 42, 61, 0.38) !important;
}

/* op donkere vlakken is de donkere ring overbodig; alleen lift */
.fw3-hero .fw3-btn,
.fw3-site-header .fw3-btn,
.fw3-band-cyan .fw3-btn,
.fw3-band-services .fw3-btn,
.fw3-band-booking .fw3-btn {
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.55) !important;
}

/* primaire hero-CTA mag het zwaarste wegen */
.fw3-hero .fw3-btn {
  font-size: 18px !important;
  padding: 20px 36px !important;
}

/* navigatieknop houdt zijn compacte maat, de header is krap */
.fw3-site-header .fw3-btn {
  font-size: 16px !important;
  padding: 15px 27px !important;
}

@media (max-width: 767px) {
  .fw3-btn {
    font-size: 16px !important;
    padding: 16px 26px !important;
  }
  .fw3-hero .fw3-btn {
    font-size: 17px !important;
    padding: 18px 30px !important;
  }
}

/* knoppen die de .fw3-btn-klasse niet dragen, dezelfde behandeling geven */
.fwhb-cta {
  font-size: 17px !important;
  padding: 18px 32px !important;
  box-shadow: 0 14px 26px -12px rgba(15, 42, 61, 0.38) !important;
}

.fw3-footer-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  width: auto !important;
  padding: 1rem 1.75rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #0f2a3d !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.45) !important;
  transition: transform .35s ease, background .3s ease, box-shadow .35s ease !important;
}

.fw3-footer-cta:hover,
.fw3-footer-cta:focus-visible {
  color: #0f2a3d !important;
  text-decoration: none !important;
  transform: translateY(-2px) !important;
}

/* het 'Premium'-pakket zit al op een donkere kaart: ring daar overbodig */
.fw3-btn-pack-hot {
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.55) !important;
}

@media (max-width: 767px) {
  .fwhb-cta {
    font-size: 16px !important;
    padding: 16px 26px !important;
  }
}

/* mobiel: reviewkaart binnen de viewport houden (stak 41px buiten beeld) */
@media (max-width: 767px) {
  div.fw3-hero-media-wrap > div.fw3-float-card,
  .fw3-hero-media-wrap .fw3-float-card,
  .fw3-page .fw3-hero-media-wrap .fw3-float-card {
    left: auto !important;
    right: 0.75rem !important;
    bottom: -1.25rem !important;
    width: min(15rem, 74%) !important;
    max-width: calc(100% - 1.5rem) !important;
  }
}

@media (max-width: 479px) {
  div.fw3-hero-media-wrap > div.fw3-float-card,
  .fw3-hero-media-wrap .fw3-float-card {
    left: auto !important;
    right: 0.625rem !important;
    bottom: -1rem !important;
    width: min(13.5rem, 72%) !important;
  }
}

/* ── Golfamplitude per naad ──
   De golfvorm is een SVG die op 100% 100% wordt uitgerekt, dus een lagere
   --fw3-wave-h vlakt dezelfde vorm af in plaats van er een andere golf van
   te maken. Zo blijft de overgang uit dezelfde familie. */
.home .fw3-page > .fw3-band,
.home .fw3-page > .fwhb-band {
  --fw3-wave-h: clamp(2.25rem, 4vw, 3.5rem);
}

/* Reviewblok ("Ervaringen van andere klanten"): zelfde boog als bij de
   dienstenband. De cyaan band is het meest verzadigde vlak van de pagina,
   dus de golfbeweging kwam daar het hardst aan. */
.home .fw3-page > .fw3-band-cyan,
.home .fw3-page > .fw3-band-cyan + .fw3-band {
  --fw3-wave-h: var(--fw3-arch-h);
}

/* bovenkant: de cyaan band welft omhoog in het midden */
.home .fw3-page > .fw3-band-cyan::before {
  background-image: url("/wp-content/uploads/fw3-arch-top-cyan.svg") !important;
  transform: none !important;
}

/* onderkant: gespiegelde boog, getekend door de sectie eronder */
.home .fw3-page > .fw3-band-cyan + .fw3-band::before {
  background-image: url("/wp-content/uploads/fw3-arch-bot-paper.svg") !important;
  transform: none !important;
}


/* ── "Meer dan webdesign": boog in plaats van golf ──
   Deze dienstenband is het enige donkere vlak tussen twee lichte secties,
   waardoor de golfbeweging er hard aankomt. Nu één vloeiende boog boven en
   één onder, die elkaar spiegelen zodat de band als één rustige vorm leest. */
.home .fw3-page {
  --fw3-arch-h: clamp(2.25rem, 3.4vw, 3.25rem);
}

/* bovenkant: de donkere band welft omhoog in het midden */
.home .fw3-page > .fw3-band-mist:has(+ .fw3-band-services)::after {
  height: var(--fw3-arch-h) !important;
  background-image: url("/wp-content/uploads/fw3-arch-top-ink.svg") !important;
}

/* onderkant: dezelfde boog, gespiegeld (de tipsband tekent deze naad) */
.home .fw3-page > .fw3-band-services + .fwhb-band {
  --fw3-wave-h: var(--fw3-arch-h);
}

.home .fw3-page > .fw3-band-services + .fwhb-band::before {
  background-image: url("/wp-content/uploads/fw3-arch-bot-paper.svg") !important;
  transform: none !important;
}

/* de boog op mobiel afzwakken: dezelfde hoogte over een smallere breedte
   geeft een steilere kromming, dus daar minder amplitude */
@media (max-width: 767px) {
  .home .fw3-page {
    --fw3-arch-h: 1.35rem;
  }
}


/* ── "Plan je gratis kennismaking": zelfde boog ──
   Deze band heeft alleen een naad bovenaan; onderaan gaat hij direct over
   in de footer, dus daar valt niets te krommen. */
.home .fw3-page > .fw3-band-booking {
  --fw3-wave-h: var(--fw3-arch-h);
}

.home .fw3-page > .fw3-band-booking::before {
  background-image: url("/wp-content/uploads/fw3-arch-top-ink.svg") !important;
  transform: none !important;
}


/* ── Parallax op "Meer dan webdesign" ──
   De achtergrond (verloop + stippentextuur + de twee gloedvlekken) staat
   stil terwijl de inhoud eroverheen schuift. De eerste laag van de band is
   de aanzetstrook waarop de boog aansluit: die moet wel meeschuiven, anders
   springt de naad los. Uit op klein scherm (iOS ondersteunt fixed niet
   betrouwbaar) en bij voorkeur voor minder beweging. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .home .fw3-page > .fw3-band.fw3-band-services {
    background-attachment: scroll, fixed !important;
  }

  .home .fw3-page > .fw3-band.fw3-band-services::before {
    background-attachment: fixed, fixed, fixed !important;
  }
}

.home .fw3-page > .fw3-band-cyan::before {
  pointer-events: none !important;
}
.home #reviews .fw3-band-inner,
.home #reviews .fw3-reviews-head,
.home #reviews .fw3-reviews-badge {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}