:root {
    /* --gray-bg: gray; */
    --gray-bg:                  #F6F6F6;
    --gray-bg-dark:             #e8e8e8;

    --header-mobile-border:     #D0D0D0;

    --header-bg:                white;

    --header-sub-menu-width:        200px;

    --header-main-menu-font-size:   18px;
    --header-sub-menu-font-size:    13px;

    --nav-menu-mobile-width:        265px;

}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-main);
    background-color: var(--header-bg);
    width: 100%;
    z-index: 99;
}

.nav-btn {
    display: none;
}

.site-title {
    font-size: 45px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-blue);
    text-decoration: none;
    margin: 52px 0 25px 0;
}

.menu-navigatie-menu-container {
    background-color: inherit;
    margin-bottom: 40px;
}

#menu-navigatie-menu {
    display: flex;
    flex-direction: row;
    gap: 3px;
}

.menu-navigatie-menu-container li{
    list-style: none;
    position: relative;
}

.menu-navigatie-menu-container a,
.menu-navigatie-menu-container button {
    display: block;
    text-decoration: none;
    color: var(--text-light);
    background-color: inherit;
    font-size: var(--header-main-menu-font-size);
    padding: 10px 14px;
    transition: color var(--transition-time) var(--transition-function);
}

.menu-navigatie-menu-container button {
    font-family: inherit;
    border: none;
    cursor: pointer;
    text-align: start;
    display: none;
}

.menu-navigatie-menu-container a:hover,
.menu-navigatie-menu-container button:hover,
.menu-item-has-children:hover>a,
.menu-item-has-children:hover>button,
.current_page_item>a,
.current_page_item>button
{
    color: var(--text-active);
    background-color: var(--gray-bg);
}

.sub-menu {
    display: none;
}

.menu-item-has-children:hover>.sub-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
}

.sub-menu a,
.sub-menu button {
    color: var(--text-active);
    background-color: var(--gray-bg);
    width: var(--header-sub-menu-width);
    font-size: var(--header-sub-menu-font-size);  
}

.sub-menu a:hover,
.sub-menu button:hover {
    background-color: var(--gray-bg-dark);
}

.sub-menu li {
    display: flex;
    flex-direction: row;
    position: relative;
}

#menu-navigatie-menu>li>ul li:has(ul)>a::after {
    position: absolute;
    top: 10px;
    right: 10px;
    content: '>';  
}

#menu-navigatie-menu>li>ul>li ul {
    left: var(--header-sub-menu-width);
}

.li-mobile {
    display: none !important;
}

@media (max-width: 990px){

    html.nav-btn-open,
    body.nav-btn-open {
        overflow: clip;
    }

    header {
        position: sticky;
        top: 0;
        border-bottom: 1px solid var(--header-mobile-border);
    }

    .nav-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        width: 54px;
        height: 50px;
        padding: 15px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 2;
    }

    .nav-btn>span {
        display: block;
        height: 2px;
        width: 100%;
        background-color: var(--text-active);
        transition: transform var(--transition-time) var(--transition-function), opacity var(--transition-time) var(--transition-function);
    }

    .nav-btn.nav-btn-open>span:first-child {
        width: 120%;
        transform:  translateX(-2px) translateY(9px) rotate(45deg);
    }

    .nav-btn.nav-btn-open>span:nth-child(2) {
        opacity: 0;
    }
    
    .nav-btn.nav-btn-open>span:last-child {
        width: 120%;
        transform: translateX(-2px) translateY(-9px) rotate(-45deg);
    }

    .site-title {
        font-size: 23px;
        margin: 20px 0;
    }

    .menu-navigatie-menu-container {
        display: flex;
        position: absolute;
        top: 68px;
        left: 0;
        margin-bottom: 0;
        width: var(--nav-menu-mobile-width);
        height: calc(100vh - 68px);
        height: calc(100dvh - 68px);
        border-right: 1px solid var(--header-mobile-border);
        overflow: clip;
        transform: translateX(-100%);
        transition: transform var(--transition-time) var(--transition-function);
    }

    
    .menu-navigatie-menu-container.nav-btn-open {
        transform: translateX(0);
    }

    
    #menu-navigatie-menu {
        flex-direction: column;
        gap: 10px;
        padding: 20px 15px;
        height: 100%;
        overflow-y: auto; 
    }

    .menu-item-has-children:hover>.sub-menu {
        position: fixed;
    }

    
    .menu-item-has-children>a {
        display: none;
    }
    
    .menu-item-has-children>button {
        display: block;
        width: 100%;
    }

    .menu-item-has-children:hover>a,
    .menu-item-has-children:hover>button {
        color: var(--text-light);
        background-color: unset;
    }

    .li-mobile {
        display: flex !important;
    }

    .li-mobile>* {
        display: block !important;
        width: 100%;
    }

    .menu-item-has-children>a::after,
    .menu-item-has-children>button::after {
        position: relative;
        content: '>';
        left: 15px;
        padding-right: 15px;
    }

    .sub-menu {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        padding: 20px 15px;
        position: fixed;
        width: var(--nav-menu-mobile-width);
        height: 100%;
		overflow-y: auto;
		overflow-x: clip;
        top: 0 !important;
        left: var(--nav-menu-mobile-width) !important;
        background-color: var(--header-bg);
        z-index: 1;
        transition: transform var(--transition-time) var(--transition-function);
    }

    .sub-menu.sub-menu-open {
        transform: translateX(-100%);
    }
   
    .sub-menu>li>a,
    .sub-menu>li>button {
        width: 100%;
        color: var(--text-light) !important;
        font-size: var(--header-main-menu-font-size) !important;
        background-color: var(--header-bg) !important;
        transition: color var(--transition-time) var(--transition-function);
    }
    
    .sub-menu>li>a:hover,
    .sub-menu>li>button:hover {
        color: var(--text-active) !important;
        background-color: var(--gray-bg) !important;
    }
}

@media (max-width: 767px){
    .site-title {
        font-size: 19px;
    }

    .menu-navigatie-menu-container {
        top: 63px;
        height: calc(100vh - 63px);
		height: calc(100dvh - 63px);
    }
}