@import url('./00_globals.css');

/* ========================================
   REDES EXTERNAS E CONTATO
   Estilos para seções de contato externo
   ======================================== */

/* ==========================================
   DIMENSÕES BASE - GRID
   Altura mínima dos containers de contato
   ========================================== */

/* Contact Wrapper - WhatsApp Container
   Define altura mínima da seção WhatsApp
   - min-height: 210px altura padrão
*/
.contact-wrapper .caixa-conteudo.whatsapp {
    min-height: 210px;
}

/* Contact Wrapper - Google Agenda Container
   Define altura mínima da seção Google Agenda
   - min-height: 210px altura padrão
*/
.contact-wrapper .caixa-conteudo.googleAgenda {
    min-height: 210px;
}

/* ==========================================
   SEÇÃO WHATSAPP
   Container e elementos de contato WhatsApp
   ========================================== */

/* Cont Whats - Container Principal
   Layout flexbox para seção WhatsApp
   - display: flex + flex-direction: column layout vertical
   - height: 100% ocupa altura disponível
   - justify-content: space-between distribui elementos verticalmente
*/
.contWhats {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

/* Cont Whats - Título
   Heading da seção WhatsApp
   - padding: 10px 20px 0 espaçamento
   - font-size: --texto-Tamanho-Prin tamanho principal
   - text-align: center alinhado ao centro
*/
.contWhats h2 {
    padding: 10px 20px 0;
    font-size: var(--texto-Tamanho-Prin);
    color: var(--texto-cor-padrao);
    text-align: center;
}

/* Cont Whats - Parágrafo
   Texto descritivo do WhatsApp
   - padding: 10px 20px 0 espaçamento
   - font-size: --texto-Tamanho-Sub tamanho menor
   - text-align: center alinhado ao centro
*/
.contWhats p {
    padding: 10px 20px 0;
    font-size: var(--texto-Tamanho-Sub);
    color: var(--texto-cor-padrao);
    text-align: center;
}

/* Card Servico - WhatsApp Card
   Card container dentro de WhatsApp
   - display: flex + flex-direction: column layout vertical
   - align-items: center + justify-content: flex-end centraliza e alinhas ao final
   - flex-grow: 1 ocupa espaço disponível
   - padding-bottom: 30px espaçamento inferior
*/
.card-servico.whatsapp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    flex-grow: 1;
    padding-bottom: 30px;
}

/* Card Servico - WhatsApp Hover State
   Remove background ao passar mouse
   - background-color: transparent !important remove cor de fundo
*/
.card-servico.whatsapp:hover {
    background-color: transparent !important;
}

/* Botão WhatsApp - Estado Base
   Botão para abrir contato WhatsApp
   - background: --backg-Princ-cor cor principal
   - padding: --padding-padrao espaçamento padrão
   - display: inline-block permite dimensionamento
   - margin-top: 20px espaçamento superior
   - cursor: pointer indica clicabilidade
   - transition: --transicao-padrao anima mudanças
*/
#btn-whatsapp {
    background: var(--backg-Princ-cor);
    color: var(--texto-cor-padrao) !important;
    border: var(--borderSolid-padrao);
    padding: var(--padding-padrao);
    border-radius: var(--borderRadius-padrao);
    text-decoration: none;
    font-size: var(--texto-Tamanho-Sub);
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    transition: var(--transicao-padrao);
}

/* Padronização de Tamanho para Botões de Contato
   Garante que todos os botões de contato tenham tamanho consistente
   - min-width: 140px evita botões muito pequenos
   - min-height: 44px padrão de acessibilidade
   - text-align: center centraliza texto
   - display: inline-flex permite melhor alinhamento
   - align-items: center centraliza verticalmente
   - justify-content: center centraliza horizontalmente
*/
.contact-btn {
    min-width: 140px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Botão WhatsApp - Link Interno
   Estilo do link dentro do botão
   - color: --texto-cor-padrao !important força cor com prioridade
   - text-decoration: none remove sublinhado
   - display: inline-block mantém tamanho do bloco
*/
#btn-whatsapp a {
    color: var(--texto-cor-padrao) !important;
    text-decoration: none;
    display: inline-block;
}

/* Botão WhatsApp - Link Hover State
   Remove transformação ao passar mouse
   - transform: none !important evita mudanças de escala/translação
*/
#btn-whatsapp a:hover {
    transform: none !important;
}

/* Botão WhatsApp - Hover State
   Interação visual ao passar mouse
   - opacity: 0.85 fica levemente transparente
   - transform: scale(1.05) amplia botão ligeiramente
*/
#btn-whatsapp:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

/* ==========================================
   SEÇÃO GOOGLE AGENDA
   Container e elementos de agendamento
   ========================================== */

/* Cont Google Agenda - Container Principal
   Layout flexbox para seção Google Agenda
   - display: flex + flex-direction: column layout vertical
   - gap: 15px espaçamento entre elementos
   - justify-content: space-between distribui elementos verticalmente
   - height: 100% ocupa altura disponível
*/
.contGoogleAgenda {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: space-between;
    height: 100%;
}

