/* 
* overrides for storefront - start
*/
.site-footer{
    padding: 0;
}
/* 
* overrides for storefront - end
*/


.footer{
    background-color: #f4f4f4;
    position: relative;
}

.footer__wave{
    background: url(../../images/green-bg.webp) center center repeat;
    display: grid;
}

.footer__wave__inner{
    min-height: 16rem;
 
}
.footer__wave__inner .description {
    max-width: 916px;
    margin: 0 auto;
    padding: 8px;
    min-height: 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer__wave__inner .description h3 {
    color:white;
    text-align: center;
    font-size:26px;
}

.footer__wave__content{
    padding: 6rem 0;
    display: grid;
    grid-template-areas: "content";
}
.footer__wave__content,
.footer__wave__content *,
.footer__wave__content .footer__wave__content__item *{
    color: #fff;
}

.footer__wave__content__item{
    padding: 0 15rem;
    color: #fff;
    /* stack them all into the same grid area, as if position absolute, but better */
    grid-area: content;
    transition: 600ms ease all;
    opacity: 0;
}

.footer__wave__content__item--active{
    opacity: 1;
}

.footer__wave__content__item:last-child p:last-child{
    margin-bottom: 0;
}

.footer__wave__content__item h1,
.footer__wave__content__item h2{
    font-size: 1.6em;
}

.footer__wave__content__item h3,
.footer__wave__content__item h4,
.footer__wave__content__item h5,
.footer__wave__content__item h6{
    font-size: 1.4em;
}

.footer__wave__content__item p{
    font-size: 1.1em;
}

.footer__wave svg{
    fill: #f4f4f4;
}

.footer__inner{
    display: grid;
    grid-template-areas: "footer__meta footer__navigation footer__newsletter"
                         "footer__meta footer__navigation footer__social"
                         "footer__copyright . .";
    grid-template-columns: max-content 1fr 30%;
    width: 100%;
    max-width: var(--site-width);
    padding-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
    column-gap: 6rem;
    row-gap: 2rem;
    justify-content: space-between;
}

.footer__meta{
    grid-area: footer__meta;
}

.footer__meta > * + *{
    margin-top: 1rem;
}

.footer__newsletter{
    grid-area: footer__newsletter;
}

.footer__newsletter__form button{
    width: 100%;
}

.footer__navigation{
    grid-area: footer__navigation;
    column-gap: 4rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
}

.footer__navigation__group{
    font-size: var(--font-size--small);
}

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

.footer__navigation__group .menu-item + .menu-item{
    margin-top: 3rem;
}

.footer__navigation__group .menu-item a{
    text-decoration: none;
}


.footer__i18n{
    grid-area: footer__i18n;
}

.footer__i18n__icon{
    display: inline-block;
    align-self: center;
}

.footer__i18n__switcher{
    display: inline-block;
}

.footer__social{
    grid-area: footer__social;
}

.footer__social .wp-block-social-links{
    font-size: 26px;
}

.footer__copyright{
    grid-area: footer__copyright;
    font-size: var(--font-size--small);
}





@media screen and (max-width: 980px) {
   .footer__wave__content__item{
        padding: 0;
    }

    .footer__inner{
        grid-template-areas: "footer__newsletter"
                             "footer__social"
                             "footer__meta"
                             "footer__navigation"
                             "footer__copyright";
        grid-template-columns: 100%;
        grid-template-rows: repeat(5, auto);
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .footer__social{
        justify-content: flex-start;
    }

    .footer__navigation{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        row-gap: 1rem;
    }

    .footer__navigation .menu{
        position: relative;
        background-color: transparent;
    }

    .footer__i18n, .footer__copyright{
        display: flex;
        justify-content: center;
    }

    .footer__i18n__icon{
        margin-right: 0.5rem;
    }    

    .footer__copyright{
        margin-left: 0;
    }

    .footer__navigation__group .menu-item + .menu-item{
        margin-top: 1.5rem;
    }
}