/* Herda as variáveis e estilos gerais do tema principal */
@import url('index.css');

/* --- LAYOUT PRINCIPAL COM GRID PARA FIXAR O RODAPÉ --- */
body {
    display: grid;
    /* Define duas linhas: a primeira (conteúdo) se expande, a segunda (rodapé) tem altura automática */
    grid-template-rows: 1fr auto; 
    min-height: 100vh;
    margin: 0;
}

/* O <main> é o primeiro item do grid, ocupando a primeira linha (1fr) */
main.contact-container {
    width: 90%;
    max-width: 800px;
    /* Margem no topo para empurrar o conteúdo para baixo do cabeçalho FIXO no DESKTOP */
    margin: 220px auto 2rem auto;
    padding: 2.5rem;
    background-color: var(--cor-branco);
    border-radius: 10px;
    box-shadow: var(--sombra-card);
}

/* O <footer> é o segundo item do grid, ocupando a segunda linha (auto) */
footer {
    width: 100%;
}

.contact-container h2 {
    font-family: var(--fonte-padrao);
    font-weight: 600;
    text-align: center;
    font-size: 2.2rem;
    margin-top: 0; /* Remove margem extra no topo do título */
    margin-bottom: 2rem;
    color: var(--cor-primaria);
}

/* Bloco de contato direto */
.direct-contact {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.direct-contact h3 {
    color: #007bff;
    margin-bottom: 0.5rem;
}

.direct-contact p {
    margin-bottom: 1.5rem;
    color: #6c757d;
}

.contact-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease;
    color: white;
}

.contact-link:hover {
    transform: scale(1.05);
}

.contact-link i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.contact-link.email {
    background-color: #6c757d;
}

.contact-link.whatsapp {
    background-color: #25D366;
}

/* AJUSTES PARA RESPONSIVIDADE (CELULAR) */
@media (max-width: 768px) {
    main.contact-container {
        /* Margem no topo para empurrar o conteúdo para baixo do cabeçalho FIXO no CELULAR */
        margin: 300px 1rem 2rem 1rem;
        width: auto; /* Permite que o container se ajuste à tela */
    }
}