/* ==========================================================================
   ZENTH TEMA
   tema.css · v1.0.0
   Depende de zt-components.css, registrado pelo plugin Zenth Aparelhos.
   --------------------------------------------------------------------------
   Escopo estreito de proposito: cabecalho, rodape e o que o Hello Elementor
   precisa que seja corrigido. Componente nao se estiliza aqui. Se um card,
   um selo ou um preco aparecer neste arquivo, o plugin perdeu o motivo de
   existir e passam a existir duas verdades sobre a mesma cor.
   ========================================================================== */

/* ------------------------------------------------------------- acessibilidade */

.zt-pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--zt-inverso);
  color: var(--zt-tinta-inversa);
  padding: var(--zt-esp-3) var(--zt-esp-4);
  border-radius: 0 0 var(--zt-raio-md) 0;
  font-size: var(--zt-txt-sm);
  text-decoration: none;
}
.zt-pular:focus { left: 0; }

/* ------------------------------------------------------------------ Hello */

/* O Hello aplica um container proprio que briga com .zt-container. */
.zt .site-main,
.zt .page-content { max-width: none; padding: 0; }
.zt .site-header,
.zt .site-footer { display: none; }

/* ------------------------------------------------------------- cabecalho */

.zt-topo__nome {
  font-size: var(--zt-txt-lg);
  font-weight: var(--zt-peso-forte);
  letter-spacing: var(--zt-track-titulo);
  color: var(--zt-marca);
  text-decoration: none;
}

/* A busca do topo e um <form>: o DS desenhou a caixa como <div>, entao a
   unica coisa que muda aqui e o reset de margem que o form traz. */
form.zt-busca { margin: 0; }

.zt-topo__acao { background: none; border: 0; font-family: inherit; cursor: pointer; }

.zt-menu-botao {
  display: none;
  border: 0;
  background: none;
  color: var(--zt-tinta);
  cursor: pointer;
  padding: var(--zt-esp-1);
  line-height: 1;
}
.zt-menu-botao i { font-size: 1.6rem; }

/* O menu vem do WordPress: as classes nativas precisam herdar o desenho
   que o DS aplica em .zt-menu a. */
.zt-menu .menu-item a { display: block; }
.zt-menu .current-menu-item > a,
.zt-menu .current_page_item > a {
  color: var(--zt-tinta);
  border-bottom-color: var(--zt-acento);
}

@media (max-width: 900px) {
  .zt-menu-botao { display: inline-grid; place-items: center; }

  .zt-menu { display: none; }
  .zt-menu[data-aberto="sim"] { display: block; }
  .zt-menu[data-aberto="sim"] ul {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-block: var(--zt-esp-2);
  }
  .zt-menu[data-aberto="sim"] a {
    padding-block: var(--zt-esp-3);
    border-bottom: var(--zt-regra-clara);
    border-left: 2px solid transparent;
  }
}

/* ---------------------------------------------------------------- rodape */

.zt-rodape__logo {
  display: block;
  height: 34px;
  width: auto;
  margin-bottom: var(--zt-esp-5);
}
strong.zt-rodape__logo {
  height: auto;
  font-size: var(--zt-txt-lg);
  color: var(--zt-tinta-inversa);
}

.zt-rodape .menu-item a { display: block; }
.zt-rodape__dado a { color: inherit; text-decoration: none; }
.zt-rodape__dado a:hover { color: var(--zt-acento); }

/* --------------------------------------------------------------- conteudo */

/* Paginas montadas no Elementor trazem o proprio container; as demais
   precisam do respiro que o arquivo do catalogo ja tem. */
.zt-pagina-simples { padding-block: var(--zt-esp-7) var(--zt-esp-9); }
.zt-pagina-simples .zt-texto h1 { margin-bottom: var(--zt-esp-5); }
.zt-atualizado {
  font-size: var(--zt-txt-xs);
  color: var(--zt-tinta-tenue);
  margin-top: var(--zt-esp-6);
  padding-top: var(--zt-esp-4);
  border-top: var(--zt-regra-clara);
}

/* ==========================================================================
   PAGINA MONTADA NO ELEMENTOR
   O tema nao impoe largura nem espacamento: quem manda e o widget, que ja
   abre o proprio .zt-container quando precisa. Sem isso, o container do
   tema e o do Elementor se somam e a secao encolhe.
   ========================================================================== */

.zt-pagina-elementor { display: block; width: 100%; max-width: none; padding: 0; margin: 0; }
.zt-pagina-elementor > .elementor { width: 100%; }

/* O container do widget e soberano: max-width e recuo valem mesmo dentro de
   um container do Elementor. Zerar isso aqui, como tentei na 1.0.1, joga o
   conteudo contra a borda da tela. */
.zt-pagina-elementor .zt-container {
  max-width: var(--zt-largura-max);
  padding-inline: var(--zt-esp-5);
  margin-inline: auto;
}