/* 
 Theme Name:     Bare bones for Divi
 Author:         Divi theme examples
 Author URI:     http://www.divithemeexamples.com 
 Template:       Divi
 Version:        1.0 
*/ 


/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 

/* ===== Header: desktop fixed + hide-until-scroll, mobiel in-flow (mee scrollen) ===== */

/* === DESKTOP (≥ 981px): header fixed en pas zichtbaar na scroll === 
@media (min-width: 981px){
  .pa-header-hide-before-scroll{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    transform: translateY(-120%);
    opacity: 0;
    transition: transform 300ms ease, opacity 300ms ease;
    pointer-events: none;
  }
  .pa-header-hide-before-scroll.is-visible{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}
*/

/* === MOBIEL (< 981px): header niet fixed, altijd zichtbaar ===
@media (max-width: 980px){
  .pa-header-hide-before-scroll{
    position: relative !important;
    top: auto !important;
    left: auto; right: auto;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
    transition: none;
    z-index: 3;
  }
} */

/* === BUILDER: altijd zichtbaar en selecteerbaar === */
body.et-fb .pa-header-hide-before-scroll,
body.et-tb-editor .pa-header-hide-before-scroll,
html.et-fb-preview--active .pa-header-hide-before-scroll{
  position: relative;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.et-fb .pa-header-hide-before-scroll[style*="position:sticky"],
body.et-tb-editor .pa-header-hide-before-scroll[style*="position:sticky"]{
  position: relative !important;
  top: auto !important;
}

.evt-link {
	width: 180px;
}

@media (max-width: 768px){
	.evt-link {
	width: 100%;
	}
}
	
/* Single event afbeelding kleiner op desktop */
.single-tribe_events .tribe-events-event-image img,
.single-tribe_events .tribe-events-single-event__featured-image img,
.single-tribe_events .wp-post-image{ width:30% !important; height:auto; }
@media (max-width: 767px){
  .single-tribe_events .tribe-events-event-image img,
  .single-tribe_events .tribe-events-single-event__featured-image img,
  .single-tribe_events .wp-post-image{ width:100% !important; }
}

/***** DONATEURS PAGINA ******/
/***** DONATEURS FLEXGRID – NL versie *****/
:root { --donor-gap: 30px; }

/* basis */
.et_pb_text_inner > .donor-grid-goud,
.et_pb_text_inner > .donor-grid-zilver,
.et_pb_text_inner > .donor-grid-brons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--donor-gap);
}

/* Goud – 3 per rij */
.donor-grid-goud .et_pb_image {
  flex: 0 0 calc((100% - (var(--donor-gap) * 2)) / 3);
  max-width: calc((100% - (var(--donor-gap) * 2)) / 3);
}

/* Zilver – 4 per rij */
.donor-grid-zilver .et_pb_image {
  flex: 0 0 calc((100% - (var(--donor-gap) * 3)) / 4);
  max-width: calc((100% - (var(--donor-gap) * 3)) / 4);
}

/* Brons – 5 per rij */
.donor-grid-brons .et_pb_image {
  flex: 0 0 calc((100% - (var(--donor-gap) * 4)) / 5);
  max-width: calc((100% - (var(--donor-gap) * 4)) / 5);
}

/* Tablet – 2 per rij */
@media (max-width: 980px) {
  .donor-grid-goud .et_pb_image,
  .donor-grid-zilver .et_pb_image,
  .donor-grid-brons .et_pb_image {
    flex-basis: calc((100% - var(--donor-gap)) / 2);
    max-width: calc((100% - var(--donor-gap)) / 2);
  }
}

/* Phone – 1 per rij 
@media (max-width: 480px) {
  .donor-grid-goud .et_pb_image,
  .donor-grid-zilver .et_pb_image,
  .donor-grid-brons .et_pb_image {
    flex-basis: 100%;
    max-width: 100%;
  }
}*/

