/* Footer — The Lance.
   De grote, licht gedraaide merkvorm staat als contourlijn achter het
   logo; social-icons zitten in dezelfde vorm als gevulde badge.
   Maten in px, 1-op-1 overgenomen van de bron-site. */

#site-footer {
    height: 590px; padding: 0 20px 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    background-image: var(--blob-outline-rot);
    background-repeat: no-repeat;
    background-position: center 200px;
    background-size: 650px;
}

.footer-inner {
    display: flex; flex-direction: column; align-items: center;
    gap: 15px; width: 100%; max-width: 1440px;
}

/* ── Social ── */
.footer-social { display: flex; justify-content: center; gap: 10px; }
.footer-social a { display: inline-flex; transition: transform .3s; }
.footer-social a:hover { transform: scale(1.13); }
.footer-social img { width: 37px; height: 40px; }

/* ── Logo ── */
.footer-logo img { width: 255px; max-width: 100%; height: auto; }

/* ── Copyright ── */
.footer-meta {
    text-align: center; font-family: var(--font-ui); font-size: 17px;
    color: var(--brand); line-height: 1.7;
}
.footer-meta p { margin: 0; }
.footer-meta a { color: var(--brand); }
.footer-meta a:hover { color: var(--brand-dark); text-decoration: underline; }
.cms-lock-link { display: inline-flex; vertical-align: middle; margin-left: 4px; }

/* Op smalle schermen moet de merkvorm de footer-inhoud OMSLUITEN, net als op
   desktop. Stond de vorm lager, dan sneed de bovenste boog dwars door het logo
   en de links — precies waar de tekst staat. Hoger plaatsen zet de lijn naast
   de inhoud in plaats van erdoorheen. */
@media (max-width: 767px) {
    #site-footer { height: 440px; background-size: 95%; background-position: center 60px; }
    .footer-logo img { width: 180px; }
}

@media (max-width: 478px) {
    #site-footer { height: 360px; background-size: 97%; background-position: center 20px; padding-top: 10px; }
    .footer-logo img { width: 140px; }
    .footer-meta { font-size: 16px; }
}