/* ==========================================================
   eigen.css - eigen aanpassingen David Simon (laadt na template-CSS)
   Hier kan je rustig in aanpassen. Alles staat per onderdeel.
   ========================================================== */

/* 2. Witruimte tussen secties: overal gelijk (40px + 40px = 80px) */
section.home-space { padding-top: 40px !important; padding-bottom: 40px !important; }
.home-band { margin: 40px 0; }
/* tekst in de bandfoto: ruimte onder het streepje */
.home-band .ce-title-line + p { margin-top: 28px; font-size: 18px; line-height: 1.6; }
@media (max-width: 767px) {
  section.home-space { padding-top: 20px !important; padding-bottom: 20px !important; }
  .home-band { margin: 20px 0; }
}

/* 3. Titel werkwijze */
.werkwijze-titel { color: #222; }

/* 4. Reviews: in rust enkel sterren, bij hover tekst + voornaam */
.review-box .img-box { overflow: hidden; }
.review-box .img-box .overlay { top: 0; bottom: 0; height: 100%; }
.review-box .img-box .overlay .text-box {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto !important;
  width: 100%; margin: 0; padding: 18px 28px 24px; float: none;
  transform: translateY(calc(100% - 104px));
  transition: transform .35s ease-out;
}
.review-box .img-box .overlay:hover .text-box { top: auto !important; transform: translateY(0); }
.review-box .text-box .title { padding-top: 0; margin: 0 0 14px; font-size: 26px; letter-spacing: 4px; color: #b8862b; }
.review-box .text-box .small-text { font-size: 14px; line-height: 1.55; color: #444; margin: 0 0 14px; }
.review-box .text-box br { display: none; }
@media (max-width: 991px) {
  /* geen hover op touch: alles zichtbaar */
  .review-box .img-box .overlay .text-box { transform: none; }
}

/* 7. Contrast (minstens 4.5:1) */
.ce-feature-box-64 .title { color: #333 !important; }
.ce-title-top-text { color: #555 !important; }
.sec-title-container p, section p.content, section p { color: #555; }


/* ---------- Ronde 2 ---------- */
/* H1: evenveel ruimte boven als onder (80px) */
section.home-h1 { padding-top: 80px !important; }
.home-h1 .sec-title-container { padding-bottom: 0; }
.home-h1 h1 { margin-bottom: 0; }
@media (max-width: 767px) { section.home-h1 { padding-top: 40px !important; } }

/* Tekst op bandfoto: wit en leesbaar (overschrijft de grijze tekstkleur) */
.home-band .sec-title-container p,
.home-band .ce-title-line + p {
  color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.65);
}

/* Reviews: vakken smaller (80%), vierkante foto, gouden sterren */
.review-box .img-box img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.review-box .img-box .overlay .text-box { left: 10%; right: auto; width: 80%; }
.ce-feature-box-11.review-box .img-box .overlay .text-box .title { color: #b8862b !important; }


/* ---------- Home-slider (vervangt Revolution Slider) ----------
   Markup: #home-slider in index.html, script: js/home-slider.js
   Slides wisselen met een fade, Ken Burns = trage inzoom van 20 s. */
.home-slider { position: relative; width: 100%; height: 850px; overflow: hidden; background: #ddd; }
@media (max-width: 1239px) { .home-slider { height: 730px; } }
@media (max-width: 1023px) { .home-slider { height: 600px; } }
@media (max-width: 777px)  { .home-slider { height: 420px; } }

.hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.5s ease, visibility 0s 1.5s; }
.hs-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.5s ease; z-index: 2; }
.hs-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: transform 0s 1.5s; }
.hs-slide.is-active .hs-bg { transform: scale(1.2); transition: transform 20s linear; }

.hs-content {
  position: absolute; inset: 0; z-index: 3; box-sizing: border-box;
  padding: 32% 20px 0; display: flex; flex-direction: column; align-items: center;
  text-align: center; font-family: Arial, Helvetica, sans-serif; color: #1f2a2e;
}
@media (min-width: 1240px) { .hs-content { padding-top: 270px; } }
.hs-small {
  font-size: 17px; line-height: 1.4; font-weight: 600; text-transform: uppercase;
  color: #000; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; padding: 4px 16px; margin-bottom: 14px;
}
.hs-title {
  font-size: clamp(28px, 5.6vw, 70px); line-height: 1.4; font-weight: 700;
  text-shadow: 0 0 14px rgba(255,255,255,.55); animation: none;
}
.hs-btn { margin-top: 40px; background: #cdbea9; color: #fff; padding: 12px 30px; font-size: 14px; line-height: 14px; text-transform: uppercase; transition: background .3s, color .3s; }
.hs-btn a { color: inherit; text-decoration: none; }
.hs-btn:hover { background: #fff; color: #101010; }
/* donkere foto (slide 2): witte tekst */
.hs-light { color: #fff; }
.hs-light .hs-small { background: none; color: #fff; padding: 0 16px; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.hs-light .hs-title { text-shadow: 0 2px 12px rgba(0,0,0,.55); }
@media (max-width: 777px) { .hs-small { font-size: 15px; } .hs-btn { margin-top: 24px; } }

.hs-arrow { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); width: 50px; height: 50px; border: 0; background: transparent; color: #fff; font-size: 32px; cursor: pointer; opacity: .8; text-shadow: 0 0 8px rgba(0,0,0,.6); }
.hs-arrow:hover { opacity: 1; }
.hs-prev { left: 30px; } .hs-next { right: 30px; }
@media (max-width: 777px) { .hs-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .hs-slide.is-active .hs-bg { transform: none; transition: none; } .hs-slide, .hs-slide.is-active { transition: none; } }


/* ---------- Ronde 3 ---------- */
/* Reviews: voornaam als gewone tekst (geen knop, geen hover-effect) */
.review-box .review-naam { font-size: 15px; font-weight: 400; color: #222; }
/* Tekst onder de reviews: evenveel ruimte boven (reviews) als onder (collage) */
section.home-seo { padding-top: 72px !important; padding-bottom: 10px !important; }
@media (max-width: 767px) { section.home-seo { padding-top: 30px !important; padding-bottom: 10px !important; } }


/* ---------- Mobiel/tablet: reviews groeien mee met de tekst ---------- */
@media (max-width: 991px) {
  .review-box .img-box { overflow: visible !important; }
  .review-box .img-box .overlay { position: static !important; height: auto !important; overflow: visible !important; }
  .review-box .img-box .overlay .text-box { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 88% !important; height: auto !important; margin: -56px auto 0 !important; overflow: visible !important; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
  .review-box { margin-bottom: 24px; }
}

/* ---------- Witruimte en padding (alle breedtes) ---------- */
/* Gekleurde band met foto: evenveel ruimte boven als onder de tekst */
.home-band .sec-title-container { padding-bottom: 0 !important; }
.home-band .sec-title-container p { margin-bottom: 0 !important; }
.home-band .sec-title-container > br { display: none; }
/* Geen extra lege regel en marge onderaan de tekstkolom */
.home-space .col-md-5 > br:last-child { display: none; }
@media (max-width: 991px) {
  .home-space .row > [class*="col-"]:last-child { margin-bottom: 0; }
}

/* ---------- Koppen: een centrale plek voor de groottes ---------- */
h2 { font-size: 35px; }
@media (max-width: 767px) {
  .review-box .text-box .title { line-height: 1.2 !important; }
}