/* Logo's */
.donor-grid-goud img,
.donor-grid-zilver img,
.donor-grid-brons img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Hover effect per logo */
.donor-grid-goud .et_pb_image img,
.donor-grid-zilver .et_pb_image img,
.donor-grid-brons .et_pb_image img {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* 🔗 Alleen logo’s met echte link reageren op hover */
.donor-grid-goud a.has-link img,
.donor-grid-zilver a.has-link img,
.donor-grid-brons a.has-link img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.donor-grid-goud a.has-link:hover img,
.donor-grid-zilver a.has-link:hover img,
.donor-grid-brons a.has-link:hover img {
  transform: scale(1.03);
}

/* 🚫 Logo’s zonder link: géén hover, géén cursor, géén effect */
.donor-grid-goud span.no-link img,
.donor-grid-zilver span.no-link img,
.donor-grid-brons span.no-link img {
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
}



/* === VivaPinoso evenementen: "Meer info" onderaan uitlijnen === */

/* 1) Elke tegel mag zijn inhoud op volle hoogte laten lopen */
.event_calendar_module__inner .event-container{
  display:flex !important;
}

/* 2) De kaart vult de tegel en is een kolom */
.event_calendar_module__inner .event-container > .main-layout-container{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  width:100% !important;
  height:100% !important;
}

/* 3) Detailsgebied + binnenste wrapper laten groeien */
.event_calendar_module__inner .main-layout-container .details-column{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}

/* >>> HIER zat het probleem: dit is de echte ouder van de knop <<< */
.event_calendar_module__inner .details-column > .decm-show-detail-center{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important; /* voorkomt overflow in flex */
}

/* 4) Duw de knop naar de onderkant binnen de kaart */
.event_calendar_module__inner .details-column .event__show_more_if{
  margin-top:auto !important;
}

/* (optie) knop centreren met vaste max-breedte 
.event_calendar_module__inner .event__show_more_if a.act-view-more.et_pb_button{
  display:block !important;
  max-width:200px;
  margin:0 auto 10px auto;
}*/

/* (optie) voorkom dat de image-column onnodig meerekt */
.event_calendar_module__inner .main-layout-container .image-column{
  flex:0 0 auto !important;
}

/* Style voor de "Meer info" knop */
.event_calendar_module__inner .event__show_more_if a.act-view-more.et_pb_button {
  display: block !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  box-sizing: border-box;

  background-color: #8b88c0 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-size: 20px !important;
  line-height: 1.2 !important;

  transition: background-color 0.3s ease, transform 0.2s ease;
  transform-origin: center; /* belangrijk: laat hem netjes uit het midden groeien */
}

/* Hover effect: iets donkerder + 102% schaal */
.event_calendar_module__inner .event__show_more_if a.act-view-more.et_pb_button:hover {
  background-color: #7a77ad !important;
  transform: scale(1.02);
}

/* Verwijder standaard Divi pijltje */
.event_calendar_module__inner .event__show_more_if a.act-view-more.et_pb_button:after {
  display: none !important;
  content: none !important;
}

/* 1) Verberg de originele "Date:" tekst overal */
.decm-show-detail-center .event__date_label.ecs-detail-label{
  font-size: 0 !important;
  line-height: 1;
}

/* 2) Toon per taal de juiste labeltekst via ::after
   Let op ^="xx" zodat nl / nl-NL / nl_BE allemaal matchen. */

/* Nederlands */
html[lang^="nl"] .decm-show-detail-center .event__date_label.ecs-detail-label::after{
  content: 'Datum:\00a0';
  font-size: 14px !important;
  line-height: 1.4;
  display: inline;
}

/* Spaans */
html[lang^="es"] .decm-show-detail-center .event__date_label.ecs-detail-label::after{
  content: 'Fecha:\00a0';
  font-size: 14px !important;
  line-height: 1.4;
  display: inline;
}

/* Engels */
html[lang^="en"] .decm-show-detail-center .event__date_label.ecs-detail-label::after{
  content: 'Date:\00a0';
  font-size: 14px !important;
  line-height: 1.4;
  display: inline;
}



@media (min-width: 981px){
  .et_pb_row.vp-gap-tight {
    width: unset !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Zet GTranslate vlaggen naast elkaar */
.gtranslate_wrapper {
	display: flex !important;
	gap: 5px; /* ruimte tussen vlaggen */
	align-items: center;
	justify-content: flex-start; 
	margin-top: -8px;
}

/* Zorg dat de links niet breken */
.gtranslate_wrapper a {
	display: inline-flex;
}

/* === GTranslate vlaggen: geen overlay / geen hover-dimming === */
.et-l--header .gtranslate_wrapper a,
.et-l--header .gtranslate_wrapper a:link,
.et-l--header .gtranslate_wrapper a:visited,
.et-l--header .gtranslate_wrapper a:hover,
.et-l--header .gtranslate_wrapper a:focus,
.et-l--header .gtranslate_wrapper a:active{
  opacity: 1 !important;
  filter: none !important;
  background: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* haal pseudo-overlays van Divi weg (sommige menu-stijlen gebruiken ::after) */
.et-l--header .gtranslate_wrapper a::before,
.et-l--header .gtranslate_wrapper a::after{
  display: none !important;
  content: none !important;
}

/* zorg dat de vlaggen zelf nooit dimmen of grijs worden */
.et-l--header .gtranslate_wrapper img{
  display: block;
  opacity: 1 !important;
  filter: none !important;          /* geen grayscale/brightness */
  mix-blend-mode: normal !important;
  transition: none !important;
}

/* als GTranslate de 'current lang' of andere klassen dimt */
.gtranslate_wrapper .glink.gt-current-lang img,
.gtranslate_wrapper .glink img{
  opacity: 1 !important;
  filter: none !important;
}

/* Hover-effect vlaggen – extra vloeiend en geforceerd */
.gtranslate_wrapper a img {
  display: block;
  transform: scale(1);
  transition-property: transform !important;
  transition-duration: 0.6s !important;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1) !important; /* zachte easing */
  will-change: transform;
}

.gtranslate_wrapper a:hover img {
  transform: scale(1.12); /* subtieler zoomniveau */
}

/* === Hele module zacht laten groeien op hover === */
.vp-zoom.et_pb_image {
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

.vp-zoom.et_pb_image:hover {
  transform: scale(1.03); /* Vergroting van het hele blok */
}

/* Behoud nette afrondingen en schaduwen */
.vp-zoom .et_pb_image_wrap {
  overflow: hidden;
  border-radius: inherit;
}

/* Eventuele interne img blijft stabiel */
.vp-zoom img {
  width: 100%;
  height: auto;
  transform: none !important;
  transition: none !important;
}

.et_pb_row.single-event-details .et_pb_module * {
    padding-left: 0;
	padding-right: 0;
}

/* Control de Nieuwjaars PopUp */
#page-container #popup-row { 
  display: none; 
}

#page-container #popup-row.is-open { 
  display: flex; /* of block, als je geen flex wil */
}

/* Viva Pinoso – links altijd onderstreept bij hover (sitebreed) behalve Divi buttons */
a:hover:not(.et_pb_button),
a:focus:not(.et_pb_button) {
  text-decoration: underline !important;
}