/* =============================================================================
   TR2 Engenharia - cabecalho, menu mobile e rodape

   Mesma regra do design-system.css: nenhuma cor, familia ou tamanho de fonte
   fixo. Tudo das variaveis do Kit Ativo.

   O cabecalho e a MARCACAO DO HELLO (template-parts/dynamic-header.php), que o
   experimento hello-theme-header-footer torna global. Aqui so entram os
   ajustes que as opcoes do Hello nao cobrem: o botao de WhatsApp no menu, o
   comportamento do submenu e o menu mobile em tela cheia.
   ========================================================================== */

/* =============================================================================
   Cabecalho
   ========================================================================== */

:root {
  /* MEDIDO, nao estimado: 155px identicos a 1024, 1280, 1440 e 1920 - a
     altura vem do logo e do respiro, nao da largura da tela. Quem depende
     disto e a coluna fixa das paginas de servico, que precisa parar ABAIXO do
     cabecalho. */
  --tr2-altura-cabecalho: 155px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 800;
  border-bottom: 1px solid var(--e-global-color-borda);
  /* FUNDO BEGE, pedido em 15/10: "Colocar o fundo bege aqui", sobre a faixa
     do cabecalho. Opaco de proposito: com o cabecalho fixo, um fundo
     translucido deixaria o texto da pagina passar por tras do menu ao rolar. */
  background-color: var(--e-global-color-fundoalternativo);
}

.site-header .header-inner {
  padding-block: var(--tr2-esp-sm);
  gap: var(--tr2-esp-md);
}

.site-header .site-branding { flex-shrink: 0; }
.site-header .custom-logo-link img { display: block; height: auto; }

/* =============================================================================
   Menu principal (desktop)
   ========================================================================== */

.site-navigation ul.menu {
  display: flex;
  align-items: center;
  /* 8px entre itens desde 18/10: com o Blog o menu passou a ter sete itens e
     o botao, e com 16px ele nao cabia ao lado do logo em 1200px - caia
     inteiro para uma segunda linha. */
  gap: var(--tr2-esp-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-navigation ul.menu li { position: relative; }

.site-navigation ul.menu a {
  display: block;
  padding: 10px 6px;
  text-decoration: none;
  border-radius: var(--tr2-raio-sm);
  /* Reserva do sublinhado: sem isto, o item "pula" 2px ao passar o mouse. */
  border-bottom: 2px solid transparent;
}

.site-navigation ul.menu a:hover,
.site-navigation ul.menu a:focus-visible {
  border-bottom-color: var(--e-global-color-accent);
}

/* Pagina atual: marcada pelo WordPress. Nao depende so de cor - tem peso
   maior e borda - porque cor sozinha nao serve a quem nao a distingue. */
.site-navigation ul.menu > .current-menu-item > a,
.site-navigation ul.menu > .current-menu-ancestor > a,
.site-navigation ul.menu > .current-page-ancestor > a {
  font-weight: 600;
  border-bottom-color: var(--e-global-color-primary);
}

/* --- submenu de Servicos ---------------------------------------------- */

.site-navigation ul.menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 290px;
  margin: 0;
  padding: var(--tr2-esp-xs);
  list-style: none;
  background: var(--e-global-color-fundo);
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-md);
  box-shadow: 0 10px 28px rgb(22 32 26 / .12);

  /* Fechado por padrao. visibility (e nao display:none) permite transicao e
     mantem o submenu fora da ordem de tabulacao quando fechado. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}

/* Abre no mouse E no teclado: :focus-within e o que faz o submenu funcionar
   para quem navega com Tab, sem uma linha de JavaScript. */
.site-navigation ul.menu li:hover > .sub-menu,
.site-navigation ul.menu li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-navigation ul.menu .sub-menu a {
  padding: 9px 12px;
  border-bottom: 0;
  border-radius: var(--tr2-raio-sm);
  line-height: 1.35;
}

.site-navigation ul.menu .sub-menu a:hover,
.site-navigation ul.menu .sub-menu a:focus-visible {
  background: var(--e-global-color-fundoalternativo);
  color: var(--e-global-color-primary);
}

/* O ultimo grupo do submenu nao deve sair da tela a direita. */
.site-navigation ul.menu > li:last-child .sub-menu,
.site-navigation ul.menu > li:nth-last-child(2) .sub-menu { left: auto; right: 0; }

@media (prefers-reduced-motion: reduce) {
  .site-navigation ul.menu .sub-menu { transition: none; }
}

/* =============================================================================
   Botao "Fale no WhatsApp" no menu
   ========================================================================== */

/* Item de menu com a classe tr2-menu-zap, definida no seed. E assim que se faz
   um botao destacado no menu sem o Elementor Pro. */
.site-navigation ul.menu > li.tr2-menu-zap > a {
  background: var(--e-global-color-accent);
  /* Texto ESCURO sobre o dourado: 7,48:1. Branco daria 2,01:1. */
  color: var(--e-global-color-secondary);
  font-weight: 600;
  padding: 11px 18px;
  border-radius: var(--tr2-raio-md);
  border-bottom: 0;
  white-space: nowrap;
}

.site-navigation ul.menu > li.tr2-menu-zap > a:hover,
.site-navigation ul.menu > li.tr2-menu-zap > a:focus-visible {
  background: var(--e-global-color-primary);
  color: var(--e-global-color-branco);
}

/* HAMBURGUER ATE 1279px, nao ate 992px como no Hello.
   Com o Blog (18/10) o menu horizontal precisa de ~1190px com o logo; entre
   992 e 1279px ele caia para uma segunda linha e o cabecalho dobrava de
   altura - cobrindo meia tela, porque e fixo. Mesma especificidade do Hello
   mais `body`, para vencer o !important dele. */
@media (min-width: 992px) and (max-width: 1279px) {
  body .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation { display: none !important; }
  body .site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder { display: flex !important; }
}

/* =============================================================================
   Menu mobile
   ========================================================================== */

.site-header .site-navigation-toggle-holder { padding: 0; }

.site-header .site-navigation-toggle {
  /* 48px: alvo de toque confortavel. O padrao do Hello e menor. */
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--e-global-color-borda);
  border-radius: var(--tr2-raio-md);
  color: var(--e-global-color-primary);
  cursor: pointer;
}

