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

.site-footer {

    padding-top: var(--spacing-4xl);

    background-color: var(--color-primary-dark);

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

}


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

.site-footer__grid {

    display: grid;

    grid-template-columns:
        1.4fr
        1fr
        0.8fr;

    gap: var(--spacing-4xl);

    padding-bottom: var(--spacing-3xl);

}


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

.site-footer__column {

    min-width: 0;

}


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

.site-footer__title {

    margin-bottom: var(--spacing-lg);

    color: var(--color-white);

    font-size: var(--font-size-lg);

    font-weight: 700;

}


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

.site-footer__text {

    max-width: 420px;

    margin-bottom: var(--spacing-md);

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

    font-size: var(--font-size-sm);

    line-height: 1.7;

}


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

.site-footer__address {

    margin-bottom: var(--spacing-xl);

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

    font-size: var(--font-size-sm);

    font-style: normal;

    line-height: 1.8;

}


.site-footer__address strong {

    color: var(--color-white);

}


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

.site-footer__contact {

    display: flex;

    flex-direction: column;

    gap: 0.15rem;

    margin-bottom: var(--spacing-md);

    font-size: var(--font-size-sm);

}


.site-footer__contact span {

    color: var(--color-text-muted);

    font-size: var(--font-size-xs);

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.site-footer__contact a {

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

    transition:
        color var(--transition-fast);

}


.site-footer__contact a:hover {

    color: var(--color-accent-light);

}


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

.site-footer__nav {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: var(--spacing-sm);

}


.site-footer__nav a {

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

    font-size: var(--font-size-sm);

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);

}


.site-footer__nav a:hover {

    color: var(--color-white);

    transform: translateX(3px);

}


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

.site-footer__bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: var(--spacing-xl);

    padding-block: var(--spacing-lg);

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

}


.site-footer__bottom p {

    margin: 0;

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

    font-size: var(--font-size-xs);

}


.site-footer__legal {

    display: flex;

    flex-wrap: wrap;

    gap: var(--spacing-lg);

}


.site-footer__legal a {

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

    font-size: var(--font-size-xs);

    transition:
        color var(--transition-fast);

}


.site-footer__legal a:hover {

    color: var(--color-white);

}


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

@media (max-width: 900px) {

    .site-footer__grid {

        grid-template-columns:
            1fr 1fr;

        gap: var(--spacing-3xl);

    }


    .site-footer__column:first-child {

        grid-column:
            1 / -1;

    }

}


@media (max-width: 600px) {

    .site-footer {

        padding-top: var(--spacing-3xl);

    }


    .site-footer__grid {

        grid-template-columns:
            1fr;

        gap: var(--spacing-2xl);

        padding-bottom: var(--spacing-2xl);

    }


    .site-footer__column:first-child {

        grid-column:
            auto;

    }


    .site-footer__bottom {

        flex-direction: column;

        align-items: flex-start;

    }


    .site-footer__legal {

        flex-direction: column;

        gap: var(--spacing-sm);

    }

}