/* ==========================================
   BLOCO 1: CABEÇALHO DA PÁGINA DE CONTATO
   Responsabilidade: Seção hero com background
   ========================================== */

/* Header da página de contato */
.contact-header {
    height: 40vh; /* 40% da altura da viewport */
    background-image:  url('../imagens/fotos-banner/banner-contato.png'); /* background + imagem */
    background-size: cover; /* Cobrir toda a área */
    background-position: center; /* Centralizar imagem */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    text-align: center; /* Texto centralizado */
    color: white; /* Texto branco */
}


/* ==========================================
   BLOCO 3: TÍTULO PRINCIPAL
   Responsabilidade: Título da página de contato
   ========================================== */

/* Título principal da página */
.contact-header-content h1 {
    font-size: 36px; /* Tamanho grande */
    margin-bottom: 15px; /* Espaçamento abaixo */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/* ==========================================
   BLOCO 4: DESCRIÇÃO
   Responsabilidade: Subtítulo explicativo
   ========================================== */

/* Parágrafo de descrição */
.contact-header-content p {
    font-size: 18px; /* Tamanho intermediate */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para legibilidade */
}

/* ==========================================
   BLOCO 5: SEÇÃO DE CONTATO
   Responsabilidade: Container principal da seção
   ========================================== */

/* Seção principal de contato  e o banner*/
.contact-section {
    padding: 60px 0; /* Espaçamento vertical */
}

/* ==========================================
   BLOCO 6: CONTAINER DE CONTATO
   Responsabilidade: Layout em grid para formulário e informações
   ========================================== */

/* Container principal em grid */
.contact-container {
    display: grid; /* Layout em grid */
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    gap: 40px; /* Espaçamento entre colunas */
}

/* ==========================================
   BLOCO 7: CONTAINER DO FORMULÁRIO
   Responsabilidade: Card do formulário de contato
   ========================================== */

/* Container do formulário de contato */
.contact-form-container {
    background-color: white; /* Fundo branco */
    border-radius: 8px; /* Cantos arredondados */
    padding: 30px; /* Espaçamento interno */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra para elevação */
}

/* ==========================================
   BLOCO 8: TÍTULO DO FORMULÁRIO
   Responsabilidade: Cabeçalho do formulário
   ========================================== */

/* Título do formulário */
.contact-form-container h2 {
    color: var(--primary-color); /* Cor da variável CSS */
    margin-bottom: 25px; /* Espaçamento abaixo */
    font-size: 24px; /* Tamanho intermediate */
}

/* ==========================================
   BLOCO 9: GRUPOS DE FORMULÁRIO
   Responsabilidade: Container para cada campo
   ========================================== */

/* Grupo de formulário */
.form-group {
    margin-bottom: 20px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 10: RÓTULOS DOS CAMPOS
   Responsabilidade: Label dos inputs
   ========================================== */

/* Rótulo dos campos */
.form-group label {
    display: block; /* Comportamento de bloco */
    margin-bottom: 8px; /* Espaçamento abaixo */
    font-weight: 500; /* Peso semi-negrito */
    color: #555; /* Cor cinza */
}

/* ==========================================
   BLOCO 11: ELEMENTOS DE ENTRADA
   Responsabilidade: Inputs, selects e textareas
   ========================================== */

/* Inputs, selects e textareas */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; /* Largura total */
    padding: 12px 15px; /* Espaçamento interno */
    border: 1px solid #ddd; /* Borda cinza */
    border-radius: 4px; /* Cantos arredondados */
    font-size: 16px; /* Tamanho da fonte */
    transition: border-color 0.3s; /* Transição de cor */
}

/* ==========================================
   BLOCO 12: FOCUS DOS CAMPOS
   Responsabilidade: Estado ativo dos campos
   ========================================== */

/* Focus dos elementos de entrada */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none; /* Remover outline padrão */
    border-color: var(--secondary-color); /* Cor da variável CSS */
}

/* ==========================================
   BLOCO 13: TEXTAREA
   Responsabilidade: Campo de texto longo
   ========================================== */

/* Textarea */
.form-group textarea {
    height: 150px; /* Altura específica */
    resize: vertical; /* Permitir redimensionamento vertical */
}

/* ==========================================
   BLOCO 14: BOTÃO DE ENVIO
   Responsabilidade: Submit do formulário
   ========================================== */

/* Botão de submissão */
.submit-btn {
    background-color: var(--secondary-color); /* Cor da variável CSS */
    color: white; /* Texto branco */
    border: none; /* Sem borda */
    padding: 12px 25px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: 500; /* Peso semi-negrito */
    cursor: pointer; /* Cursor pointer */
    transition: background-color 0.3s; /* Transição de cor */
}

/* ==========================================
   BLOCO 15: HOVER DO BOTÃO
   Responsabilidade: Efeito visual do botão
   ========================================== */

/* Hover do botão de submissão */
.submit-btn:hover {
    background-color: var(--secondary-dark); /* Cor escura da variável */
}

/* ==========================================
   BLOCO 16: ALERTAS
   Responsabilidade: Mensagens de feedback
   ========================================== */

