/* ======================================================
   KAVION FRONTEND LAYOUT SYSTEM
   Clean • Predictable • Mobile-first
   ====================================================== */

/* --------------------------------------
   GLOBAL RESET / SAFETY
-------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

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

/* --------------------------------------
   ROOT PAGE CONTAINER
-------------------------------------- */
#kavion-viewport {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

/* --------------------------------------
   BLOCK ARCHITECTURE (CORE)
-------------------------------------- */

/* Elk block is altijd full width */
.kb-block {
  width: 100%;
  position: relative;
}

/* Inner container bepaalt balans */
.kb-block-inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* --------------------------------------
   TYPOGRAPHY & CONTENT SAFETY
-------------------------------------- */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  max-width: 100%;
  word-wrap: break-word;
}

/* --------------------------------------
   GRID / FLEX NORMALISATION
-------------------------------------- */
[class*="grid"],
[class*="columns"],
[class*="row"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* --------------------------------------
   FORMS / BUTTONS
-------------------------------------- */
button,
a,
input,
textarea,
select {
  max-width: 100%;
}

/* --------------------------------------
   SLIDERS / CAROUSELS SAFETY
-------------------------------------- */
[class*="slider"],
[class*="carousel"] {
  overflow-x: hidden;
}

/* ======================================================
   TABLET ≥ 768px
====================================================== */
@media (min-width: 768px) {

  .kb-block-inner {
    padding-inline: 40px;
  }

}

/* ======================================================
   DESKTOP ≥ 1024px
====================================================== */
@media (min-width: 1024px) {

  .kb-block-inner {
    padding-inline: 32px;
  }

  /* Sta blocks toe om eigen layouts te definiëren */
  [data-layout],
  [style*="grid-template-columns"],
  [style*="--columns"] {
    grid-template-columns: unset;
  }

}

/* ======================================================
   LARGE DESKTOP ≥ 1440px
====================================================== */
@media (min-width: 1440px) {

  .kb-block-inner {
    max-width: 1280px;
  }

}

/* ======================================================
   TESTIMONIALS – MOBILE & TABLET FIX
====================================================== */
@media (max-width: 1024px) {

  .kb-block-testimonial-block
  .testimonial-block-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 24px;
  }

  .kb-block-testimonial-block
  .testimonial-block-card {
    width: 100% !important;
    max-width: 420px;
  }

}

/* ======================================================
   MOBILE OVERFLOW SAFETY (ALLEEN MOBIEL)
====================================================== */
@media (max-width: 1024px) {

  html,
  body,
  #kavion-viewport {
    overflow-x: hidden !important;
    width: 100%;
  }

  /* Kill echte offenders, maar subtiel */
  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

}

/* ======================================================
   NAVIGATION CONSISTENCY
   Full width bar, gecentreerde inhoud
====================================================== */
.kb-block-navigation {
  width: 100%;
}

.kb-block-navigation .kb-block-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ======================================================
   HERO / FULL-WIDTH BLOCKS
   (GEEN 100vw HACKS)
====================================================== */
.kb-block-hero-block,
.kb-block-fullwidth {
  width: 100%;
}

.kb-block-hero-block .kb-block-inner,
.kb-block-fullwidth .kb-block-inner {
  max-width: 1200px;
}

/* ======================================================
   EINDREGEL – NIETS HIERONDER
====================================================== */

/* =========================================
   📱 KAVION — FORCE LEFT TEXT ON MOBILE (HARD)
   Alleen voor content-tekst, niet voor buttons/icons
   ========================================= */

@media (max-width: 768px) {

  /* 1) Zet de TEKST-CONTAINERS links (dit is de echte fix) */
  .kb-block,
  .kb-block-inner,
  .kb-block-content,
  .kb-content,
  .kb-text,
  .kb-richtext,
  .kb-wysiwyg,
  .kb-body,
  .kb-description {
    text-align: left !important;
  }

  /* 2) Zet echte tekst-elementen links (extra zekerheid) */
  .kb-block p,
  .kb-block ul,
  .kb-block ol,
  .kb-block li,
  .kb-block blockquote {
    text-align: left !important;
  }

  /* 3) Headings ook links (als je die ook niet gecentreerd wilt) */
  .kb-block h1,
  .kb-block h2,
  .kb-block h3,
  .kb-block h4,
  .kb-block h5,
  .kb-block h6 {
    text-align: left !important;
  }

  /* 4) Laat CTA/knoppen wél gecentreerd als ze zo bedoeld zijn */
  .kb-block .kb-buttons,
  .kb-block .kb-button-row,
  .kb-block .kb-btn-wrap,
  .kb-block .kb-cta-buttons,
  .kb-block button,
  .kb-block .kb-btn,
  .kb-block a.kb-btn {
    text-align: center !important;
  }

  /* 5) Als er inline "text-align:center" op een element staat: overschrijven */
  .kb-block [style*="text-align:center"],
  .kb-block [style*="text-align: center"] {
    text-align: left !important;
  }

  /* 6) Maar als die inline center specifiek op knoppen zit, laat ze center */
  .kb-block .kb-buttons [style*="text-align:center"],
  .kb-block .kb-button-row [style*="text-align:center"],
  .kb-block .kb-btn-wrap [style*="text-align:center"] {
    text-align: center !important;
  }
}

