/*---------------------------------------------------------------------------------

 Theme Name:   Smitclub Childtheme for Divi
 Theme URI:    https://smitclub.nl
 Description:  We gebruiken voor jouw website een eigen Childtheme zodat maatwerk behouden blijft bij een update van Divi.
 Author:       Marre Smit
 Author URI:   https://smitclub.nl
 Template:     Divi
 Version:      2.1.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/
.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: IMAGE FULL BLEED WITH TITLE OVERLAY
   ===================================================================== */

/* =====================================================================
   DIVI MACHINE: COMPLETE RESET NAAR 3 RECHTE HOEKEN
   ===================================================================== */

/* =====================================================================
   DIVI MACHINE: WITTE RANDJES EN KIEREN FIX
   ===================================================================== */

/* 1. Dwing de hoofdkolom naar exact deze vorm (wist de standaard Divi afronding) */
.titel-overlay-row .et_pb_column {
  border-radius: 0px 0px 40px 0px !important;
  overflow: hidden !important; /* Snijdt alles wat uitsteekt strak af */
}

/* 2. Zorg dat de thumbnail module exact de vorm van de kolom overneemt */
.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 {
  border-radius: 0px 0px 40px 0px !important;
  overflow: hidden !important;
}

/* 3. De afbeelding zelf MOET 100% recht zijn aan de bovenkant en linksonder, 
      zodat hij de witte achtergrond van de kolom volledig bedekt. */
.titel-overlay-row .et_pb_de_mach_thumbnail img {
  border-radius: 0px 0px 40px 0px !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Extra check: Zorg dat overflow op de hoofdcontainers goed staat */
.titel-overlay-row .et_pb_column,
.titel-overlay-row .et_pb_de_mach_thumbnail {
  position: relative !important;
  overflow: hidden !important;
  height: 300px !important;
}

.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;
}

/* 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; /* Iets verhoogd naar 0.35 voor betere leesbaarheid van de tekst */
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Zorg dat de afbeelding netjes dekkend is */
.titel-overlay-row .et_pb_de_mach_thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Positioneer de titelmodule absoluut over de afbeelding heen */
.titel-overlay-row .et_pb_de_mach_title {
  position: absolute !important;
  bottom: 24px !important;
  left: 28px !important;
  right: 28px !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Styling voor de H2 en link binnen de titelmodule */
.titel-overlay-row .entry-title.de_title_module {
  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;
}

.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;
}

/* Mocht Divi een ::before of ::after pseudo-element gebruiken voor de extra overlay, zet die dan uit */
.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;
}

/* =====================================================================
   FIX: WITTE HOEKJES BOVENKANT VERWIJDEREN
   ===================================================================== */

/* Dwing alle mogelijke tussenliggende wrappers om de content niet te pushen */
.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;
}

/* Zorg dat de afbeelding perfect aansluit tegen de absolute bovenkant */
.titel-overlay-row .et_pb_de_mach_thumbnail img {
    top: 0 !important;
    left: 0 !important;
    margin-top: 0 !important; /* Reset eventuele negatieve marges die kieren veroorzaken */
    border-radius: 0px 0px 40px 0px !important;
}
/* =====================================================================
   DIVI MACHINE: ANTI-ALIASING & KIEREN FIX (OVERLAP METHODE)
   ===================================================================== */

/* 1. De container snijdt alles strak af */
.titel-overlay-row .et_pb_column,
.titel-overlay-row .et_pb_de_mach_thumbnail {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0px 0px 40px 0px !important;
}

/* 2. De link-container mag absoluut geen marges of paddings hebben */
.titel-overlay-row .et_pb_de_mach_thumbnail .et_pb_module_inner,
.titel-overlay-row .et_pb_de_mach_thumbnail a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0px 0px 40px 0px !important;
  overflow: hidden !important;
}

/* 3. De afbeelding iets groter maken en over de randen trekken */
.titel-overlay-row .et_pb_de_mach_thumbnail img {
  display: block !important;
  width: 101% !important;  /* Net iets breder dan 100% */
  height: 101% !important; /* Net iets hoger dan 100% */
  margin-top: -1px !important;  /* Trek de afbeelding over de bovenrand */
  margin-left: -1px !important; /* Trek de afbeelding over de linkerrand */
  object-fit: cover !important;
  border-radius: 0px 0px 40px 0px !important;
  
  /* Extra browser-render fix tegen kieren */
  transform: scale(1.01) !important; 
  transform-origin: center center !important;
}
/* =====================================================================
   DIVI MACHINE: SPECIFIEKE HOEKEN (ALTIJD RECHTSONDER DIEP AFGEROND)
   ===================================================================== */

/* =====================================================================
   DIVI MACHINE: DRIE HOEKEN VOLLEDIG RECHT, RECHTSONDER AFGEROND
   ===================================================================== */

/* Pas de 100% rechte hoeken en de ronde hoek toe op de kolom */
.titel-overlay-row .et_pb_column {
  position: relative !important;
  overflow: hidden !important;
  height: 300px !important;
  background: transparent !important;
  
  /* Volgorde: linksboven (0), rechtsboven (0), rechtsonder (40px), linksonder (0) */
  border-radius: 0px 0px 40px 0px !important; 
}

/* Dwing deze exacte vorm ook direct af op de afbeelding en de links */
.titel-overlay-row .et_pb_de_mach_thumbnail,
.titel-overlay-row .et_pb_de_mach_thumbnail img,
.titel-overlay-row .et_pb_de_mach_thumbnail a {
  border-radius: 0px 0px 40px 0px !important;
}

/* 2. Positioneer de titelmodule strak aan de onderkant */
.titel-overlay-row .et_pb_de_mach_title {
  position: absolute !important;
  bottom: 15px !important; /* Vaste afstand van de onderkant van de kaart */
  left: 20px !important;   /* Afstand vanaf links */
  right: 20px !important;  /* Afstand vanaf rechts */
  top: auto !important;    /* Voorkom dat Divi de bovenkant pushed */
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Zorg dat de H2 binnen de module geen extra marges heeft die de positie verpesten */
.titel-overlay-row .entry-title.de_title_module {
  margin: 0 !important;
  padding: 0 !important;
  bottom: 0 !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;
}