// main: ../../../css/styles.scss

.flex-container {
    ul {
        display               : -ms-flexbox;
        display               : -webkit-flex;
        display               : flex;
        -webkit-flex-direction: row;
        -ms-flex-direction    : row;
        flex-direction        : row;
        -webkit-flex-wrap     : nowrap;
        -ms-flex-wrap         : nowrap;
        flex-wrap             : nowrap;

        li {
            -webkit-flex: 1 0 auto;
            -ms-flex    : 1 0 auto;
            flex        : 1 0 auto;
            white-space : nowrap;

            a {
                white-space: nowrap;
            }
        }
    }
}

.header-height {
    min-height: $masthead_height;
}

#masthead {
    @include transition(.4s, 0s);
    font-size  : 1.6rem;
    font-weight: 400;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: var(--bkg-color);
    z-index: 9999;

    body.scroll-down & {
      transform: translate3d(0, -100%, 0);
    }

    #masthead_main_wrapper {
        padding: 20px 0;
        height : 60px;

        .flex-container {
            height: 60px;

            .flex-item {
                flex: 25% 0 0;
                @media (min-width: 40em) {
                    flex: 30% 0 0;
                }

                &.logo-cont {
                    flex: 50% 0 0;
                    @media (min-width: 40em) {
                        flex: 30% 0 0;
                    }
                }
            }
        }

        .todays-date {
            border-left : 3px solid $accent-color;
            padding-left: 10px;
            font-size   : 1.4rem;
        }

        .site-logo {
            display            : block;
            width              : 100%;
            height             : $logo_height;
            position           : relative;
            background-image   : var(--logo);
            background-size    : contain;
            background-repeat  : no-repeat;
            background-position: center center;
        }

        ul {
            display       : block;
            position      : relative;
            margin        : 0;
            white-space   : nowrap;
            vertical-align: middle;

            li {
                margin        : 0 5px;
                font-size     : 2.2rem;
                vertical-align: middle;
                display       : inline-block;
                white-space   : nowrap;

                &.social {
                    display: none;
                    @media (min-width: 40em) {
                        display: inline-block;
                    }
                }

                &.switch-title {
                    font-size   : 1.2rem;
                    color       : $text-color;
                    margin-right: 0;
                }

                a {
                    color: $text-color;

                    &:hover {
                        color: $text-color;
                    }
                }

                &:last-child {
                    margin-right: 0;
                }

                .theme-switch {
                    &:before {
                        content    : var(--theme-icn);
                        font-family: $font-awesome-font;
                        font-weight: 900;
                    }
                }
            }
        }

        .menu-button-container {
            white-space       : nowrap;
            vertical-align    : middle;
            position          : relative;
            vertical-align    : middle;
            height            : 28px;
            width             : 35px;
            min-width         : 35px;
            cursor            : pointer;
            transition        : opacity .25s ease;
            z-index           : 9999;
            display           : inline-block;
            -webkit-transition: all .2s ease-in-out;
            -moz-transition   : all .2s ease-in-out;
            -ms-transition    : all .2s ease-in-out;
            -o-transition     : all .2s ease-in-out;
            transition        : all .2s ease-in-out;

            & span {
                background: $hamburger_color;
                border    : none;
                height    : $hamburger_line_thickness;
                width     : 100%;
                position  : absolute;
                top       : 0;
                left      : 0;
                transition: all .35s ease;
                cursor    : pointer;
            }

            &.active span {
                background: $hamburger_active_color;
            }

            &.active .top {
                -webkit-transform: translateY(12px) translateX(0) rotate(45deg);
                transform        : translateY(12px) translateX(0) rotate(45deg);
            }

            &.active .middle {
                opacity: 0;
            }

            &.active .bottom {
                -webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
                transform        : translateY(-12px) translateX(0) rotate(-45deg);
            }

            & span:nth-of-type(2) {
                top: 12px;
            }

            & span:nth-of-type(3) {
                top: 24px;
            }
            @media (min-width: 1400px) {
                display: none;
            }
        }
    }

    #masthead_menu_wrapper {
        border-top   : 1px solid var(--grey-20-color );
        border-bottom: 1px solid var(--grey-20-color );
        display      : none;
        @media (min-width: 1400px) {
            display: block;
        }

        ul.main-menu {
            white-space: nowrap;
            margin     : 0;
            flex       : auto;
            text-align : center;
            @include transition(.3s, 0s);

            li {
                display       : inline-block;
                box-sizing    : border-box;
                position      : relative;
                margin-right  : 5px;
                @media (min-width: 70em) {
                    margin-right: 10px;
                }
                @media (min-width: 80em) {
                    margin-right: 15px;
                }
                margin-left   : 0;
                line-height   : $menu_system_height;
                height        : $menu_system_height;
                font-size     : 1.4rem;
                font-weight   : 700;
                text-transform: uppercase;
                @include transition(.3s, 0s);
                letter-spacing: .05em;
                color       : $text-color;

                &:last-child {
                    padding-right: 0;
                    margin-right : 0;

                    &:after {
                        display: none;
                    }
                }

                > a {
                    display    : block;
                    @include transition(.3s, 0s);
                    white-space: nowrap;
                    color       : inherit;
                }

                &.current-menu-item,
                &:hover {
                    a {
                        color: $primary-color;
                    }
                }

                &.menu-item-has-children {
                    > a {
                        &:after {
                            content       : '\f107';
                            font-family   : 'Font Awesome 5 Pro';
                            font-weight   : 600;
                            vertical-align: top;
                            margin-left   : 5px;
                        }
                    }
                }

                > ul.sub-menu {
                    display         : block;
                    box-sizing      : border-box;
                    position        : absolute;
                    z-index         : 9999;
                    left            : 0;
                    top             : 100%;
                    width           : auto;
                    font-size       : 12px;
                    text-align      : left !important;
                    padding         : 10px 0;
                    margin-left     : 0;
                    line-height     : 30px !important;
                    background-color: #fff;
                    transform       : scale(0);
                    transform-origin: 0 0;
                    @include transition(.2s, 0s);
                    border-top      : 4px solid $primary-color;

                    > li {
                        white-space     : nowrap;
                        height          : auto;
                        line-height     : 30px !important;
                        text-align      : left !important;
                        display         : block;
                        opacity         : 0;
                        position        : relative;
                        background-color: #fff;

                        a {
                            display       : block;
                            padding       : 0 20px;
                            line-height   : 30px !important;
                            @include transition(.2s, 0s);
                            text-transform: capitalize;
                            font-size     : 1.3rem;
                            font-weight   : 400;
                            letter-spacing: 0;

                            &:before {
                                content     : '\f105';
                                font-family : 'Font Awesome 5 Pro';
                                font-weight : 100;
                                margin-right: 5px;
                                position    : relative;
                                left        : auto;
                                top         : auto;
                                bottom      : auto;
                                font-size   : 14px;
                                line-height : 30px;
                            }
                        }

                        &:hover {
                            a {
                                color: $primary-color;
                            }
                        }
                    }
                }

                &:hover > ul.sub-menu {
                    left     : 0;
                    transform: scale(1);
                }

                &:hover > ul.sub-menu > li {
                    opacity: 1;
                }

                &.submenu-left {
                    > ul.sub-menu {
                        right           : 0;
                        left            : auto;
                        transform-origin: 100% 0;
                    }
                }
            }
        }
    }
}

#search_container {
    margin-bottom: 20px;
    @media (min-width: 1200px) {
        display: none;

        &.active {
            display: block;
        }
    }
    position     : relative;
    font-family  : $base-font-family !important;
}