/**
 * =====================================================================================
 * HELLA 3D MANAGEMENT SUITE: MASTER FOOTER STYLESHEET
 * =====================================================================================
 * @file        footer.css
 * @description Controls the layout, glassmorphism effects, and responsive scaling 
 * of the global footer used across the entire website.
 * @version     1.0.0
 * @cleared     Jul 5, 2026
 * * ARCHITECTURE OVERVIEW:
 * 1. CSS Grid Architecture: Utilizes a fractional grid layout (2fr 1fr 1fr) to gracefully 
 * distribute space between dense newsletter forms and sparse link columns.
 * 2. Liquid Glassmorphism: Inherits global CSS variables to render a unified, 
 * high-performance backdrop-filter pane consistent with the master navigation.
 * 3. Hardware Acceleration: Employs transform: translateZ(0) and will-change on the 
 * main pane to force GPU compositing and prevent scroll stuttering.
 * =====================================================================================
 */

/* --- 1. GLOBAL FOOTER WRAPPER --- */
.main-footer { 
    position: relative; 
    z-index: 10; 
    margin: 60px auto 20px auto; 
    width: calc(100% - 40px); 
    max-width: 1800px; 
}

/* --- 2. GLASSMORPHISM BACKGROUND PANEL --- */
.footer-glass-pane { 
    background-color: var(--glass-bg); 
    background-image: var(--glass-noise); 
    backdrop-filter: var(--glass-blur); 
    -webkit-backdrop-filter: var(--glass-blur); 
    
    /* PERFORMANCE & AESTHETIC OPTIMIZATIONS */
    background-blend-mode: overlay; 
    transform: translateZ(0); 
    will-change: transform, backdrop-filter; 
    
    border: 1px solid var(--glass-border); 
    box-shadow: var(--glass-shadow); 
    border-radius: 24px; 
    padding: 4rem; 
}

/* --- 3. INTERNAL GRID LAYOUT --- */
.footer-grid { 
    display: grid; 
    /* Allocates 2 fractions of space to the brand/newsletter, and 1 each to the link columns */
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 4rem; 
    margin-bottom: 3rem; 
}

/* --- 4. BRANDING & NEWSLETTER SECTION --- */
.footer-brand .footer-logo { 
    height: 45px; 
    margin-bottom: 1.5rem; 
    border-radius: 8px; 
}

.footer-tagline { 
    color: #b0b0b0; 
    line-height: 1.6; 
    margin-bottom: 2rem; 
    font-size: 0.95rem; 
    max-width: 400px; 
}

.newsletter-form { 
    display: flex; 
    gap: 10px; 
    max-width: 400px; 
    flex-wrap: wrap; 
    justify-content: center; 
}

.newsletter-form input { 
    flex: 1; 
    min-width: 200px; 
    background: rgba(255, 255, 255, 0.08); 
    border: 1px solid rgba(255, 255, 255, 0.15); 
    color: white; 
    padding: 0 15px; 
    border-radius: 8px; 
    outline: none; 
    height: 44px; 
    font-size: 0.9rem; 
    transition: border-color 0.3s ease, background 0.3s ease; 
}

.newsletter-form input:focus { 
    border-color: #ff3b3b; 
    background: rgba(255, 255, 255, 0.12); 
}

.newsletter-form .btn-primary { 
    height: 44px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    white-space: nowrap; 
    margin: 0 auto; 
    background-color: #ff3b3b; 
    color: #fff; 
    border: none; 
    padding: 0 1.5rem; 
    border-radius: 8px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.3s ease; 
}

.newsletter-form .btn-primary:hover { 
    background-color: #ff1f1f; 
    transform: translateY(-2px); 
}

/* --- 5. NAVIGATION LINKS --- */
.footer-links h4 { 
    color: #ffffff; 
    font-size: 1.1rem; 
    margin-bottom: 1.5rem; 
    font-weight: 600; 
}

.footer-links a { 
    display: block; 
    color: #b0b0b0; 
    text-decoration: none; 
    margin-bottom: 0.8rem; 
    font-size: 0.95rem; 
    transition: color 0.2s ease, transform 0.2s ease; 
}

.footer-links a:hover { 
    color: #ff3b3b; 
    transform: translateX(4px); 
}

/* --- 6. BOTTOM DISCLAIMER & COPYRIGHT --- */
.footer-bottom { 
    border-top: 1px solid var(--glass-border); 
    padding-top: 2rem; 
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
}

.footer-disclaimer { 
    color: #888888; 
    font-size: 0.8rem; 
    line-height: 1.6; 
    text-align: left; 
}

.footer-disclaimer strong { 
    color: #a0a0a0; 
}

.footer-copyright { 
    color: #ffffff; 
    font-size: 0.9rem; 
    text-align: center; 
    font-weight: 500; 
}

/* =========================================================
   7. MOBILE RESPONSIVENESS
   ========================================================= */

@media (max-width: 968px) { 
    .main-footer { 
        width: calc(100% - 40px); 
    } 
    
    .footer-glass-pane { 
        padding: 2.5rem 2rem; 
    } 
    
    /* Stacks the 3 columns into a single vertical column on mobile */
    .footer-grid { 
        grid-template-columns: 1fr; 
        gap: 2.5rem; 
    } 
    
    /* Centers the disclaimer text since the layout is now stacked */
    .footer-disclaimer { 
        text-align: center; 
    } 
}