/*
 * ============================================================
 * BLOODMOON GRID
 * Common footer
 * ============================================================
 *
 * Version : 2026-09-07 15:50
 *
 * Compact footer designed for both:
 * - regular web browsers
 * - OpenSimulator viewer login screen
 *
 * Cookie banner styling is imported here so every page using
 * the common footer automatically receives the cookie style.
 */

@import url("cookies.css");


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

.site-footer {

    border-top:
        1px solid
        rgba(34, 43, 54, 0.08);

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

    color:
        var(--text-soft);

}


/* ============================================================
   INNER LAYOUT
============================================================ */

.footer-inner {

    width:
        min(
            var(--container),
            calc(100% - 60px)
        );

    min-height:
        46px;

    margin:
        0
        auto;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        18px;

}


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

.footer-copyright {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    min-width:
        0;

    color:
        #7a828c;

    font-size:
        0.62rem;

    white-space:
        nowrap;

}


.footer-separator {

    color:
        #c1c6cc;

}


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

.footer-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

}


.footer-links a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #656d77;

    text-decoration:
        none;

    font-size:
        0.62rem;

    font-weight:
        650;

    white-space:
        nowrap;

    transition:
        color 0.15s ease,
        transform 0.15s ease;

}


.footer-links a:hover {

    color:
        var(--bloodmoon);

    transform:
        translateY(-1px);

}


.footer-link-icon {

    width:
        16px;

    height:
        16px;

    display:
        block;

    object-fit:
        contain;

}


.footer-donate {

    color:
        var(--bloodmoon)
        !important;

}


.footer-heart {

    color:
        var(--bloodmoon);

    font-size:
        0.8rem;

    line-height:
        1;

}


/* ============================================================
   SIGNATURE
============================================================ */

.footer-signature {

    justify-self:
        end;

    color:
        #9a6c70;

    font-size:
        0.59rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}


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

@media (max-width: 1050px) {

    .footer-inner {

        grid-template-columns:
            1fr
            auto;

    }


    .footer-signature {

        display:
            none;

    }

}


@media (max-width: 760px) {

    .footer-inner {

        width:
            calc(100% - 24px);

        min-height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            7px;

        padding:
            10px
            0;

    }


    .footer-copyright {

        justify-content:
            center;

        white-space:
            normal;

        text-align:
            center;

    }


    .footer-links {

        flex-wrap:
            wrap;

        gap:
            8px
            12px;

    }

}


@media (max-width: 480px) {

    .footer-links a span:not(.footer-heart) {

        display:
            none;

    }


    .footer-links {

        gap:
            14px;

    }


    .footer-link-icon {

        width:
            18px;

        height:
            18px;

    }

}