@import url("tokens.css");

#menu_top,
#container_menu .menu,
#qs-container,
#innerfooter,
#customsearch {
    max-width: 100%;
}

#menu_top,
.breadcrum_container,
#apptitle a,
#dashboardheader,
#header_top {
    display: none;
}

#container_menu {
    overflow: visible;
}

.b_menu-search-container {
    background: var(--color-bg-header);
}

.b_menu-search-wrapper {
    /* padding: 0 var(--pad-obj-sm); */
    display: flex;
    align-items: center;
}

.b_header-wrapper {
    display: flex;
    max-width: 1520px;
    justify-content: space-between;
    align-items: center;
    padding-right: 24px;
    padding-left: 24px;
    margin: auto;
    align-items: flex-start;

    .b_menu-search-wrapper,
    #container_menu {
        position: unset;

    }
}

a {
    color: var(--color-link);
    text-decoration: underline;
}

#ctl00_menu {
    display: none;
    list-style-type: none;
    padding-left: unset;
    /* test */
    /* height: 103px; */

    li,
    a {
        height: 100%;
        line-height: 160%;
    }

    #p15 {
        ::after {
            display: none;
        }
    }

    &.b_menu-open {
        display: block;
        position: absolute;
        background-color: var(--white);
        top: 80px;
        left: 0px;
        width: 100%;
        z-index: 2;
    }

    li a {
        border-bottom: 6px solid transparent;
        font-family: "BarlowBold", sans-serif;
        font-size: 22px;
    }

    li.active a,
    li:hover a {
        background-color: var(--light-purple);
        border-bottom: var(--orange) 6px solid;
        color: var(--darkBlue);
    }

    #p15 a {
        &::after {
            content: '\f002';
            font-family: "Font Awesome 6 Pro";
            color: var(--darkBlue);
            font-size: 16px;
        }
    }

    a {
        text-decoration: none;
        font-weight: 700;
        display: flex;
        padding: 32px 16px;
        justify-content: center;
        align-items: center;
        color: var(--darkBlue);
    }
}

#innercontainer {
    figure {
        margin: 0;
        position: relative;
        top: 6.5px;
        padding-left: 8px;
        line-height: 160%;
    }
}

#pull {
    display: flex;
    width: 62px;
    height: 62px;
    text-decoration: none;
    background-color: var(--darkBlue);

    &:before {
        font-family: "Font Awesome 6 Pro";
        font-size: 20px;
        font-weight: 400;
        content: "\f0c9";
        /* hamburger icon */
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        color: var(--white);
        justify-content: center;
    }

    &[aria-expanded="true"]::before {
        content: "\f00d";
        /* close icon */
        color: var(--white);
    }

    span.menu-button {
        display: none;
    }

    &:focus {
        outline-offset: -1px;
    }
}

.container {
    margin: 0 auto;

    &.small {
        max-width: 1484px;
    }

    &.medium {
        max-width: 1584px;
    }

    &.p80-40,
    &.p60-p80 {
        padding: 32px 16px 32px 16px;
    }

    &.p40 {
        padding: var(--gap-obj-md) 16px;

        &.textbar {
            padding: var(--gap-obj-md) 0;
        }
    }

    &.p80 {
        padding: var(--gap-obj-md) 16px;
    }

    &.mixed {
        padding: var(--pad-obj-lg) 16px var(--pad-obj-xl) 16px;
    }
}

#container_menu {
    max-width: 1018px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

a {
    color: var(--primary);

    &.external-link {
        &::after {
            content: '\f08e';
            font-family: "Font Awesome 6 Pro";
            display: inline-block;
            font-size: 16px;
            width: 14px;
            color: var(--orange);
            position: relative;
            left: 10px;
        }
    }
}

#b_footer {
    #innerfooter {
        max-width: 1484px;
        margin: 0 auto;
    }

    .footer__top--block:not(.center) li {
        font-size: var(--font-body);
        gap: 12px;
    }
}

#footer,
.search-footer #b_footer {
    padding: 96px 16px 40px 16px;
    font-size: 20px;
    line-height: 32px;
}

