/**
 * Footer Component Styles
 *
 * This file contains all styles for the site footer component,
 * including multi-column grid layout and language selector.
 */

@layer components.footer {
    /* ========================================
       Footer Container - Full Width
       ======================================== */
    .footer {
        width: 100%;
        background-color: var(--color-bg-card);
    }

    /* Inner container - constrained width */
    .footer__inner {
        max-width: var(--content-max-width);
        margin-inline: auto;
        padding: var(--space-5);
    }

    /* ========================================
       Footer Grid Layout
       ======================================== */
    .footer__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-5);
        text-align: center;
    }

    /* ========================================
       Footer Columns
       ======================================== */
    .footer__column h3 {
        color: var(--color-text-heading);
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 0 0 var(--space-3) 0;
    }

    .footer__column nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .footer__column nav a {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        transition: color var(--transition-fast);
    }

    .footer__column nav a:hover {
        color: var(--color-text-bright);
        text-decoration: none;
    }

    /* ========================================
       Language Selector
       ======================================== */
    .footer__lang {
        display: flex;
        gap: var(--space-3);
        justify-content: center;
    }

    .lang-btn {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        background: transparent;
        border: 1px solid var(--color-text-muted);
        padding: var(--space-2) var(--space-3);
        cursor: pointer;
        border-radius: var(--radius-sm);
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        transition: all var(--transition-fast);
    }

    .lang-btn img {
        display: block;
        inline-size: 20px;
        block-size: auto;
    }

    .lang-btn:hover {
        border-color: var(--color-text-bright);
        color: var(--color-text-bright);
    }

    .lang-btn:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* Hide inactive language button - JS will show both in footer */
    .lang-btn--current {
        border-color: var(--color-primary);
        color: var(--color-text-bright);
        background-color: rgba(78, 145, 201, 0.2);
    }

    /* ========================================
       Footer Top Separator - Full Width
       ======================================== */
    .footer > hr.main {
        margin: 0;
    }

    /* ========================================
       Footer Bottom (Copyright)
       ======================================== */
    .footer__bottom {
        text-align: center;
    }

    .footer__bottom p {
        max-width: var(--content-max-width);
        margin-inline: auto;
        padding: var(--space-4) var(--space-5);
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    /* ========================================
       Tablet Layout (min-width: 500px)
       ======================================== */
    @media (min-width: 500px) {
        .footer__grid {
            grid-template-columns: repeat(2, 1fr);
            text-align: start;
        }

        .footer__lang {
            justify-content: flex-start;
        }
    }

    /* ========================================
       Desktop Layout (min-width: 700px)
       ======================================== */
    @media (min-width: 700px) {
        .footer__grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    /* ========================================
       Small screens - reduced padding
       ======================================== */
    @media (max-width: 400px) {
        .footer__inner {
            padding-inline: var(--space-3);
        }

        .footer__bottom p {
            padding-inline: var(--space-3);
        }
    }
}