/*======================================
Theme Name: Studio MVP Divi Child Theme
Theme URI: https://studiomvp.nl
Description: This is a Divi child theme from Studio MVP
Author: Studio MVP
Author URI: https://studiomvp.nl
Author Email: info@studiomvp.nl
Template: Divi
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

/*add your custom CSS below this line*/


/* Add this to your custom CSS area */
#wpconsent-container {
    --wpconsent-background: var(--gcid-heading-color)!important; /* Primary Light 2 */
    --wpconsent-text: #fff !important; /* Primary Dark 1 */
    --wpconsent-border-radius: 30px !important;  /* Border Radius */
    --wpconsent-padding: 20px;
    --wpconsent-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --wpconsent-min-width: 480px;

    --wpconsent-accept-bg: radial-gradient(circle at calc(100% - 26px) calc(100% - 26px),rgba(12,67,76,1) 0%,rgba(12,67,76,1) 2%,rgba(246,120,101,0) 2%,rgba(246,120,101,0) 100%),radial-gradient(at 0% 0%,hsla(342,100%,84%,1) 0px,transparent 50%),radial-gradient(at 0% 100%,hsla(8,85%,61%,1) 0px,transparent 50%),radial-gradient(at 100% 100%,hsla(346,85%,58%,1) 0px,transparent 50%),radial-gradient(at 100% 0%,hsla(35,100%,59%,1) 0px,transparent 50%) !important; /* Primary Color */
    --wpconsent-accept-color: #ffffff;
    --wpconsent-cancel-bg:  var(--gcid-nlrsgythi5) !important; /* Primary Dark 1 */
    --wpconsent-cancel-color: #ffffff;
    --wpconsent-preferences-bg:  var(--gcid-nlrsgythi5) !important; /* Primary Dark 1 */
    --wpconsent-preferences-color: #ffffff;
--wpconsent-min-width:530px;
    --wpconsent-font-size: 1rem;
    --wpconsent-title-size: 18px;
    --wpconsent-line-height: 1.6;
	--wpconsent-focus-outline-color: var(--gcid-primary-color) !important; /* Primary Color */
}


#wpconsent-container::part(wpconsent-button-accept) {
	background: hsla(8, 89%, 68%, 1);
	background-image:
		radial-gradient(at 0% 0%,hsla(342,100%,84%,1) 0,transparent 50%),radial-gradient(at 0% 100%,hsla(8,85%,61%,1) 0,transparent 50%),radial-gradient(at 100% 100%,hsla(346,85%,58%,1) 0,transparent 50%),radial-gradient(at 100% 0%,hsla(35,100%,59%,1) 0,transparent 50%) !important;
	color: #fff;
	border: none;
}


#wpconsent-container::part(wpconsent-banner){
	border-width: 1px;
    border-color: var(--gcid-rluviglcmp);
}

#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences),
#wpconsent-container::part(wpconsent-preferences-accept-button),
#wpconsent-container::part(wpconsent-preferences-save-button),
#wpconsent-container::part(wpconsent-preferences-cancel-button){
	font-family: var(--et_global_heading_font);
    text-transform: uppercase;
    font-weight: 800;
    padding: 12px 16px !important;
    height: unset !important;
    border-radius: 12px;
    font-style: italic;
}

#wpconsent-container::part(wpconsent-button-cancel), #wpconsent-container::part(wpconsent-button-preferences){
background-image: radial-gradient(circle at center, var(--gcid-i8o3wa1l7p) 0%, var(--gcid-dslirwaaga) 100% 100%);
    background-color: var(--gcid-q1xx9da170);
	border-width: 1px;
    border-color: var(--gcid-s6m0s5icun);
    border-style: solid;
	color: var(--gcid-heading-color) !important;
}

#wpconsent-container::part(wpconsent-banner-body){
	font-size:14px !important;
}


/* DIVI HEADER CSS */
/* ==========================================================================
   Studio MVP Menu CSS
   Doel: desktop vs mobiel gedrag, mobiele menu styling, CTA knop, submenu toggles,
   support indicator, Divi button fixes, video visibility, iconen in diensten submenu.
   Belangrijk: alle originele selectors en waarden zijn behouden.
   ========================================================================== */


/* ==========================================================================
   1) Desktop only (vanaf 1280px)
   - Verbergt mobiele-only items
   ========================================================================== */
@media only screen and (min-width: 1280px) {
  .sub-menu,
  .mobiel-menu-item {
    display: none !important;
  }
}


/* ==========================================================================
   2) Desktop menu layout (algemeen)
   - Zorgt dat het menu niet wrapt
   - Zorgt dat menu-items max-content breedte houden
   ========================================================================== */
