/* ==========================================================================
   cabecalho.css — cabeçalho em barra destacada (cápsula)
   Carregado depois do <style> de cada página: só muda a "moldura" do
   cabeçalho, as cores continuam as da página.
   Cor do botão Entrar: --cabecalho-destaque / --cabecalho-destaque-texto
   (padrão branco com texto azul; Valorant e LoL definem a sua no :root)
   ========================================================================== */

header.nav {
  /* Fica acima do conteúdo da página, pro menu "Gift Cards" abrir por cima do banner */
  position: relative;
  z-index: 50;
  margin-top: 16px;
  margin-bottom: 8px;
  padding: 10px 12px 10px 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* Página inicial: o cabeçalho fica fora do .container, então alinha
   com a largura do banner logo abaixo */
body > header.nav {
  width: calc(100% - 48px);
  max-width: 1112px;
  margin-left: auto;
  margin-right: auto;
}

/* Itens do menu viram "pílulas" */
header.nav .menu { gap: 4px; margin-left: 12px; align-items: center; }
header.nav .menu > a,
header.nav .dropdown-trigger {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 100px;
  transition: background .2s ease, color .2s ease;
}
header.nav .menu > a:hover,
header.nav .dropdown-trigger:hover,
header.nav .dropdown:hover .dropdown-trigger,
header.nav .dropdown.open .dropdown-trigger {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}
/* Página atual */
header.nav .menu > a[aria-current="page"],
header.nav .dropdown-trigger.ativo {
  background: rgba(255, 255, 255, 0.12);
}

/* Lupa e carrinho sem moldura, como ícones dentro da barra */
header.nav .icon-btn,
header.nav .cart-btn {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header.nav .icon-btn:hover,
header.nav .cart-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Botão Entrar em destaque */
header.nav .user-btn {
  background: var(--cabecalho-destaque, #ffffff);
  color: var(--cabecalho-destaque-texto, #091f4c);
  border-color: transparent;
  font-weight: 700;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header.nav .user-btn:hover {
  background: var(--cabecalho-destaque, #ffffff);
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
header.nav .user-btn .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }

@media (max-width: 900px) {
  header.nav { padding: 8px 8px 8px 16px; margin-top: 12px; }
}
@media (max-width: 480px) {
  body > header.nav { width: calc(100% - 32px); }
}