/*
 Theme Name:     DeContextbouwer
 Theme URI:      https://www.decontextbouwer.nl
 Description:    De Contextbouwer
 Author:         De Merkstudio
 Author URI:     https://www.merkstudio.nl
 Template:       Divi
 Version:        1.0.0
*/

/* FONT */

h1, h2, h3, .et_pb_module_header {
  font-family: "usual", sans-serif;
}
p, body {
  font-family: "usual", sans-serif;
}
h4 {
  font-family: "shelby", sans-serif;
}

/* rondje of kompas voor titel */

.titel-met-icoon {
  display: flex;
  align-items: center;       /* vertical center van icoon en tekst */
  font-size: 40px;           /* grootte van de titel */
}

.titel-met-icoon img {
  margin-right: 15px;        /* ruimte tussen icoon en tekst */
  flex-shrink: 0;            /* voorkomt dat het icoon smaller wordt */
  margin-left: -68px;
}

.titel-met-icoon-h3 {
  display: flex;
  align-items: center;       /* vertical center van icoon en tekst */
  font-size: 25px;           /* grootte van de titel */
}

.titel-met-icoon-h3 img {
  margin-right: 15px;        /* ruimte tussen icoon en tekst */
  flex-shrink: 0;            /* voorkomt dat het icoon smaller wordt */
  margin-left: -48px;
}

/* --- Fullscreen mobiel menu met extra padding onderaan --- */

.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu {
  position: fixed;
  top: 85px; /* ruimte voor header */
  right: -100vw; /* start buiten beeld rechts */
  width: 100vw;
  height: calc(100vh - 85px);
  padding-bottom: 85px; /* extra ruimte onderaan */
  background-color: #3fb6f2; /* nieuwe achtergrondkleur */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  margin: 0;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: right 0.4s ease-in-out, opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: -2px 0 10px rgba(0,0,0,0.08);
}

/* --- Menu zichtbaar --- */
.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__wrap.et_pb_menu__wrap--visible .et_mobile_menu,
.et_pb_menu_0_tb_header.et_pb_menu .et_pb_menu__wrap.opened .et_mobile_menu,
.et_pb_menu_0_tb_header .mobile_nav.opened .et_mobile_menu,
.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar.active + .et_mobile_menu {
  right: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* --- Hamburger icoon --- */
.et_pb_menu_0_tb_header .mobile_nav,
.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar {
  z-index: 1000 !important;
  pointer-events: auto !important;
}

.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before {
  transition: transform 0.4s ease, content 0.3s ease;
}

.et_pb_menu_0_tb_header .mobile_nav.opened .mobile_menu_bar:before,
.et_pb_menu_0_tb_header .et_pb_menu__wrap.opened .mobile_menu_bar:before,
.et_pb_menu_0_tb_header .et_pb_menu__wrap.et_pb_menu__wrap--visible .mobile_menu_bar:before,
.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar.active:before {
  content: "\4d"; /* kruisje */
  transform: rotate(0deg);
}

/* --- Menu-items --- */
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu li {
  list-style: none;
  width: 100%;
  text-align: center;
  margin: 0;
  border: none !important;
  box-shadow: none !important;
}

.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu a {
  display: block;
  width: 100%;
  padding: 18px 0;
  font-size: 1.3rem;
  color: #031f35; /* nieuwe tekstkleur */
  text-decoration: none;
  border: none !important;
}

.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu a:hover {
  color: #ffffff; /* optionele hoverkleur voor contrast */
}

/* --- Submenu's verbergen --- */
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu ul.sub-menu {
  display: none;
}

/* Sticky header, standaard bovenaan */
#eigen-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transition: top 0.3s ease-in-out, background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
    background-color: transparent !important; /* standaard transparant */
}

/* ==========================
   DIVI SLIDER PIJLEN MET CIRCELS + BOLLETJES VERWIJDEREN
   ========================== */

/* -------- Bolletjes / controllers volledig weg -------- */
.et-pb-controllers {
    display: none !important;
}

/* -------- Desktop (≥981px) -------- */
@media (min-width: 981px) {
  .et-pb-slider-arrows .et-pb-arrow-prev,
  .et-pb-slider-arrows .et-pb-arrow-next {
      width: 60px !important;
      height: 60px !important;
      font-size: 43px !important;
      background: rgba(255,255,255,0.5) !important;
      border-radius: 50% !important;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #031f35 !important;
      opacity: 1 !important; /* ALTijd zichtbaar */
      
      /* Positionering binnen slider */
      position: absolute !important;
      top: calc(50% + 10px) !important; /* iets lager */
      z-index: 999 !important;
      transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* Iets verder naar binnen */
  .et-pb-slider-arrows .et-pb-arrow-prev {
      left: 20px !important;   /* iets naar binnen */
  }

  .et-pb-slider-arrows .et-pb-arrow-next {
      right: 20px !important;  /* iets naar binnen */
  }

  /* Hover-effect desktop */
  .et-pb-slider-arrows .et-pb-arrow-prev:hover,
  .et-pb-slider-arrows .et-pb-arrow-next:hover {
      transform: scale(1.1);
      opacity: 0.85;
  }
}

/* -------- Tablet & Mobiel (<981px) -------- */
@media (max-width: 980px) {
  .et-pb-slider-arrows .et-pb-arrow-prev,
  .et-pb-slider-arrows .et-pb-arrow-next {
      width: 35px !important;
      height: 35px !important;
      font-size: 20px !important;
      background: rgba(255,255,255,0.5) !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      color: #031f35 !important;
      opacity: 1 !important; /* ALTijd zichtbaar */

      
      /* Correct verticaal gecentreerd */
      position: absolute !important;
      top: calc(50% + 10px) !important; /* iets lager */
      z-index: 999 !important;
  }

  .et-pb-slider-arrows .et-pb-arrow-prev {
      left: 10px !important;
  }

  .et-pb-slider-arrows .et-pb-arrow-next {
      right: 10px !important;
  }
}