/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Alex Jongeneelen
 Author URI:     http://netrespons.nl
 Template:       Divi
 Version:        1.0.0
*/

/* ==========================================================================
   1. PAGINA ACHTERGROND (CANVAS)
   ========================================================================== */
/* Dit is de kleur die je ziet in de marges TUSSEN de secties door */
body.et_cover_background {
    background-color: #F5F9FF; /* ijsblauw */
    background-size: cover !important;
    background-attachment: fixed;
}

/* ==========================================================================
   BUTTON STYLING
   ========================================================================== */
/* Zorg voor semi-bold op alle standaard Divi buttons */
.et_pb_button {
    font-weight: 600 !important;
}

/* ==========================================================================
   2. UNIFORME SECTIE STYLING (ALLE SECTIES GELIJK)
   ========================================================================== */
body:not(.et-fb) #main-content .et_pb_section {
    /* --- De Afmetingen --- */
    /* 1. Marge rondom: boven/onder 1.2vw, links/rechts auto (centreren) */
    margin: 1.2vw auto !important;
    
    /* 2. Breedte: 100% minus de marges links en rechts (1.2 + 1.2 = 2.4vw) */
    width: calc(100% - 2.4vw) !important;
    
    /* 3. Geen limiet meer! Ze worden allemaal maximaal breed */
    max-width: 100% !important;
    
    /* --- Styling: Ronding & Patroon fix --- */
    border-radius: 20px !important;
    overflow: hidden; /* Zorgt dat inhoud niet buiten de bocht vliegt */
    
    /* De fix voor complexe achtergronden/patronen */
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    
    /* Optioneel: Subtiele schaduw zodat witte blokken loskomen van witte achtergrond */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ==========================================================================
   3. MOBIELE CORRECTIE
   ========================================================================== */
@media only screen and (max-width: 767px) {
    body:not(.et-fb) #main-content .et_pb_section {
        /* Op mobiel vaste pixels voor een betere leesbaarheid */
        width: calc(100% - 20px) !important; 
        margin: 10px auto !important;
        border-radius: 15px !important;
    }
}

/* Maak fonts optisch iets lichter en scherper */
body, p, .et_pb_text, h1, h2, h3, h4, h5, h6 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media screen and (min-width: 981px) {
.custom-menu-row,
.custom-top-row {
  display: flex;
  align-items: center;
  justify-content: flex-end; 
}
 
/* #### Dropdown Menu #### */
 
.custom-menu li li a { 
  border-bottom: 1px solid #e5e5e5; /* #### Dropdown border bottom #### */
  font-weight: 600 !important; /* #### Dropdown font weight #### */
  font-size: 15px !important; /* #### Dropdown font size #### */
}
   
.custom-menu li li:last-child a { 
  border-bottom: 0px solid #e5e5e5; /* #### Dropdown border bottom #### */
}
   
.custom-menu ul.sub-menu {
  padding: 0px 0 0 0 !important;
  border-top-width: 2px; /* #### Dropdown border top width #### */
}
 
.custom-menu ul.sub-menu ul {
  padding: 0px !important;
}
 
.custom-menu li li ul {
  top: -2px !important;;
}
 
.custom-menu  li li {
  padding: 0px !important;
}
 
.custom-menu li li a {
  padding: 6px 20px;
  width: 240px !important;
}}
 
.custom-social li  {
  margin-bottom: 0px;
}
 
.button-mobile {
    width: 100%;
}
 
@media screen and (max-width: 980px) {
.custom-top-row .et_pb_column {
  margin-bottom: 0px !important;
}}
 
/* #### OKTOBERFESTREIZEN: DEFINTIEVE MOBIEL MENU FIX #### */

/* 1. Zorg dat sub-menu's altijd getoond worden en netjes inspringen */
ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et_pb_menu .et_mobile_menu .menu-item-has-children .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding-left: 20px !important;
    background-color: transparent !important;
}

