/* ==========================================================================
   Tektron — navegacao.css
   Header, navegação desktop + mega-menu, busca, diálogo mobile,
   acordeões e rodapé. Mobile-first; a alternância desktop acontece em
   64rem, sincronizada com o corte de 1024px do JavaScript existente.
   Depende dos tokens definidos em global.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative; /* âncora de posicionamento do mega-menu */
  z-index: var(--z-header);
  background: var(--cor-grafite);
  color: var(--cor-branco);
}

/* navegação não usa sublinhado permanente; ele volta em hover/foco */
.site-header a { text-decoration: none; }

.header-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* flex-start (não space-between): com logo + marca + hambúrguer como 3
     itens na mesma linha, space-between os espalharia de forma irregular.
     O hambúrguer é empurrado pra direita via margin-left:auto nele mesmo
     (ver .menu-hamburger), não por space-between no container. */
  justify-content: flex-start;
  gap: var(--espaco-8) var(--espaco-16);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--espaco-8) var(--margem-lateral);
}

.logo-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--espaco-4) var(--espaco-8);
  border-radius: var(--raio);
  background: transparent;
}

.logo-img {
  display: block;
  width: auto;
  height: 44px;
  max-width: 100%;
}

/* texto "TEKTRON" + slogan, ao lado do símbolo — visível em mobile e
   desktop (só a posição no grid muda em ≥64rem, ver seção 9).
   É um link para a home, igual ao símbolo: parte dos usuários volta pro
   início clicando no nome escrito, não no logo. O padding existe só pra
   dar área de clique confortável; a margem negativa devolve o bloco à
   posição visual que ele tinha antes de virar link. */
.header-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  padding: var(--espaco-4) var(--espaco-8);
  margin-inline: calc(-1 * var(--espaco-8));
  border-radius: var(--raio);
}

@media (hover: hover) {
  .header-brand:hover .header-brand-name { text-decoration: underline; }
}

.header-brand-name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cor-branco);
}

.header-brand-tagline {
  font-family: "Purisa", "Inter", sans-serif;
  font-size: 0.8125rem;
  color: var(--cor-texto-suave-escuro);
}

/* --------------------------------------------------------------------------
   2. Botão hambúrguer (mobile)
   -------------------------------------------------------------------------- */
.menu-hamburger {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-8);
  min-width: 48px;
  min-height: 48px;
  padding: var(--espaco-8) var(--espaco-12);
  border: 1px solid var(--cor-borda-clara);
  color: var(--cor-branco);
  margin-left: auto; /* empurra o botão pra ponta direita da linha 1 */
}

@media (hover: hover) {
  .menu-hamburger:hover { background: var(--cor-realce-escuro); }
}

.hamburger-text {
  font-size: 0.875rem;
  font-weight: 600;
}

.hamburger-box {
  position: relative;
  width: 20px;
  height: 14px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.hamburger-inner { top: 6px; }
.hamburger-inner::before { content: ""; top: -6px; }
.hamburger-inner::after  { content: ""; top: 6px; }

/* --------------------------------------------------------------------------
   3. Busca no header
   Campo escuro integrado ao grafite: o foco amarelo tem contraste máximo.
   -------------------------------------------------------------------------- */
.header-search { flex: 1 1 100%; min-width: 0; } /* mobile: segunda linha, largura total */

.search-form { width: 100%; }

.search-input-group {
  display: flex;
  background: var(--cor-realce-escuro);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio);
}

#search-input {
  flex: 1 1 auto;
  min-width: 0; /* permite encolher sem estourar o contêiner */
  min-height: 44px;
  padding: 0 var(--espaco-12);
  border: 0;
  border-radius: var(--raio) 0 0 var(--raio);
  background: transparent;
  color: var(--cor-branco);
}

#search-input::placeholder { color: rgb(255 255 255 / 72%); }

