/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 2.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

/* ============================================================
   HOME - Igualar altura dos articles e imagens no blog grid
   ============================================================ */

/* Garantir que todos os article no grid tenham a mesma altura */
.ogb-blog-grid article.ogb-grid-entry {
  display: flex !important;
  flex-direction: column !important;
}

.ogb-blog-grid article.ogb-grid-entry .ogb-grid-inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  height: 100% !important;
}

/* Fixar altura da imagem para que todas sejam iguais */
.ogb-blog-grid .ogb-grid-media {
  height: 220px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.ogb-blog-grid .ogb-grid-img {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}

.ogb-blog-grid .ogb-grid-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Garantir que os detalhes do card cresçam para preencher o espaço */
.ogb-blog-grid .ogb-grid-details {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}


/* ============================================================
   HEADER LAYOUT - Barra única azul com logo, menu e redes sociais
   Inspirado em batistasmineiros.org.br
   Para desfazer: remover o bloco abaixo até "FIM DO HEADER LAYOUT"
   ============================================================ */

/* Ocultar top-bar */
#top-bar {
  display: none !important;
}

/* Fundo azul em todo o header */
#site-header {
  background-color: #1e73be !important;
  width: 100% !important;
}

/* Container do header - sem limite de largura, flex horizontal */
#site-header #site-header-inner.container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 20px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  min-height: 70px !important;
}

/* Logo na esquerda */
#site-header #site-logo {
  flex-shrink: 0 !important;
  order: 1 !important;
  padding: 8px 0 !important;
  margin-right: 15px !important;
  align-self: center !important;
}

/* Menu de navegação - ocupa espaço disponível, mesma linha */
#site-header #site-navigation-wrap {
  flex: 1 !important;
  order: 2 !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  overflow: visible !important;
}

/* Navegação interna */
#site-header #site-navigation {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  flex-wrap: wrap !important;
}

/* Lista de menu principal - flexbox horizontal */
#site-header .main-menu.dropdown-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Links do menu em branco */
#site-header #site-navigation .menu-link {
  background-color: transparent !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 70px !important;
  padding: 0 8px !important;
  display: block !important;
}

#site-header #site-navigation .menu-link:hover,
#site-header #site-navigation .menu-item.current-menu-item > .menu-link,
#site-header #site-navigation .menu-item:hover > .menu-link {
  color: #ccddee !important;
  background-color: rgba(0,0,0,0.15) !important;
}

/* Ícones sociais na direita */
#site-header .oceanwp-social-menu {
  flex-shrink: 0 !important;
  order: 3 !important;
  align-self: center !important;
  margin-left: 10px !important;
}

#site-header .oceanwp-social-menu a,
#site-header .oceanwp-social-menu a i {
  color: #ffffff !important;
}

#site-header .oceanwp-social-menu a:hover {
  color: #ccddee !important;
}

/* Ícones de busca e mobile em branco */
#site-header .search-icon a,
#site-header .oceanwp-mobile-menu-icon a {
  color: #ffffff !important;
}

/* Mobile menu icon em branco */
#site-header .oceanwp-mobile-menu-icon span,
#site-header .oceanwp-mobile-menu-icon span::before,
#site-header .oceanwp-mobile-menu-icon span::after {
  background-color: #ffffff !important;
}

/* Dropdown menus */
#site-header .sub-menu {
  background-color: #1e73be !important;
  border-top: none !important;
}

#site-header .sub-menu .menu-link {
  color: #ffffff !important;
  line-height: 40px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

#site-header .sub-menu .menu-link:hover {
  background-color: rgba(0,0,0,0.2) !important;
  color: #ffffff !important;
}

/* Esconder mobile icon no mobile - separado do flex */
#site-header .oceanwp-mobile-menu-icon {
  flex-shrink: 0 !important;
  order: 4 !important;
  align-self: center !important;
}

/* ============================================================
   FIM DO HEADER LAYOUT
   ============================================================ */


/* Fix do botão do cookie notice - muda texto para PT-BR */
#ocn-cookie-wrap a.ocn-btn.ocn-close,
#ocn-cookie-wrap .ocn-btn {
  font-size: 0 !important;
}

