.site-footer {
    background: var(--color-secondary);
    color:      var(--color-bg-lighter);
    padding:    60px 0 30px;
}

.site-footer .container {
    max-width: 1920px;
    padding:   0 100px;
}

.footer-wrp {
    display:        flex;
    flex-direction: column;
    gap:            32px;
}

.footer-top {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             40px;
}

.footer-about {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    width:          441px;
    flex-shrink:    0;
}

.footer-about__logo img {
    display: block;
    width:   204px;
    height:  auto;
}

.footer-about__logo--invert img { filter: brightness(0) invert(1); }

.footer-about__logo .site-title-link { color: var(--color-bg-lighter); }

.footer-about__text {
    font-size:   14px;
    font-weight: 300;
    line-height: 1.4;
    color:       var(--color-bg-lighter);
}

.footer-socials {
    display: flex;
    gap:     16px;
}

.footer-socials__link {
    display:    flex;
    transition: opacity var(--transition);
}

.footer-socials__link:hover { opacity: 0.8; }
.footer-socials__link .icon { display: block; }

.footer-cols {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             40px;
    flex-shrink:     0;
}

.footer-col {
    display:        flex;
    flex-direction: column;
    gap:            24px;
    width:          232px;
}

.footer-col__title {
    font-size:      14px;
    font-weight:    700;
    line-height:    1.4;
    letter-spacing: 0;
    color:          #ffffff;
}

.footer-col__list li + li { margin-top: 6px; }

.footer-col__list a {
    font-size:   14px;
    line-height: 1.4;
    color:       var(--color-bg-lighter);
    transition:  color var(--transition);
}

.footer-col__list a:hover,
.footer-col__list .current-menu-item > a { color: #ffffff; }

.footer-contacts {
    width: 280px;
    gap:   16px;
}

.footer-contacts .footer-col__title { margin-bottom: 8px; }

.footer-contacts__item {
    display:       flex;
    align-items:   center;
    gap:           8px;
    font-size:     14px;
    font-style:    normal;
    line-height:   1.4;
    color:         var(--color-bg-lighter);
    overflow-wrap: anywhere;
    transition:    color var(--transition);
}

.footer-contacts__item:hover { color: #ffffff; }
.footer-contacts__item .icon { flex-shrink: 0; }

.footer-contacts__item--address             { align-items: flex-start; }
.footer-contacts__item--address .icon       { margin-top: 3px; }

.footer-bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    flex-wrap:       wrap;
    padding-top:     32px;
    border-top:      1px solid rgba(244, 243, 238, 0.2);
}

.footer-copyright {
    font-size: 14px;
    color:     var(--color-bg-lighter);
}

.footer-legal__list {
    display:   flex;
    gap:       24px;
    flex-wrap: wrap;
}

.footer-legal__list a {
    font-size:  14px;
    color:      var(--color-bg-lighter);
    transition: color var(--transition);
}

.footer-legal__list a:hover { color: #ffffff; }

@media (max-width: 1440px) {
    .site-footer .container { padding: 0 40px; }

    .footer-about {
        flex:      0 1 441px;
        width:     auto;
        min-width: 0;
    }

    .footer-cols {
        flex:      1 1 auto;
        width:     auto;
        min-width: 0;
    }

    .footer-col {
        flex:      1 1 232px;
        width:     auto;
        min-width: 0;
    }

    .footer-contacts { flex: 1 1 280px; }
}

@media (max-width: 1200px) {
    .footer-top {
        flex-direction: column;
        gap:            32px;
    }

    .footer-about {
        flex:      0 0 auto;
        width:     100%;
        max-width: 441px;
    }

    .footer-cols {
        flex:      0 0 auto;
        width:     100%;
        max-width: none;
        gap:       32px;
    }
}

@media (max-width: 1024px) {
    .site-footer .container { padding: 0 var(--container-padding); }
}

@media (max-width: 768px) {
    .site-footer { padding: 40px 0 24px; }

    .footer-cols {
        flex-direction: column;
        gap:            28px;
    }

    .footer-col,
    .footer-contacts { flex: 0 0 auto; width: 100%; }

    .footer-bottom {
        flex-direction: column;
        align-items:    flex-start;
        gap:            12px;
        padding-top:    24px;
    }
}