.search-submit {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border-left: 1px solid var(--cor-borda-clara);
  border-radius: 0 var(--raio) var(--raio) 0;
  color: var(--cor-branco);
}

@media (hover: hover) {
  .search-submit:hover { background: rgb(255 255 255 / 12%); }
}

/* --------------------------------------------------------------------------
   4. Navegação desktop (oculta no mobile)
   -------------------------------------------------------------------------- */
.nav-desktop { display: none; }

.nav-list {
  display: flex;
  flex-wrap: wrap; /* salvaguarda: quebra linha em vez de estourar */
  align-items: center;
  gap: var(--espaco-4);
}

.nav-link,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-8);
  min-height: 44px;
  padding: var(--espaco-8) var(--espaco-12);
  border-radius: var(--raio);
  color: var(--cor-branco);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
}

@media (hover: hover) {
  .nav-link:hover,
  .menu-toggle:hover { background: var(--cor-realce-escuro); }
}

@media (hover: hover) {
  .nav-link:hover { text-decoration: underline; }
}

/* item/página atual marcado em amarelo (marcador, não texto) */
.nav-link[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--cor-marca-amarelo);
}

.menu-toggle[aria-expanded="true"] {
  background: var(--cor-realce-escuro);
  box-shadow: inset 0 -3px 0 var(--cor-marca-amarelo);
}

.chevron-icon { transition: transform var(--transicao-rapida); }

.menu-toggle[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   5. Mega-menu desktop
   Visibilidade controlada exclusivamente pelo atributo hidden (JS).
   -------------------------------------------------------------------------- */
.megamenu-panel {
  position: absolute; /* relativo ao .site-header */
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-megamenu);
  background: var(--cor-grafite);
  border-top: 1px solid var(--cor-borda-clara);
  /* única sombra do sistema: separa o painel flutuante do conteúdo */
  box-shadow: 0 6px 12px rgb(30 34 41 / 30%);
  /* telas baixas: rola internamente para nenhum link ficar inalcançável */
  max-height: calc(100vh - 7rem);
  max-height: calc(100dvh - 7rem);
  overflow-y: auto;
}

.megamenu-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-32) var(--espaco-48);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--espaco-32) var(--margem-lateral) var(--espaco-48);
}

/* --------------------------------------------------------------------------
   5.1 Faixa "Comece pelo que você precisa" — único conteúdo do painel
   A lista de modelos saiu do mega-menu em 2026-08-04: o cliente típico navega
   para encontrar, não sabendo o código, e quem já sabe usa a busca do
   cabeçalho. Canônico §7.10 (divulgação progressiva), §7.5 (Lei de Hick).
   -------------------------------------------------------------------------- */
.megamenu-needs { grid-column: 1 / -1; }

.needs-heading {
  margin-bottom: var(--espaco-16);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cor-texto-suave-escuro);
  cursor: default;
}

.needs-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--espaco-16);
}

/* o card estica até a altura da linha, como em .need-cards da home */
.needs-groups > li { display: flex; }

/* Saída para o catálogo completo, depois dos três grupos e fora deles: quem
   já sabe o código não precisa passar pela entrada por problema, que segue
   sendo o caminho principal do painel (decidido em 2026-08-04). Como quarto
   grupo, quebraria a grade de 3 colunas e disputaria a mesma atenção. */
.megamenu-todos { margin-top: var(--espaco-16); }

/* Mesma caixa com borda dos links de situação: dentro do painel nada fica
   sublinhado em repouso, então é a borda que sinaliza "isto é clicável".
   Sem ela, o texto sozinho é lido como rótulo — testado no render. */
.megamenu-todos a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--espaco-8) var(--espaco-12);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio);
  color: var(--cor-branco);
  font-size: 0.9375rem;
  font-weight: 600;
}

@media (hover: hover) {
  .megamenu-todos a:hover {
    background: rgb(255 255 255 / 12%);
    border-color: var(--cor-branco);
    text-decoration: underline;
    text-decoration-color: var(--cor-marca-amarelo);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
  }
}

