/* =============================================
   COMPONENT: FOOTER
   Custom footer with social links over image

   Extracted from pages/index.css so it loads on ALL pages.
   ============================================= */


/* -----------------------------------------
   Footer Container
   ----------------------------------------- */

.footer-container {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 0;
    background: transparent !important;
}

/* Border.png - full width decorative stripe */
.footer-border {
    display: block;
    width: 100%;
    height: 16px;
    pointer-events: none;
}

/* Footer image + links wrapper */
.footer-content {
    position: relative;
    width: 100%;
    text-align: center;
}

/* Footer decorative image */
.footer-image {
    display: block;
    margin: 0 auto;
    width: 550px;
    max-width: 55%;
    height: auto;
    pointer-events: none;
}


/* -----------------------------------------
   Footer Social Links (overlay on image)
   ----------------------------------------- */

.footer-links {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg, 20px);
    z-index: 2;
    white-space: nowrap;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-text-warm, #e8d9b0);
    text-decoration: none;
    font-size: var(--font-size-sm, 12px);
    transition: color 0.2s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.footer-links a:hover {
    color: var(--color-text-primary, #fff);
}

.footer-links a img {
    width: 16px;
    height: 16px;
}

.footer-links a i {
    font-size: var(--font-size-base, 14px);
}


/* -----------------------------------------
   Mobile Responsive
   ----------------------------------------- */

@media (max-width: 768px) {
    .footer-container {
        margin-top: 0;
    }

    /* Hide decorative images on mobile */
    .footer-border,
    .footer-image {
        display: none;
    }

    .footer-content {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        padding: 24px 16px 32px;
    }

    .footer-links {
        position: static;
        transform: none;
        gap: var(--spacing-md, 16px);
        padding: 0;
        flex-wrap: wrap;
    }

    .footer-links a {
        font-size: 12px;
        gap: 5px;
    }

    .footer-links a i {
        font-size: 14px;
    }
}