/* ============================================================================
   header-fix.css — blindagem do cabeçalho flutuante

   Por que existe: o cabeçalho depende de utilitários do Tailwind (flex,
   shrink-0, md:hidden...). Se a página não gerar algum deles, ou se um CSS
   global ou um script os sobrepuser, a barra quebra: botão e hambúrguer
   empilham, e o hambúrguer aparece no desktop.

   Aqui as regras críticas vivem num CSS próprio: não dependem do Tailwind,
   usam seletores estruturais (valem para o HTML estático e para o
   Header.astro) e usam !important onde um script poderia gravar estilo inline.

   Breakpoint md do Tailwind = 48rem (768px).
   ========================================================================== */

/* 1. Barra: uma única linha, nunca quebra */
header.fixed > div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box;
  height: 5rem;
  padding-inline: 1.5rem;
}

/* 2. Logo: o único item que cede espaço em telas estreitas */
header.fixed > div > a:first-child {
  display: flex;
  align-items: center;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
header.fixed > div > a:first-child img {
  height: 2rem !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  object-position: left center;
}

/* 3. Menu horizontal: só no desktop */
@media (max-width: 47.9375rem) {
  header.fixed > div > nav { display: none !important; }
}
@media (min-width: 48rem) {
  header.fixed > div > nav {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
  }
}

/* 4. Botões da direita: sempre lado a lado, nunca empilhados */
header.fixed > div > div {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 0.75rem;
  flex: 0 0 auto !important;
  min-width: max-content;
}
header.fixed > div > div > * {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
#magnetic-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
}

/* 5. Hambúrguer: visível no mobile */
#mobile-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}
@media (max-width: 47.9375rem) {
  #mobile-menu-btn { display: flex !important; }
}

/* 6. Dropdown: no mobile anima por opacidade/visibilidade, então precisa de display:flex */
#mobile-menu { display: flex; }

/* 7. Desktop: hambúrguer e dropdown somem por completo.
      display:none sozinho perde para um script que grave
      style="display:flex !important"; as demais propriedades garantem que,
      mesmo nesse caso, nada apareça nem receba clique. */
@media (min-width: 48rem) {
  #mobile-menu-btn,
  #mobile-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-width: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
    overflow: hidden !important;
  }
}

/* 8. Telas muito estreitas (até 340px): compacta para tudo caber na mesma linha */
@media (max-width: 21.25rem) {
  header.fixed > div { padding-inline: 1rem; }
  #magnetic-btn { padding-inline: 0.75rem !important; }
  #magnetic-btn > span { font-size: 0.6875rem !important; }
}