/* =========================================================
   🌐 KAVION — UNIFIED LAYOUT SYSTEM
   ========================================================= */
/* 
   body {
     padding-top: var(--cart-block-header_height, 72px);
   }
*/

:root {

  /* Font family */
  --kavion-font-base: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font weights */
  --fw-body: 400;
  --fw-heading: 600;

  /* Responsive modular scale */
  --fs-body: 16px;
  --fs-small: 0.875rem; /* 14px */
  --fs-large: 1.125rem; /* 18px */

  --fs-h1: clamp(2.2rem, 4vw, 3rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.4rem);
  --fs-h3: clamp(1.4rem, 2.2vw, 1.6rem);
  --fs-h4: clamp(1.2rem, 1.6vw, 1.3rem);



}


/* ================================
   🔹 Basis
   ================================ */

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;

  max-width: 100%;
  overflow-x: hidden;

  font-family: var(--kavion-font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: 1.6;

  background: transparent;
  color: #0b0b0f;
}


/* ================================
   🔤 Headings (globaal)
   ================================ */
h1, h2, h3, h4 {
  font-family: var(--kavion-font-base);
  font-weight: var(--fw-heading);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.15;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
}

h4 {
  font-size: var(--fs-h4);
  line-height: 1.35;
}


/* ================================
   🧱 Block safety net
   ================================ */

.kb-block,
.kavion-block {
  font-family: inherit;
  font-size: inherit;
}

.kb-block p,
.kavion-block p {
  font-size: var(--fs-body);
}


/* 🔹 Elke hoofdsectie (header / content / footer) */
.kb-section {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

/* 🔹 Full-width achtergrond (optioneel per section) */
.kb-section.fullwidth {
    background-size: cover;
    background-position: center;
}

/* 🔹 Inner content: overal exact gelijk */
.kb-inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 64px 24px;
    box-sizing: border-box;
}

/* 🔹 Builder blocks erven gewoon dit systeem */
.kb-block {
    width: 100%;
    margin: 0;
}

/* 🔹 Media veilig */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}
/* 
.kb-block-modern-block:first-of-type {
  padding-top: 110px;
} */

.kb-block {
  margin-top: 0;
  margin-bottom: 0;
}

.kb-block,
.kavion-block,
section,
main {
  max-width: 100%;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Force inheritance voor alle Kavion blocks */
.kb-block,
.kb-block * {
  font-family: inherit;
}


/* =========================================================
   🔓 KAVION — ALLOW BLOCK OVERLAP
   ========================================================= */

.kb-block {
  position: relative;
  overflow: visible;
}

.kb-block > .kb-block-inner,
.kb-block > .kb-inner {
  overflow: visible;
}


/* =========================================
   FORCE OVERLAP VISIBILITY (NO CLIP)
   ========================================= */
.kb-section,
.kb-inner,
.kb-block,
main,
section{
  overflow: visible !important;
}

/* =========================================
   🔒 KAVION — TYPOGRAPHY LOCK
   ========================================= */

.kb-block {
  font-family: inherit;
}

.kb-block h1,
.kb-block h2,
.kb-block h3,
.kb-block h4 {
  font-size: inherit;
}

.kb-block p,
.kb-block li {
  font-size: var(--fs-body);
}

/* =========================================
   🔒 KAVION — HARD TYPOGRAPHY LOCK
   ========================================= */

.kb-block h1 { 
  font-size: var(--fs-h1) !important;
  font-weight: var(--fw-heading) !important;
}

.kb-block h2 { 
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-heading) !important;
}

.kb-block h3 { 
  font-size: var(--fs-h3) !important;
  font-weight: var(--fw-heading) !important;
}

.kb-block h4 { 
  font-size: var(--fs-h4) !important;
  font-weight: var(--fw-heading) !important;
}

.kb-block p,
.kb-block li,
.kb-block span {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-body) !important;
}


/* =========================================
   ContentPB – Stable Layout (Desktop + Mobile)
   ========================================= */

.contentpb-block-layout {
  display: flex;
  align-items: center;
  gap: 64px;
}

/* Desktop image control */
.contentpb-block-image {
  flex: 0 0 var(--contentpb-block-image_width);
  max-width: var(--contentpb-block-image_width);
}

.contentpb-block-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--contentpb-block-image_radius);
}

/* Content should flex properly */
.contentpb-block-content {
  flex: 1;
}