#footer,
#b_footer {
    margin-top: auto;
    background-color: var(--color-bg-footer);

    p {
        margin: 0;
    }

    .footer {
        display: flex;
        flex-direction: column;
    }

    li,
    a,
    p {
        color: var(--white);
        font-family: "Barlow", sans-serif;
    }

    img {
        width: 95%;
    }

    li {
        position: relative;
    }

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    a {
        text-decoration: none;
        padding: 12px 16px;
    }

    .box-link {
        color: var(--darkBlue);

        &:hover {
            background-color: var(--white);

            &::after {
                color: var(--darkBlue);
            }
        }
    }

    .footer__top--block li {
        font-size: var(--font-body);

    }

    .footer__top--block.left ul {
        display: flex;
        flex-direction: column;
        gap: var(--gap-obj-sm);

        li {
            display: flex;
            align-items: center;
        }

        a {
            display: flex;
            align-items: center;
            padding: unset;
            gap: 12px;

            &:before {
                content: "\f061";
                font-family: "Font Awesome 6 Pro";
                display: flex;
                position: relative;
                width: 56px;
                height: 53px;
                background-color: var(--orange);
                justify-content: center;
                align-items: center;
                color: var(--darkBlue);
            }

            &:hover {
                &:before {
                    background-color: var(--white);
                }
            }
        }
    }

    .footer__top--block.center ul {
        display: flex;
        flex-direction: column;

        li {
            display: flex;
            align-items: center;

            &:hover {

                &::before,
                ::after {
                    color: var(--white);
                }
            }

            &::before {
                content: "\f061";
                font-family: "Font Awesome 6 Pro";
                color: var(--orange);
                font-size: 18px;

            }
        }
    }

    .footer__top--block.right {
        display: flex;
        flex-direction: column;
        gap: var(--gap-txt-xs);
    }

    .footer__top {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        padding-bottom: 41px;
        gap: 24px;
    }

    .footer__bottom {
        padding: 0 20px 0 20px;

        .footer__bottom--wrapper {
            border-top: 1px solid rgba(255, 255, 255, 0.20);
            display: flex;
            padding-top: 32px;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
            gap: 32px;
        }

        a {
            padding: unset;
        }
    }

    .footer__bottom--lists ul {
        display: flex;
        gap: var(--gap-obj-md);
        flex-direction: column;
    }

    .footer__bottom--lists {
        width: 100%;
        text-align: center;
    }
}

.search-main {
    margin-top: 16px;
}

@media screen and (min-width: 1480px) {
    #innercontainer {
        figure {
            top: unset;
            padding-left: unset;
        }
    }
}

@media screen and (min-width: 1250px) {
    .logo {
        height: 125px;
    }

    .b_header-wrapper {
        align-items: center;

        .b_menu-search-wrapper {
            position: relative;

        }
    }

    .b_menu-search-wrapper {
        padding: 0 var(--pad-obj-sm);
    }

    #innercontainer {

        .b_menu-open,
        #pull {
            display: none;
        }

        .b_menu-search-wrapper,
        #container_menu {
            position: relative;
        }

        #ctl00_menu {
            display: flex;
            align-items: center;
            margin: unset;

            #p15 a {
                display: flex;
                width: 50px;
                font-size: 0px;
                height: 105px;

                &::after {
                    display: block;
                }
            }
        }
    }

    #search-header #innercontainer #ctl00_menu #p15 a {
        /* height: 35px; */
        box-sizing: border-box;
    }

    #footer, .search-footer {
        img {
            width: 100%;
        }



        .footer__bottom--lists ul {
            flex-direction: row;
        }

        .footer__bottom {
            .footer__bottom--wrapper {
                flex-direction: row;
                gap: unset;
            }
        }

        .footer__bottom--lists {
            width: auto;
            text-align: unset;
        }
    }
}

@media screen and (min-width: 1300px) {
    #footer, .search-footer {
        .footer__top {
            grid-template-columns: repeat(auto-fill, minmax(398px, 1fr));
        }
    }
}

@media screen and (min-width: 1500px) {
    #footer, .search-footer #b_footer {
        padding: 96px 0 40px 0;
    }
}