/* assets/css/header.css — Cabeçalho: logo, menu e dropdowns, idioma, ícones, busca e botão Associe-se. */

/* ---------------------------------------------------
   HEADER
   --------------------------------------------------- */
.stieen-header {
  border-bottom: 1px solid var(--stieen-cinza-borda);
  position: sticky;
  top: 0;
  background: var(--cor-header-fundo, var(--stieen-branco));
  z-index: 200;
}

.stieen-header-inner {
  /* Volta a travar em 1200px (igual o resto do site) — o "extremo"
     que o Luciano pediu é o limite dos 1200px, não a borda real da
     janela. Sem padding nas laterais aqui: a logo encosta no início
     da coluna de 1200px e o Associe-se encosta no fim dela — só
     isso já ganha os 48px (24+24) que estavam sobrando como
     padding, dando um pouco mais de fôlego pro menu sem esticar
     pra fora dos 1200px. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

.stieen-header-logo { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.stieen-header-logo img { height: 78px; display: block; }

/* Logo alterna para a versão branca (logo_header_escura.png) no modo
   escuro, já que a logo cinza/vermelha fica pouco legível sobre
   fundo escuro (ver print do Luciano). */
.stieen-header-logo img.stieen-header-logo-escura { display: none; }
[data-tema="escuro"] .stieen-header-logo img.stieen-header-logo-clara { display: none; }
[data-tema="escuro"] .stieen-header-logo img.stieen-header-logo-escura { display: block; }

/* Nome por extenso do sindicato — saiu da imagem da logo (agora só o
   símbolo STIEEN) e virou texto ao lado, pra ser traduzido (t(),
   dicionário fixo em traducao_utils.php). 2026-09-24. */
.stieen-header-logo-nome {
  font-weight: 500;
  font-style: normal;
  line-height: 1.35;
  font-size: 14px;
  color: var(--stieen-vermelho);
  max-width: 280px;
}
[data-tema="escuro"] .stieen-header-logo-nome { color: var(--stieen-vermelho-vivo); }

/* Ícones dos pilares (preto + vermelho, fundo transparente) ficam
   quase invisíveis sobre o fundo escuro — invert+hue-rotate troca
   o preto por branco e devolve o vermelho ao vermelho original,
   sem precisar de um arquivo de imagem alternativo. */
[data-tema="escuro"] .stieen-pilar-icone { filter: invert(1) hue-rotate(180deg); }

.stieen-menu { flex: 1; }
.stieen-menu > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; align-items: center; justify-content: center; }
.stieen-menu > ul > li > a {
  color: var(--cor-header-links, var(--stieen-escuro));
  font-weight: 600;
  font-size: calc(16px * var(--stieen-escala-fonte));
  letter-spacing: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.stieen-menu > ul > li > a i { font-size: calc(10px * var(--stieen-escala-fonte)); color: var(--stieen-vermelho); }
.stieen-menu > ul > li > a:hover { color: var(--cor-header-links-hover, var(--stieen-vermelho)); }
.stieen-menu > ul > li { position: relative; }
.stieen-menu > ul > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -9px;
  width: 1px;
  height: 14px;
  background: var(--stieen-cinza-suave);
  transform: translateY(-50%);
}

.stieen-menu-dropdown { position: relative; }
.stieen-submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  width: max-content;
  background: var(--stieen-branco);
  border: 1px solid var(--stieen-cinza-borda);
  border-radius: 8px;
  box-shadow: 0 12px 30px var(--stieen-sombra);
  display: none;
}
.stieen-menu-dropdown:hover .stieen-submenu { display: block; }
.stieen-submenu li a {
  display: block;
  padding: 10px 18px;
  color: var(--stieen-cinza);
  font-size: calc(16px * var(--stieen-escala-fonte));
  font-weight: 500;
  text-transform: none;
  white-space: nowrap;
}
.stieen-submenu li a:hover { background: var(--stieen-cinza-claro); color: var(--stieen-vermelho); }
.stieen-submenu li a.stieen-link-alerta { color: var(--stieen-vermelho); }
.stieen-submenu li a.stieen-link-alerta:hover { color: var(--stieen-cinza); }

.stieen-header-idioma { position: relative; flex-shrink: 0; }
.stieen-header-idioma-btn {
  background: none;
  border: 1px solid var(--stieen-cinza-borda);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--cor-header-idioma, var(--stieen-escuro));
  font-family: inherit;
  font-size: calc(16px * var(--stieen-escala-fonte));
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.stieen-header-idioma-btn i { font-size: calc(9px * var(--stieen-escala-fonte)); color: var(--cor-header-idioma, var(--stieen-cinza)); }
.stieen-header-idioma-btn:hover { border-color: var(--stieen-vermelho); }