/* Mobile stack */
@media (max-width: 900px) {

  .contentpb-block-layout {
    flex-direction: column !important;
    gap: 32px;
  }

  .contentpb-block-image {
    flex: none;
    max-width: 420px;
    width: 100%;
  }

}


.contentpb-block-text ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.contentpb-block-text ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}

.contentpb-block-text ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #1a5cff;
  font-weight: 700;
}

/* =========================================
   ContentPB – Mobile Checklist Alignment FIX
   ========================================= */

@media (max-width: 900px) {

  .contentpb-block-text ul.kb-check-list {
    padding: 0 !important;
    margin: 0 !important;
  }

  .contentpb-block-text ul.kb-check-list li {
    position: relative;
    list-style: none;
    padding-left: 34px !important; /* iets meer ruimte */
  }

  .contentpb-block-text ul.kb-check-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0.15em; /* verticale uitlijning */
    font-weight: 700;
  }

}

/* Fix checklist alignment definitief */

.kb-block-contentpb-block ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.kb-block-contentpb-block ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left; /* BELANGRIJK */
}

.kb-block-contentpb-block ul li::before {
  content: "✔";
  flex: 0 0 18px; /* vaste icon kolom */
  color: #1a5cff;
  font-weight: 700;
  margin-top: 3px;
}

.kb-block-contentpb-block ul li p {
  margin: 0;
  text-align: left; /* extra zekerheid */
}

/* =========================================
   🔘 KAVION — FINAL BUTTON OVERRIDE
   ========================================= */

.kb-btn,
.kb-block a,

.kb-block button,
.kb-block .contentpb-block-button,
.kb-block .apple-block-btn,
.kb-block .appointment-block-submit,
.kb-block .navbar-button {

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  padding: 10px 22px !important;
  line-height: 1.2 !important;

  min-height: unset !important;
  height: auto !important;
}

/* mobiel compacter */
@media (max-width: 480px) {
  .kb-btn,
  .kb-block a,
  .kb-block button,
  .kb-block .contentpb-block-button,
  .kb-block .apple-block-btn,
  .kb-block .appointment-block-submit,
  .kb-block .navbar-button {

    font-size: 13px !important;
    padding: 8px 18px !important;
  }
}

/* =========================================================
   ✅ KAVION — SAFE LAYOUT OVERRIDES (NON-BREAKING)
   ========================================================= */

/* ===============================
   1️⃣ WIDESCREEN: minder lege zijkanten
   =============================== */

/* Extra horizontale ademruimte maar gecentreerd */
@media (min-width: 1400px) {
  .kb-block {
    padding-left: clamp(32px, 6vw, 120px);
    padding-right: clamp(32px, 6vw, 120px);
  }
}

/* Ultra wide / 4K */
@media (min-width: 2000px) {
  .kb-block {
    padding-left: clamp(48px, 8vw, 180px);
    padding-right: clamp(48px, 8vw, 180px);
  }
}

/* ===============================
   2️⃣ TABLET + MOBIEL: alles onder elkaar
   =============================== */

@media (max-width: 1024px) {

  /* Force alle grids & flex layouts naar column */
  .kb-block-inner,
  .kb-inner,
  .contentpb-block-layout,
  .benefits-block-grid,
  .steps-block-grid,
  .testimonials-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Cards full width */
  .benefits-block-card,
  .steps-block-card,
  .testimonial-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Text altijd links (leesbaarheid) */
  .kb-block p,
  .kb-block li,
  .kb-block span {
    text-align: left !important;
  }
}

/* ===============================
   3️⃣ REVIEWS: pijltjes UIT op mobiel & tablet
   =============================== */

@media (max-width: 1024px) {

  /* Slider pijlen verbergen */
  .testimonial-arrow,
  .testimonial-prev,
  .testimonial-next,
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }

  /* Geen swipe-offset issues */
  .testimonials-slider,
  .swiper-wrapper {
    transform: none !important;
  }
}

/* ===============================
   4️⃣ EXTRA VEILIGHEID: geen overflow bugs
   =============================== */

@media (max-width: 1024px) {
  body,
  main,
  section,
  .kb-block {
    overflow-x: hidden !important;
  }
}

/* =========================================================
   🧠 KAVION — WIDESCREEN VERTICAL COMPACTING (SAFE)
   ========================================================= */