/* Container de alertas */
.alert {
    padding: 15px; /* Espaçamento interno */
    border-radius: 4px; /* Cantos arredondados */
    margin-bottom: 20px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 17: ALERTA DE SUCESSO
   Responsabilidade: Mensagem positiva
   ========================================== */

/* Alerta de sucesso */
.alert-success {
    background-color: #d4edda; /* Fundo verde claro */
    color: #155724; /* Texto verde escuro */
    border: 1px solid #c3e6cb; /* Borda verde */
}

/* ==========================================
   BLOCO 18: ALERTA DE ERRO
   Responsabilidade: Mensagem negativa
   ========================================== */

/* Alerta de erro */
.alert-danger {
    background-color: #f8d7da; /* Fundo vermelho claro */
    color: #721c24; /* Texto vermelho escuro */
    border: 1px solid #f5c6cb; /* Borda vermelha */
}

/* ==========================================
   BLOCO 19: CONTAINER DE INFORMAÇÕES
   Responsabilidade: Card com informações de contato
   ========================================== */

/* Container das informações de contato */
.contact-info {
    background-color: white; /* Fundo branco */
    border-radius: 8px; /* Cantos arredondados */
    padding: 30px; /* Espaçamento interno */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra para elevação */
}

/* ==========================================
   BLOCO 20: TÍTULO DAS INFORMAÇÕES
   Responsabilidade: Cabeçalho das informações
   ========================================== */

/* Título das informações */
.contact-info h2 {
    color: var(--primary-color); /* Cor da variável CSS */
    margin-bottom: 25px; /* Espaçamento abaixo */
    font-size: 24px; /* Tamanho intermediate */
}

/* ==========================================
   BLOCO 21: ITEM DE INFORMAÇÃO
   Responsabilidade: Container para cada item
   ========================================== */

/* Item individual de informação */
.info-item {
    display: flex; /* Layout flexbox */
    align-items: flex-start; /* Alinhamento ao topo */
    margin-bottom: 25px; /* Espaçamento abaixo */
}

/* ==========================================
   BLOCO 22: ÍCONE DE INFORMAÇÃO
   Responsabilidade: Container do ícone
   ========================================== */

/* Ícone das informações */
.info-icon {
    width: 50px; /* Largura fixa */
    height: 50px; /* Altura fixa */
    background-color: #e6f7ff; /* Fundo azul muito claro */
    border-radius: 50%; /* Formato circular */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    margin-right: 15px; /* Espaçamento à direita */
    flex-shrink: 0; /* Não reduzir tamanho */
}

/* ==========================================
   BLOCO 23: ÍCONE INTERNO
   Responsabilidade: Elemento visual do ícone
   ========================================== */

/* Ícone interno */
.info-icon i {
    font-size: 20px; /* Tamanho do ícone */
    color: var(--secondary-color); /* Cor da variável CSS */
}

/* ==========================================
   BLOCO 24: CONTEÚDO DA INFORMAÇÃO
   Responsabilidade: Texto das informações
   ========================================== */

/* Conteúdo textual das informações */
.info-content h3 {
    font-size: 18px; /* Tamanho intermediate */
    margin-bottom: 5px; /* Espaçamento abaixo */
    color: var(--primary-color); /* Cor da variável CSS */
}

/* ==========================================
   BLOCO 25: PARÁGRAFO DA INFORMAÇÃO
   Responsabilidade: Descrição da informação
   ========================================== */

/* Parágrafo das informações */
.info-content p {
    color: #666; /* Cor cinza */
    line-height: 1.6; /* Altura de linha */
}

/* ==========================================
   BLOCO 26: LINKS SOCIAIS
   Responsabilidade: Container dos links de redes sociais
   ========================================== */

/* Links sociais de contato */
.social-links-contact {
    display: flex; /* Layout flexbox */
    gap: 15px; /* Espaçamento entre links */
    margin-top: 30px; /* Espaçamento acima */
}

/* ==========================================
   BLOCO 27: LINK SOCIAL INDIVIDUAL
   Responsabilidade: Cada rede social
   ========================================== */

/* Link social individual */
.social-links-contact a {
    width: 40px; /* Largura fixa */
    height: 40px; /* Altura fixa */
    background-color: #e6f7ff; /* Fundo azul claro */
    border-radius: 50%; /* Formato circular */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    color: var(--secondary-color); /* Cor da variável CSS */
    transition: all 0.3s; /* Transições suaves */
}

/* ==========================================
   BLOCO 28: HOVER DOS LINKS SOCIAIS
   Responsabilidade: Efeito visual das redes sociais
   ========================================== */

/* Hover nos links sociais */
.social-links-contact a:hover {
    background-color: var(--secondary-color); /* Cor da variável */
    color: white; /* Texto branco */
}

/* ==========================================
   BLOCO 29: CONTAINER DO MAPA
   Responsabilidade: Container para localização
   ========================================== */

/* Container do mapa */
.map-container {
    margin-top: 40px; /* Espaçamento acima */
    border-radius: 8px; /* Cantos arredondados */
    overflow: hidden; /* Ocultar overflow */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra para elevação */
}

/* ==========================================
   BLOCO 30: IFRAME DO MAPA
   Responsabilidade: Elemento de mapa incorporado
   ========================================== */

/* Iframe do mapa */
.map-container iframe {
    width: 100%; /* Largura total */
    height: 300px; /* Altura fixa */
    border: none; /* Sem borda */
}

/* ==========================================
   BLOCO 31: RESPONSIVIDADE TABLET
   Responsabilidade: Layout para telas médias
   ========================================== */

/* Media query para tablets */
@media (max-width: 992px) {
    /* Grid em coluna única */
    .contact-container {
        grid-template-columns: 1fr;
    }

    /* Informações de contato no topo */
    .contact-info {
        order: -1;
    }
}

/* ==========================================
   BLOCO 32: RESPONSIVIDADE MOBILE
   Responsabilidade: Layout para smartphones
   ========================================== */

/* Media query para smartphones */
@media (max-width: 576px) {
    /* Título menor em mobile */
    .contact-header-content h1 {
        font-size: 28px;
    }

    /* Descrição menor em mobile */
    .contact-header-content p {
        font-size: 16px;
    }
}