/* =====================================================
   💣 KAVION — ABSOLUTE MOBILE TEXT CONTROL
   ===================================================== */

@media (max-width: 1024px) {

  /* 1️⃣ Kaarten mogen niet centreren */
/* ❌ Niet toepassen op packages block */
.kb-block:not(.kb-block-packages-block) [class*="card"],
.kb-block:not(.kb-block-packages-block) [class*="item"],
.kb-block:not(.kb-block-packages-block) [class*="service"],
.kb-block:not(.kb-block-packages-block) [class*="box"],
.kb-block:not(.kb-block-packages-block) [class*="content"] {
  text-align: left !important;
  align-items: flex-start !important;
}


  /* 2️⃣ Echte tekst altijd links */
  .kb-block p,
  .kb-block li,
  .kb-block blockquote,
  .kb-block h1,
  .kb-block h2,
  .kb-block h3,
  .kb-block h4,
  .kb-block h5,
  .kb-block h6 {
    text-align: left !important;
  }

  /* 3️⃣ Inline center killen */
  .kb-block [style*="text-align:center"],
  .kb-block [style*="text-align: center"] {
    text-align: left !important;
  }

}


@media (max-width: 1024px) {

  .kb-block-packages-block .packages-block-card-title,
  .kb-block-packages-block .packages-block-price-wrapper {
    text-align: center !important;
  }

  .kb-block-packages-block .packages-block-features {
    text-align: left !important;
  }

  .kb-block-packages-block .packages-block-button {
    margin: 20px auto 0 auto !important;
  }

}









/* =========================================
   USP BLOCK — MOBILE & TABLET FIX
========================================= */

@media (max-width: 1199px) {

  .kb-block-usp-block .usp-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .kb-block-usp-block .usp-card {
    text-align: center;
    padding: 26px 20px;
  }

  .kb-block-usp-block .usp-icon {
    margin-left: auto;
    margin-right: auto;
  }

}



/* =========================================
   AGENCYFOOTER — MOBILE/TABLET CENTER (HARD)
   (zet dit HELEMAAL onderaan je footer CSS)
========================================= */

@media (max-width: 1199px) {

  .kb-block-agencyfooter-block .agencyfooter-block-grid{
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  /* elke kolom in het midden */
  .kb-block-agencyfooter-block .agencyfooter-block-grid > div{
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

  /* TITELS + LIJSTEN + LINKS echt centreren */
  .kb-block-agencyfooter-block .agencyfooter-block-grid h4,
  .kb-block-agencyfooter-block .agencyfooter-block-grid ul,
  .kb-block-agencyfooter-block .agencyfooter-block-grid li,
  .kb-block-agencyfooter-block .agencyfooter-block-grid a,
  .kb-block-agencyfooter-block .agencyfooter-block-grid p{
    text-align: center !important;
  }

  /* ul reset zodat center netjes werkt */
  .kb-block-agencyfooter-block .agencyfooter-block-grid ul{
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* links als "blokje" centreren */
  .kb-block-agencyfooter-block .agencyfooter-block-grid li{
    width: 100% !important;
  }
  .kb-block-agencyfooter-block .agencyfooter-block-grid li a{
    display: inline-block !important;
  }

  /* logo + social center */
  .kb-block-agencyfooter-block .agencyfooter-block-logo{
    display: block !important;
    margin: 0 auto 20px auto !important;
  }
  .kb-block-agencyfooter-block .agencyfooter-block-social{
    justify-content: center !important;
  }

  /* social iets kleiner op mobiel */
  @media (max-width: 640px){
    .kb-block-agencyfooter-block .agencyfooter-block-social a{
      width: 34px !important;
      height: 34px !important;
    }
  }
}

/* ===============================
   Widescreen polish (≥1600px)
   =============================== */
@media (min-width: 1600px) {
  .kb-block-inner {
    max-width: 1440px;
  }
}

@media (min-width: 1920px) {
  .kb-block-inner {
    max-width: 1600px;
  }
}