@import url("https://use.typekit.net/xum4tei.css");
@import url("tokens.css");

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

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

.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: 25px;
    }
}

#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-obj-lg) var(--pad-sec-x-md);
    width: 100%;
    text-align: center;
}




#innerheader a:hover {
    background: none;
}


#innercontainer {
    .menu {
        display: none;
        line-height: 140%;
        margin: 0;
        padding: 0;
        list-style: none;

        li a {
            font-family: "interstate", 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 {
            
                text-decoration: underline;
        }


    }



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

        li a {
            padding: 15px 0;
            display: block;
            color: var(--cl-default);
        }

        .active a {
            color: var(--cl-link);
        }


    }


}


#pull {
    display: flex;
    gap: 8px;
    color: var(--cl-link);
    font-size: 16px;
    text-decoration: none;
    font-weight: 400;
    font-family: "interstate", sans-serif;
    align-items: center;
    


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


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

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


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



#footer {
    padding: 16px;
    margin-top: auto;
    background: var(--pine-dark);
    font-size: var(--font-body);
    font-weight: 400;
    line-height: 140%;
    font-family: "Fira Sans", sans-serif;
    background: #0e7a3d;
    background: linear-gradient(185deg, #0e7a3d, #1a4e44 76%, #1e4146);
    color: #fff;
    border-top-left-radius: 50px;

    p {
        margin: 0;
    }



    #innerfooter {
        width: 100%;
        margin: 0 auto;

        h2 {
            font-size: var(--font-h3);
            font-family: "interstate", sans-serif;
            font-weight: 600;
            color: #fff;
        }


    }

    .footer-bottom.f-content, .footer-top.f-content {
        padding: var(--pad-obj-md) var(--pad-sec-x-md);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }


    .footer-top {
        display: flex;
        justify-content: center;
    }

    a {
        color: #fff;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

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

        a {
            position: relative;
            text-indent: -9999999px;
            height: 36px;
            width: 36px;
            background: #fff url(images/arrow.svg) center center no-repeat;
            display: block;
            border-radius: 50px;
            
            &.facebook {
                background: #fff url(images/facebook.svg) center center no-repeat;
                background-size: 12px;
            }

            &.instagram {
                background: #fff url(images/instagram.svg) center center no-repeat;
                background-size: 21px;
            }

            &.linkedin {
                background: #fff url(images/linkedin.svg) center center no-repeat;
                background-size: 19px;
            }

            &:focus-visible, .focus {
                                outline: #000 1px solid;
                outline-offset: -2px;
            }

        }


    }


    .footer-main .f-content {
        border-top: #fff solid 0.5px;
        border-bottom: #fff solid 0.5px;
        text-align: center;
    }

    .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: 2.2;
            
        }
    }

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

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


        li {
            margin-right: 32px;
        }


    }

}

@media screen and (min-width: 769px) { 
    #footer {
        border-top-left-radius: 100px;
    }

     #innerheader {
        .logo {
            max-height: 40px;
        }
    }

    #innercontainer .b_menu-open {
        top: 65px;
    } 

}

@media screen and (min-width: 1140px) {

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

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

            }


        }
    }


    
    #footer {

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

        .footer-bottom.f-content,
        .footer-top.f-content {
            flex-direction: row;
        }

        .footer-main .f-content {

            text-align: left;
        }

    }

    #pull {
        display: none;
    }


}