/* 2. Algemene styling voor alle links (Hoofd en Sub) */
.et_mobile_menu li a {
    font-size: 16px !important; 
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: none !important;
    background-color: transparent !important;
    font-weight: 400; /* Standaard gewicht voor sub-items */
}

/* 3. ALLE Hoofditems (Home, Bedrijfsuitje, etc.) op font-weight 700 */
.et_mobile_menu > li > a {
    font-weight: 700 !important;
}

/* 4. Verberg de onnodige toggle-icoontjes (pijltjes) */
.mobile-toggle-icon {
    display: none !important;
}

/* 5. Scroll-fix: Zorg dat het menu scrollbaar is bij lange lijsten */
.et_mobile_menu {
    max-height: 75vh !important; 
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; 
}

/* 6. Voorkom dat de header-sectie het menu afsnijdt */
#main-header, 
.et_pb_section.et_pb_section_0_tb_header {
    overflow: visible !important;
}
/* GLOBAL: Automatisch verticaal centreren van kolommen 
   ALLEEN als 'Kolomhoogten gelijk maken' aan staat in de Rij.
*/

.et_pb_row.et_pb_equal_columns > .et_pb_column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 1. Verberg de originele labels heel strikt */
.et_pb_countdown_timer_container .section .label {
    font-size: 0px !important;    /* Maakt tekst onzichtbaar */
    line-height: 0px !important;  /* Verwijdert de hoogte */
    color: transparent !important; /* Voor de zekerheid */
    display: block;
}

/* 2. Instellingen voor de nieuwe tekst (kleur, grootte, positie) */
.et_pb_countdown_timer_container .section .label::after {
    color: #ffffff;               /* Pas hier de tekstkleur aan (wit) */
    font-size: 14px !important;   /* Grootte van de tekst */
    line-height: 1.5em !important;
    display: block;
    margin-top: 5px;              /* Beetje ruimte onder het cijfer */
}

/* 3. De juiste teksten op de juiste plek (aangepaste telling: 2, 4, 6, 8) */

/* DAGEN (is technisch het 2e element) */
.et_pb_countdown_timer_container .section:nth-child(2) .label::after {
    content: 'Dagen';
}

/* UREN (is technisch het 4e element, na de dubbele punt) */
.et_pb_countdown_timer_container .section:nth-child(4) .label::after {
    content: 'Uren';
}

/* MINUTEN (is technisch het 6e element) */
.et_pb_countdown_timer_container .section:nth-child(6) .label::after {
    content: 'Minuten';
}

/* SECONDEN (is technisch het 8e element) */
.et_pb_countdown_timer_container .section:nth-child(8) .label::after {
    content: 'Seconden';
}
/* --- WAAIER FIX: DEFINITIEVE VERSIE --- */

/* 1. We richten ons op de KLASSE (.waaier-sectie) in plaats van de ID */
/* We gebruiken 'body #main-content' om zwaarder te wegen dan je standaard instellingen */
body #main-content .et_pb_section.waaier-sectie {
    overflow: visible !important;  /* Schaar weg */
    mask-image: none !important;   /* Masker weg */
    -webkit-mask-image: none !important;
    z-index: 500 !important;       /* Bovenop liggen */
}

/* 2. Zorg dat de binnenkant (Rij en Kolom) ook niet knipt */
body #main-content .et_pb_section.waaier-sectie .et_pb_row,
body #main-content .et_pb_section.waaier-sectie .et_pb_column {
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* --- OVERLAP FIX VOOR DETAILPAGINA --- */
/* Zorgt dat de sectie met de titelbalk buiten zijn kaders mag treden */

body #main-content .et_pb_section.overlap-sectie {
    overflow: visible !important;        /* De schaar weg */
    mask-image: none !important;         /* Het masker weg (Cruciaal!) */
    -webkit-mask-image: none !important; /* Voor Safari/Chrome */
    z-index: 50 !important;              /* Zeker weten dat hij wint van de vorige sectie */
}