/* =====================================================================
   CHUM FOOTER
   COMPACT PREMIUM ECOMMERCE FOOTER
   ===================================================================== */


.chum-site-footer {
    --footer-bg: #10143f;
    --footer-bg-deep: #0b0f32;

    --footer-white: #ffffff;

    --footer-copy:
        rgba(
            255,
            255,
            255,
            0.68
        );

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

    --footer-line:
        rgba(
            255,
            255,
            255,
            0.09
        );

    width: 100%;

    margin: 0;

    padding: 0;

    color: #ffffff;

    background: var(--footer-bg);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* =====================================================================
   MAIN
   ===================================================================== */

.chum-footer-main {
    width: 100%;

    padding:
        42px
        0
        38px;

    background:
        radial-gradient(
            500px
            220px
            at
            6%
            0%,
            rgba(
                74,
                190,
                240,
                0.055
            ),
            transparent
            72%
        ),

        linear-gradient(
            115deg,
            #111644 0%,
            #151a4d 55%,
            #10143f 100%
        );
}


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

.chum-footer-container {
    width:
        min(
            1480px,
            calc(
                100% - 72px
            )
        );

    margin:
        0
        auto;

    display: grid;

    grid-template-columns:
        minmax(220px, 1.25fr)
        minmax(120px, .62fr)
        minmax(120px, .62fr)
        minmax(135px, .72fr)
        minmax(280px, 1.2fr);

    align-items: start;

    gap:
        clamp(
            32px,
            4vw,
            65px
        );
}


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

.chum-footer-brand {
    min-width: 0;
}


.chum-footer-logo {
    display: inline-flex;

    align-items: center;
}


.chum-footer-logo img {
    display: block;

    width: 126px;

    height: auto;

    filter:
        brightness(0)
        invert(1);
}


.chum-footer-brand > p {
    margin:
        17px
        0
        0;

    color: #ffffff;

    font-size: 16px;

    font-weight: 760;

    line-height: 1.25;

    letter-spacing: -0.02em;
}


.chum-footer-brand > small {
    max-width: 260px;

    margin-top: 7px;

    display: block;

    color: var(--footer-copy);

    font-size: 9px;

    line-height: 1.55;
}


/* =====================================================================
   COLUMNS
   ===================================================================== */

.chum-footer-column h3 {
    margin:
        2px
        0
        17px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 730;
}


.chum-footer-column nav {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.chum-footer-column nav a {
    width: fit-content;

    color:
        var(--footer-copy) !important;

    text-decoration:
        none !important;

    font-size: 9px;

    font-weight: 460;

    line-height: 1.3;

    transition:
        color 150ms ease,
        transform 150ms ease;
}


.chum-footer-column nav a:hover {
    color:
        #ffffff !important;

    transform:
        translateX(2px);
}


/* =====================================================================
   CONNECT
   ===================================================================== */

.chum-footer-connect {
    min-width: 0;
}


.chum-footer-eyebrow {
    display: block;

    margin-bottom: 6px;

    color:
        #f45a7b;

    font-size: 7px;

    font-weight: 850;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.chum-footer-connect h3 {
    margin: 0;

    color: #ffffff;

    font-size: 16px;

    font-weight: 750;

    line-height: 1.2;

    letter-spacing: -0.02em;
}


.chum-footer-connect > p {
    margin:
        5px
        0
        0;

    color:
        var(--footer-copy);

    font-size: 8px;
}


/* =====================================================================
   NEWSLETTER
   ===================================================================== */

.chum-footer-subscribe {
    width: 100%;

    margin-top: 14px;

    display: grid;

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

    gap: 7px;
}


/* =====================================================================
   LIQUID GLASS EMAIL
   ===================================================================== */

.chum-footer-email {
    height: 40px;

    min-width: 0;

    display: flex;

    align-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.25
        );

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            0.075
        );

    -webkit-backdrop-filter:
        blur(18px)
        saturate(170%);

    backdrop-filter:
        blur(18px)
        saturate(170%);

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.17
        );
}


