/* Footer — JazzSir!
   Super simpel: logo, roadmap (sitemap) en social links. Plat, canvas-stijl,
   donkerbruin vlak in de huisstijl. */

.site-footer {
    width: 100%;                       /* body heeft align-items:center → anders krimpt 'ie */
    background: var(--primary-color);
    color: #f5f0e6;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
}

.footer-inner {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Logo */
.footer-logo {
    display: block;
    flex-shrink: 0;
}

.footer-logo img {
    width: clamp(140px, 18vw, 200px);
    height: auto;
    display: block;
}

/* Middenblok: roadmap + contact-knop */
.footer-midden {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

/* Roadmap / sitemap */
.footer-roadmap {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Grote contact-knop, zelfde stijl als de about-CTA */
.footer-cta {
    display: inline-flex;
    align-items: center;
    font-family: "Archivo Black", "Archivo", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    text-decoration: none;
    color: var(--primary-color);
    background: var(--secondary-color);
    padding: 1.1rem 2rem;
    transition: background 0.18s ease, color 0.18s ease;
}

.footer-cta:hover {
    background: #f5f0e6;
    color: var(--primary-color);
}

.footer-cta:focus-visible {
    outline: 3px solid #f5f0e6;
    outline-offset: 3px;
}

.footer-roadmap a {
    font-family: "Archivo Black", "Archivo", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1rem;
    text-decoration: none;
    color: #f5f0e6;
    transition: color 0.18s ease;
}

.footer-roadmap a:hover {
    color: var(--secondary-color);
}

.footer-roadmap a:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 3px;
}

/* Social links */
.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    color: var(--primary-color);
    background: var(--secondary-color);
    transition: background 0.18s ease, transform 0.18s ease;
}

.footer-social a:hover {
    background: #f5f0e6;
    transform: translateY(-2px);
}

.footer-social a:focus-visible {
    outline: 3px solid #f5f0e6;
    outline-offset: 3px;
}

.footer-social svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Mobiel: alles netjes onder elkaar en gecentreerd */
@media (max-width: 720px) {
    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .footer-midden,
    .footer-roadmap {
        align-items: center;
    }
}