:root {
    --desktopNavHeight: 50px;
    --bpMedium: 800px;
    --defaultMargin: 20px;
    --white: #ffffff;
    --black: #404040;
    --primaryColor: var(--empori-primary-color);
    --fontAltFamily: var(--empori-font-alt-family);
}

.empori-header-submenu {
    display: block;
    position: absolute;
    top: var(--desktopNavHeight);
    z-index: 11;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;

    @media (max-width: 800px) {
        opacity: 1;
        visibility: visible;
        position: unset;
        flex: 0 0 100%;
        white-space: unset;
    }
}

.scrolled {
    .empori-submenu-item {
        background-color: var(--empori-header-backgroundcolor-scrolled);
        color: var(--empori-header-color-scrolled);
    }
}

.empori-submenu-item {
    text-decoration: none;
    padding: calc(var(--defaultMargin) - 5px) var(--defaultMargin);
    display: block;
    font-size: .9em;
    font-weight: bold;
    color: var(--empori-header-color);
    background-color: var(--empori-header-backgroundcolor);
    font-family: var(--fontAltFamily);

    &:hover {
        color: var(--primaryColor);
    }

    @media (max-width: 768px) {
        text-align: right;
        font-weight: normal;
    }
}

.empori-sub-child {
    font-weight: normal;
    padding: calc(0.5 * var(--defaultMargin)) calc(1.5 * var(--defaultMargin));
}

.empori-link-container {
    position: relative;

    @media (max-width: 768px) {
        flex: 0 0 100%;
    }

    &:hover, &:focus {
        .empori-header-nav-link {
            &::after {
                bottom: 0;
                opacity: 1;
            }
        }

        .empori-header-submenu {
            opacity: 1;
            visibility: visible;
        }
    }
}

.empori-header {
    background-color: var(--empori-header-backgroundcolor);

    .empori-header-nav-link {
        color: var(--empori-header-color);
    }

    &.scrolled {
        background-color: var(--empori-header-backgroundcolor-scrolled);

        .empori-header-nav-link {
            color: var(--empori-header-color-scrolled);
        }
    }

    &.triggered {
        .empori-header-nav {
            height: calc(100vh - var(--desktopNavHeight));
            align-content: flex-start;
            overflow-y: auto;
        }
    }

    &.transparent-header {
        margin-bottom: -50px;
    }
}



.empori-header {
    width: 100%;
    position: sticky;
    z-index: 11;
    top: 0;

    > .empori-custom-menu-html {
        @media (max-width: 800px) {
            display: none;
        }
    }
}

.empori-header-menu-toggler.empori-header-icon {
    display: none;
    font-size: 1.2em;

    @media (max-width: 800px) {
        display: block;
    }
}

.empori-header-nav {
    margin: 0 0 0 auto;

    @media (max-width: 800px) {
        height: 0;
        overflow: hidden;
        position: absolute;
        top: 50px;
        background-color: #fff;
        width: 100%;
    }

    > .empori-custom-menu-html {
        display: flex;
        padding: 10px 20px;
        flex: 0 0 100%;
        justify-content: right;

        @media (min-width: 800px) {
            display: none;
        }
    }
}

.empori-header-nav-link {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    font-size: .9em;
    position: relative;

    @media (max-width: 960px) {
        padding: 0 5px;
    }

    @media (max-width: 800px) {
        padding: 0 20px;
        background-color: var(--empori-header-backgroundcolor);
    }
}

.scrolled .empori-header-nav-link {
    @media (max-width: 800px) {
        background-color: var(--empori-header-backgroundcolor-scrolled);
    }
}

body:not(.darkMode) .empori-header.readable-header {
    background-color: #fff;

    .empori-header-logo img {
        filter: unset;
    }

    .empori-header-submenu {
        background-color: #fff;
        border-radius: 10px;
    }

    .empori-header-nav-link, .empori-submenu-item {
        color: #000;
    }
}

.empori-nav-icon-container {
    width: 25px;
    text-align: center;

    @media (max-width: 800px) {
        display: none;
    }

    i {
        color: inherit;
    }
}

.empori-header:not(.triggered) .empori-header-submenu {
    background-color: var(--empori-primary-alt-color);
}

.empori-redundant-pages,
.empori-redundant-pages-triggerer {
    display: none;
}

.empori-redundant-pages-triggerer {
    @media (min-width: 800px) {
        display: block;
    }
}

.empori-header-icon {
    i {
        color: var(--empori-primary-color);
    }
}

.empori-redundant-pages {
    position: fixed;
    right: -100%;
    top: 50px;
    background-color: var(--empori-header-backgroundcolor);
    border-radius: 10px 0 0 10px;
    transition: 200ms ease;
    transition-property: right, opacity;
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    visibility: hidden;

    @media (max-width: $bpMedium) {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        opacity: 1;
        visibility: visible;
    }

    &.triggered {
        right: 0;
        opacity: 1;
        visibility: visible;
        display: flex;
    }

    .empori-header-submenu {
        background-color: var(--empori-primary-alt-color);
        border-radius: 10px;
        right: 0;
        text-align: right;
    }
}

.scrolled .empori-redundant-pages {
    background-color: var(--empori-header-backgroundcolor-scrolled);
}

.empori-header-mobile-nav {
    display: none;

    @media (max-width: 800px) {
        flex-wrap: wrap;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: var(--empori-header-backgroundcolor);
        height: 0;
        overflow: hidden;
    }
}

@media (max-width: 800px) {
    .empori-header.triggered .empori-header-mobile-nav {
        display: flex;
        height: calc(100vh - var(--desktopNavHeight));
        align-content: flex-start;
        overflow-y: auto;
    }

    .empori-header .empori-header-nav,
    .empori-header .empori-redundant-pages {
        display: none;
    }
}

.scrolled .empori-header-mobile-nav {
    background-color: var(--empori-header-backgroundcolor-scrolled);
}