/* ═════════════════════════════════════════════════════════════════
   Site footer — purple bar with rainbow strip
   ═════════════════════════════════════════════════════════════════ */

:root {
    --footer-overlap: 1vw;
}

.site-footer {
    position: relative;
    z-index: 0;                      /* above all stage tiles (lowest is -2) */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: calc(-1 * var(--footer-overlap));
    /* Compact bar — no truss-fill absorption (truss columns tuck
       behind the footer instead of stretching it). */
    padding: 2rem 2rem 2rem;
    box-sizing: border-box;
    background-color: var(--purple-dark);
    color: var(--purple-white);
    font-family: var(--font-nav);
    text-align: center;
}

.site-footer p {
    margin: 0;
    font-size: clamp(12px, 1vw, 18px);
}

/* Thin rainbow strip at the very bottom of the footer */
.site-footer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: linear-gradient(
        to bottom,
        #E40303 0%,   #E40303 16.6%,   /* red    */
        #FF8C00 16.6%, #FF8C00 33.3%,   /* orange */
        #FFED00 33.3%, #FFED00 50%,     /* yellow */
        #008026 50%,   #008026 66.6%,   /* green  */
        #004CFF 66.6%, #004CFF 83.3%,   /* blue   */
        #732982 83.3%, #732982 100%     /* purple */
    );
}