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

 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;
}
/* Verberg Instagram font-icoon */
.db_pb_team_member_instagram_icon::before {
    display: none !important;
}

/* CV document icoon via SVG */
.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;
}

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

/* =====================================================================
   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;
}


/* =====================================================================
   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;
}


/* =====================================================================
   6. TOGGLE MODULE
   ===================================================================== */

.et_pb_toggle {
  position: relative !important;
}

/* Closed: icon left */
.et_pb_toggle_close .et_pb_toggle_title {
  padding-left: 45px !important;
  padding-right: 0 !important;
  text-align: left !important;
}

.et_pb_toggle_close .et_pb_toggle_icon {
  left: 20px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Open: X top right */
.et_pb_toggle_open {
  position: relative;
}

/* Hide Divi's :before and :after on the title when open */
.et_pb_toggle_open .et_pb_toggle_title:before,
.et_pb_toggle_open .et_pb_toggle_title:after {
  display: none !important;
}

/* Render × using the toggle container's :after — avoids icon font inheritance */
.et_pb_toggle_open:after {
  content: "\00D7";
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  color: #000;
  cursor: pointer;
  font-family: Arial, sans-serif !important;
  pointer-events: none;
  z-index: 10;
}

.et_pb_toggle_content {
  padding-top: 20px !important;
  text-align: left !important;
}

.et_pb_toggle .et_pb_toggle_title:before {
  left: 0 !important;
  right: auto !important;
}
/* Verberg de titeltekst en de H5 volledig wanneer de toggle geopend is */
.et_pb_toggle_open.et_pb_toggle .et_pb_toggle_title,
.et_pb_toggle_open.et_pb_toggle h5.et_pb_toggle_title,
.et_pb_toggle_open.et_pb_text_align_left .et_pb_toggle_title,
.et_pb_toggle_open.et_pb_text_align_left h5.et_pb_toggle_title {
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* =====================================================================
   7. TOGGLE BUTTON
   ===================================================================== */

.toggle-button-custom {
  display: inline-block;
  background-color: #FADA2A;
  color: #000 !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.6rem 1.4rem;
  border-radius: 12px;
  text-decoration: none !important;
  line-height: 1.4;
  margin-top: 1.25rem;
}

.toggle-button-custom:hover {
  background-color: #e8c800;
  color: #000 !important;
  text-decoration: none !important;
}


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

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