﻿/*##################################################
    NAVIGATION
 ####################################################*/

:root {
    --secondary-nav-height: 38px;
    --nav-hover-font-family: 'MuseoSans700';
}
@media screen and (min-width: 992px) {
    #site-content {
        margin-top: var(--secondary-nav-height);
    }
    #site-header {
        top: var(--secondary-nav-height) !important;
    }
    nav.main {
        position: static !important;
        transform: none !important;
        order: 10 !important;
    }
    nav.main span:after {
        display: none !important;
    }
    nav.main .nav-level-0 a {
        padding-right: 16px !important;
    }
    nav.main ul ul ul {
        display: block !important;
        opacity: 1 !important;
        left: 0 !important;
    }
    nav.main ul.nav-level-1 {
        align-content: flex-start;
        display: flex !important;
        flex-direction: column;
        flex-wrap: wrap;
        margin: 0;
        max-height: 350px;
        width: var(--component-max-width) !important;
        max-width: 100vw;
        padding: 3rem var(--base-half-spacing) 1rem;
    }
    nav.main ul.nav-level-1 > li {
        width: 25%;
    }
    nav.main ul.nav-level-2 {
        display: flex !important;
        flex-direction: column;
        position: static !important;
        margin: 0 0 0 12px;
    }
    .nav-top-level {
        width: 25%;
        height: 470px;
    }
    .nav-top-level .h2 {
        font-family: var(--h2-typography_font-name);
        font-weight: var(--h2-typography_font-weight);
        font-style: var(--h2-typography_font-style);
        line-height: var(--h2-typography_font-line-height);
        letter-spacing: var(--h2-typography_font-letter-spacing);
        text-transform: var(--h2-typography_font-transform);
        font-size: var(--h2-typography_font-size);
    }
    .nav-top-level .h2:hover {
        font-family: var(--h2-typography_font-name);
    }
    .nav-level-0 > li:hover {
        position: static !important;
    }
    .nav-level-0:hover > li.active span:before {
        background-color: rgba(var(--header-bg-color1), 1) !important;
    }
    .nav-level-0 > li.active:hover span:before {
        background-color: rgba(var(--navigation-dropdown-color1), 1) !important;
    }
    .nav-level-0 > li > span > a {
        text-align: center;
    }
    .nav-level-0 > li:hover > span > a {
        font-family: var(--nav-hover-font-family);
    }
    .nav-level-0 > li a::before {
        display: block;
        content: attr(title);
        font-family: var(--nav-hover-font-family);
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }
    .nav-level-1 a:hover {
        font-family: var(--nav-hover-font-family);
    }
    .nav-level-2 a {
        text-transform: none;
    }
    ul.nav-level-1:before {
        content: " ";
        display: block;
        width: 20000px;
        position: absolute;
        left: -10000px;
        background-color: rgba(var(--navigation-dropdown-color1), 1);
        z-index: -7;
        top: 0;
        height: 470px;
        box-shadow: 0px 2000px 0px 2000px rgba(0, 32, 64, 0.2);
    }

    /*##################################################
        SECONDARY 
    ####################################################*/
    nav.secondary {
        position: absolute;
        right: 0;
        top: calc(-16px - var(--secondary-nav-height));
    }
    nav.secondary:before {
        content: " ";
        background-color: rgba(var(--navigation-dropdown-color1), 1);
        width: 20000px;
        height: var(--secondary-nav-height);
        position: absolute;
        z-index: -1;
        left: -10000px;
        top: 16px;
    }

    nav.secondary a:hover {
        font-family: var(--nav-hover-font-family);
    }

    /*##################################################
        LANGUAGE 
    ####################################################*/
    .language-selector.dropdown .dropdown-menu.dropdown-menu-right {
        min-width: auto !important;
        margin-top: -18px !important;
    }
    .language-selector .dropdown-menu-right .dropdown-item {
        padding: 27px 16px !important;
    }
}
@media screen and (max-width: 992px) {
    .nav-top-level {
        display:none;
    }
}