.site-header .site-navigation-toggle:hover { background: var(--e-global-color-fundoalternativo); }

/* O Hello abre o dropdown adicionando [aria-hidden="false"]. */
.site-navigation-dropdown {
  /* ANCORAGEM EXPLICITA - nao e redundante.
     O Hello ancora este painel por `bottom`, contando com um transform para
     desliza-lo para baixo. O resultado medido era top = -280px: o menu crescia
     para CIMA, fora da tela, e so o ultimo item ("Fale no WhatsApp") aparecia
     abaixo do cabecalho. Parecia menu quebrado; na verdade estava inteiro, no
     lugar errado. Fixar top/bottom aqui resolve sem depender do transform. */
  top: 100%;
  bottom: auto;

  background: var(--e-global-color-fundo);
  border-top: 1px solid var(--e-global-color-borda);
  /* Ocupa a tela abaixo do cabecalho e rola sozinho: com 11 itens, um menu
     que cresce empurrando a pagina fica inutilizavel em 360px. */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: var(--tr2-esp-xs) 0 var(--tr2-esp-lg);
  -webkit-overflow-scrolling: touch;
}

.site-navigation-dropdown ul.menu,
.site-navigation-dropdown ul.sub-menu { margin: 0; padding: 0; list-style: none; }

/* position: static e OBRIGATORIO aqui.
   O Hello posiciona esta lista com position:absolute. Fora do fluxo, ela nao
   conta para a altura do container - e com o overflow-y:auto acima o menu
   abria com 49px de altura (so o padding) enquanto a lista, de 384px, ficava
   recortada. Aparentava "menu nao abre"; na verdade abria vazio. */
.site-navigation-dropdown ul.menu { position: static; }

.site-navigation-dropdown ul.menu a {
  display: block;
  /* Linha alta e alvo generoso: o briefing pede menu usavel com um polegar. */
  padding: 15px var(--tr2-esp-md);
  min-height: 50px;
  text-decoration: none;
  border-bottom: 1px solid var(--e-global-color-borda);
}

.site-navigation-dropdown ul.menu a:hover,
.site-navigation-dropdown ul.menu a:focus-visible {
  background: var(--e-global-color-fundoalternativo);
}

/* --- cores: o Hello usa hex fixo no menu mobile ------------------------
   O tema pai pinta `li a` com background:#fff e color:#55595c, e o item atual
   com um bloco cinza #55595c. Sao valores fora das Cores Globais, entao uma
   troca de marca nao os alcancaria. Os seletores abaixo igualam a
   especificidade do pai de proposito. */
