/* ===== FOOTER ===== */
.site-footer {
    position: relative;
    background: radial-gradient(1200px 300px at 50% -50%, #1f2937 0%, #020617 65%);
    padding: 64px 24px 48px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: auto;
    /* Push to bottom if content is short */
}

/* BIG BACKGROUND YEAR */
.footer-bg-year {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(160px, 30vw, 420px);
    font-weight: 900;
    letter-spacing: -0.08em;
    color: rgba(255, 255, 255, 0.3);
    opacity: 0.3;
    pointer-events: none;
    animation: floatYear 10s ease-in-out infinite;
    user-select: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* Explicit font for year */
}

/* CONTENT */
.footer-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0;
    width: 100%;
}

.footer-legal a {
    position: relative;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.25s ease;
    font-family: 'Outfit', sans-serif;
    /* Match site font */
}

.footer-legal a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 1px;
    background: linear-gradient(90deg, #38bdf8, #22c55e);
    transition: width 0.25s ease;
}

.footer-legal a:hover {
    color: #ffffff;
}

.footer-legal a:hover::after {
    width: 100%;
}

.footer-legal span {
    color: rgba(255, 255, 255, 0.3);
}

.footer-copy {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Outfit', sans-serif;
    /* Match site font */
}

/* ANIMATION */
@keyframes floatYear {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 16px 32px;
        /* Reduce padding */
        height: auto !important;
        overflow: visible !important;
        /* Ensure content is not clipped */
    }

    .footer-bg-year {
        font-size: 120px;
        /* Significantly smaller to prevent overflow */
        top: 50%;
        transform: translateY(-50%);
        /* Center vertically */
        animation: none;
        /* Disable animation to prevent layout shifts/issues */
    }

    .footer-content {
        gap: 20px;
        width: 100%;
        position: relative;
        z-index: 5;
    }

    .footer-legal {
        display: flex;
        /* Ensure flex is enforced */
        position: static;
        /* Override absolute positioning from generic nav */
        flex-direction: column;
        gap: 12px;
        align-items: center;
        width: 100%;
        background: transparent !important;
        /* Ensure no white bg from generic nav */
        margin: 0;
        padding: 0;
        /* Reset any padding from generic nav */
        box-shadow: none;
        /* Remove shadow from generic nav */
        border: none;
        /* Remove border from generic nav */
    }

    .footer-legal span {
        display: none;
    }

    .footer-legal a {
        font-size: 14px;
        display: block;
        padding: 8px 0;
        width: 100%;
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
        /* Ensure visible text */
    }

    /* Fix for the white part - ensure footer covers it */
    .site-footer {
        background: #020617;
        /* Fallback solid color */
        background: radial-gradient(1200px 300px at 50% -50%, #1f2937 0%, #020617 65%);
        min-height: auto;
        padding-bottom: 40px;
    }
}

@media (max-width: 600px) {
    .footer-bg-year {
        font-size: 80px;
        /* Even smaller for very small screens */
    }
}