/* Caixa delimitada, não botão clicável: "Sensor de movimento" tem cinco ações
   internas, e diretrizes §4.3 veta card inteiro clicável nesse caso. A borda
   agrupa (§4: borda é o elemento estrutural principal); quem clica é o título
   ou um dos botões de situação. */
.needs-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--espaco-16);
  background: var(--cor-realce-escuro);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio);
}

.needs-group-name {
  margin-bottom: var(--espaco-4);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.needs-group-name a { color: var(--cor-branco); }

@media (hover: hover) {
  /* Amarelo da marca como cor de estado sobre grafite (diretrizes §1: "marcador
     ativo e realce sobre grafite"). Só o sublinhado recebe a cor — o texto segue
     branco (15,96:1) e o amarelo nunca vira o único sinal. Deliberadamente um
     sublinhado, não um contorno: o anel de foco também é amarelo, e os dois
     estados precisam continuar distinguíveis. */
  .needs-group-name a:hover {
    text-decoration: underline;
    text-decoration-color: var(--cor-marca-amarelo);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
  }
}

/* a frase do que o produto faz é apoio, não alvo clicável */
.needs-group-desc {
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--cor-texto-suave-escuro);
  cursor: default;
}

/* empurra os botões para a base do card, alinhando-os entre as três colunas */
.needs-links {
  margin-top: auto;
  padding-top: var(--espaco-16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-8);
}

/* alvo de 44 px de altura: o leigo entra por aqui, é o caminho principal */
.needs-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--espaco-8) var(--espaco-12);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio);
  color: var(--cor-branco);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida);
}

@media (hover: hover) {
  /* três sinais somados no hover: fundo, borda e sublinhado amarelo — a cor
     reforça, mas nada depende só dela (diretrizes §1).
     12% (e não --cor-realce-escuro, 8%) porque o card já usa os 8%: o hover
     precisa clarear acima da superfície onde o botão está, não igualá-la.
     Mesmo valor já usado em .search-submit:hover. */
  .needs-links a:hover {
    background: rgb(255 255 255 / 12%);
    border-color: var(--cor-branco);
    text-decoration: underline;
    text-decoration-color: var(--cor-marca-amarelo);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
  }
}

/* A mesma faixa serve o diálogo mobile, em coluna única e com os botões de
   situação em largura cheia — alvo maior no toque (diretrizes §4.1, ≥44 px;
   o diálogo usa 48 px nos links diretos). */
.menu-mobile-dialog .needs-groups { grid-template-columns: 1fr; }

.menu-mobile-dialog .needs-links { flex-direction: column; }

.menu-mobile-dialog .needs-links a { min-height: 48px; }

/* divisória entre o bloco de produtos e os links simples do diálogo,
   equivalente à que existia depois do último acordeão */
.menu-mobile-dialog .megamenu-needs + .mobile-main-list {
  margin-top: var(--espaco-12);
  padding-top: var(--espaco-8);
  border-top: 1px solid var(--cor-borda-clara);
}

/* --------------------------------------------------------------------------
   6. Diálogo mobile
   -------------------------------------------------------------------------- */
.menu-mobile-dialog {
  width: 100%;
  max-width: 100%;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* viewport dinâmica mobile */
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--cor-grafite);
  color: var(--cor-branco);
  z-index: var(--z-dialogo); /* redundante no top-layer; documenta a camada */
}

.menu-mobile-dialog::backdrop { background: rgb(30 34 41 / 55%); }

.menu-mobile-dialog a { text-decoration: none; }

@media (min-width: 48rem) {
  /* tablet: folha lateral à direita; o backdrop mantém o contexto visível */
  .menu-mobile-dialog {
    width: 24rem;
    margin-left: auto;
  }
}

.dialog-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-16);
  padding: var(--espaco-12) var(--espaco-16);
  border-bottom: 1px solid var(--cor-borda-clara);
}

