/* =========================================================
   Balancing Whispers - Header + Logo fixes
   Paste this whole block in Template Style > Custom CSS
   ========================================================= */

/* ---------- DESKTOP (>= 992px) ---------- */
@media (min-width: 992px) {

  /* Dá mais altura pro header inteiro (resolve “vazando pra baixo”) */
  #sp-header {
    min-height: 110px;
    height: auto;
    display: flex;
    align-items: center;
  }

  /* Garante que o container não “corte” o conteúdo do header */
  #sp-header .container {
    min-height: 110px;
    height: auto;
    display: flex;
    align-items: center;
  }

  /* Coluna do menu com mais respiro vertical */
  #sp-menu .sp-column {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Evita baseline/line-height empurrando a logo */
  #sp-header .logo {
    line-height: 0;
    display: inline-flex;
    align-items: center;
  }

  /* Mantém a logo grande e “estável” */
  #sp-header img.logo-image {
    height: 72px;
    width: auto;
    max-height: 72px;
    display: block;
  }
}

/* ---------- MOBILE/TABLET (< 992px) ---------- */
@media (max-width: 991.98px) {

  /* Um pouco mais alto no mobile pra logo respirar */
  #sp-header {
    min-height: 86px;
    height: auto;
    display: flex;
    align-items: center;
  }

  #sp-header .container {
    min-height: 86px;
    height: auto;
    display: flex;
    align-items: center;
  }

  /* Centraliza a área do logo no topo */
  #sp-header .logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    margin: 0 auto !important;
    line-height: 0;
  }

  /* Centraliza a imagem e deixa maior */
  #sp-header img.logo-image {
    height: 54px !important;
    width: auto !important;
    max-height: 54px !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* ---------- EXTRA: se o template usar “sticky header” ---------- */
#sp-header.header-sticky,
#sp-header.is-sticky {
  height: auto;
}