/* Cont Google Agenda - Título
   Heading da seção Google Agenda
   - padding: 10px 20px 0 espaçamento
   - font-size: --texto-Tamanho-Prin tamanho principal
   - text-align: center alinhado ao centro
*/
.contGoogleAgenda h2 {
    padding: 10px 20px 0;
    font-size: var(--texto-Tamanho-Prin);
    color: var(--texto-cor-padrao);
    text-align: center;
}

/* Cont Google Agenda - Parágrafo
   Texto descritivo do Google Agenda
   - padding: 10px 20px 0 espaçamento
   - font-size: --texto-Tamanho-Sub tamanho menor
   - text-align: center alinhado ao centro
*/
.contGoogleAgenda p {
    padding: 10px 20px 0;
    font-size: var(--texto-Tamanho-Sub);
    color: var(--texto-cor-padrao);
    text-align: center;
}

/* Card Servico - Google Agenda Card
   Card container dentro de Google Agenda
   - display: flex + flex-direction: column layout vertical
   - align-items: center + justify-content: flex-end centraliza e alinha ao final
   - flex-grow: 1 ocupa espaço disponível
   - padding-bottom: 30px espaçamento inferior
*/
.card-servico.googleAgenda {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    flex-grow: 1;
    padding-bottom: 30px;
}

/* Card Servico - Google Agenda Hover State
   Remove background ao passar mouse
   - background-color: transparent !important remove cor de fundo
*/
.card-servico.googleAgenda:hover {
    background-color: transparent !important;
}

/* Botão Google Agenda - Estado Base
   Botão para agendar no Google Calendar
   - background: --backg-Princ-cor cor principal
   - padding: --padding-padrao espaçamento padrão
   - display: inline-block permite dimensionamento
   - margin-top: 20px espaçamento superior
   - cursor: pointer indica clicabilidade
   - transition: --transicao-padrao anima mudanças
*/
#btn-googleAgenda {
    background: var(--backg-Princ-cor);
    color: var(--texto-cor-padrao) !important;
    border: var(--borderSolid-padrao);
    padding: var(--padding-padrao);
    border-radius: var(--borderRadius-padrao);
    text-decoration: none;
    font-size: var(--texto-Tamanho-Sub);
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    transition: var(--transicao-padrao);
}

/* Botão Google Agenda - Link Interno
   Estilo do link dentro do botão
   - color: --texto-cor-padrao !important força cor com prioridade
   - text-decoration: none remove sublinhado
   - display: inline-block mantém tamanho do bloco
*/
#btn-googleAgenda a {
    color: var(--texto-cor-padrao) !important;
    text-decoration: none;
    display: inline-block;
}

/* Botão Google Agenda - Link Hover State
   Remove transformação ao passar mouse
   - transform: none !important evita mudanças de escala/translação
*/
#btn-googleAgenda a:hover {
    transform: none !important;
}

/* Botão Google Agenda - Hover State
   Interação visual ao passar mouse
   - opacity: 0.85 fica levemente transparente
   - transform: scale(1.05) amplia botão ligeiramente
*/
#btn-googleAgenda:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

/* ==========================================
   MEDIA QUERIES - RESPONSIVIDADE
   Ajustes para diferentes tamanhos de tela
   ========================================== */

/* Tablet (máximo 1024px)
   Posiciona WhatsApp e Google Agenda em coluna direita
   - grid-column: 2 segunda coluna da grid
   - grid-row: específico para cada seção
*/
@media (max-width: 1024px) {
    /* WhatsApp - Tablet Layout
       Posiciona na coluna 2 (direita), linha 1
       - grid-column: 2 coluna da direita
       - grid-row: 1 primeira linha
    */
    .contact-wrapper .caixa-conteudo.whatsapp {
        grid-column: 2;
        grid-row: 1;
    }
    
    /* Google Agenda - Tablet Layout
       Posiciona na coluna 2 (direita), linha 2
       - grid-column: 2 coluna da direita
       - grid-row: 2 segunda linha
    */
    .contact-wrapper .caixa-conteudo.googleAgenda {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Mobile (máximo 768px)
   Todos os elementos em coluna única
   - grid-column: 1 única coluna
   - grid-row: auto fluxo automático
*/
@media (max-width: 768px) {
    /* WhatsApp - Mobile Layout
       Coluna única, fluxo automático
       - grid-column: 1 coluna única
       - grid-row: auto fluxo automático
    */
    .contact-wrapper .caixa-conteudo.whatsapp {
        grid-column: 1;
        grid-row: auto;
    }
    
    /* Google Agenda - Mobile Layout
       Coluna única, fluxo automático
       - grid-column: 1 coluna única
       - grid-row: auto fluxo automático
    */
    .contact-wrapper .caixa-conteudo.googleAgenda {
        grid-column: 1;
        grid-row: auto;
    }
}