/* * MOBILE MENU 0.8 */


#site-navigation > input {
    display: none;
}

#site-navigation > label {
    display: block;
    font-size: 36px;
    position: absolute;
    right: 0px;
    width: 36px;
    padding: 0;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#site-navigation > input:checked + #main-menu {
    display: block;
    clear: both;
    top: 36px;
    position: relative;
}

#mobile-logo {
    position: absolute;
    top: 0;
    left: 0;
    background-image: var(--mobile-logo);
    background-size: auto var(--mobile-nav-height);
    background-repeat: no-repeat;
    height: var(--mobile-nav-height);
    width: 50%;
}

#mobile-logo a {
    display: flex;
    width: 100%;
    height: var(--mobile-nav-height);
}

/* wordt nu niet gebruikt */
#mobile-logo img {
    height: var(--mobile-nav-height);
}

/* #site-logo img{
   height: var(--site-logo-height);
  
} */
#site-logo {
    display: none;
    background-size:contain;
    background-image: var(--site-logo);
    background-repeat: no-repeat;
    background-position: var(--site-logo-position);
    height: var(--site-logo-height);
    width: var(--site-logo-width);
    max-width: var(--site-logo-max-width);
    margin: var(--space-small);
}

#site-logo a {
    display: inline-block;
    width: 100%;
    height: var(--site-logo-height);
}

#main-menu {
    display: none;
}

.nav-link {
    display: block;
}

/* start sprong navigation */

#mobile-logo a::before {
    /* content: 'Example Sitename'; */
    margin: auto;
    color: var(--nav-link-textcolor);
}

#site-logo a::before {
    /* content: 'I want no logo just this text'; */
    margin: auto;
    color: var(--nav-link-textcolor);
}

#site-logo {
    align-items: center;
}


#site-navigation {
    height: var(--mobile-nav-height);
}

a#main-menu {
    width: var(--nav-width);
    background-color: var(--nav-bg-inner);
    margin: 0;
}

nav#site-navigation {
   background-image: var(--nav-bg-image);
   background-position: var(--nav-bg-position);
   background-size:cover;
    background-color: var(--nav-bgcolor);
    border: none;
    margin: auto;
}

/* niet nodig? v-6 */
/* nav#site-navigation a {
    text-decoration: none;
    color: black;
} */

#main-menu .nav-link,
[data-gs-offmenu] .nav-link {
    text-decoration: none;
    text-align: center;
    transition: all 1s ease;
    padding: var(--space-small);
    background-color: var(--nav-link-bg);
    color: var(--nav-link-textcolor);
    min-width: var(--nav-link-min-width);
    
}

#main-menu .nav-link:hover,
[data-gs-offmenu] .nav-link:hover {
    background-color: var(--nav-link-bg-over);
    color: var(--nav-link-textcolor-over);
}

#menu-content {
    justify-content: var(--menu-content-justify);
    align-items: var(--menu-align-items);
    order: var(--menu-content-order);
    width: var(--menu-content-width);
    height:var(--menu-content-height);
    background-color:var(--menu-bg-color);
    column-gap: var(--space-big);
    padding: var(--space-medium);
}

#main-menu .dropdown .nav-link {
    width: 100%;
    font-size: 80%;
    border-radius: 0;
}

.dropdown-parent {
    /* min-width: 180px; */
    position: relative;

    /* justify-content: flex-end; */
    /* text-align: center; */
}

/* nav mobile */
@media only screen and (min-width: 1024px ) {
    .dropdown {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        transition: all 0.5s ease;
        overflow: hidden;
        z-index: 1000;
        text-indent: inherit;
        /* padding: var(--space-small); */
    }

    .dropdown-parent:hover > .dropdown {
        visibility: visible;
        opacity: 1;
        display: block;
        transition: all 1s;
    }
}

/* end main navigation  --------------------------------   NAV  ------- */


/* start sprong navigation */
@media (min-width: 1024px ) {
    #site-navigation {
        height: auto;
    }

    #site-navigation > label {
        display: none;
    }

    nav #main-menu {
        display: flex;
        column-gap: var(--main-menu-column-gap);
        justify-content: var(--main-menu-justify-content);
        align-items: var(--main-menu-align-items);
        background-color: var(--main-menu-bg-color);
        height: var(--main-menu-height);
    }

    nav #main-menu > * {
        display: flex;
        
    }

    .nav-link {
        display: inline-block;
    }

    #mobile-logo {
        display: none;
    }
}

/* EINDE MOBILE MENU ------------------------------------------------------------------------------------------------------------------------------- */