/**
 * BoxStory Footer Styles
 * Dark Elegance Theme - Version 3.0
 * Updated: 2025-12-13
 */

/*--------------------------------------------------------------
# Footer Base
--------------------------------------------------------------*/
.footer {
    background: var(--color-navy);
    color: var(--text-footer);
    padding: 2.5rem 0 0 0;
}

/*--------------------------------------------------------------
# Footer Typography
--------------------------------------------------------------*/
.footer-brand {
    color: var(--color-coral);
    font-size: 1.1rem;
    font-weight: 700;
}

.footer-heading {
    color: var(--color-aqua);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-heading-social {
    color: var(--color-aqua);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.footer-description {
    color: var(--text-footer-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/*--------------------------------------------------------------
# Footer Links
--------------------------------------------------------------*/
.footer-links {
    font-size: 0.85rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-link {
    color: var(--text-footer-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--color-aqua);
}

.footer-link-icon {
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

/*--------------------------------------------------------------
# Social Icons
--------------------------------------------------------------*/
.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all var(--transition-base);
}

.footer-social-icon:hover {
    background: var(--color-aqua);
    color: var(--color-navy);
    transform: translateY(-0.125rem);
}

/*--------------------------------------------------------------
# Footer Bottom Bar
--------------------------------------------------------------*/
.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: 0.9375rem 0;
    margin-top: 1.875rem;
}

.footer-copyright {
    color: var(--text-footer-dim);
    font-size: 0.85rem;
    margin: 0;
}

.footer-tagline {
    color: var(--text-footer-dim);
    font-size: 0.8rem;
    margin: 0;
    opacity: 0.8;
}

.footer-heart {
    color: var(--color-coral);
}

/*--------------------------------------------------------------
# Footer CSS Variables (extend brand-kit)
--------------------------------------------------------------*/
:root {
    --text-footer: rgba(255, 255, 255, 0.85);
    --text-footer-muted: rgba(255, 255, 255, 0.7);
    --text-footer-dim: rgba(255, 255, 255, 0.6);
}

/*--------------------------------------------------------------
# Mobile Responsive - App-Like Footer
--------------------------------------------------------------*/
@media (max-width: 48rem) {
    .footer {
        padding: 1rem 0 0 0;
    }

    /* Hide main footer section on mobile, show compact version */
    .footer #global-footer-section-main {
        padding-bottom: 0 !important;
    }

    /* Brand - Centered and compact */
    .footer-brand {
        font-size: 1rem;
        margin-bottom: 0.5rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
    }

    .footer-brand i {
        font-size: 0.9rem;
    }

    /* Hide description on mobile */
    .footer-description {
        display: none;
    }

    /* Social icons - Centered row */
    .footer-heading-social {
        display: none;
    }

    .footer-social-links {
        justify-content: center;
        gap: 0.75rem !important;
    }

    .footer-social-icon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.15);
    }

    /* Column headings - app style */
    .footer-heading {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03125rem;
        margin-bottom: 0.5rem;
        color: var(--color-aqua);
        opacity: 0.9;
    }

    /* Links - horizontal inline on mobile */
    .footer-links {
        font-size: 0.8rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
    }

    .footer-links li {
        margin-bottom: 0;
    }

    .footer-link {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0;
        min-height: 2rem;
    }

    .footer-link-icon {
        display: none;
    }

    /* Row layout - 2x2 grid for link columns */
    .footer .row.g-4 {
        --bs-gutter-y: 0.75rem;
        --bs-gutter-x: 0.5rem;
    }

    /* About column full width */
    .footer-column-about {
        text-align: center;
        margin-bottom: 0.5rem;
    }

    #global-footer-section-social {
        margin-top: 0.5rem !important;
    }

    /* Link columns - 2 per row */
    .footer .col-lg-2,
    .footer .col-lg-3:not(.footer-column-about) {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 0.5rem;
    }

    /* Footer bottom - compact */
    .footer-bottom {
        padding: 0.625rem 0;
        margin-top: 0.75rem;
        background: rgba(0, 0, 0, 0.25);
    }

    .footer-copyright {
        font-size: 0.7rem;
        margin-bottom: 0.125rem !important;
    }

    .footer-tagline {
        font-size: 0.65rem;
        opacity: 0.7;
    }
}

/* Extra small devices - Ultra compact */
@media (max-width: 36rem) {
    .footer {
        padding: 0.75rem 0 0 0;
    }

    .footer-brand {
        font-size: 0.95rem;
    }

    /* Social icons smaller */
    .footer-social-icon {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.9rem;
    }

    .footer-social-links {
        gap: 0.625rem !important;
    }

    /* Headings smaller */
    .footer-heading {
        font-size: 0.7rem;
        margin-bottom: 0.375rem;
    }

    /* Links more compact */
    .footer-links {
        font-size: 0.75rem;
        gap: 0.125rem 0.625rem;
    }

    .footer-link {
        min-height: 1.75rem;
        padding: 0.125rem 0;
    }

    /* Tighter grid */
    .footer .row.g-4 {
        --bs-gutter-y: 0.625rem;
        --bs-gutter-x: 0.375rem;
    }

    .footer .col-lg-2,
    .footer .col-lg-3:not(.footer-column-about) {
        padding: 0 0.375rem;
    }

    /* Footer bottom ultra compact */
    .footer-bottom {
        padding: 0.5rem 0;
        margin-top: 0.625rem;
    }

    .footer-copyright {
        font-size: 0.65rem;
    }

    .footer-tagline {
        font-size: 0.6rem;
    }

    .footer-heart {
        font-size: 0.55rem;
    }
}

/* Very small phones */
@media (max-width: 23.4375rem) {
    .footer {
        padding: 0.625rem 0 0 0;
    }

    .footer-brand {
        font-size: 0.9rem;
    }

    .footer-social-icon {
        width: 2rem;
        height: 2rem;
        font-size: 0.8rem;
    }

    .footer-heading {
        font-size: 0.65rem;
    }

    .footer-links {
        font-size: 0.7rem;
    }

    .footer-link {
        min-height: 1.625rem;
    }

    .footer-bottom {
        padding: 0.375rem 0;
        margin-top: 0.5rem;
    }

    .footer-copyright,
    .footer-tagline {
        font-size: 0.6rem;
    }
}