@media (min-width: 1600px) {

  .kb-block {
    padding-top: clamp(64px, 6vw, 96px);
    padding-bottom: clamp(64px, 6vw, 96px);
  }

}


/* =========================================================
   ✅ KAVION — SAFE WIDESCREEN BALANCE FIX
   Zet dit ONDERAAN, breekt niets
   ========================================================= */

/* 1️⃣ Iets bredere content op grote schermen (NIET mobiel/tablet) */
@media (min-width: 1400px) {
  :root {
    --kavion-content-width: 1320px;
  }
}

@media (min-width: 1800px) {
  :root {
    --kavion-content-width: 1440px;
  }
}

/* 2️⃣ Minder verticale "lucht" op widescreen */
@media (min-width: 1600px) {
  .kb-block {
    padding-top: clamp(64px, 5vw, 96px);
    padding-bottom: clamp(64px, 5vw, 96px);
  }
}

/* 3️⃣ Mobiel & tablet: ALLES onder elkaar (extra zekerheid) */
@media (max-width: 1024px) {
  .kb-block-inner > * {
    max-width: 100%;
  }
}

/* 4️⃣ Reviews: pijltjes UIT op mobiel & tablet */
@media (max-width: 1024px) {
  .testimonial-nav,
  .testimonial-arrow,
  .testimonial-prev,
  .testimonial-next {
    display: none !important;
  }
}


/* =========================================================
   📱 KAVION — TABLET = MOBILE BEHAVIOR
   Geldt voor iPad + kleinere schermen
   ========================================================= */

@media (max-width: 1024px) {

  /* =========================
     1️⃣ ALLE BLOKKEN ONDER ELKAAR
     ========================= */

  .kb-block-inner,
  .kb-inner {
    display: block !important;
  }

  /* Forceer kolommen → stack */
  .benefits-block-grid,
  .steps-block-grid,
  .testimonials-grid,
  .contentpb-block-layout {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* =========================
     2️⃣ REVIEWS — PIJLTJES UIT
     ========================= */

  .testimonial-arrow,
  .testimonial-nav,
  .testimonial-prev,
  .testimonial-next,
  .kb-testimonial-arrow {
    display: none !important;
  }

  /* =========================
     3️⃣ BENEFITS — ICONS CENTREREN
     ========================= */

  .benefits-block-card {
    align-items: center !important;
    text-align: center !important;
  }

  .benefits-block-card-icon {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* =========================
     4️⃣ BENEFITS — ICON CIRCLE UIT
     ========================= */

  .benefits-block-card-icon {
    background: none !important;
    box-shadow: none !important;
  }

}

/* =========================================================
   📱 KAVION — REVIEWS PIJLTJES UIT (MOBILE + TABLET)
   ========================================================= */

@media (max-width: 1024px) {

  /* Algemene sliders / testimonials */
  .testimonial-arrow,
  .testimonial-arrows,
  .testimonial-nav,
  .testimonial-prev,
  .testimonial-next,

  /* Kavion specifieke */
  .kb-testimonial-arrow,
  .kb-testimonial-nav,
  .kb-block-testimonial-block .arrow,
  .kb-block-testimonial-block .nav,
  .kb-block-testimonial-block button,

  /* Vaak gebruikte generieke knoppen */
  .kb-block-testimonial-block button[type="button"],
  .kb-block-testimonial-block .kb-btn,

  /* Fallback: alles wat absolute nav is binnen testimonial */
  .kb-block-testimonial-block [class*="arrow"],
  .kb-block-testimonial-block [class*="nav"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

}



/* enterprisev10 typography */

/* ============================================================
   GLOBAL V10 CONSISTENCY FIX (IPAD & MOBILE)
   Plaats dit in de Global CSS van je website
   ============================================================ */

/* V10 SEAMLESS TRANSITION FIX */
/* Pak elk blok dat DIRECT na de hero komt */
.nuke-v10-master + .kb-block {
    padding-top: 0 !important; /* Verwijdert de standaard 150px top padding [cite: 2026-02-26] */
    margin-top: -20px !important; /* Trekt het blok optisch strak tegen de hero aan */
}

/* Specifieke correctie voor mobiel */
@media (max-width: 1024px) {
    .nuke-v10-master + .kb-block {
        margin-top: 0 !important; /* Voorkomt overlap op kleinere schermen */
        padding-top: 40px !important; /* Geeft een nette, kleine ademruimte */
    }
}