/* Footer Component */
/* Footer Component Styles */
@layer components.footer {
    .app-footer {
        position: fixed;
        inset-block-end: 0;
        inset-inline: 0;
        block-size: 2.5rem;
        background: var(--bg-elevated);
        border-block-start: 1px solid var(--border-muted);
        z-index: var(--z-sticky);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        
        & .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            block-size: 100%;
            padding-inline: var(--space-6);
            inline-size: 100%;
        }
        
        & .footer-left {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            
            & .copyright {
                font-size: var(--text-xs);
                color: var(--text-tertiary);
                font-weight: 400;
            }
        }
        
        & .footer-right {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            
            & .footer-link {
                font-size: var(--text-xs);
                color: var(--text-tertiary);
                text-decoration: none;
                transition: color var(--transition-fast);
                font-weight: 500;
                
                &:hover {
                    color: var(--text-primary);
                }
                
                &:focus-visible {
                    outline: 2px solid var(--primary-color);
                    outline-offset: 2px;
                    border-radius: var(--radius-sm);
                }
            }
            
            & .footer-separator {
                color: var(--text-tertiary);
                font-size: var(--text-xs);
                opacity: 0.5;
            }
        }
    }
    
    /* Adjust main content to account for footer */
    .main-container {
        padding-block-end: 2.5rem;
    }
    
    /* Mobile adjustments */
    @media (max-width: 768px) {
        .app-footer {
            block-size: 3rem;
            z-index: var(--z-sticky, 100);
            
            & .footer-content {
                padding-inline: var(--space-4);
                flex-direction: column;
                justify-content: center;
                gap: var(--space-1);
            }
            
            & .footer-left {
                & .copyright {
                    font-size: 0.625rem;
                }
            }
            
            & .footer-right {
                gap: var(--space-1-5);
                
                & .footer-link {
                    font-size: 0.625rem;
                }
                
                & .footer-separator {
                    font-size: 0.625rem;
                }
            }
        }
    }
    
    /* Tablet adjustments */
    @media (min-width: 769px) and (max-width: 1024px) {
        .app-footer {
            & .footer-content {
                padding-inline: var(--space-4);
            }
        }
    }
}