@import url("tokens.css");



#menu_top,
#header_top,
#apptitle {
    display: none;
}

#innercontainer header {
    padding: var(--pad-obj-sm) 0;
    background: var(--ice-blue);
}

.b_header-wrapper {
    max-width: 1398px;
    margin: 0 auto;
    padding: 0 var(--pad-sec-x-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.b_menu-search-wrapper {
    position: static;
}

#innerheader {
    p {
        margin: 0;
    }

    a {
        display: flex;
    }

    .logo {
        max-height: 47px;
    }
}

#container_menu {
    width: 100%;
    justify-content: flex-end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 2px 0;
}

.b_menu-search-container {
    width: 100%;
}

.f-content {
    max-width: 1398px;
    margin: 0 auto;
    padding: var(--pad-sec-y-lg) var(--pad-sec-x-md);
    width: 100%;
}

.footer-bottom.f-content {
    padding: var(--pad-obj-md) var(--pad-sec-x-md);
}


#innerheader a:hover {
    background: none;
}


#innercontainer {
    .menu {
        display: none;
        line-height: 140%;

        li a {
            font-family: "Fira Sans", sans-serif;
            font-size: var(--font-body);
            color: var(--cl-default);
            text-decoration: none;
            font-weight: 500;
            transition: 0.3s;
            background-repeat: no-repeat;
            background-size: 0 100%;
                line-height: 25.2px;


        }


        .active a {
                color: var(--cl-accent);
                text-decoration: underline;
        }
    }

    .b_menu-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        padding: 0 var(--pad-sec-x-md);
        background: var(--cl-accent);
        z-index: 202;

        li a {
            padding: 15px 0;
            display: block;
            color: #fff;
        }

        .active a {
            color: #fff;
        }

    }

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


#pull {
    display: flex;
    gap: 8px;
    background: var(--cl-button);
    color: var(--cl-default);
    padding: 8px;
    font-size: 16px;
    text-decoration: none;
    font-weight: 600;


    &:before {
        font-family: "Font Awesome 6 Pro";
        font-size: 16px;
        font-weight: 800;
        content: "\f0c9";
    }

    &[aria-expanded="true"]::before {
        content: "\f00d";
      
    }

    span.menu-button {
        text-transform: capitalize;
    }


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



#footer {
    margin-top: auto;
    background: var(--pine-dark);
    font-size: var(--font-body);
    font-weight: 400;
    line-height: 140%;
    color: var(--cl-default);
    font-family: "Fira Sans", sans-serif;

    #innerfooter {
        width: 100%;
        max-width: 1704px;
        margin: 0 auto;

        h2 {
            font-size: var(--font-h3);
        }

        .footer-main {
            background: var(--section-bg);
        }
    }


    a {
        text-decoration: underline;
        text-underline-offset: 4px;
        color: var(--cl-accent);
        transition: 0.3s;
        background-repeat: no-repeat;
        background-size: 0 100%;

        &:hover {
            background-image: linear-gradient(to bottom, #ccdeee 0, #ccdeee 100%);
            background-size: 100% 100%;
        }
    }

    ul.social-links {
        display: flex;
        gap: 8px;

        a {
            position: relative;
            text-indent: -9999999px;
            height: 36px;
            width: 36px;
            background: var(--cl-button) url(images/arrow.svg) center center no-repeat;
            display: block;

            &.facebook {
                background: var(--cl-button) url(images/facebook-f-brands-solid.svg) center center no-repeat;
                background-size: 10px;
            }

            &.instagram {
                background: var(--cl-button) url(images/instagram-brands-solid.svg) center center no-repeat;
                background-size: 16px;
            }

            &.linkedin {
                background: var(--cl-button) url(images/linkedin-in-brands-solid.svg) center center no-repeat;
                background-size: 14px;
            }


            &.tiktok {
                background: var(--cl-button) url(images/tiktok-brands-solid.svg) center center no-repeat;
                background-size: 13px;
            }

            &.youtube {
                background: var(--cl-button) url(images/youtube-brands-solid.svg) center center no-repeat;
                background-size: 19px;
            }

            &.threads {
                background: var(--cl-button) url(images/threads-brands-solid.svg) center center no-repeat;
                background-size: 15px;
            }
        }


    }



    .f-content {
        grid-template-columns: repeat(1, 1fr);
        display: grid;
        gap: var(--gap-obj-md);
        grid-column: span 6;

        .footer-column {
            grid-column: span 2;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            line-height: 1.8;
        }
    }

    h2 {
        margin-bottom: var(--gap-txt-sm);
    }

    .footer-bottom.f-content ul {
        display: flex;
        flex-wrap: wrap;
        grid-column: span 8;


        li {
            margin-right: 32px;
        }


    }




}




@media screen and (min-width: 1025px) {
    #innerheader {
        .logo {
            max-height: 69px;
        }
    }

    #innercontainer {
        ul.menu {
            display: flex;
            margin: 0;

            li a {
                margin-left: var(--gap-obj-md);

                &:hover {
                    background-image: linear-gradient(to bottom, #ccdeee 0, #ccdeee 100%);
                    background-size: 100% 100%;
                }
            }


        }
    }

    #footer {

        .f-content {
            grid-template-columns: repeat(6, 1fr);
        }
    }

    #pull {
        display: none;
    }



}