.site-navigation-dropdown ul.menu li a {
  background: var(--e-global-color-fundo);
  color: var(--e-global-color-text);
  box-shadow: inset 0 -1px 0 var(--e-global-color-borda);
}

/* Item atual: barra lateral no Destaque em vez do bloco cinza. Marca a
   posicao com forma e peso, nao so com cor. */
.site-navigation-dropdown ul.menu li.current-menu-item > a,
.site-navigation-dropdown ul.menu li.current-page-ancestor > a,
.site-navigation-dropdown ul.menu li.current-menu-ancestor > a {
  background: var(--e-global-color-fundoalternativo);
  color: var(--e-global-color-primary);
  box-shadow: inset 4px 0 0 var(--e-global-color-accent),
              inset 0 -1px 0 var(--e-global-color-borda);
  font-weight: 600;
}

/* --- submenu dos 6 grupos: sempre aberto -------------------------------
   O Hello colapsa os itens de submenu com max-height:0 + scaleY(0) e os abre
   por JavaScript quando o pai recebe .elementor-active - um acordeao.
   Abrimos de uma vez.

   TROCA ACEITA: o menu fica mais alto e exige rolagem em 360px. Em compensacao
   nao ha controle escondido para descobrir, e "Servicos" continua sendo um link
   que leva a propria pagina em vez de virar so um gatilho de expansao. Com
   uma mao, rolar e mais facil que achar um disclosure. */
.site-navigation-dropdown ul.menu > li li {
  max-height: none;
  transform: none;
}

.site-navigation-dropdown ul.sub-menu { display: block; }

.site-navigation-dropdown ul.sub-menu li a {
  padding-left: calc(var(--tr2-esp-md) * 2);
  padding-block: 12px;
  min-height: 44px;
  font-size: .9375rem;
  background: var(--e-global-color-fundoalternativo);
  color: var(--e-global-color-primary);
}

/* O botao de WhatsApp no menu mobile: largura cheia, no fim da lista. */
.site-navigation-dropdown ul.menu > li.tr2-menu-zap { padding: var(--tr2-esp-md); }

.site-navigation-dropdown ul.menu > li.tr2-menu-zap > a {
  background: var(--e-global-color-accent);
  color: var(--e-global-color-secondary);
  font-weight: 600;
  text-align: center;
  border: 0;
  border-radius: var(--tr2-raio-md);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   Rodape
   ========================================================================== */

/* SEM MARGEM em cima desde 18/10: a margem de 96px aparecia como uma tira
   BRANCA entre a faixa escura de CTA e o rodape escuro, em toda pagina. O
   conteudo acima ja termina com o respiro da propria secao. */
.tr2-rodape { margin-top: 0; }

.tr2-rodape__inner {
  /* A mesma coluna do cabecalho e das faixas - ver design-system.css. Antes
     eram 1200px COM o respiro dentro, entao o conteudo do rodape caia 24px
     a direita do conteudo das faixas. */
  max-width: var(--tr2-container-total);
  margin-inline: auto;
  padding: var(--tr2-secao-y) var(--tr2-container-pad);
  display: grid;
  gap: var(--tr2-esp-lg);
  /* Mobile primeiro: uma coluna. */
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .tr2-rodape__inner {
    /* Tres colunas quase iguais, como no modelo dele (18/10). A do meio um
       pouco maior: "Ruido, Vibracao e Modelagem Acustica" cabe numa linha. */
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: var(--tr2-esp-xl);
  }
}


/* A COLUNA DA MARCA COM A ALTURA DAS OUTRAS DUAS - dele, em 18/10: o logo no
   alto, na linha dos titulos, e o botao no pe, na linha do ultimo item. O
   grid ja estica a coluna; o flex distribui o que esta dentro dela. */
/* O LOGO NA LARGURA DO BOTAO - dele, em 18/10: "vamos testar o TR2 na
   dimensao do botao Fale no WhatsApp" (o logo de 134px estava "meio perdido
   na caixa"). A coluna e um grid da largura do botao; logo e botao esticam
   ate ela. `minmax(0, max-content)`: no tablet a coluna e mais estreita que
   o botao, e entao os dois encolhem juntos em vez de vazar. */
.tr2-rodape__marca {
  display: grid;
  /* A coluna inteira desde 20/10: o logo animado e uma cena 16:10 com o
     logo no centro, e na largura do botao ele ficaria pequeno. O botao fica
     na largura do proprio texto (justify-self abaixo). */
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
  align-content: start;
  gap: var(--tr2-esp-md);
}

/* O video ocupa a coluna, ate 360px: em 1440 o logo dentro da cena fica com
   ~220px, o tamanho do logo estatico que ele aprovou (240). */
.tr2-rodape__logo { display: block; max-width: 360px; }

.tr2-rodape__video {
  display: block;
  width: 100%;
  height: auto;
  /* A cena tem fundo proprio (metal escuro, depois cinza claro): vira um
     cartao de cantos arredondados no verde do rodape. */
  border-radius: var(--tr2-raio-lg);
  background: var(--e-global-color-secondary);
}

.tr2-rodape__zap { justify-self: start; }

@media (min-width: 768px) {
  .tr2-rodape__marca { align-content: space-between; }
}

.tr2-rodape__descricao {
  margin: var(--tr2-esp-md) 0 var(--tr2-esp-md);
  max-width: 34ch;
  font-size: .9375rem;
}

.tr2-rodape__titulo {
  font-family: var(--e-global-typography-etiqueta-font-family), system-ui, sans-serif;
  /* MAIOR desde 18/10, a pedido dele ("aumentar a fonte de SERVICOS e
     CONTATO") - era o tamanho da etiqueta, pensado para rotulo pequeno.
     18px desde 19/10: "Aumentar um numero a fonte". */
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: var(--e-global-typography-etiqueta-letter-spacing);
  text-transform: uppercase;
  /* BRANCO, com um traco por baixo, como no modelo dele (18/10). O dourado
     ficou nos icones do contato. */
  color: var(--e-global-color-branco);
  margin: 0 0 var(--tr2-esp-sm);
  /* O traco mais perto do titulo: "deixe as linhas ... um pouquinho mais
     proximas" (18/10). Eram 12px. */
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--e-global-color-branco) 22%, transparent);
}

