/* Ajustes para casar o WordPress com o nosso design system.
   Nosso style.css espera <a> soltos na navbar; o wp_nav_menu gera <ul><li><a>.
   Aqui reencaixamos essa estrutura no visual original, sem tocar no style.css. */

/* --- Menu desktop --- */
.nav-links .nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links .nav-menu li { margin: 0; }

/* estado "página atual" do WP → mesmo tratamento do .active original */
.nav-links .current-menu-item > a,
.nav-links .current-menu-item > a:hover,
.nav-links .current-menu-ancestor > a { color: var(--text); }
.nav-links .current-menu-item > a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--gradient-primary); border-radius: 2px;
}

/* --- Menu mobile --- */
.mobile-menu .nav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu .nav-menu li { margin: 0; }
.mobile-menu .nav-menu .current-menu-item > a { color: var(--text); }

/* --- Navbar fixa: reserva espaço pro conteúdo não ficar escondido embaixo.
   (Páginas com hero de tela cheia removem isso caso a caso mais pra frente.) --- */
body { padding-top: 66px; }

/* ---- Integração com o Elementor ----
   O Elementor impõe tipografia/cores padrão (Roboto, cinza) com especificidade
   que vence a nossa. Estas regras devolvem o controle ao design system.
   (Complementa o "disable default fonts/colors" ligado nas opções do Elementor.) */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.elementor-widget-text-editor { font-family: var(--font-body); line-height: 1.7; }
/* lead: limita a medida da linha e centraliza (no estático era inline por elemento) */
.elementor-widget.lead { max-width: 640px; margin-left: auto; margin-right: auto; }
/* o eyebrow é um widget text-editor com a classe .eyebrow: garante a cor da marca no texto interno */
.eyebrow,
.eyebrow .elementor-widget-container { color: var(--secondary); font-family: var(--font-display); }
/* botão do Elementor com as nossas classes: tira o padding/estilo base do Elementor */
.elementor-widget-button .btn.btn-primary { box-shadow: none; }
.elementor-button-wrapper .btn { background-image: var(--gradient-primary); }