#ocn-cookie-wrap a.ocn-btn.ocn-close::after,
#ocn-cookie-wrap .ocn-btn::after {
  content: "ACEITAR" !important;
  font-size: 13px !important;
}


/* ============================================================
   RESPONSIVO - TABLET (até 960px)
   ============================================================ */
@media only screen and (max-width: 960px) {
  #site-header #site-header-inner.container {
    flex-wrap: wrap !important;
    padding: 8px 15px !important;
  }

  #site-header #site-logo {
    flex: 0 0 auto !important;
    order: 1 !important;
    margin-right: 0 !important;
    width: auto !important;
  }

  #site-header .oceanwp-social-menu {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  #site-header #site-navigation-wrap {
    order: 3 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    justify-content: flex-start !important;
  }

  #site-header #site-navigation .menu-link {
    line-height: 40px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   RESPONSIVO - MOBILE (até 480px)
   ============================================================ */
@media only screen and (max-width: 480px) {
  #site-header #site-header-inner.container {
    padding: 5px 10px !important;
    align-items: center !important;
  }

  #site-header #site-logo {
    order: 1 !important;
  }

  #site-header #site-logo img {
    max-height: 50px !important;
    width: auto !important;
  }

  #site-header .oceanwp-social-menu {
    order: 2 !important;
  }

  /* No mobile, esconde o menu de navegação horizontal e mostra apenas mobile menu */
  #site-header #site-navigation-wrap {
    display: none !important;
  }

  /* Mobile menu hamburger fica visível */
  #site-header .oceanwp-mobile-menu-icon {
    display: flex !important;
    order: 3 !important;
    align-items: center !important;
    color: #ffffff !important;
  }

  #site-header .oceanwp-mobile-menu-icon span,
  #site-header .oceanwp-mobile-menu-icon span::before,
  #site-header .oceanwp-mobile-menu-icon span::after {
    background-color: #ffffff !important;
  }
}

/* ============================================================
   PROBLEMA 2: Ocultar side-panel hamburger (ícone ≡ vazio) em todos os layouts
   O painel lateral não tem conteúdo configurado, por isso deve ser ocultado.
   Para reativar: remover esta regra e a regra #side-panel abaixo.
   ============================================================ */
li.side-panel-li,
.side-panel-btn,
#side-panel {
  display: none !important;
}

/* ============================================================
   PROBLEMA 3 e 4 (Mobile/Tablet até 960px):
   - Ocultar span.oceanwp-text "Menu" (gerava tarja branca)
   - Ocultar menu de navegação desktop (#site-navigation-wrap)
   - Mostrar corretamente o botão de menu mobile
   Para desfazer: remover este bloco @media (max-width:960px) abaixo.
   ============================================================ */
@media only screen and (max-width: 960px) {
  /* Ocultar texto "Menu" ao lado do ícone hamburguer */
  span.oceanwp-text {
    display: none !important;
  }

  /* Ocultar a navegação desktop para dar lugar ao menu mobile */
  #site-header #site-navigation-wrap {
    display: none !important;
  }

  /* Mostrar e estilizar o botão hamburguer mobile */
  #site-header .oceanwp-mobile-menu-icon {
    display: flex !important;
    order: 3 !important;
    margin-left: auto !important;
    align-items: center !important;
  }

  #site-header .oceanwp-mobile-menu-icon a.mobile-menu {
    color: #ffffff !important;
    font-size: 18px !important;
    padding: 0 10px !important;
    line-height: 60px !important;
    display: flex !important;
    align-items: center !important;
  }

  #site-header .oceanwp-mobile-menu-icon .fa-bars {
    color: #ffffff !important;
    font-size: 20px !important;
  }

  /* Ajustar layout do header-inner para que logo fique à esquerda
     e o hamburguer à direita */
  #site-header #site-header-inner.container {
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  #site-header #site-logo {
    flex: 1 0 auto !important;
    order: 1 !important;
  }

  #site-header .oceanwp-social-menu {
    display: none !important;
  }
}