/* -------------------- Rodapé -------------------- */
.footer {
    background-color: var(--footer-bg);
    /* Fundo rosa claro */
    color: var(--footer-text-normal);
    /* Cor de texto padrão (preto) */
    padding: 4rem 0 2rem;
    /* Padding superior, inferior e lateral */
    font-size: 0.9rem;
    margin-top: auto;
    /* Para garantir que fique no final da página */
}

/* Grid de colunas do rodapé */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 colunas de tamanho igual */
    gap: 2.5rem;
    /* Espaçamento entre as colunas */
    margin-bottom: 3rem;
    /* Espaço antes da barra inferior */
}

/* Estilo para a primeira coluna (Marca) */
.footer-col.brand-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Alinha o conteúdo à esquerda */
    gap: 10px;
    /* Espaço entre logo e tagline */
}

/* Estilo do nome da marca "Improve" */
.brand-logo-name {
    font-family: 'Poppins', sans-serif;
    /* Usando Poppins ou similar para um visual limpo */
    font-size: 2.5rem;
    /* Tamanho do logo */
    font-weight: 700;
    /* Negrito */
    color: var(--primary-purple);
    /* Cor da marca */
    /* Nota: A seta integrada à letra 'e' na imagem é uma característica de fonte personalizada ou SVG. */
}

/* Tagline da marca */
.brand-tagline {
    font-size: 0.95rem;
    color: var(--footer-text-color-medium);
    /* Cinza escuro para a tagline */
    line-height: 1.5;
    margin-bottom: 1rem;
    /* Espaço antes dos ícones sociais */
    max-width: 250px;
    /* Limita a largura da tagline */
}

/* Títulos das colunas (Links Rápidos, Saiba Mais, Headquarters, Outros Locais) */
.footer-col h3 {
    font-size: 1.1rem;
    /* Tamanho da fonte dos títulos */
    font-weight: 700;
    /* Negrito */
    margin-bottom: 1.5rem;
    /* Espaçamento abaixo do título */
    color: var(--footer-text-normal);
    /* Cor preta para os títulos */
}

/* Estilo para listas de links */
.footer-col ul {
    list-style: none;
    /* Remove marcadores de lista padrão */
    padding: 0;
    /* Remove padding padrão */
}

.footer-col ul li {
    margin-bottom: 0.8rem;
    /* Espaçamento entre os itens da lista */
}

/* Estilo dos links */
.footer-col ul li a {
    color: var(--footer-text-normal);
    /* Cor preta para os links */
    text-decoration: none;
    /* Remove sublinhado */
    transition: color 0.3s ease;
    /* Transição suave na cor ao passar o mouse */
    font-size: 0.9rem;
    /* Tamanho da fonte dos links */
}

.footer-col ul li a:hover {
    color: var(--primary-purple);
    /* Cor da marca no hover */
}

/* Estilo dos parágrafos gerais (usado em localização) */
.footer-col p {
    margin-bottom: 0.6rem;
    /* Espaçamento abaixo do parágrafo */
    line-height: 1.6;
    color: var(--footer-text-color-medium);
    /* Cinza escuro para o texto */
    font-size: 0.9rem;
}

/* Estilo para a segunda subseção de localização */
.footer-col.location-info h3:nth-of-type(2) {
    margin-top: 1.5rem;
    /* Espaçamento entre "Headquarters" e "Outros Locais" */
    margin-bottom: 0.8rem;
}

/* Ícones sociais */
.social-icons {
    margin-top: 1rem;
    /* Espaçamento acima dos ícones */
    display: flex;
    gap: 0.8rem;
    /* Espaçamento entre os ícones */
}

.social-icons a {
    width: 38px;
    /* Largura para o círculo */
    height: 38px;
    /* Altura para o círculo */
    border: 1px solid var(--footer-text-normal);
    /* Borda fina preta para o efeito outline */
    border-radius: 50%;
    /* Torna o elemento circular */
    display: flex;
    justify-content: center;
    /* Centraliza o ícone horizontalmente */
    align-items: center;
    /* Centraliza o ícone verticalmente */
    color: var(--footer-text-normal);
    /* Cor preta para o ícone */
    font-size: 1.1rem;
    /* Tamanho do ícone */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Transição suave no hover */
    text-decoration: none;
}

.social-icons a:hover {
    background-color: var(--primary-purple);
    /* Fundo da marca no hover */
    color: var(--bg-white);
    /* Ícone branco no hover */
    transform: none;
    /* Remove qualquer transformação indesejada */
}

/* Barra inferior do rodapé */
.footer-bottom {
    display: flex;
    /* Usa flexbox para alinhar conteúdo */
    justify-content: space-between;
    /* Espaçamento entre o copyright e as políticas */
    align-items: center;
    /* Alinhamento vertical central */
    padding-top: 2rem;
    /* Espaçamento acima da barra */
    border-top: 1px solid var(--footer-border-color-light);
    /* Borda superior fina e clara */
    font-size: 0.8rem;
    /* Fonte menor para a barra inferior */
    color: var(--footer-text-color-light);
    /* Cor cinza para o texto */
}

.footer-bottom .copyright-text {
    margin: 0;
    /* Remove margem padrão de parágrafo */
}

.footer-bottom .policy-links {
    display: flex;
    gap: 1.5rem;
    /* Espaçamento entre os links de política */
}

.footer-bottom .policy-links a {
    color: var(--footer-text-color-light);
    /* Cor cinza para os links de política */
    text-decoration: none;
    /* Remove sublinhado */
    transition: color 0.3s ease;
    /* Transição suave na cor */
}

.footer-bottom .policy-links a:hover {
    color: var(--primary-purple);
    /* Cor da marca no hover */
}

/* -------------------- Responsividade do Rodapé -------------------- */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colunas em telas médias */
    }
}

@media (max-width: 576px) {

    .footer-col.brand-info {
        align-items: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        /* Coluna única em telas pequenas */
        gap: 2rem;
        /* Ajusta o espaçamento */
    }

    .footer-col {
        text-align: center;
        /* Centraliza o texto das colunas no mobile */
        align-items: center;
        /* Centraliza itens na coluna da marca */
    }

    .social-icons {
        justify-content: center;
        /* Centraliza os ícones sociais no mobile */
    }

    .footer-bottom {
        flex-direction: column;
        /* Empilha copyright e políticas verticalmente */
        text-align: center;
        gap: 1rem;
        /* Espaçamento entre os itens empilhados */
    }

    .footer-bottom .policy-links {
        justify-content: center;
        /* Centraliza os links de política quando empilhados */
        gap: 1rem;
    }
}