.stieen-header-idioma-menu {
  /* Sem "gap" entre o botão e o menu — evita perder o :hover no meio
     do caminho (mesmo padrão da nova homepage do Staecnon). */
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--stieen-branco);
  border: 1px solid var(--stieen-cinza-borda);
  border-radius: 8px;
  box-shadow: 0 12px 30px var(--stieen-sombra);
  min-width: 150px;
  padding: 6px;
  display: none;
  z-index: 400;
}
.stieen-header-idioma.is-aberto .stieen-header-idioma-menu { display: block; }
@media (min-width: 1025px) {
  .stieen-header-idioma:hover .stieen-header-idioma-menu { display: block; }
}
.stieen-header-idioma-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--stieen-escuro);
  font-size: calc(16px * var(--stieen-escala-fonte));
  text-transform: none;
}
.stieen-header-idioma-menu a:hover { background: var(--stieen-cinza-claro); }
.stieen-header-idioma-menu a.is-ativo { font-weight: 700; color: var(--stieen-vermelho); }
.stieen-header-idioma-menu a i { margin-left: auto; font-size: calc(11px * var(--stieen-escala-fonte)); color: var(--stieen-vermelho); }
.stieen-header-idioma-bandeira { width: 18px; height: 13px; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px var(--stieen-sombra); }

/* Ícones de busca (lupa) e área do associado (chave) — ficam entre
   o menu principal e o bloco idioma+Associe-se. Espaço ganho
   tirando o ícone do botão Associe-se (não precisava, o texto já é
   claro) e apertando o gap só entre idioma e Associe-se (ver
   .stieen-header-direita) em vez de mexer no gap geral do
   cabeçalho, que afetaria o menu principal também. */
.stieen-header-acoes { display: flex; gap: 16px; flex-shrink: 0; }
.stieen-header-icone-btn {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid var(--cor-header-icones-borda, var(--stieen-cinza-borda));
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-header-icones, var(--stieen-escuro));
  font-size: calc(15px * var(--stieen-escala-fonte));
  cursor: pointer;
}
.stieen-header-icone-btn:hover { border-color: var(--stieen-vermelho); color: var(--stieen-vermelho); }

/* Barra de busca — some por padrão, se expande abaixo do cabeçalho
   inteiro (não só da coluna central de 1200px) quando a lupa é
   clicada. */
.stieen-header-busca-form {
  display: none;
  border-bottom: 1px solid var(--stieen-cinza-borda);
  background: var(--cor-header-fundo, var(--stieen-branco));
  box-shadow: 0 12px 24px var(--stieen-sombra);
}
.stieen-header-busca-form.is-aberta { display: block; }
.stieen-header-busca-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  gap: 10px;
}
.stieen-header-busca-campo { position: relative; flex: 1; }
.stieen-header-busca-campo input {
  width: 100%;
  border: 1px solid var(--stieen-cinza-borda);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: calc(16px * var(--stieen-escala-fonte));
  color: var(--stieen-escuro);
  box-sizing: border-box;
}
.stieen-header-busca-campo input:focus { outline: none; border-color: var(--stieen-vermelho); }
.stieen-header-busca-inner button {
  flex-shrink: 0;
  width: 42px;
  border: none;
  border-radius: 6px;
  background: var(--stieen-vermelho);
  color: var(--stieen-branco);
  font-size: calc(16px * var(--stieen-escala-fonte));
  cursor: pointer;
}
.stieen-header-busca-inner button:hover { background: var(--stieen-vermelho-escuro); }

/* Autocomplete da busca (assets/js/site.js, busca_sugestoes.php) —
   lista suspensa logo abaixo do campo, dentro do mesmo wrapper
   position:relative (.stieen-header-busca-campo), sempre mostrando
   no máximo 8 itens (regra do backend), com rolagem se precisar. */
.stieen-header-busca-sugestoes {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--stieen-branco);
  border: 1px solid var(--stieen-cinza-borda);
  border-radius: 6px;
  box-shadow: 0 12px 24px var(--stieen-sombra);
  max-height: 320px;
  overflow-y: auto;
  z-index: 5;
}
.stieen-header-busca-sugestoes.is-visivel { display: block; }
.stieen-header-busca-sugestoes-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: calc(15px * var(--stieen-escala-fonte));
  color: var(--stieen-escuro);
  cursor: pointer;
  border-bottom: 1px solid var(--stieen-cinza-claro);
}
.stieen-header-busca-sugestoes-item:last-child { border-bottom: none; }
.stieen-header-busca-sugestoes-item:hover { background: var(--stieen-cinza-claro); }
.stieen-header-busca-sugestoes-item span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stieen-header-busca-sugestoes-item span:last-child { flex-shrink: 0; font-size: calc(12px * var(--stieen-escala-fonte)); color: var(--stieen-vermelho); text-transform: uppercase; }

.stieen-menu-mobile-extra { display: none; }

/* Idioma + Associe-se agrupados num bloco próprio com gap reduzido
   só entre os dois — o gap do cabeçalho como um todo (24px) continua
   intacto pros outros elementos (logo, menu, ações). */
/* gap de 16px pra igualar aos outros dois intervalos (busca<->chave
   e chave<->idioma) — o margin-left negativo compensa o gap geral
   de 24px do .stieen-header-inner entre .stieen-header-acoes e
   .stieen-header-direita, também deixando 16px ali. */
.stieen-header-direita { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: -8px; }

.stieen-btn-associe {
  flex-shrink: 0;
  background: var(--cor-header-associe, var(--stieen-vermelho));
  color: var(--stieen-branco);
  font-weight: 700;
  font-size: calc(16px * var(--stieen-escala-fonte));
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.stieen-btn-associe:hover { background: var(--cor-header-associe-hover, var(--stieen-vermelho-escuro)); }