/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Footer component */
@layer components {
    .footer {
        background: var(--color-bg-surface);
        border-top: 1px solid var(--color-border-glass);
        padding-block: var(--space-xl);
        margin-top: auto;
        
        & .footer__container {
            max-width: 1200px;
            margin: 0 auto;
            padding-inline: var(--space-md);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-md);
            text-align: center;
        }

        & .footer__copyright {
            color: var(--color-text-main);
            font-size: 0.875rem;
        }

        & .footer__links {
            display: flex;
            gap: var(--space-lg);
            
            & a {
                color: var(--color-text-main);
                font-size: 0.875rem;
                text-decoration: none;
                transition: color var(--transition-physical);
                
                &:hover {
                    color: var(--color-accent-blue);
                }
            }
        }
        
        @media (min-width: 768px) {
            & .footer__container {
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
            }
        }
    }
}