/* 
 * Correção para o botão de menu mobile no site heraldlond.com
 * Este arquivo contém as regras CSS necessárias para corrigir o problema
 * do botão de menu parcialmente oculto em dispositivos móveis.
 */

/* Ajuste para garantir que o botão de menu fique totalmente visível em dispositivos móveis */
@media (max-width: 991px) {
  /* Ajusta a margem direita do container do header para dar espaço ao botão */
  #header .header-container {
    padding-right: 20px;
  }
  
  /* Ajusta o posicionamento do botão de menu */
  #header .header-btn-collapse-nav {
    margin-right: 5px; /* Adiciona margem à direita para evitar que fique colado na borda */
    position: relative; /* Garante que o posicionamento seja relativo ao container */
    z-index: 1000; /* Garante que o botão fique acima de outros elementos */
  }
  
  /* Ajusta o container do header-nav para garantir espaço para o botão */
  #header .header-nav {
    padding-right: 20px;
  }
  
  /* Ajusta o alinhamento da coluna do header que contém o botão */
  #header .header-column.justify-content-end {
    padding-right: 5px;
  }
}

/* Ajuste adicional para telas muito pequenas (smartphones) */
@media (max-width: 575px) {
  /* Reduz ligeiramente o tamanho do botão em telas muito pequenas */
  #header .header-btn-collapse-nav {
    padding: 6px 10px;
    margin-right: 18px; /* Aumenta um pouco mais a margem direita */
  }
  
  /* Garante que o container do header tenha espaço suficiente */
  #header .header-container {
    padding-right: 30px;
  }
}