/* ======================================================
   COSLIFE FOOTER
   MODERN CSS SYSTEM
====================================================== */

:root{

    --footer-bg-1:#001F3D;
    --footer-bg-2:#002E5B;

    --footer-primary:#11D89C;

    --footer-white:#ffffff;

    --footer-text:
        rgba(255,255,255,0.82);

    --footer-muted:
        rgba(255,255,255,0.72);

    --footer-glass:
        rgba(255,255,255,0.08);

    --footer-glass-hover:
        rgba(255,255,255,0.14);

    --footer-border:
        rgba(255,255,255,0.08);

    --footer-radius:14px;

    --footer-shadow:
        0 10px 30px rgba(0,0,0,0.15);

    --footer-transition:
        0.35s ease;

    --footer-container:
        1400px;
}

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

.site-footer{

    position: relative;

    isolation: isolate;

    overflow: clip;

    width: 100%;

    color: var(--footer-white);

    border-top:
        4px solid
        var(--footer-primary);

    background:
        linear-gradient(
            135deg,
            var(--footer-bg-1) 0%,
            var(--footer-bg-2) 100%
        );
}

/* ======================================================
   CONTAINER
====================================================== */

.site-footer .container{

    width:
        min(
            var(--footer-container),
            calc(100% - 2rem)
        );

    margin-inline: auto;
}

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

.footer-grid{

    display: grid;

    gap:
        clamp(2rem, 4vw, 4rem);

    align-items: start;

    padding-block:
        clamp(4rem, 8vw, 6rem)
        clamp(3rem, 5vw, 4rem);

    grid-template-columns:
        repeat(
            6,
            minmax(0,1fr)
        );

    grid-template-areas:

        "brand brand services services company company"

        "social social subscribe subscribe subscribe subscribe";
}

/* ======================================================
   GRID AREAS
====================================================== */

.footer-brand{
    grid-area: brand;
}

.services-column{
    grid-area: services;
}

.company-column{
    grid-area: company;
}

.social-column{
    grid-area: social;
}

.subscribe-column{
    grid-area: subscribe;
}

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

.footer-column{

    min-width: 0;

    position: relative;
}

/* ======================================================
   TITLES
====================================================== */

.footer-column h4,
.follow-title{

    position: relative;

    display: inline-flex;

    margin-bottom: 1.5rem;

    font-size:
        clamp(1rem, 1vw + .8rem, 1.125rem);

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;

    color:
        var(--footer-primary);
}

.footer-column h4::after,
.follow-title::after{

    content: "";

    position: absolute;

    left: 0;

    bottom: -.65rem;

    width: 45px;

    height: 3px;

    border-radius: 999px;

    background:
        var(--footer-primary);
}

/* ======================================================
   BRAND
====================================================== */

.footer-logo{

    width:
        clamp(140px, 18vw, 180px);

    max-width: 100%;

    margin-bottom: 1.25rem;

    transition:
        transform
        var(--footer-transition);
}

.footer-logo:hover{

    transform: scale(1.03);
}

.footer-company-name{

    margin-bottom: .9rem;

    font-size:
        clamp(1.5rem, 2vw, 1.8rem);

    font-weight: 700;

    text-wrap: balance;
}

.footer-description{

    max-width: 42ch;

    line-height: 1.9;

    font-size:
        clamp(.92rem, .4vw + .85rem, 1rem);

    color:
        var(--footer-text);

    text-wrap: pretty;
}

/* ======================================================
   LINKS
====================================================== */

.footer-links{

    display: grid;

    gap: .9rem;

    margin: 0;

    padding: 0;

    list-style: none;
}

.footer-links a{

    display: inline-flex;

    align-items: center;

    gap: .65rem;

    width: fit-content;

    text-decoration: none;

    color:
        rgba(255,255,255,0.84);

    font-size:
        clamp(.92rem, .4vw + .82rem, .98rem);

    transition:
        color var(--footer-transition),
        transform var(--footer-transition);
}

.footer-links a:hover{

    color:
        var(--footer-primary);

    transform:
        translateX(6px);
}

/* ======================================================
   SOCIAL ICONS
====================================================== */

.social-icons{

    display: flex;

    flex-wrap: wrap;

    gap: .9rem;

    margin-top: 1.4rem;
}

