/*
Theme Name: Optima Child (Unipsico)
Theme URI: https://unipsico.com.br
Template: optima
Author: HL Corp
Description: Child theme do tema Optima para as customizações da Unipsico (CSS, ajustes de layout e PHP). O tema-pai Optima NUNCA é editado — assim atualizações dele não apagam nossas mudanças. O conteúdo/textos das páginas vive no banco (Elementor), não aqui.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: optima-child
*/

/* ==========================================================================
   Customizações da Unipsico
   - Coloque aqui os ajustes de CSS do site.
   - Regras vencem o tema-pai porque o child carrega depois.
   ========================================================================== */

/* --- Seção PsiCore: moldura moderna no print do sistema web --- */
.psi-web-shot img {
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(39, 29, 87, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.psi-web-shot img:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 70px rgba(39, 29, 87, 0.24);
}

/* --- Seção Contato: mapa preenchendo toda a coluna direita (edge-to-edge) --- */
.psi-map-col {
    align-self: stretch !important;
    padding: 0 !important;
}
.psi-map-col > .vc_column-inner {
    height: 100%;
    padding: 0 !important;
}
.psi-map-col > .vc_column-inner > .wpb_wrapper,
.psi-map,
.psi-map .wpb_wrapper {
    height: 100%;
}
.psi-map iframe,
#gmap_canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 500px;
    border: 0;
    margin: 0;
}

