/* =========================================================
   BARKBUDDY — SHARED FOOTER
   ========================================================= */

.bb-footer {
    position: relative;
    z-index: 1;
    overflow: hidden;

    padding: 28px 0 14px;

    color: #fffaf0;

    background:
        linear-gradient(
            180deg,
            rgba(7, 7, 7, 0.7),
            rgba(4, 4, 4, 0.96)
        );

    border-top: 1px solid rgba(223, 188, 106, 0.2);
}


/* =========================================================
   BACKGROUND GLOW
   ========================================================= */

.bb-footer__glow {
    position: absolute;

    top: -180px;
    right: -120px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background: rgba(223, 188, 106, 0.09);

    filter: blur(90px);

    pointer-events: none;
}


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

.bb-footer__container {
    position: relative;

    width: min(1240px, calc(100% - 40px));

    margin-inline: auto;
}


/* =========================================================
   TOP SECTION
   ========================================================= */

.bb-footer__top {
    display: grid;

    grid-template-columns:
        minmax(200px, 0.85fr)
        minmax(360px, 1.15fr);

    align-items: start;

    gap: 40px;

    padding-bottom: 22px;
}


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

.bb-footer__brand {
    max-width: 340px;
}

.bb-footer__logo {
    display: inline-flex;

    max-width: 185px;
}

.bb-footer__logo img,
.bb-footer__brand img {
    display: block;

    width: 180px;
    max-width: 100%;
    height: auto;
}

.bb-footer__brand p {
    max-width: 310px;

    margin-top: 10px;

    color: rgba(255, 250, 240, 0.58);

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   INSTAGRAM
   ========================================================= */

.bb-footer__instagram {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 14px;

    color: var(--bb-gold);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.bb-footer__instagram:hover,
.bb-footer__instagram:focus-visible {
    color: #ffffff;
}

.bb-footer-instagram-icon {
    display: inline-flex;

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

    width: 26px;
    height: 26px;

    color: var(--bb-gold);
}

.bb-footer-instagram-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bb-footer-instagram-icon svg circle:last-child {
    fill: currentColor;
    stroke: none;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.bb-footer__nav {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(95px, 1fr));

    gap: 20px 30px;

    width: min(600px, 100%);

    justify-self: end;
}

.bb-footer__column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 1px;
}

.bb-footer__column strong {
    margin-bottom: -4px;

    color: var(--bb-gold);

    font-size: 14px;
    font-weight: 850;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}

.bb-footer__column a {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    text-indent: 6px;

    color: rgba(255, 250, 240, 0.68);

    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;

    text-decoration: none;

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

.bb-footer__column a:hover,
.bb-footer__column a:focus-visible {
    color: var(--bb-gold);

    transform: translateX(3px);
}


/* =========================================================
   BOTTOM SECTION
   ========================================================= */

.bb-footer__bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    gap: 25px;

    padding-top: 14px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bb-footer__bottom p {
    margin: 0;

    color: rgba(255, 250, 240, 0.4);

    font-size: 10px;
    line-height: 1.5;
}


/* Copyright — LEFT */

.bb-footer__bottom > :first-child {
    margin-left: 0;
    margin-right: auto;
}


/* Built for the pack — RIGHT */

.bb-footer__bottom > :last-child {
    margin-left: auto;
    margin-right: 0;
}

.bb-footer__message {
    display: inline-flex;

    align-items: center;

    gap: 7px;
}


/* =========================================================
   DESKTOP / TABLET
   651px AND ABOVE
   ========================================================= */

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

    .bb-footer__top {
        display: grid;

        grid-template-columns:
            minmax(200px, 0.85fr)
            minmax(360px, 1.15fr);

        align-items: start;

        gap: 40px;
    }


    /* Logo / Instagram — LEFT */

    .bb-footer__brand {
        justify-self: start;
    }


    /* Explore / Support / Crown — RIGHT */

    .bb-footer__nav {
        justify-self: end;

        width: min(600px, 100%);

        grid-template-columns:
            repeat(3, minmax(95px, 1fr));
    }


    /* Copyright / Built for the pack */

    .bb-footer__bottom {
        flex-direction: row;

        align-items: center;
        justify-content: space-between;
    }
}


/* =========================================================
   MOBILE
   650px AND BELOW
   ========================================================= */

@media screen and (max-width: 650px) {

    .bb-footer {
        padding: 12px 0 14px;
    }


    /* -----------------------------------------
       CONTAINER
       ----------------------------------------- */

    .bb-footer__container {
        width: min(100% - 24px, 1240px);
    }


    /* -----------------------------------------
       TOP
       ----------------------------------------- */

    .bb-footer__top {
        display: grid;

        grid-template-columns: 1fr;

        gap: 24px;

        padding-bottom: 20px;
    }


    /* -----------------------------------------
       BRAND
       ----------------------------------------- */

    .bb-footer__brand {
        position: relative;

        max-width: none;
    }

    .bb-footer__logo {
        max-width: 190px;
    }


    /* Instagram — RIGHT EDGE beside logo */

    .bb-footer__instagram {
        position: absolute;

        top: 8px;
        right: 1px;

        margin-top: 0;
    }


    /* -----------------------------------------
       MOBILE NAVIGATION

       Explore        Support
                      The Crown
       ----------------------------------------- */

    .bb-footer__nav {
        display: grid;

        width: 100%;

        grid-template-columns: 1fr 1fr;

        grid-template-areas:
            "explore support"
            "explore crown";

        column-gap: 24px;
        row-gap: 1px;

        align-items: start;

        justify-self: stretch;
    }

    .bb-footer__column:nth-child(1) {
        grid-area: explore;
    }

    .bb-footer__column:nth-child(2) {
        grid-area: support;
    }

    .bb-footer__column:nth-child(3) {
        grid-area: crown;
    }


    /* -----------------------------------------
       BOTTOM

       Copyright              Built for pack
       ----------------------------------------- */

    .bb-footer__bottom {
        display: flex;

        flex-direction: row;

        align-items: center;
        justify-content: space-between;

        gap: 6px;

        padding-top: 12px;
    }

    .bb-footer__bottom p {
        font-size: 12px;

        white-space: nowrap;
    }

    .bb-footer__bottom > :first-child {
        margin-left: 0;
        margin-right: auto;
    }

    .bb-footer__bottom > :last-child {
        margin-left: auto;
        margin-right: 0;
    }

    .bb-footer__message {
        margin-left: auto;
    }
}