.chum-footer-email svg {
    width: 14px;
    height: 14px;

    margin-left: 11px;

    flex:
        0
        0
        14px;

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


.chum-footer-email input {
    min-width: 0;

    width: 100%;

    height: 100%;

    padding:
        0
        10px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #ffffff;

    font-size: 8px;
}


.chum-footer-email input::placeholder {
    color:
        rgba(
            255,
            255,
            255,
            0.46
        );

    opacity: 1;
}


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

.chum-footer-subscribe > button {
    position: relative;

    min-width: 78px;

    height: 40px;

    padding:
        0
        12px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.36
        );

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            0.11
        );

    -webkit-backdrop-filter:
        blur(18px)
        saturate(180%);

    backdrop-filter:
        blur(18px)
        saturate(180%);

    box-shadow:
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.30
        );

    color: #ffffff;

    cursor: pointer;

    font-size: 8px;

    font-weight: 700;

    transition:
        background 150ms ease,
        transform 150ms ease;
}


.chum-footer-subscribe > button:hover {
    transform:
        translateY(-1px);

    background:
        rgba(
            232,
            65,
            100,
            0.88
        );
}


/* =====================================================================
   EMAIL CONTACT
   ===================================================================== */

.chum-footer-contact {
    width: fit-content;

    margin-top: 12px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        var(--footer-copy) !important;

    text-decoration:
        none;

    font-size: 8px;
}


.chum-footer-contact:hover {
    color:
        #ffffff !important;
}


.chum-footer-contact svg {
    width: 14px;
    height: 14px;
}


/* =====================================================================
   BOTTOM BAR
   ===================================================================== */

.chum-footer-bottom {
    width: 100%;

    background:
        var(--footer-bg-deep);

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


.chum-footer-bottom-container {
    width:
        min(
            1480px,
            calc(
                100% - 72px
            )
        );

    min-height: 43px;

    margin:
        0
        auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* =====================================================================
   BUILT BY
   ===================================================================== */

.chum-footer-built {
    display: flex;

    align-items: center;

    gap: 5px;

    color:
        var(--footer-muted);

    font-size: 7px;
}


.chum-footer-built strong {
    color:
        rgba(
            255,
            255,
            255,
            0.73
        );

    font-size: 7px;

    font-weight: 760;

    letter-spacing: .04em;
}


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

.chum-footer-copyright {
    color:
        var(--footer-muted);

    font-size: 7px;
}


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

@media (max-width: 1150px) {

    .chum-footer-container {
        width:
            calc(
                100% - 48px
            );

        grid-template-columns:
            1.1fr
            .7fr
            .7fr
            .8fr;

        gap: 30px;
    }


    .chum-footer-connect {
        grid-column:
            1 / -1;

        max-width: 500px;
    }


    .chum-footer-bottom-container {
        width:
            calc(
                100% - 48px
            );
    }

}


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

@media (max-width: 800px) {

    .chum-footer-main {
        padding:
            34px
            0;
    }


    .chum-footer-container {
        width:
            calc(
                100% - 30px
            );

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

        gap:
            30px
            22px;
    }


    .chum-footer-brand,
    .chum-footer-connect {
        grid-column:
            1 / -1;
    }


    .chum-footer-bottom-container {
        width:
            calc(
                100% - 30px
            );
    }

}


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

@media (max-width: 575px) {

    .chum-footer-main {
        padding:
            30px
            0;
    }


    .chum-footer-container {
        width: 100%;

        padding:
            0
            17px;

        grid-template-columns:
            1fr
            1fr;

        gap:
            27px
            18px;
    }


    .chum-footer-brand,
    .chum-footer-connect {
        grid-column:
            1 / -1;
    }


    .chum-footer-logo img {
        width: 112px;
    }


    .chum-footer-brand > p {
        font-size: 15px;
    }


    .chum-footer-subscribe {
        max-width: 430px;
    }


    .chum-footer-bottom-container {
        width: 100%;

        min-height: 54px;

        padding:
            10px
            17px;

        align-items: flex-start;

        justify-content: center;

        flex-direction: column;

        gap: 5px;
    }

}


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

@media (max-width: 390px) {

    .chum-footer-container {
        grid-template-columns: 1fr;
    }


    .chum-footer-brand,
    .chum-footer-connect {
        grid-column: auto;
    }


    .chum-footer-subscribe {
        grid-template-columns: 1fr;
    }


    .chum-footer-subscribe > button {
        width: 100%;
    }

}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

    .chum-footer-column nav a,
    .chum-footer-subscribe > button {
        transition: none !important;
    }

}