/* Aanpassingen voor de opmaak van Elementor. De stijl zelf komt uit dist/ (dezelfde CSS als de
   statische site); hier alleen wat nodig is omdat Elementor eigen divs en standaardwaarden toevoegt. */

/* Containers met een rol (laag, binnenkant): geen flex, geen standaardpadding of tussenruimte van
   Elementor. .kh-con staat er op de site, .kh-role-* in de editor. */
.e-con.kh-con,
.e-con[class*="kh-role-layer"] {
  display: block;
  gap: 0;
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

/* header- en footer-template: de container om de widget heen voegt niets toe (klasse kh-bare) */
.e-con.kh-bare { display: block; gap: 0; padding: 0; margin: 0; max-width: none; width: 100%; }

/* een sectie als container (HTML-tag section) met onze klasse houdt zijn eigen padding uit de
   CSS; alleen de flexopbouw van Elementor gaat eruit */
.e-con:where(.intro, .closing, .services, .craft, .features, .steps) { display: block; gap: 0; }

/* motion.css rondt de sectie direct onder .layer__inner af; bij een widget zit er één div tussen */
.layer__inner > .elementor-widget:first-child > section:first-child {
  border-top-left-radius: var(--layer-top, 0); border-top-right-radius: var(--layer-top, 0);
}
.layer--cover > .layer__inner > .elementor-widget:first-child > section:first-child { border-radius: 0; }

/* Elementor zet `figure { margin: 0 }` in elke widget, met hoge specificiteit
   (.elementor .elementor-widget:not(…):not(…) figure). De figure-marges uit onze CSS staan hier
   opnieuw, met net iets meer gewicht. */
.elementor .elementor-element.elementor-widget figure.review:nth-child(2) { margin-top: 4rem; } /* licht verspringen */
.elementor .elementor-element.elementor-widget figure.case__quote { margin: 1rem 0 0; }
@media (max-width: 47.99em) {
  .elementor .elementor-element.elementor-widget figure.review:nth-child(2) { margin-top: 0; }
}

/* Elementor zet max-width: 100% op elke widget in een container (.elementor.elementor .e-con >
   .elementor-widget). De intro is een tekstwidget met onze klasse: zijn regelbreedte (sections.css)
   hier opnieuw, met meer gewicht. */
.elementor.elementor .e-con > .elementor-widget.intro__statement { max-width: 24ch; }
@media (max-width: 47.99em) {
  .elementor.elementor .e-con > .elementor-widget.intro__statement { max-width: none; }
}

/* tekstwidget met een effect: de <p> erin neemt de opmaak van de widget over */
.elementor-widget-text-editor:where([data-fill-words], [data-split-lines], .intro__statement) > p { max-width: none; }

/* In de editor staat alles stil in de beginstand. De hero is daar één scherm hoog en de
   intro (kh-intro) draait niet, dus kop en hero zijn meteen zichtbaar. */
.kh-editor .site-header { position: absolute; }
/* in het header-template zelf staat de kop op een wit canvas: daar met zijn groene vlak, zodat hij te zien is */
.kh-editor.single-elementor_library .site-header { position: relative; background: var(--green); }
.kh-editor .float-cta { display: none; }