/* =====================================================================
   Smitclub Childtheme for Divi - Custom CSS
   Dit bestand hoort op: wp-content/themes/smitclub-childtheme-for-divi/css/custom.css
   ===================================================================== */

.moderator-foto .et_pb_image_wrap,
.moderator-foto .et_pb_image_wrap img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}
/* 1. Verberg het Instagram font-icoon (specifiek voor Divi Booster Team Member) */
.db_pb_team_member_instagram_icon::before {
    display: none !important;
}

/* 2. Zorg dat het standaard font-icoon WEL getoond wordt in je Divi Blog Layout module */
.origineel-insta-icoon .et_pb_social_icon.et-social-instagram a::before {
    display: block !important;
}

/* 3. Pas het NIEUWE SVG-icoon overal aan (Standaard staat) */
.et_pb_social_icon.et-social-instagram a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a4a4a4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
}

/* 4. Pas het NIEUWE SVG-icoon overal aan (Hover staat) */
.et_pb_social_icon.et-social-instagram a:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d15b39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E") !important;
}

/* 5. UITZONDERING: Zet de Blog Layout module met de klasse 'origineel-insta-icoon' volledig terug naar het standaard Divi-icoon (zowel normaal als hover) */
.origineel-insta-icoon .et_pb_social_icon.et-social-instagram a,
.origineel-insta-icoon .et_pb_social_icon.et-social-instagram a:hover {
    background-image: none !important;
    width: auto !important;
    height: auto !important;
}

/* =====================================================================
   1. BLOG GRID LAYOUT
   ===================================================================== */

.blog-grid .et_pb_post {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.blog-grid.et_pb_blog_grid .et_pb_post {
  width: calc(33.333% - 16px) !important;
}

/* Blog card: image full bleed with title overlay */
.et_pb_blog_grid .et_pb_post {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  height: 300px !important;
  background: transparent !important;
}

.et_pb_blog_grid .et_pb_post .et_pb_image_container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.et_pb_blog_grid .et_pb_post .et_pb_image_container .entry-featured-image-url {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

/* Dark overlay on image */
.et_pb_blog_grid .et_pb_post .et_pb_image_container .entry-featured-image-url::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.30) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.et_pb_blog_grid .et_pb_post .et_pb_image_container .entry-featured-image-url img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  image-rendering: auto !important;
}

/* Hide excerpt and meta */
.et_pb_blog_grid .et_pb_post .post-content,
.et_pb_blog_grid .et_pb_post .post-meta {
  display: none !important;
}

/* Title positioned over image — Layout only, size is determined by Divi */
.et_pb_blog_grid .entry-title {
  display: block !important;
  position: absolute !important;
  bottom: 24px !important;
  top: auto !important;
  left: 28px !important;
  right: 28px !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  transform: none !important;
}

.et_pb_blog_grid .entry-title a {
  display: block !important;
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}


/* =====================================================================
   2. TEAM FOTOS
   ===================================================================== */

.team-fotos .et_pb_column {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.team-fotos.et_pb_row {
  margin-left: -8px !important;
  margin-right: -8px !important;
}

/* =====================================================================
   DIVI MACHINE: WITTE RANDJES EN KIEREN FIX (laatste, geconsolideerde versie)
   ===================================================================== */

.titel-overlay-row .et_pb_column {
  position: relative !important;
  overflow: hidden !important;
  height: 300px !important;
  background: transparent !important;
  border-radius: 0px 0px 40px 0px !important;
}

.titel-overlay-row .et_pb_de_mach_thumbnail,
.titel-overlay-row .et_pb_de_mach_thumbnail .et_pb_module_inner,
.titel-overlay-row .et_pb_de_mach_thumbnail a {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0px 0px 40px 0px !important;
  overflow: hidden !important;
}

.titel-overlay-row .et_pb_de_mach_thumbnail,
.titel-overlay-row .et_pb_de_mach_thumbnail *,
.titel-overlay-row .et_pb_image_wrap {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.titel-overlay-row .et_pb_de_mach_thumbnail img {
  display: block !important;
  width: 101% !important;
  height: 101% !important;
  margin-top: -1px !important;
  margin-left: -1px !important;
  top: 0 !important;
  left: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0px 0px 40px 0px !important;
  transform: scale(1.01) !important;
  transform-origin: center center !important;
}

/* De donkere overlay over de gehele afbeelding */
.titel-overlay-row .et_pb_de_mach_thumbnail a::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Positioneer de titelmodule strak aan de onderkant */
.titel-overlay-row .et_pb_de_mach_title {
  position: absolute !important;
  bottom: 15px !important;
  left: 20px !important;
  right: 20px !important;
  top: auto !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.titel-overlay-row .entry-title.de_title_module {
  margin: 0 !important;
  padding: 0 !important;
  bottom: 0 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.titel-overlay-row .entry-title.de_title_module a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Verwijder de extra vierkante achtergrond/overlay achter de titel */
.titel-overlay-row .et_pb_de_mach_title,
.titel-overlay-row .et_pb_de_mach_title .et_pb_module_inner,
.titel-overlay-row .titel-overlay {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.titel-overlay-row .et_pb_de_mach_title::before,
.titel-overlay-row .et_pb_de_mach_title::after,
.titel-overlay-row .titel-overlay::before,
.titel-overlay-row .titel-overlay::after {
  display: none !important;
  content: none !important;
}

/* =====================================================================
   3. LAYOUT HELPERS
   ===================================================================== */

.gutter-smal.et_pb_row {
  column-gap: 5px !important;
}


/* =====================================================================
   4. STICKY HEADER
   ===================================================================== */

.et_pb_section {
  transition: background-color 0.5s ease-in-out !important;
}

.et_pb_section.et_pb_sticky--sticky {
  background-color: rgba(227, 217, 208, 0.7) !important;
}

.et-db #et-boc .et-l .et_pb_section {
  transition: padding 0.3s ease;
}

.et_pb_menu_0_tb_header .et_pb_menu_inner_container {
  transition: padding 0.3s ease;
}

.et_pb_menu_0_tb_header .et_pb_menu__logo-slot img {
  transition: max-height 0.3s ease;
}

.header-gekrompen .et_pb_menu_inner_container {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.header-gekrompen .et_pb_menu__logo-slot img {
  max-height: 35px !important;
  width: auto !important;
}


/* =====================================================================
   5. MENU BUTTONS (geel + blauw)
   ===================================================================== */

.menu-geel,
.menu-blauw {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.menu-geel a,
.menu-blauw a {
  height: auto !important;
  line-height: 1em !important;
  display: inline-block !important;
  padding: 8px 20px !important;
  border-radius: 10px !important;
  margin: 0 5px !important;
}

.menu-geel a {
  background-color: #fbed4f !important;
  color: #000 !important;
}

.menu-blauw a {
  background-color: #8ab0f9 !important;
  color: #000 !important;
}

.menu-geel a:hover,
.menu-blauw a:hover {
  opacity: 0.8;
  background-color: inherit !important;
}

/* =====================================================================
   8. GRAVITY FORMS
   ===================================================================== */

.gform_footer {
  text-align: right !important;
  justify-content: flex-end !important;
  display: flex !important;
}