#header-banner,
#portal-header {
    z-index: 300;
    position: relative;
}

#mobile-menu {
    display: none;
}

#header-banner {
    background-color: $gray-agid;
    color: #fff;
    font-weight: $semibold;
    padding: 1.3rem 0;
    z-index: 500;
    @include antialias;

    .header-banner-inner {
        @include make-container;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;

        .header-banner-owner {
            flex: 1;
        }
    }

    .header-banner-owner,
    .header-banner-second-link {
        a {
            color: #fff;

            &:focus,
            &:hover {
                border-bottom: 1px solid #fff;
            }
        }
    }

    .header-banner-second-link,
    .header-banner-language,
    .header-banner-login-button {
        margin-left: 2rem;
    }

    .header-banner-second-link {
        text-align: right;
    }

    .header-banner-language {
        button#language-selector-button {
            background: none;
            color: #fff;
            text-transform: uppercase;
            border: 0;
            padding: 0;

            svg {
                margin-left: 0.5rem;
            }
        }

        ul.dropdown-menu {
            background-color: $gray-agid;
            font-size: 1em;
            left: auto;
            right: 0;

            li {
                a {
                    color: #fff;

                    &:hover,
                    &:focus {
                        background: rgba(255, 255, 255, 0.25);
                    }
                }
            }
        }
    }

    .header-banner-login-button {
        text-align: right;

        a {
            color: #fff;

            &:hover,
            &:focus {
                border-bottom: 1px solid #fff;
            }
        }

        a.header-login-userinfo {
            + a.header-login-logout {
                margin-left: 2rem;
            }
        }
    }

    @media (max-width: 600px) {
        font-size: 0.7em;
    }
}

#portal-header {
    padding: 1.8rem 0;
    @include make-container;
    display: flex;
    justify-content: space-between;

    button#search-toggle,
    button.plone-navbar-toggle {
        display: none;

        .sr-only {
            @include sr-only;
        }
    }

    button.plone-navbar-toggle {
        height: 100%;
        width: 100%;
        margin: 0;
    }

    > #portal-searchbox {
        display: flex;
        align-items: center;
    }

    .search-social-wrapper {
        &.no-social-links {
            display: flex;
            align-items: center;
        }
    }

    @media (max-width: $mobile-menu-width) {
        position: relative;

        .search-social-wrapper {
            display: inline-flex;
            flex-flow: row nowrap;
        }

        #header-social {
            display: none;
        }

        #portal-searchbox {
            display: none;

            &.open {
                display: block;
                position: absolute;
                left: 0;
                width: 100%;
                top: 100%;
                z-index: 1000;

                #searchGadget_form {
                    width: 100%;
                }

                #searchGadget {
                    width: calc(100% - 5rem);
                }

                ul.livesearch-results {
                    width: 100% !important;
                }
            }
        }

        button.plone-navbar-toggle,
        button#search-toggle {
            display: inline-block;
            border: 0;
            background: transparent;
            color: #000;
            padding: 5px 20px;
            text-align: left;
            font-size: 1.5em;
            box-shadow: none;
        }

        button#search-toggle {
            .close-icon {
                display: none;
            }

            &.open {
                .close-icon {
                    display: block;

                    &:before {
                        @include make-ita('\1f5f5');
                    }
                }

                svg.fa-search,
                i.fa-search {
                    display: none;
                }
            }
        }
    }

    @media (max-width: $screen-xs-max) {
        button.plone-navbar-toggle,
        button#search-toggle {
            padding: 5px 15px 5px 10px;
            font-size: 1.35em;
        }
    }
}

#portal-logo {
    margin: 0 auto 0 0;
    color: $text-color;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;

    span {
        border-bottom: 3px solid $tr;
        font-size: 3.4rem;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;

        @media (max-width: $screen-sm-max) {
            border-width: 1px;
            white-space: normal;
        }
    }

    &:hover,
    &:focus {
        span {
            border-bottom-color: $text-color;
        }
    }

    img {
        margin-right: 2rem;
        height: 100%;
    }

    @media (max-width: 600px) {
        padding: 0;

        img {
            $logo-width: 13vw;
            width: $logo-width;
            height: $logo-width;
            margin-right: 1.5rem;
        }

        span {
            font-size: 4vw;
            padding: 3px 0;

            .subtitle {
                font-size: 3vw;
            }
        }
    }
}

@media (max-width: $mobile-menu-width) {
    .searchOpened,
    .menuOpened {
        position: relative;
        overflow: hidden;

        &:after {
            content: '';
            display: block;
            width: 100vw;
            height: 100vh;
            background: rgba(255, 255, 255, 0.8);
            z-index: 500;
            position: fixed;
            top: 0;
            left: 0;
        }
    }

    .searchOpened {
        &:after {
            z-index: 100;
        }
    }
}
