/* =========================================================
   COMPACT SITE FOOTER
   ========================================================= */

.site-footer {
    width: 100%;

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

    background:
        var(--surface);
}


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

.footer-container {
    width: 100%;

    padding:
        11px
        20px;

    display: grid;

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

    align-items:
        center;

    gap:
        22px;
}


/* =========================================================
   ITEM
   ========================================================= */

.footer-item {
    display: flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;
}


/* =========================================================
   ICON
   ========================================================= */

.footer-icon {
    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    color:
        var(--brand-green);

    background:
        var(--brand-green-soft);
}


.footer-icon svg {
    width:
        17px;

    height:
        17px;
}


/* =========================================================
   COPY
   ========================================================= */

.footer-item__copy {
    display: flex;

    flex-direction:
        column;

    gap:
        3px;

    min-width:
        0;
}


.footer-item__copy strong {
    color:
        var(--text);

    font-size:
        0.63rem;

    font-weight:
        750;

    line-height:
        1.15;

    white-space:
        nowrap;
}


.footer-item__copy a {
    color:
        var(--brand-green);

    font-size:
        0.56rem;

    font-weight:
        700;

    line-height:
        1.2;

    text-decoration:
        none;
}


.footer-item__copy a:hover {
    text-decoration:
        underline;
}


/* =========================================================
   LINK ROW
   ========================================================= */

.footer-item__links {
    display: flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

    white-space:
        nowrap;
}


.footer-item__links span {
    color:
        var(--text-muted);

    font-size:
        0.52rem;
}


/* =========================================================
   PROJECT
   ========================================================= */

.footer-project {
    display: flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;

    min-width:
        185px;
}


/* =========================================================
   PROJECT MARK
   ========================================================= */

.footer-project__mark {
    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    background:
        var(--brand-green);

    color:
        #ffffff;

    font-size:
        0.58rem;

    font-weight:
        800;

    line-height:
        1;
}


/* =========================================================
   PROJECT COPY
   ========================================================= */

.footer-project > div:last-child {
    display: flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        2px;

    min-width:
        0;
}


.footer-project strong {
    color:
        var(--text);

    font-size:
        0.60rem;

    font-weight:
        750;

    line-height:
        1.15;

    white-space:
        nowrap;
}


.footer-project span {
    color:
        var(--text-muted);

    font-size:
        0.53rem;

    line-height:
        1.15;

    white-space:
        nowrap;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.site-footer {
    border-color:
        var(--border);

    background:
        var(--surface);
}


html[data-theme="dark"]
.footer-icon {
    color:
        var(--brand-green);

    background:
        var(--brand-green-soft);
}


html[data-theme="dark"]
.footer-project__mark {
    background:
        var(--brand-green);

    color:
        #ffffff;
}


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

@media (max-width: 1050px) {

    .footer-container {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            12px
            22px;

        padding:
            12px
            18px;
    }


    .footer-project {
        justify-content:
            flex-start;

        min-width:
            0;
    }


    .footer-project > div:last-child {
        align-items:
            flex-start;
    }

}


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

@media (max-width: 580px) {

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

        gap:
            10px;

        padding:
            14px
            16px;
    }


    .footer-item {
        gap:
            9px;
    }


    .footer-project {
        padding-top:
            9px;

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

        justify-content:
            flex-start;
    }


    .footer-project > div:last-child {
        align-items:
            flex-start;
    }

}