.dialog-title { font-weight: 600; }

.btn-close-dialog {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cor-borda-clara);
  color: var(--cor-branco);
}

@media (hover: hover) {
  .btn-close-dialog:hover { background: var(--cor-realce-escuro); }
}

.nav-mobile-body {
  flex: 1 1 auto;
  overflow-y: auto; /* a rolagem acontece dentro do diálogo */
  overscroll-behavior: contain;
  padding: var(--espaco-8) var(--espaco-16) var(--espaco-24);
  font-variant-numeric: tabular-nums; /* códigos de produto nas listas */
}

/* --------------------------------------------------------------------------
   7. Lista do diálogo mobile
   -------------------------------------------------------------------------- */
.mobile-main-list > li + li { margin-top: var(--espaco-4); }

/* links simples (Suporte, Institucional, Contato) */
.mobile-direct-link a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--espaco-12) var(--espaco-8);
  border-radius: var(--raio);
  color: var(--cor-branco);
  font-weight: 600;
}

@media (hover: hover) {
  .mobile-direct-link a:hover { text-decoration: underline; }
}

/* --------------------------------------------------------------------------
   8. Rodapé
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--espaco-64);
  background: var(--cor-grafite);
  color: var(--cor-branco);
}

.site-footer a { text-decoration: none; }

.footer-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--espaco-48) var(--margem-lateral) var(--espaco-24);
}

.footer-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-32) var(--espaco-24);
}

@media (min-width: 48rem) {
  .footer-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .footer-nav { grid-template-columns: repeat(4, 1fr); }
}

.footer-heading {
  margin-bottom: var(--espaco-12);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cor-texto-suave-escuro);
}

.footer-links li + li { margin-top: var(--espaco-4); }

.footer-links a {
  display: inline-block;
  padding-block: var(--espaco-4);
  color: var(--cor-branco);
}

@media (hover: hover) {
  .footer-links a:hover,
  .footer-links a:focus-visible { text-decoration: underline; }
}

.footer-divider {
  margin: var(--espaco-32) 0 var(--espaco-24);
  border: 0;
  border-top: 1px solid var(--cor-borda-clara);
}

/* identificação institucional: 14px com contraste ≈ 9,8:1 sobre grafite */
.footer-bottom p {
  max-width: none;
  font-size: 0.875rem;
  color: var(--cor-texto-suave-escuro);
}

.company-legal-name {
  font-weight: 600;
  color: var(--cor-branco);
}

.company-fiscal-details {
  margin-top: var(--espaco-4);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9. Alternância desktop/mobile — 64rem (= corte de 1024px do JS)
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .menu-hamburger,
  .menu-mobile-dialog { display: none; }

  /* Layout em grid, inspirado no header do jw.org: logo alto à esquerda
     (ocupa as 2 linhas), linha de cima com marca escrita + busca, linha
     de baixo com o menu. Substitui o layout flex anterior (ver histórico
     em site-pendencias.md) — a coluna "brand" central (1fr) absorve o
     espaço entre logo e busca, então não sobra vazio solto como antes. */
  .header-container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "logo brand  search"
      "logo nav    nav";
    align-items: center;
    row-gap: var(--espaco-4);
    column-gap: var(--espaco-16);
  }

  .logo-link {
    grid-area: logo;
    align-self: stretch;
  }

  .logo-img { height: 64px; width: auto; }

  .header-brand { grid-area: brand; }

  .nav-desktop {
    display: block;
    grid-area: nav;
    min-width: 0;
  }

  .header-search {
    grid-area: search;
    display: flex;
    justify-content: flex-end;
  }

  .search-form { max-width: 26rem; }
}

/* --------------------------------------------------------------------------
   10. Modos de contraste forçado
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  /* as barras do hambúrguer usam background, que o modo remove;
     a cor de sistema as preserva */
  .hamburger-inner,
  .hamburger-inner::before,
  .hamburger-inner::after { background: ButtonText; }
}