/* ==================== FOOTER COMPONENT STYLES ==================== */
/*
    Estilos customizados para o Footer Component.
    Complementa classes Tailwind com comportamentos específicos.
    
    Responsividade: Mobile-first (base = mobile, @media = desktop)
    Breakpoint: 768px (sm:)
*/

/* ==================== FOOTER CONTAINER ==================== */
/*
    Container principal do footer
    - max-width: 1280px → Limita largura em telas grandes (consistente com header)
    - margin: 0 auto → Centraliza horizontalmente
    - padding: responsivo (mobile: 3rem 1.5rem, desktop: 4rem 1.5rem)
    - text-align: center → Centraliza todo conteúdo
    
    Impacto visual: Footer centralizado com largura máxima consistente
*/
.footer-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-content {
        padding: 4rem 1.5rem;
    }
}

/* ==================== SOCIAL LINKS ==================== */
/*
    Links sociais com ícones
    - Base: círculo com fundo semi-transparente
    - Hover: cor primária + elevação
    - Transition: suave (0.3s ease)
    
    Estados:
    - Default: bg-white/10 (branco 10% opaco)
    - Hover: bg-primary + translateY(-2px) → efeito de "flutuar"
    
    Impacto visual: Ícones interativos que "saltam" ao passar mouse
*/
.social-link {
    width: 2.5rem; /* 40px - mobile */
    height: 2.5rem;
    border-radius: 9999px; /* Círculo perfeito */
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .social-link {
        width: 3rem; /* 48px - desktop */
        height: 3rem;
    }
}

.social-link:hover {
    background-color: #6366f1; /* Cor primária (var(--color-primary)) */
    transform: translateY(-2px); /* Efeito de elevação */
    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3); /* Sombra roxa */
}

.social-link:active {
    transform: translateY(0); /* Remove elevação ao clicar */
}

/* ==================== ACCESSIBILITY ==================== */
/*
    Foco visível para navegação por teclado
    - outline: anel roxo ao focar com Tab
    - offset: espaçamento do outline
    
    Impacto: Usuários de teclado veem indicador claro de foco
*/
.social-link:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}