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

.site-footer {
    width: 100%;

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

    margin-top: auto;
}


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

.site-footer__container {
    width: 100%;
}


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

.site-footer__content {
    display: grid;

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

    gap: var(--spacing-12);

    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
}


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

.site-footer__brand {
    max-width: 320px;
}


/* ========================================
   LOGO
   ======================================== */

.site-footer__logo {
    display: inline-flex;
    align-items: center;
}


.site-footer__logo-image {
    display: block;

    width: auto;
    height: 48px;
    max-width: 200px;

    transition: opacity var(--transition-normal);
}


.site-footer__logo:hover .site-footer__logo-image {
    opacity: 0.8;
}


/* ========================================
   DESCRIPTION
   ======================================== */

.site-footer__description {
    margin-top: var(--spacing-4);

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

    line-height: var(--line-height-relaxed);
}


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

.site-footer__title {
    margin-bottom: var(--spacing-4);

    color: var(--color-background);

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}


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

.site-footer__links {
    display: flex;
    flex-direction: column;

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


.site-footer__links a {
    color: var(--color-text-muted);

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

    transition:
        color var(--transition-normal);
}


.site-footer__links a:hover {
    color: var(--color-background);
}


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

.site-footer__contact {
    display: flex;
    flex-direction: column;

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


.site-footer__contact a {
    color: var(--color-text-muted);

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

    transition:
        color var(--transition-normal);
}


.site-footer__contact a:hover {
    color: var(--color-background);
}


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

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: center;

    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);

    border-top:
        var(--border-width)
        var(--border-style)
        rgba(255, 255, 255, 0.15);
}


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

.site-footer__copyright {
    color: var(--color-text-muted);

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

    text-align: center;
}