.et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul {
  flex-wrap: nowrap !important;
}

.et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li {
  width: max-content;
}


/* ==========================================================================
   3) Mobiel en tablet (t/m 1279px)
   - Header positie aanpassen
   - Desktop menu en bepaalde header elementen verbergen
   - Mobile hamburger menu tonen en uitlijnen
   - Mobile menu basis: list-style + text-align
   ========================================================================== */
@media only screen and (max-width: 1279px) {
  .hoofd-sectie-menu-2025 {
    top: 10px !important;
  }
	
	.et_pb_menu_inner_container.et_flex_module {
    justify-content: flex-end !important;
}

  body.logged-in.admin-bar .hoofd-sectie-menu-2025 {
    top: calc(10px + 32px) !important;
  }

  .et_pb_menu__menu,
  .offerte-aanvragen,
  .sub-menu-header,
  .et_pb_button_0_tb_header_wrapper {
    display: none !important;
  }

  body.et-db #et-boc .et-l .et_pb_menu_1_tb_header.et_pb_menu {
    justify-content: flex-end !important;
    margin: 0px 0px 0px auto !important;
  }

  .et-boc .hoofd-menu .et_pb_menu__wrap,
  body.et-db #et-boc .et-l .et_pb_menu_1_tb_header .et_pb_menu__wrap {
    justify-content: flex-end !important;
  }

  .et_mobile_nav_menu {
    display: block;
  }

  .et_pb_menu .et_mobile_menu,
  .et_pb_menu .et_mobile_menu ul {
    list-style: none !important;
    text-align: left;
  }
}


/* ==========================================================================
   4) Mobiel menu container styling
   - Fixed dropdown menu op positie
   - Padding, border, radius, achtergrond gradient
   - Scrollbaar met max-height
   ========================================================================== */
.et-db #et-boc .et-l .hoofd-menu ul.et_mobile_menu {
  position: fixed;
  top: 66px;
  padding: 12px !important;
  border: 1px solid var(--gcid-s6m0s5icun);
  border-radius: 22px;
  background-image: radial-gradient(
    circle at center,
    var(--gcid-i8o3wa1l7p) 0%,
    var(--gcid-dslirwaaga) 100% 100%
  ) !important;
  max-height: 75vh;
  overflow: scroll;
}

.et-db #et-boc .et-l .hoofd-menu ul.et_mobile_menu li a {
  padding: 11px 5% !important;
}


/* ==========================================================================
   5) Hover gedrag links
   - Geen achtergrond op hover
   - Opacity geforceerd 1
   ========================================================================== */
.et-menu a:hover,
.et_mobile_menu li a:hover,
.nav ul li a:hover {
  opacity: 1 !important;
  background-color: unset;
}


/* ==========================================================================
   6) Hamburger icon positioning + mobile menu typography
   ========================================================================== */
.et_pb_menu__wrap .mobile_menu_bar:before {
  top: 0 !important;
}

.et_mobile_menu .menu-item-has-children > a {
  font-weight: 400 !important;
}


/* ==========================================================================
   7) Desktop menu spacing en alignment (algemeen)
   ========================================================================== */
.et_pb_menu .et_pb_menu__menu > nav > ul {
  align-items: center;
}

.et_pb_menu .et-menu > li {
  padding: 0 15px !important;
}

.et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li {
  margin-top: 0 !important;
}

.header-submenu a {
  line-height: normal !important;
  padding-bottom: 0 !important;
  height: 21px;
}


/* ==========================================================================
   8) Mobile menu button tekst: "MENU" en "CLOSE"
   - Past pseudo-element :before aan met stijl en content
   ========================================================================== */
.et-db #et-boc .et-l .et_pb_menu_1_tb_header .et_mobile_nav_menu .mobile_nav.closed .mobile_menu_bar:before,
.et-db #et-boc .et-l .et_pb_menu_1_tb_header .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar:before {
  font-family: var(--et_global_heading_font) !important;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid;
  border-radius: 100px;
  padding: 8px 10px 7px;
}

.et-db #et-boc .et-l .et_pb_menu_1_tb_header .et_mobile_nav_menu .mobile_nav.closed .mobile_menu_bar:before {
  content: "MENU" !important;
}

.et-db #et-boc .et-l .et_pb_menu_1_tb_header .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar:before {
  content: "CLOSE" !important;
}


/* ==========================================================================
   9) Mobiele menu CTA knop styling
   - Specifiek voor .menu_cta a binnen het mobiele menu
   - Inclusief hover state
   ========================================================================== */