/* --- Rodapé Unipsico (2 colunas: logo+redes | contato) --- */
.unipsico-foot p,
.unipsico-foot-contact p {
    margin-bottom: 12px;
    line-height: 1.7;
}
.unipsico-foot-contact .fa,
.unipsico-foot .fa {
    color: #2b7798;
    margin-right: 10px;
}
.unipsico-social {
    margin-top: 20px;
}
/* Só o ícone (sem círculo); no hover assume a cor da rede */
.unipsico-social a {
    display: inline-block;
    margin-right: 22px;
    font-size: 22px;
    line-height: 1;
    color: #9aa0ab;
    background: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    transition: color 0.25s ease, transform 0.25s ease;
}
.unipsico-social a .fa {
    color: inherit !important;
    margin: 0 !important;
}
.unipsico-social a:hover {
    transform: translateY(-2px);
}
.unipsico-social a:hover .fa-facebook { color: #1877f2 !important; }
.unipsico-social a:hover .fa-instagram { color: #e1306c !important; }
.unipsico-social a:hover .fa-linkedin { color: #0a66c2 !important; }

/* --- /quem-somos: botão "MARQUE UMA SESSÃO" (vc_cta) — branco, hover azul padrão --- */
/* o vc_btn3-style-custom usa gradiente (background-image) + hover por
   background-position — por isso zeramos o gradiente e forçamos cor sólida,
   com especificidade alta pra vencer o CSS do js_composer. */
.psi-cta-sessao a.vc_btn3.vc_btn3-style-custom {
    border: none !important;
    background-image: none !important;
    background-color: #ffffff !important;
    color: #42474c !important;
    transition: background-color 0.25s ease, color 0.25s ease !important;
}
.psi-cta-sessao a.vc_btn3.vc_btn3-style-custom:hover {
    background-image: none !important;
    background-color: #2B7798 !important;
    color: #ffffff !important;
}

/* --- /contato: inputs de texto do formulário mais baixos (altura reduzida) --- */
.wpcf7 input.wpcf7-text,
.wpcf7 input.wpcf7-email,
.wpcf7 input.wpcf7-tel {
    height: 42px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
}
/* botão "Enviar": remove a borda preta + estilo da marca */
.wpcf7 input.wpcf7-submit {
    border: none !important;
    background-color: #4eaac8 !important;
    color: #ffffff !important;
    transition: background-color 0.25s ease !important;
}
.wpcf7 input.wpcf7-submit:hover {
    background-color: #2b7798 !important;
}

/* --- /quem-somos: aproxima os títulos "A importância...", "Quando buscar...",
   "Por que escolher..." dos seus descritivos (reduz a margem padrão do h2). --- */
.psi-tight-heading,
h2.psi-tight-heading,
.psi-tight-heading h2 {
    margin-bottom: 10px !important;
}

/* --- Seção "Quem Somos": fundo cinza (igual "O que oferecemos"),
   pra diferenciar da seção de Convênios (branca). --- */
.psi-quemsomos-gray {
    background-color: #f6f8f9 !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    /* full-bleed: estende o cinza por toda a largura da tela mesmo a row
       estando dentro do container (não depende do stretch do WPBakery). */
    box-shadow: 0 0 0 100vmax #f6f8f9;
    clip-path: inset(0 -100vmax);
}
/* Remove a faixa branca acima da "Quem Somos": a seção anterior (3 colunas
   Adultos/Crianças/Empresas) tinha margin-bottom de 95px, que criava o espaço.
   O WPBakery injeta essa regra num <style> DEPOIS do nosso CSS, então usamos
   especificidade maior (.vc_row.vc_custom_...) pra vencer a cascata. */
.vc_row.vc_custom_1513939060418 {
    margin-bottom: 0 !important;
}
/* A própria "Quem Somos" tinha margin-bottom de 90px, criando o espaço acima da
   seção Convênios. Como ela é stretch_row, essa classe fica no WRAPPER externo
   (não no .vc_row), então targetamos direto com "body ." pra vencer o WPBakery. */
body .vc_custom_1513947487010 {
    margin-bottom: 0 !important;
}

/* --- Seção Convênios: carrossel de logos --- */
/* Padding da seção (o WPBakery não gera o CSS da .vc_custom_convenios01 quando o
   conteúdo é inserido fora do editor dele — então definimos aqui). */
.vc_custom_convenios01 {
    padding-top: 60px !important;
    padding-bottom: 72px !important;
}
/* NÃO usar flex/override no slideline do WPBakery — quebra o slider (usa transform). */
.psi-convenios img {
    height: 60px !important;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.psi-convenios img:hover {
    filter: grayscale(0);
    opacity: 1;
}
/* bullets abaixo das imagens, centralizados.
   O <ol> de indicadores vem ANTES das imagens no DOM, então usamos flex + order
   pra colocar as imagens (order 1) em cima e os bullets (order 2) embaixo. */
.psi-convenios .vc_images_carousel {
    display: flex !important;
    flex-direction: column;
}
.psi-convenios .vc_carousel-inner {
    order: 1;
    width: 100%;
}
.psi-convenios .vc_carousel-indicators {
    order: 2;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    width: 100% !important;
    margin: 26px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.psi-convenios .vc_carousel-indicators li {
    float: none !important;
    display: inline-block;
    margin: 0 5px !important;
    vertical-align: middle;
}
.psi-convenios .vc_carousel-indicators li.vc_active {
    background-color: #2b7798;
    border-color: #2b7798;
}

/* Separadores decorativos do WPBakery ([vc_separator] → span.vc_sep_line) —
   removidos de TODO o site a pedido do cliente (as linhas que apareciam sob os
   títulos/textos explicativos das seções). Regra global; se um dia algum
   separador for desejado, escopar por página/seção. */
.vc_separator {
    display: none !important;
}

/* Resultados de busca (/?s=...) — itens ficavam muito distantes um do outro.
   Como o resultado mostra só o link do título (search.php do child remove a
   meta), reduzimos o espaço vertical entre eles. Escopo body.search para não
   afetar a listagem do blog. */
body.search .blog_post_preview {
    margin-bottom: 10px !important;
    padding-bottom: 0 !important;
    border: 0 !important;
}
body.search .blog_post_preview .blog_content {
    padding: 0 !important;
}
body.search .blog_post_preview .blogpost_title {
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* =========================================================================
   Responsividade do cabeçalho no celular (<= 768px)
   Causa: o menu principal + o botão "burger" ficam na SEÇÃO INFERIOR do
   header builder, marcada como "esconder no mobile"
   (.gt3_header_builder__section--hide_on_mobile => display:none em <=768px).
   Resultado: no celular o menu sumia por completo. Também ajustamos logo,
   telefone ("Ligue") e botão "Marque uma sessão", que ficavam espremidos.
   Correção "limpa" alternativa: wp-admin > Header Builder > desmarcar
   "Hide on mobile" da seção inferior. Enquanto isso, resolvido por CSS.
   ========================================================================= */
@media only screen and (max-width: 768px) {
    /* 1) Menu de volta no mobile: reexibe a seção do menu. Com ela visível,
       as regras do tema (<=1200px) já escondem o menu horizontal e mostram
       o burger, que abre o menu mobile (mobile_menu_container existe). */
    .gt3_header_builder__section--bottom.gt3_header_builder__section--hide_on_mobile {
        display: block !important;
    }
    .gt3_header_builder__section--bottom .gt3_header_builder__section-container {
        justify-content: space-between !important;
        align-items: center;
    }
    /* IMPORTANTE: não forçar display do .main-menu aqui. O tema já esconde o
       menu horizontal desktop (<=1200px) e reexibe o menu DENTRO do
       .mobile_menu_container quando o burger abre. Uma regra
       `.gt3_header_builder_menu_component .main-menu { display:none !important }`
       também atingia o menu do container mobile e quebrava a abertura (o X
       animava mas o painel não aparecia). */

    /* 2) Seção do meio: middle_left = logo; middle_right = telefone + botão.
       Num celular estreito isso ficava tudo espremido numa linha. Empilhamos:
       cada "lado" ocupa a linha inteira e centraliza. */
    .gt3_header_builder__section--middle .gt3_header_builder__section-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 10px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    .gt3_header_builder__section--middle .header_side,
    .gt3_header_builder__section--middle .header_side_container {
        flex: 1 1 100% !important;
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* 3) Logo centralizada, tamanho adequado (SVG ~4.4:1). */
    .gt3_header_builder__section--middle .logo_container {
        justify-content: center !important;
        width: 100% !important;
    }
    .gt3_header_builder__section--middle .logo_container img {
        max-height: 40px !important;
        width: auto !important;
    }

    /* 4) middle_right: telefone e botão empilhados e centralizados (não cabem
       lado a lado no celular). */
    .gt3_header_builder__section--middle .middle_right .header_side_container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .gt3_header_builder__section--middle .gt3_header_builder_text_component {
        font-size: 14px !important;
        text-align: center !important;
        margin: 0 !important;
        width: auto !important;
    }
    .gt3_header_builder__section--middle .gt3_header_builder_text_component a,
    .gt3_header_builder__section--middle .gt3_header_builder_text_component p {
        white-space: normal !important;
    }
}