/* 1. Maak de hoofd-header sticky, transparant en wazig */
header.wpbf-page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background-color: rgba(255, 255, 255, 0.70) !important;
    backdrop-filter: blur(12px) !important;
}

/* 2. CRUCIAAL: Verwijder de harde witte achtergrond van de binnenbalk */
header.wpbf-page-header .wpbf-navigation {
    background-color: transparent !important;
    background: transparent !important;
}

/* 3. Schuif de Elementor content omhoog */
#content {
    margin-top: -120px !important;
}

/* Methode A: Verberg de specifieke auteur-link */
.wpbf-theme-author, 
a[href*="wppagebuilderframework.com"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Methode B: Alternatieve brede selector voor de rechterkant van de footer */
.wpbf-inner-footer-right, 
.footer-right,
.wpbf-footer-right {
    display: none !important;
}

/* Schakel de Grid-kolommen uit en forceer centrering */
.wpbf-footer-two-columns {
    display: block !important;
    grid-template-columns: none !important;
}

/* Zorg dat de linker div de volle breedte pakt en centreert */
.wpbf-inner-footer-left {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

/* Verberg de lege rechterkolom definitief */
.wpbf-inner-footer-right {
    display: none !important;
}

/* Zorg dat de menuknoppen zelf rustig blijven staan */
.main-navigation .menu-item > a,
.nav-menu .menu-item > a,
.menu-item > a {
    position: relative;
}

/* Het actieve menu-item (de pagina waar je nu bent) */
.main-navigation .current-menu-item > a,
.nav-menu .current-menu-item > a,
.menu-item.current-menu-item > a {
    color: #000000 !important;
}

/* Het streepje voor het actieve item - GEBRUIKT NU EEN HARDE BIJSTELLING */
.main-navigation .current-menu-item > a::after,
.nav-menu .current-menu-item > a::after,
.menu-item.current-menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 5px; /* Pas dit aan om het actieve streepje hoger of lager te zetten */
    left: 20px !important;  
    right: 20px !important; 
    width: auto !important; /* Dwingt Elementor om het streepje direct te tonen */
    height: 1.5px;
    background-color: #000000;
}

/* Effect wanneer je met de muis over andere menu-items beweegt (Lava hover) */
.main-navigation .menu-item:not(.current-menu-item) > a::after,
.nav-menu .menu-item:not(.current-menu-item) > a::after,
.menu-item:not(.current-menu-item) > a::after {
    content: '';
    position: absolute;
    bottom: 5px; /* Moet exact hetzelfde getal zijn als hierboven */
    left: 50%;   
    width: 0;
    height: 1.5px;
    background-color: #000000;
    transition: width 0.25s ease, left 0.25s ease; 
}

/* Wanneer je met de muis over een item beweegt, klapt het streepje perfect gecentreerd uit */
.main-navigation .menu-item:not(.current-menu-item):hover > a::after,
.nav-menu .menu-item:not(.current-menu-item):hover > a::after,
.menu-item:not(.current-menu-item):hover > a::after {
    left: 20px;  
    right: 20px; 
    width: calc(100% - 40px); 
}

/* Media query speciaal voor mobiele schermen en tablets */
@media (max-width: 950px) {
    .main-navigation .menu-item > a,
    .nav-menu .menu-item > a,
    .menu-item > a {
        display: inline-flex !important; /* Dwingt het vakje op mobiel om exact de breedte van de letters te pakken */
        width: auto !important;
    }
    
    /* Zorgt voor een nette uitlijning van de menu-items binnen het mobiele menu */
    .main-navigation ul, 
    .nav-menu ul,
    .menu-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Zet alle woorden netjes strak aan de linkerkant */
        padding-left: 15px; /* Geeft wat ademruimte vanaf de linkerrand van het scherm */
    }
}

.cky-btn-revisit-wrapper .cky-btn-revisit img{
		display:none!important;
}

.cky-revisit-bottom-left{
		display:none!important;
}

/* Verwijdert de specifieke WPBF-thema rand en achtergrond van sticky berichten */
.wpbf-post.sticky {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}