.tr2-rodape__lista { margin: 0; padding: 0; list-style: none; }

.tr2-rodape__lista li + li { margin-top: 10px; }

/* Especificidade proposital: design-system.css pinta todo link de faixa
   escura com o Destaque (`.tr2-faixa-escura a:not(.tr2-botao)`), e o titulo da
   coluna tambem e dourado - os dois juntos apagariam a hierarquia. No rodape os
   links ficam brancos e o dourado fica so nos titulos. */
.tr2-faixa-escura .tr2-rodape__lista a,
.tr2-rodape__lista a {
  color: var(--e-global-color-branco);
  text-decoration: none;
  /* Alvo de toque: no celular os links do rodape ficam proximos. */
  display: inline-block;
  padding-block: 3px;
  border-bottom: 1px solid transparent;
}

.tr2-rodape__lista a:hover,
.tr2-rodape__lista a:focus-visible { border-bottom-color: var(--e-global-color-accent); }

/* Icone | texto. O icone alinha com a PRIMEIRA linha do texto: o endereco
   quebra em duas e o pino fica na altura da rua. */
.tr2-rodape__contato li {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 12px;
  align-items: start;
}

/* O link ocupa so o proprio texto - sem isto o sublinhado ia ate o fim da
   coluna. */
.tr2-rodape__contato li > :not(svg) { justify-self: start; }

.tr2-rodape__icone {
  display: block;
  margin-top: 4px;
  color: var(--e-global-color-accent);
}

.tr2-rodape__endereco > span { max-width: 30ch; line-height: 1.5; padding-block: 3px; }

/* Os dois telefones, um embaixo do outro, ao lado do mesmo icone. */
.tr2-rodape__telefones > span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tr2-rodape__endereco .tr2-sem-quebra { white-space: nowrap; }

/* "Ver no Google Maps" dourado e sublinhado, como no modelo. */
.tr2-faixa-escura .tr2-rodape__mapa a,
.tr2-rodape__mapa a {
  color: var(--e-global-color-accent);
  border-bottom-color: var(--e-global-color-accent);
}

.tr2-rodape__zap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* --- faixa legal -------------------------------------------------------- */

.tr2-rodape__legal { border-top: 1px solid rgb(255 255 255 / .14); }

.tr2-rodape__inner--legal {
  padding-block: var(--tr2-esp-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--tr2-esp-xs) var(--tr2-esp-md);
  justify-content: space-between;
  align-items: center;
}

.tr2-rodape__razao,
.tr2-rodape__copy {
  margin: 0;
  font-size: .8125rem;
  /* Branco a 78% sobre a Primaria Escura ainda da mais de 9:1. */
  color: rgb(255 255 255 / .78);
  max-width: none;
}