/* Footer uses variables from root.css; do not add another import here */

/* Ensure footer matches site theme via root variables */
body {
    margin: 0;
    padding: 0;
}

/* Footer styles */
.site-footer {
    background: var(--10);
    color: var(--8);
    padding: 40px 0 20px;
    font-family: var(--poppins), 'Roboto Condensed', sans-serif !important;
}

.site-footer .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding: 0 16px;
    align-items: center;
}

.footer-col-2 h4,
.footer-col-3 .footer-contact h4,
.footer-socials h4 {
    font-family: var(--garet), 'Roboto Condensed', sans-serif !important;
}

.site-footer .footer-col h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: var(--8);
}

.footer-logo img {
    height: 82px;
    width: auto;
    border-radius: 6px;
    display: block;
}

.footer-desc {
    color: var(--8);
    opacity: 0.95;
    margin-top: 12px;
    line-height: 1.4;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: var(--8);
    text-decoration: none;
    opacity: 0.95;
}

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

.footer-contact p {
    margin: 6px 0;
    text-align: center;
}

.footer-contact a {
    color: var(--8);
    text-decoration: none;
}

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    justify-content: center;
}

.site-footer .footer-inner .footer-col{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.social-links a {
    color: var(--8);
    text-decoration: none;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.social-links a img{
    width: 30px;
}

.footer-bottom {
    text-align: center;
    margin-top: 18px;
    color: var(--8);
    font-size: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 12px;
}

/* Pull the divider image up out of .site-footer's top padding so it sits
   right on the seam above the footer, keeping its pattern visible instead
   of being pushed down inside the padded area. Scales fluidly with the
   viewport so it works the same on small and large screens, not just at
   isolated breakpoints. */
.top-image {
    line-height: 0;
}

.top-image img {
    display: block;
    margin-top: clamp(-160px, -10vw, -52px);
}

@media (max-width: 900px) {
    .site-footer .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 16px;
    }

    .footer-desc {
        margin: 12px auto;
        max-width: 460px;
    }

    .social-links {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .site-footer {
        padding: 32px 0 20px;
        background: var(--10);
    }

    .site-footer .footer-inner {
        padding: 0 14px;
        gap: 14px;
    }

    .site-footer .footer-inner .footer-col {
        width: 100%;
        border-radius: 18px;
        padding: 16px 14px;
        background: rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    }

    .footer-logo img {
        height: 68px;
    }

    .footer-desc {
        margin-top: 10px;
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .site-footer .footer-col h4 {
        font-size: 17px;
        margin-bottom: 8px;
    }

    .footer-links {
        width: 100%;
        gap: 6px;
    }

    .footer-links li {
        width: 100%;
        margin-bottom: 0;
    }

    .footer-links a {
        display: block;
        width: 100%;
        border-radius: 10px;
        padding: 8px 10px;
        background: rgba(0, 0, 0, 0.03);
    }

    .footer-contact p {
        margin: 8px 0;
        font-size: 0.95rem;
    }

    .social-links {
        gap: 10px;
        margin-top: 10px;
        flex-wrap: wrap;
    }

    .social-links a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: rgba(0, 0, 0, 0.06);
    }

    .social-links a img {
        width: 20px;
    }

    .footer-bottom {
        margin-top: 14px;
        padding: 12px 16px 0;
        font-size: 13px;
    }
}