/* ==========================================
   FOOTER
========================================== */

.footer{
    background:#ef0b0b;
    border-top:3px solid #000;
    padding:2rem 3rem;
}

.footer__inner{
    width:min(94%,1600px);
    margin:0 auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1.5rem;
}

/* ==========================================
   LEFT
========================================== */

.footer__left{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer__brand-wrapper{
    margin-bottom:.5rem;
}

.footer__brand{
    font-family:var(--font-heading);
    font-size:1.5rem;
    font-weight:900;
    text-transform:uppercase;
    line-height:1;
    color:#000;
}

.footer__copyright-wrapper{
    margin-bottom:1rem;
}

.footer__copy{
    font-family:var(--font-body);
    font-size:.65rem;
    font-weight:500;
    line-height:1.5;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#3C4B35;
}

.footer__social-wrapper{
    display:flex;
    align-items:center;
    gap:.8rem;
}

.footer__social-link{
    width:2.8rem;
    height:2.8rem;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid #000;
    color:#000;
    text-decoration:none;

    transition:.3s ease;
}

.footer__social-link:hover{
    background:#000;
    color:#fff;
}

.footer__social-link svg{
    width:1.2rem;
    height:1.2rem;
}

.footer__social-link[aria-label="Facebook"] svg{
    transform:scale(1.25);
}

/* ==========================================
   CENTER
========================================== */

.footer__center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.footer__nav-group{
    display:flex;
    align-items:center;
    gap:2rem;
}

.footer__nav-link{
    text-decoration:none;
    font-family:var(--font-body);
    font-size:.9rem;
    font-weight:600;
    color:#3C4B35;
    white-space:nowrap;
    transition:.3s;
}

.footer__nav-link:hover{
    color:#000;
}

.footer__nav-link.active{
    color:#000;
    text-decoration:underline;
    text-underline-offset:4px;
}

/* ==========================================
   RIGHT
========================================== */

.footer__right{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.footer__tagline-wrapper{
    margin-bottom:1rem;
}

.footer__tagline{
    font-family:var(--font-heading);
    font-size:1.3rem;
    font-weight:900;
    line-height:1.2;
    text-transform:uppercase;
    text-align:center;
    color:#000;
    white-space:nowrap;
}

.footer__button-wrapper{
    display:flex;
}

.footer__cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.3rem 1.5rem;

    background:#0F62FE;
    color:#000;

    text-decoration:none;
    font-weight:700;
    font-size:.9rem;

    border:2px solid #000;
    border-radius:.45rem;

    transition:.3s ease;
}

.footer__cta-btn:hover{
    background:#084fd0;
    color:#fff;
    transform:translateY(-2px);
}

/* ==========================================
   SHOP (NEW SECTION)
========================================== */

.footer__shop{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    padding:0 1.5rem;
    border-left:1px solid #000;
    border-right:1px solid #000;
}

.footer__shop-content{
    display:flex;
    align-items:center;
    gap:1rem;
}

.footer__shop-icon{
    width:2.2rem;
    height:2.2rem;
    color:#000;
    flex-shrink:0;
}

.footer__shop-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.footer__shop-title{
    font-family:var(--font-heading);
    font-size:1.15rem;
    font-weight:900;
    color:#000;
    margin:0;
    line-height:1.2;
    text-transform:uppercase;
    white-space:nowrap;
}

.footer__shop-desc{
    font-family:var(--font-body);
    font-size:.8rem;
    font-weight:500;
    color:#000;
    margin:.2rem 0 0 0;
    line-height:1.3;
}

.footer__shop-btn-wrapper{
    display:flex;
    width:100%;
    justify-content:center;
}

.footer__shop-btn{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:180px;
    padding:.4rem 1.2rem;
    background:#fff;
    color:#000;
    text-decoration:none;
    font-family:var(--font-body);
    font-weight:700;
    font-size:.85rem;
    border:2px solid #000;
    border-radius:.45rem;
    transition:.3s ease;
}

.footer__shop-btn:hover{
    background:#000;
    color:#fff;
    transform:translateY(-2px);
}

.footer__btn-arrow{
    width:1.1rem;
    height:1.1rem;
    transition:transform .3s ease;
}

.footer__shop-btn:hover .footer__btn-arrow{
    transform:translateX(3px);
}

/* ==========================================
   TABLET
========================================== */

@media (max-width:1200px){

    .footer{
        padding:2rem;
    }

    .footer__inner{
        flex-direction:column;
        align-items:center;
        gap:2rem;
        text-align:center;
    }

    .footer__left,
    .footer__right{
        align-items:center;
    }

    .footer__center{
        justify-content:center;
    }

    .footer__nav-group{
        flex-wrap:wrap;
        justify-content:center;
        gap:1.2rem;
    }

    .footer__tagline{
        text-align:center;
        white-space:normal;
    }

    .footer__shop{
        border-left:none;
        border-right:none;
        padding:0;
    }

    .footer__shop-title{
        white-space:normal;
    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    .footer{
        padding:1.5rem;
    }

    .footer__inner{
        gap:1.5rem;
    }

    .footer__nav-group{
        flex-direction:column;
        gap:.8rem;
    }

    .footer__social-wrapper{
        justify-content:center;
    }

    .footer__social-link{
        width:2.5rem;
        height:2.5rem;
    }

    .footer__social-link svg{
        width:1rem;
        height:1rem;
    }

    .footer__right{
        align-items:center;
    }

    .footer__button-wrapper{
        width:100%;
        justify-content:center;
    }

    .footer__cta-btn{
        width:100%;
        max-width:220px;
    }

    .footer__shop-btn-wrapper{
        width:100%;
        justify-content:center;
    }

    .footer__shop-btn{
        width:100%;
        max-width:220px;
    }

}

/* ==========================================
   SMALL MOBILE (≤ 600px)
========================================== */

@media (max-width:600px){

    .footer{
        padding:1.25rem;
    }

    .footer__inner{
        gap:1.2rem;
    }

    .footer__brand{
        font-size:1.25rem;
    }

    .footer__copy{
        font-size:.6rem;
        letter-spacing:.12em;
    }

    .footer__social-link{
        width:2.2rem;
        height:2.2rem;
    }

    .footer__social-link svg{
        width:.9rem;
        height:.9rem;
    }

    .footer__nav-group{
        flex-direction:column;
        align-items:center;
        gap:.6rem;
    }

    .footer__tagline{
        font-size:1.1rem;
        text-align:center;
    }

    .footer__cta-btn{
        max-width:100%;
        padding:.4rem 1.2rem;
        font-size:.85rem;
    }

}

/* ==========================================
   EXTRA-SMALL MOBILE (≤ 380px)
========================================== */

@media (max-width:380px){

    .footer{
        padding:1rem;
    }

    .footer__inner{
        gap:1rem;
    }

    .footer__brand{
        font-size:1.1rem;
    }

    .footer__copy{
        font-size:.58rem;
        letter-spacing:.1em;
    }

    .footer__social-wrapper{
        gap:.6rem;
    }

    .footer__social-link{
        width:2rem;
        height:2rem;
    }

    .footer__social-link svg{
        width:.85rem;
        height:.85rem;
    }

    .footer__tagline{
        font-size:1rem;
    }

    .footer__cta-btn{
        font-size:.8rem;
        padding:.35rem 1rem;
    }

}