/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/


/* 1) Volta o bloco do logo para posição normal e centraliza */
header#survey-nav .navbar-brand.logo-container {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 auto !important;      /* centralizado na faixa do topo */
  display: block !important;
}

/* 2) O container do header ocupa a largura toda e alinha o logo no centro */
header#survey-nav .container-fluid.col-xl-8 {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  justify-content: center !important;  /* centraliza o logo */
  align-items: center !important;
  min-height: auto !important;
}

/* 3) A imagem respeita 851x315 como teto e reduz proporcionalmente abaixo disso */
header#survey-nav .navbar-brand.logo-container .logo {
  display: block !important;
  width: 100% !important;          /* usa a largura disponível do header */
  max-width: 851px !important;     /* nunca passa de 851 de largura */
  height: auto !important;         /* mantém a proporção 851x315 */
  max-height: 315px !important;    /* nunca passa de 315 de altura */
  object-fit: contain !important;  /* nunca corta a imagem */
  max-width: min(100%, 851px) !important; /* segurança extra em navegadores antigos */
}

/* 4) Ajuste leve de respiro vertical da barra */
header#survey-nav.navbar {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* 5) Se o topo for fixed-top e o conteúdo ficar por baixo, use uma compensação segura.
      Você pode refinar esse valor depois que testar. */
.ls-main-content,
/* 6) Mobile: se o logo estiver oculto por causa do d-none, revele-o */
@media (max-width: 767.98px) {
  header#survey-nav .navbar-brand.logo-container.d-none {
    display: block !important;
  }
}

/* 7) Se quiser uma compensação menor no mobile, ajuste aqui */
@media (max-width: 576px) {
  .ls-main-content, #outerframeContainer {
    margin-top: 220px;
    scroll-margin-top: 220px;
  }
}