body.et-db #et-boc .et-l .et_mobile_nav_menu .et_mobile_menu .menu_cta a {
  color: #ffffff !important;
  text-decoration-color: #ffffff;
  border-radius: 10px;
  line-height: 1.7em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 14px !important;
  padding-top: 10px !important;
  padding-right: var(--gvid-rdljmqo6m5) !important;
  padding-bottom: 10px !important;
  padding-left: var(--gvid-iboqf0ft15) !important;
  background-color: hsla(8, 89%, 68%, 1);
  background-image:
    radial-gradient(
      circle at calc(100% - 22px) calc(100% - 22px),
      rgba(12, 67, 76, 1) 0%,
      rgba(12, 67, 76, 1) 1%,
      rgba(246, 120, 101, 0) 1%,
      rgba(246, 120, 101, 0) 100%
    ),
    radial-gradient(at 0% 0%, hsla(342, 100%, 84%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(8, 85%, 61%, 1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, hsla(346, 85%, 58%, 1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(35, 100%, 59%, 1) 0px, transparent 50%);
  background-size: 100%;
  background-position: right;
  background-repeat: no-repeat !important;
  transition: all 300ms ease-in-out !important;
}

.et-boc .et_mobile_menu .menu_cta a:hover {
  background-color: hsla(8, 89%, 68%, 1) !important;
  background-image:
    radial-gradient(
      circle at calc(100% - 26px) calc(100% - 26px),
      rgba(12, 67, 76, 1) 0%,
      rgba(12, 67, 76, 1) 1%,
      rgba(246, 120, 101, 0) 1%,
      rgba(246, 120, 101, 0) 100%
    ),
    radial-gradient(at 0% 0%, hsla(342, 100%, 84%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(8, 85%, 61%, 1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, hsla(346, 85%, 58%, 1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(35, 100%, 59%, 1) 0px, transparent 50%);
  background-size: 5000%;
  background-position: right;
  background-repeat: no-repeat !important;
}


/* ==========================================================================
   10) CTA icon ($) als pseudo-element
   - Absolute positionering rechts in de knop
   ========================================================================== */
.menu_cta a:after {
  content: "$";
  font-family: ETmodules !important;
  position: absolute;
  right: 22px !important;
  left: auto;
  width: 24px;
  height: 24px;
  margin-left: -1.3em;
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  background-color: #0c434c;
  color: var(--gcid-q1xx9da170);
  font-weight: 400 !important;
  font-size: 1rem !important;
  line-height: unset !important;
  transition: all 0.2s;
  text-transform: none;
}


/* ==========================================================================
   11) "Bolletje" badge (bijv. notificatie teller)
   ========================================================================== */
.bolletje {
  position: relative;
  top: -2px;
  display: inline-block;
  width: 15px !important;
  height: 15px !important;
  margin-left: 4px;
  border-radius: 20px;
  background-color: #fb3640;
  font-size: 10px !important;
  color: #ffffff !important;
  text-align: center !important;
  line-height: 15.5px;
  padding-bottom: 0 !important;
}


/* ==========================================================================
   12) Custom submenu open/close animatie (diensten, branches)
   - Default dicht (max-height 0)
   - Met .open class opent hij tot 269px
   ========================================================================== */
.sub-menu-diensten,
.sub-menu-branches {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out;
}

.sub-menu-diensten.open,
.sub-menu-branches.open {
  max-height: 269px;
}


/* ==========================================================================
   13) Support menu item met icoon + pulserende indicator
   ========================================================================== */
.menu-support-item {
  display: inline-flex;
  align-items: center;
  position: relative;
  gap: 6px;
}

.menu-support-item img {
  height: 20px;
  width: auto;
}

.pulse-dot {
  position: absolute;
  top: -1px;
  left: 46px;
  width: 8px;
  height: 8px;
  background-color: #fb3640;
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 2;
}

.pulse-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #fb3640;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-ring 1.5s infinite;
  z-index: 1;
  opacity: 0.5;
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  70% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}


/* ==========================================================================
   14) Mobile submenu toggles (Divi mobile menu)
   - Positioning parent li relative
   - Toggle button rechts met ETModules icon
   - Standaard submenu verborgen
   - Met .visible class zichtbaar
   ========================================================================== */
ul.et_mobile_menu li.menu-item-has-children,
ul.et_mobile_menu li.page_item_has_children,
ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children {
  position: relative;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: block;
  padding: 0 !important;
  border: none;
  z-index: 999;
  background: transparent;
  text-align: center;
  opacity: 1;
  cursor: pointer;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle::after {
  position: relative;
  top: 10px;
  font-family: "ETmodules";
  content: "\33";
  color: #fff;
  border-radius: 50%;
  padding: 3px;
  background-color: hsla(8, 89%, 68%, 1);
  background-image:
    radial-gradient(at 0% 0%, hsla(342, 100%, 84%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(8, 85%, 61%, 1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, hsla(346, 85%, 58%, 1) 0px, transparent 50%),
    radial-gradient(at 100% 0%, hsla(35, 100%, 59%, 1) 0px, transparent 50%);
  background-size: cover;
  background-position: center;
}

ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
ul.et_mobile_menu li.page_item_has_children.dt-open > .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children.dt-open > .mobile-toggle::after {
  content: "\32";
}

.et_mobile_menu .menu-item-has-children > a,
.et_mobile_menu .page_item_has_children > a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children > a,
.et-db #et-boc .et-l .et_mobile_menu .page_item_has_children > a {
  background-color: transparent;
  padding-right: 50px;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
ul.et_mobile_menu .page_item_has_children .children,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu {
  display: none !important;
  visibility: hidden !important;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
ul.et_mobile_menu .page_item_has_children .children.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
  display: block !important;
  visibility: visible !important;
}


/* ==========================================================================
   15) Divi button :before consistent houden (hover en normaal)
   ========================================================================== */
body #page-container .et_pb_section .et_pb_row .et_pb_button:hover:before,
body #page-container .et_pb_section .et_pb_row .et_pb_button:before {
  font-size: inherit !important;
  line-height: inherit !important;
}


/* ==========================================================================
   16) Video visibility helper classes
   ========================================================================== */
.smvp-video-visible {
  filter: opacity(100%) !important;
}

.smvp-video-hidden {
  filter: opacity(0%) !important;
}


/* ==========================================================================
   17) Divi button preset icon animatie (specifieke preset class)
   - Default :before zichtbaar, links uitgelijnd
   - Op hover schuift hij naar rechts
   ========================================================================== */
body.et-db #page-container #et-boc .et-l .et_pb_section .preset--module--divi-button--fz8lknv8tg:before {
  opacity: 1 !important;
  font-size: 1rem !important;
  left: 0px !important;
  margin-left: 0px !important;
  transition: all 0.3s ease-in-out;
}

body.et-db #page-container #et-boc .et-l .et_pb_section .preset--module--divi-button--fz8lknv8tg:hover:before {
  margin-left: 12px !important;
  transition: all 0.3s ease-in-out;
}


/* ==========================================================================
   18) Diensten submenu items met icoon (mobile menu)
   - Links worden inline-flex met ruimte voor icoon
   - :before als icon placeholder met background-image per item
   ========================================================================== */
.et-boc .hoofd-menu .et_mobile_menu .diensten-menu-knop .sub-menu li a {
  display: inline-flex !important;
  align-items: center;
  column-gap: 8px;
  padding: 11px 0% !important;
  width: 100% !important;
}

.et-boc .hoofd-menu .et_mobile_menu .diensten-menu-knop .sub-menu li a:before {
  content: " ";
  width: 20px;
  height: 20px;
  display: inline-flex;
  position: relative !important;
  align-self: center;
  align-content: center;
  align-items: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* Icon per diensten-item */
.et-boc .hoofd-menu .et_mobile_menu .sub-menu .sub-menu-websites a:before {
  background-image: url(/wp-content/uploads/2025/11/Website.webp);
}

.et-boc .hoofd-menu .et_mobile_menu .sub-menu .sub-menu-webshops a:before {
  background-image: url(/wp-content/uploads/2025/11/Webshop.webp);
}

.et-boc .hoofd-menu .et_mobile_menu .sub-menu .sub-menu-branding a:before {
  background-image: url(/wp-content/uploads/2025/11/Branding.webp);
}

.et-boc .hoofd-menu .et_mobile_menu .sub-menu .sub-menu-social-media a:before {
  background-image: url(/wp-content/uploads/2025/11/Social-media.webp);
}

.et-boc .hoofd-menu .et_mobile_menu .sub-menu .sub-menu-hosting a:before {
  background-image: url(/wp-content/uploads/2025/11/Hosting.webp);
}


/* ==========================================================================
   19) Video divider styling (MediaElement.js container)
   ========================================================================== */
.menu-video-divider .mejs-container {
  background: radial-gradient(
    circle at center,
    var(--gcid-le9re5bpe4) 0%,
    var(--gcid-qp2mimkb7d) 100% 100%
  ) !important;
}