.social-icons a{

    width:
        clamp(44px, 5vw, 52px);

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color:
        var(--footer-white);

    background:
        var(--footer-glass);

    backdrop-filter:
        blur(10px);

    text-decoration: none;

    transition:
        transform var(--footer-transition),
        background var(--footer-transition),
        color var(--footer-transition);

    font-size:
        clamp(.95rem, 2vw, 1.1rem);
}

.social-icons a:hover{

    background:
        var(--footer-primary);

    color:
        var(--footer-bg-2);

    transform:
        translateY(-4px);
}

/* ======================================================
   SUBSCRIBE
====================================================== */

.subscribe-text{

    margin-bottom: 1.2rem;

    line-height: 1.9;

    color:
        var(--footer-text);

    max-width: 60ch;

    text-wrap: pretty;
}

.subscribe-form{

    display: flex;

    flex-wrap: wrap;

    gap: .9rem;
}

.subscribe-form input[type="email"]{

    flex:
        1 1 260px;

    min-height: 54px;

    padding-inline: 1.1rem;

    border:
        1px solid transparent;

    outline: none;

    border-radius:
        var(--footer-radius);

    background:
        var(--footer-glass);

    color:
        var(--footer-white);

    font-size: .95rem;

    transition:
        background var(--footer-transition),
        border-color var(--footer-transition);
}

.subscribe-form input[type="email"]::placeholder{

    color:
        rgba(255,255,255,0.55);
}

.subscribe-form input[type="email"]:focus{

    border-color:
        var(--footer-primary);

    background:
        var(--footer-glass-hover);
}

.subscribe-form button{

    min-height: 54px;

    padding-inline:
        clamp(1.5rem, 3vw, 2rem);

    border: none;

    border-radius:
        var(--footer-radius);

    background:
        var(--footer-primary);

    color:
        var(--footer-bg-2);

    font-weight: 700;

    cursor: pointer;

    transition:
        transform var(--footer-transition),
        background var(--footer-transition);
}

.subscribe-form button:hover{

    background:
        var(--footer-white);

    transform:
        translateY(-2px);
}

/* ======================================================
   PAYMENT SECTION
====================================================== */

.payment-footer{

    padding-block:
        clamp(2rem, 4vw, 3rem);

    text-align: center;

    border-top:
        1px solid
        var(--footer-border);
}

.payment-title{

    margin-bottom: 1.5rem;

    text-transform: uppercase;

    font-size:
        clamp(1rem, 1vw + .8rem, 1.2rem);

    color:
        var(--footer-primary);
}

.payment-icons{

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        clamp(.8rem, 2vw, 1.2rem);

    margin-bottom: 1.5rem;
}

.payment-icons a{

    width:
        clamp(40px, 5vw, 50px);

    aspect-ratio: 1;

    display: grid;

    place-items: center;

    border-radius:
        var(--footer-radius);

    background:
        var(--footer-glass);

    color:
        var(--footer-white);

    text-decoration: none;

    transition:
        transform var(--footer-transition),
        background var(--footer-transition),
        color var(--footer-transition);
}

.payment-icons a:hover{

    background:
        var(--footer-primary);

    color:
        var(--footer-bg-2);

    transform:
        translateY(-5px);
}

/* ======================================================
   FOOTER BOTTOM LINKS
====================================================== */

.footer-bottom-links{

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: .9rem;

    margin-bottom: 1rem;
}

.footer-bottom-links a{

    text-decoration: none;

    color:
        rgba(255,255,255,0.82);

    transition:
        color var(--footer-transition);
}

.footer-bottom-links a:hover{

    color:
        var(--footer-primary);
}

/* ======================================================
   COPYRIGHT
====================================================== */

.copyright-text{

    font-size:
        clamp(.82rem, .3vw + .78rem, .92rem);

    line-height: 1.8;

    color:
        var(--footer-muted);

    text-wrap: balance;
}

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

@media (width <= 900px){

    .footer-grid{

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(260px,1fr)
            );

        grid-template-areas:

            "brand services"

            "company social"

            "subscribe subscribe";
    }
}

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

@media (width <= 640px){

    .footer-grid{

        grid-template-columns: 1fr;

        grid-template-areas:

            "brand"

            "services"

            "company"

            "social"

            "subscribe";
    }

    .subscribe-form{

        flex-direction: column;
    }

    .subscribe-form button{

        width: 100%;
    }

    .footer-description,
    .subscribe-text{

        max-width: 100%;
    }
}