/*
 Theme Name: Drife Wordpress
 Theme URI: https://drife.nl
 Description: Design en development door Drife
 Author: Dave Verheijen
 Author URI: https://drife.nl
 Template: Divi
 Version: 1.0.5
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

/* ------------------------------------------------------------------
   Pijl- en icoon-knoppen: image-module genest in button-module.
   Divi 5 rendert die image als SIBLING van de <a> i.p.v. erin, waardoor
   de afbeelding oprekt naar de volle kolombreedte en de <a> een lege
   pill van 40px blijft. Divi heeft geen instelling om dit te nesten.
   Oplossing: <a> en afbeelding met CSS-grid over elkaar leggen, zodat
   de <a> de achtergrond-pill wordt (118x46 bij de 80x24 pijl-SVG,
   wat overeenkomt met de bestaande max-width:120px).
   Toegevoegd 16-09-2026.
   ------------------------------------------------------------------ */

.et_pb_button_module_wrapper:has(> .et_pb_image) {
  display: inline-grid;
  grid-template-areas: "btn";
  place-items: center;
  width: max-content !important;
  align-self: center; /* verticaal t.o.v. de tekst; flex-end of flex-start kan ook */
}

.et_pb_button_module_wrapper:has(> .et_pb_image) > a.et_pb_button,
.et_pb_button_module_wrapper:has(> .et_pb_image) > .et_pb_image {
  grid-area: btn;
}

/* De <a> vult de cel en levert achtergrond + border-radius. */
body #page-container .et_pb_button_module_wrapper:has(> .et_pb_image) > a.et_pb_button {
  place-self: stretch;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0;
  line-height: 0 !important;
}

/* Marge rond de afbeelding vervangt de padding van de knop. */
.et_pb_button_module_wrapper:has(> .et_pb_image) > .et_pb_image {
  margin: 11px 19px !important;
  width: auto;
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* Footer-socials hadden padding 11px 12px i.p.v. 11px 19px. */
.et_pb_button_module_wrapper[class*="_tb_footer"]:has(> .et_pb_image) > .et_pb_image {
  margin: 11px 12px !important;
}

.et_pb_button_module_wrapper:has(> .et_pb_image) > .et_pb_image .et_pb_image_wrap {
  display: block;
}

/* Vaste hoogte, breedte volgt uit de aspect-ratio van de SVG:
   arrow-right-02.svg -> 80x24, social-icons -> 24x24. */
.et_pb_button_module_wrapper:has(> .et_pb_image) > .et_pb_image img {
  display: block;
  height: 24px;
  width: auto;
  max-width: none;
}

/* ------------------------------------------------------------------
   Kaart-CTA's ("Meer info" / "Tickets kopen"): de knop sluit om zijn
   tekst i.p.v. de volle kaartbreedte te pakken.

   Globaal op structuur i.p.v. klassenummers: .et_pb_button_0/2/4/6 zijn
   paginaspecifiek. Op /agenda/ zijn diezelfde nummers juist de "Tickets
   kopen"-knoppen, dus daarop scopen ging mis. Deze selector pakt elke
   groep met een knop met de "Meer info"-preset, plus de "Tickets kopen"-
   broer ernaast (die zelf geen preset heeft).

   flex-shrink:0 is nodig voor /agenda/: daar staat de wrapper als
   flex-item in een rij en werd de knop platgedrukt, waardoor "Tickets
   kopen" over twee regels brak (135x78 i.p.v. 187x51). Per kaart is er
   altijd maar een van de twee zichtbaar, dus ze verdringen elkaar niet.

   Divi zet width:100% via Ontwerp -> Afmetingen -> Breedte. Die regel
   staat in et-core-unified-*.css en wordt bij elke cache-clear opnieuw
   gegenereerd, dus hier geneutraliseerd i.p.v. verwijderd. Terugdraaien:
   deze regels weghalen EN de breedte in de Divi-builder zetten.
   Toegevoegd 16-09-2026.
   ------------------------------------------------------------------ */

.et_pb_group:has(> .et_pb_button_module_wrapper .preset--module--divi-button--vaehe72gvn) > .et_pb_button_module_wrapper {
  width: fit-content;
  flex-shrink: 0;
}

.et_pb_group:has(> .et_pb_button_module_wrapper .preset--module--divi-button--vaehe72gvn) > .et_pb_button_module_wrapper > .et_pb_button {
  width: auto !important;
}