@import url(global.css);

/*uitzetten van overbodige menu items in ballroom*/
#header_top,
#menu_top,
#apptitle,
#container_menu_top {
	display: none;
}

#container_menu {
    overflow: visible;
}

#container {
    #p107 {
        display: none;
    }
}

#container.authenticated_False {
    #p108 {
        display: none;
    }
}

#container.role_SysAdmin {
    #p107 {
        display: none;
    }
}

.jive {
    #container {
        .b_header-wrapper {
            padding: unset;
            align-items: center;
        }
    }
}

/* menu styling begin */
#innercontainer header {
    background-color: var(--white);
    max-height: 82px;

    img {
        width: 293px;
        height: 53px;
        aspect-ratio:293/53;
    }

    /*logo styling*/
    figure {
        margin: unset;
        position: relative;

        a {
            height: 100%;
            display: flex;
        }
    }

    #pull {
        display: none;
    }

    /* menu styling */
    .b_header-wrapper {
        width: var(--container-width);
        margin: 0 auto;
        max-width: var(--container-max-width);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 0 20px 0;
        max-height: 82px;

        ul {
            list-style-type: none;
            display: flex;
            flex-direction: row;
            gap: var(--menu-gap);
            max-height: 52px;
            margin-bottom: unset;

            li {
                
                height: 52px;
                display: flex;
                align-items: center;

                a {
                    text-decoration: none;
                    color: var(--gray);
                    border-bottom: 1px solid transparent;
                }

                &:hover,
                &.active {
                    a {
                        border-bottom: 1px solid var(--gray);
                    }
                    
                }
            }
        }
    }
}
/* menu styling eind */

/*footer styling begin*/
#footer {
    background-color: var(--primary);
    margin-top: auto;

    #innerfooter {
        width: var(--container-width);
        margin: 0 auto;
        
        footer.mbo {
            background-color: var(--primary);
        } 

        h3 {
            color: var(--white);
        }
        
        .footer-gap {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        /* footer menu styling */
        ul {
            list-style-type: none;
            flex-direction: column;
            display: flex;
            gap: 11px;
            margin: unset;
            padding: unset;

            &.middle {
                margin-top: 50px;
            }

            li {
                display: flex;
                gap: 6px;
                align-items: center;

                &:before {
                    content: '\f054';
                    font-family: "Font Awesome 5 Pro";
                    display: block;
                    font-size: 11px;
                    width: 14px;
                    line-height: 1;
                    color: var(--white);
                    position: relative;
                    left: 0;
                    transition: all 0.3s ease-in-out;
                }

                a {
                    color: var(--white);
                    text-decoration: none;

                    &.external-link {
                        &::after {
                            color: var(--white);
                        }
                    }
                }

                &:hover,
                &.active {
                    &:before {
                        transition: all 0.3s ease-in-out;
                        left: 5px;
                    }
                }
            }
        }
    }
}
/* menu media queries */
@media screen and (max-width: 1200px) {
    
}

@media screen and (max-width: 1024px) {
    #innercontainer {

        #pull {
            display: flex;
        }

        header {
            .b_header-wrapper {
                align-items: center;
            }
        
            
            img {
                max-width: 190px;
            }
            

            .b_menu-search-wrapper {
                position: unset;
            }

            .menu#ctl00_menu {
                display: none;

                a {
                    align-items: start;
                }

                &.b_menu-open {
                    display: flex;
                    flex-direction: column;
                    position: absolute;
                    left: 0;
                    background-color: var(--white);
                    z-index: 100;
                    width: 100%;
                    padding-left: unset;
                    height: 100vh;
                    justify-content: unset;
                    padding: 0px 20px 20px 20px;
                    z-index: 24;
                    max-height: unset;
                    margin-top: 1px;
                    gap: unset;

                    a {}
                }
            }

            #pull {
                width: 100%;
                justify-content: end;
                display: flex;
                align-items: center;
                text-decoration: none;
                color: var(--primary);
                padding: 10px;
                height: 80px;

                &::after {
                    display: inline-block;
                    margin-left: 0.5rem;
                    color: var(--primary);
                    font-weight: 600;
                    font-size: 16px;
                    content: "\f0c9";
                    width: 15px;
                    font-family: "Font Awesome 6 Pro";
                }
            } 
        }
    }
}



@media screen and (max-width: 768px) {
    #footer {
        #innerfooter {
            .footer-gap {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
                grid-template-rows: auto;
            }
        }
    }
}

@media screen and (max-width: 480px) {
    
}