/*-------------------------------CONTACTGEGEVENS--------------------------*/

/* Versie 5 augustus 2026 15u10*/

/* Verberg website-icoon */
.wpbdp-field-website .value i, {
  display: none !important;
}

/* Voor gevallen waar het een background-icon is */
.wpbdp-field-website .value, {
  background: none !important;
}



/* ------Contactgegevens opmaak met tab------ */
/* Basis layout voor contactvelden */
.wpbdp-field-website,
.wpbdp-field-e-mailadres,
.wpbdp-field-telefoon,
.wpbdp-field-adres {
  display: grid;
  grid-template-columns: 140px 1fr; /* tabafstand */
  column-gap: 0.5rem;

  margin-bottom: 0.15rem; /* compacter */
  line-height: 1.3;
  padding: 0 !important;
}

/* Waarde (rechts) */
.wpbdp-field-website .value,
.wpbdp-field-e-mailadres .value,
.wpbdp-field-telefoon .value,
.wpbdp-field-adres .value {
  margin: 0;
}



/*-------------------------------HOOFDTITEL UITLIJNEN MET TEKST--------------------*/
/* Laat de header in dezelfde max-width container vallen als de content */
.entry-header {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding-left: var(--wp--style--root--padding-left, 1.5rem);
  padding-right: var(--wp--style--root--padding-right, 1.5rem);
}


/* En zorg dat de titel links uitgelijnd is: */
.entry-title {
  text-align: left !important;
}


/*-------------------------------TITELS DONKERBLAUW--------------------------*/
/* Alle Business Directory veld-titels */
.wpbdp-field .field-label {
  color: #175272 !important;   /* jouw donkerblauw */
  font-weight: 600;            /* optioneel: iets steviger */
}


/*-------------------------------BREEDTE SFEERFOTO EN VERHOUDING--------------------------*/

/* Sfeerfoto: responsive breedte, 3:2 verhouding, bijsnijden */
.wpbdp-field-sfeerfoto .listing-image {
  width: 100% !important; /* Negeer inline width:300px */
  max-width: 100%;
}

/* Behoud 3:2 verhouding, bijsnijden indien nodig */
.wpbdp-field-sfeerfoto img {
  width: 100%;
  aspect-ratio: 3 / 2; /* Forceer 3:2 verhouding */
  object-fit: cover; /* Bijsnijden in plaats van vervormen */
  display: block;
  border-top-left-radius: 8px;   /* Linkerbovenhoek */
  border-top-right-radius: 8px;  /* Rechterbovenhoek */
  border-bottom-left-radius: 0;  /* Linkeronderhoek (niet afgerond) */
  border-bottom-right-radius: 0; /* Rechteronderhoek (niet afgerond) */
}

/* Mobiel: beeld vult schermbreedte, verhouding blijft 3:2 */
@media (max-width: 768px) {
  .wpbdp-field-sfeerfoto img {
    width: 100% !important;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/*-------------------------------Global Goals aansluiten bij sfeerfoto--------------------------*/
/* Stijl voor beide Global Goals-blokken */
.wpbdp-field-global_goals_hoofddoelen,
.wpbdp-field-global_goals_nevendoelen {
  background: #c9e5f4; /* Huisstijl lichtblauw */
  padding: 0.75rem 1rem;
  margin: 0;
  border-bottom-left-radius: 8px;  /* Afronden onderhoeken */
  border-bottom-right-radius: 8px;
  border-top-left-radius: 0;       /* Bovenhoeken scherp */
  border-top-right-radius: 0;
}

/* Zorg dat de blokken de volle breedte innemen en goed aansluiten */
.wpbdp-field-global_goals_hoofddoelen,
.wpbdp-field-global_goals_nevendoelen {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/*-------------------------------VRIJWILLIGERSVACATURE UITLICHTEN--------------------------*/
/* Laat de pointer alleen zien bij hover op de link */
.wpbdp-field-doe_mee_als_vrijwilliger {
  background: #c9e5f4;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin: 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  cursor: default; /* Geen pointer voor de hele card */
}

.wpbdp-field-doe_mee_als_vrijwilliger .value a {
  color: #175272;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer; /* Pointer alleen bij de link */
}

.wpbdp-field-doe_mee_als_vrijwilliger .value a:hover {
  text-decoration: underline;
}

/* Hover-effect alleen op de link */
.wpbdp-field-doe_mee_als_vrijwilliger:hover {
  background: #c9e5f4; /* Geen kleurverandering bij hover op de card */