/* ==========================================================================
    FOOTER MODULE - ENTERPRISE STICKY FOOTER
   ========================================================================== */

/* --------------------------------------------------------------------------
    1. MODULE DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Color & Surface Tokens */
    --footer-bg-light: var(--bg-footer, #1a1a2e);
    --footer-text-light: var(--text-footer-muted, rgba(255, 255, 255, 0.85));
    --footer-border-light: var(--border-color, rgba(255, 255, 255, 0.08));
    --footer-shadow-light: 0 -4px 20px rgba(0, 0, 0, 0.15);

    --footer-bg-dark: var(--bg-footer-dark, #0d1117);
    --footer-text-dark: rgba(255, 255, 255, 0.75);
    --footer-border-dark: rgba(240, 246, 252, 0.1);
    --footer-shadow-dark: 0 -6px 25px rgba(0, 0, 0, 0.4);

    /* Typography & Geometry Tokens */
    --footer-font-family: var(--font-main, 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif);
    --footer-radius-sm: 20px;
    --footer-radius-md: 32px;
}

/* --------------------------------------------------------------------------
    2. STICKY FOOTER CONTAINER & TYPOGRAPHY
   -------------------------------------------------------------------------- */
.footer {
    /* Layout & Box Model */
    display: block;
    width: 100%;
    margin-block-start: auto;
    padding-block: 1.5rem;
    padding-inline: 1rem;
    box-sizing: border-box;

    /* Visuals & Borders */
    background-color: var(--footer-bg-light);
    color: var(--text-footer, #ffffff);
    text-align: center;
    border-radius: var(--footer-radius-sm) var(--footer-radius-sm) 0 0;
    border-top: 1px solid var(--footer-border-light);
    box-shadow: var(--footer-shadow-light);

    /* Layering & Transitions */
    z-index: 10;
    transition: 
        background-color var(--transition-theme, 0.3s ease),
        border-color var(--transition-theme, 0.3s ease),
        color var(--transition-theme, 0.3s ease),
        box-shadow var(--transition-theme, 0.3s ease);
}

.footer p,
.footer__text {
    /* Box Model & Layout */
    margin: 0;

    /* Typography */
    font-family: var(--footer-font-family);
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: var(--footer-text-light);

    /* Transitions */
    transition: color var(--transition-theme, 0.3s ease);
}

/* --------------------------------------------------------------------------
    3. DARK MODE OVERRIDES
   -------------------------------------------------------------------------- */
[data-theme="dark"] .footer {
    background-color: var(--footer-bg-dark);
    border-top-color: var(--footer-border-dark);
    box-shadow: var(--footer-shadow-dark);
}

[data-theme="dark"] .footer p,
[data-theme="dark"] .footer__text {
    color: var(--footer-text-dark);
}

/* --------------------------------------------------------------------------
    4. RESPONSIVE BREAKPOINTS (MOBILE-FIRST)
   -------------------------------------------------------------------------- */

/* Tablet Viewports (>= 768px) */
@media (min-width: 768px) {
    .footer {
        padding-block: 2rem;
        padding-inline: 2rem;
        border-radius: var(--footer-radius-md) var(--footer-radius-md) 0 0;
    }
}

/* Desktop Viewports (>= 1440px) */
@media (min-width: 1440px) {
    .footer {
        padding-block: 2.5rem;
        padding-inline: 2rem;
    }
}