/* ==========================================================================
   Elementor-compatibiliteit
   --------------------------------------------------------------------------
   Elementor stopt elke widget in twee extra divs:

       <div class="elementor-element ONZE-CLASSES">
         <div class="elementor-widget-container">
           <p>tekst</p>
         </div>
       </div>

   Daardoor werken een paar van onze regels niet meer, namelijk die met het
   teken > erin. Hieronder staan de ontspannen varianten. Alleen deze paar,
   de rest van de stylesheet werkt gewoon.
   ========================================================================== */

/* Was .stap>p */
.stap p { font-size: 14.5px; color: var(--zacht); margin-bottom: 20px; }
.stap .elementor-widget-container > p:last-child { margin-bottom: 0; }

/* Was .kaart>p */
.kaart p { font-size: 14.5px; color: var(--zacht); margin-bottom: 24px; }
.kaart .rij p,
.kaart .rij span { margin-bottom: 0; }

/* Elementor zet standaard marge onder een tekstverwerker. */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Knoppen
   Een Knop-widget krijgt onze classes op de buitenste div, niet op de link
   zelf. Hieronder geven we de link binnen zo'n widget onze opmaak.
   ========================================================================== */
.elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Archivo', sans-serif;
	font-stretch: 92%;
	font-weight: 600;
	font-size: 14.5px;
	padding: 13px 26px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: transparent;
	transition: .18s;
	text-decoration: none;
}
.elementor-widget-button .elementor-button-content-wrapper { gap: 8px; }
.elementor-widget-button .elementor-button-icon { display: none; }

.elementor-element.btn-p .elementor-button { background: var(--accent); color: #fff; }
.elementor-element.btn-p .elementor-button:hover { background: var(--accent-h); color: #fff; }

.elementor-element.btn-s .elementor-button { background: transparent; color: var(--tekst); border-color: var(--rand2); }
.elementor-element.btn-s .elementor-button:hover { border-color: var(--tekst); color: var(--tekst); }

.elementor-element.btn-v .elementor-button { background: var(--paneel2); color: var(--tekst); border-color: var(--rand); }
.elementor-element.btn-v .elementor-button:hover { border-color: var(--rand2); }

.elementor-element.btn-w .elementor-button { background: #fff; color: var(--navy, #0E1A33); }
.elementor-element.btn-w .elementor-button:hover { background: var(--paneel2); }

.elementor-element.btn-g .elementor-button { background: none; padding: 0; color: var(--accent); }
.elementor-element.btn-g .elementor-button:hover { color: var(--tekst); }

/* Een knop in een lijst met knoppen niet laten uitrekken. */
.knoppen .elementor-widget-button,
.hero-cta .elementor-widget-button { width: auto; }

/* ==========================================================================
   Koppen
   De Heading-widget zet een eigen class op de kop. Onze regels werken via
   de bovenliggende container, dus die blijven kloppen. Dit is alleen om de
   standaardmarge van Elementor weg te halen.
   ========================================================================== */
.elementor-widget-heading .elementor-heading-title { margin: 0; }

/* ==========================================================================
   Afbeeldingen
   Let op: hier bewust GEEN width:100% op elke afbeelding. Dat blies kleine
   plaatjes zoals de klantfoto's en de logo's op tot schermbreedte. De breedte
   komt uit onze eigen stylesheet, bijvoorbeeld .pshot img of .twie img.
   ========================================================================== */
.elementor-widget-image { line-height: 0; }
.elementor-widget-image img { max-width: 100%; height: auto; display: block; }
.elementor-widget-image figure,
.elementor-widget-image .elementor-image { margin: 0; }

/* Alleen de grote schermafbeeldingen vullen de breedte. */
.frame .elementor-widget-image img,
.pshot .elementor-widget-image img,
.mtegel .elementor-widget-image img,
.beeld .elementor-widget-image img,
.shot .elementor-widget-image img { width: 100%; }

/* ==========================================================================
   Containers
   Onze eigen lay-out staat in de stylesheet. Elementor zet daar zijn eigen
   flex-instellingen overheen, dus die zetten we terug voor de containers die
   bij ons een raster zijn.
   ========================================================================== */
.e-con.stappen, .e-con.bento, .e-con.mgrid, .e-con.tgrid, .e-con.plans,
.e-con.egrid, .e-con.lgrid, .e-con.split, .e-con.fgrid, .e-con.rfwrap,
.e-con.chap, .e-con.heroin { display: grid; }

.e-con.hero-cta, .e-con.knoppen, .e-con.klanten, .e-con.usps,
.e-con.legenda, .e-con.twie, .e-con.rij, .e-con.kop { display: flex; }

/* Elementor geeft containers een minimale hoogte en een gat. Dat willen we
   zelf bepalen. */
.e-con > .e-con-inner { padding: 0; }
.elementor-element.ar-blok,
.elementor-element[class*="ar-blok-"] { width: 100%; max-width: none; padding: 0; }

/* ==========================================================================
   Breedte van widgets
   Elementor laat een widget standaard de volle breedte innemen. In een rij,
   zoals bij twee knoppen naast elkaar, moet hij juist zo breed zijn als zijn
   inhoud. Hieronder alle plekken waar dat geldt.
   ========================================================================== */
.elementor-widget { width: 100%; }

.hero-cta > .elementor-element,
.knoppen > .elementor-element,
.usps > .elementor-element,
.klanten > .elementor-element,
.legenda > .elementor-element,
.twie > .elementor-element,
.kop > .elementor-element,
.rij > .elementor-element,
.cap > .elementor-element,
.tarief > .elementor-element,
.merkje > .elementor-element,
.label > .elementor-element {
	width: auto;
	flex: 0 0 auto;
}

/* Containers die bij ons een rij of raster zijn, moeten dat blijven. */
.e-con.hero-cta, .e-con.knoppen, .e-con.klanten, .e-con.usps,
.e-con.legenda, .e-con.twie, .e-con.rij, .e-con.kop, .e-con.cap,
.e-con.faces, .e-con.tster { flex-direction: row; align-items: center; }

.e-con.hero-cta, .e-con.knoppen, .e-con.usps, .e-con.klanten,
.e-con.legenda { flex-wrap: wrap; }

/* Elementor zet een minimale hoogte op containers. */
.e-con { min-height: 0; }