@import "constants.css";

/* Estilos base para desktops */
footer {
    background-color: var(--azul);
    color: var(--branco);
    text-align: center;
    padding: 20px 0; /* Aumenta o padding para espaçamento */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px; /* Espaçamento entre os elementos do rodapé */
}

.footer-logo {
    margin-bottom: 10px;
}

.footer-logo img {
    height: 150px; /* Tamanho da logo no desktop */
    width: auto;
}

.footer-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Espaçamento entre ícones sociais */
}

.footer-contact a img {
    width: 20px; /* Tamanho do ícone do Instagram no desktop */
    height: auto;
}

footer a {
    color: var(--branco); /* Define a cor do link no rodapé */
    text-decoration: none; /* Remove o sublinhado do link */
}

footer a:hover {
    color: var(--laranja); /* Cor do link ao passar o mouse */
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

/* Ajustes para tablets (768px a 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .footer-logo img {
        height: 120px; /* Reduz a logo no tablet */
    }

    .footer-contact {
        flex-direction: row; /* Alinha horizontalmente no tablet */
        gap: 10px; /* Ajusta o espaçamento no tablet */
    }

    footer a {
        font-size: 0.95em; /* Ajusta a fonte dos links para tablets */
    }
}

/* Ajustes para dispositivos móveis (até 767px) */
@media (max-width: 767px) {
    footer {
        padding: 15px 0; /* Reduz o padding no mobile */
        gap: 5px; /* Reduz o espaço entre os elementos no mobile */
    }

    .footer-logo img {
        height: 100px; /* Reduz a logo no mobile */
    }

    .footer-contact {
        flex-direction: column; /* Empilha os ícones no mobile */
        gap: 8px; /* Ajusta o espaçamento entre ícones no mobile */
    }

    .footer-contact a img {
        width: 18px; /* Diminui o ícone do Instagram no mobile */
    }

    footer a {
        font-size: 0.85em; /* Ajusta a fonte dos links para mobile */
    }
}