/* ============================================================
   SECTION: FOOTER
   ============================================================ */
.site-footer{
    width: 100%;
    background: var(--color-secondary);
    color: var(--color-white);
}
.footer-container{
    width: min(92%, var(--container-w));
    margin: 0 auto;
}
.footer-top{ width: 100%; }
.footer-top .footer-container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}
.footer-branding{
    flex: 0 0 32%;
    max-width: 380px;
}
.footer-logo{ margin-bottom: 24px; }
.footer-logo .custom-logo-link{ display: block; }
.footer-logo img{ display: block; width: 100%; height: auto; }
.footer-branding-title{
    margin: 0 0 18px;
    color: var(--color-white);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}
.footer-description{
    margin: 0;
    color: var(--color-muted);
    font-size: 16px;
    line-height: 1.8;
}
.footer-social{ margin-top: 30px; }
.social-menu{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.social-menu li{ margin: 0; }
.social-menu a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-surface);
    color: var(--color-white);
    border-radius: 50%;
    text-decoration: none;
    transition: background-color var(--transition-base), transform var(--transition-base);
}
.social-menu a:hover{
    background: var(--color-primary);
    transform: translateY(-2px);
}
.footer-navigation{
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}
.footer-column{
    flex: 1;
    min-width: 160px;
}
.footer-columns-1 .footer-column,
.footer-columns-2 .footer-column{
    flex: 0 0 auto;
    max-width: 220px;
}
.footer-title{
    margin: 0 0 20px;
    color: var(--color-white);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}
.footer-menu{
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-menu li{
    min-height: auto;
    margin-bottom: 10px;
    padding: 0;
}
.footer-menu li:last-child{ margin-bottom: 0; }
.footer-menu a{
    display: inline-block;
    min-height: auto;
    padding: 0;
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition-base);
}
.footer-menu a:hover{ color: var(--color-white); }
.footer-bottom{
    margin-top: 60px;
    border-top: 1px solid var(--color-border);
}
.footer-bottom-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.footer-copyright{
    padding: 20px 40px;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
}
.footer-credit a{
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition-base);
}
.footer-credit a:hover{ color: var(--color-white); }
.footer-align-left .footer-bottom-inner{ justify-content: flex-start; text-align: left; }
.footer-align-center .footer-bottom-inner{ justify-content: center; text-align: center; flex-direction: column; }
.footer-align-right .footer-bottom-inner{ justify-content: flex-end; text-align: right; }

@media (max-width: 992px){
    .footer-top .footer-container{ flex-direction: column; gap: 50px; }
    .footer-branding{ flex: 0 0 auto; max-width: 100%; }
    .footer-navigation{ width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
    .footer-column, .footer-columns-1 .footer-column, .footer-columns-2 .footer-column{
        flex: 0 0 calc(50% - 20px); max-width: none; min-width: 220px;
    }
}
@media (max-width: 768px){
    .footer-branding{ text-align: center; align-items: center; }
    .footer-description{ max-width: 500px; margin: 0 auto; }
    .social-menu{ justify-content: center; }
    .footer-bottom-inner{ flex-direction: column; text-align: center; gap: 16px; }
}
@media (max-width: 640px){
    .footer-navigation{ flex-direction: column; gap: 35px; }
    .footer-column{ width: 100%; min-width: 100%; }
}
@media (max-width: 480px){
    .footer-branding-title{ font-size: 26px; }
    .footer-description{ font-size: 15px; }
    .footer-top .footer-container{ gap: 40px; }
}