/*
 * Fix unificado A4Quality para notebooks e telas menores.
 * Usa "html body" para sobrescrever o style inline do Elementor (maior especificidade).
 * Mantém as proporções originais do design (18% logo, 14px fonte) — iguais em todas as páginas.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SLIDER — BOTÕES DE NAVEGAÇÃO (SETAS): ESTADOS FOCUS / ACTIVE
   ─────────────────────────────────────────────────────────────────────────
   Problema: após clicar em prev/next, o tema aplica sua cor de destaque
   (lilás/roxo) no estado :focus, quebrando a identidade visual A4Quality.

   Fix: neutraliza outline e background herdados do tema em todos os
   estados interativos do botão, em qualquer tamanho de tela.
   ═══════════════════════════════════════════════════════════════════════════ */
html body .a4q-hero-slider .a4q-hero-nav:focus,
html body .a4q-hero-slider .a4q-hero-nav:focus-visible,
html body .a4q-hero-slider .a4q-hero-nav:active {
  outline: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERFLOW HORIZONTAL — HOME
   ─────────────────────────────────────────────────────────────────────────
   Problema: alguns widgets inline do Elementor no header usam margem
   negativa para compensar o espaçamento interno dos itens. Em conjunto
   com efeitos decorativos/pseudo-elementos, isso pode gerar scroll
   horizontal e revelar uma faixa branca à direita.

   Fix: corta overflow no eixo X e remove a compensação negativa apenas
   nas listas inline do header global.
   ═══════════════════════════════════════════════════════════════════════════ */
html,
html body,
html body .elementor-page-24,
html body .elementor-689,
html body .elementor-967 {
  overflow-x: clip;
}

html body .elementor-689 .elementor-icon-list-items.elementor-inline-items {
  margin-inline: 0 !important;
  max-width: 100%;
}

html body .elementor-689 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
  margin-inline: 10px !important;
}

html body .elementor-689 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:first-child {
  margin-inline-start: 0 !important;
}

html body .elementor-689 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:last-child {
  margin-inline-end: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARGEM DE CONTEÚDO PADRÃO EM TELAS MENORES
   ─────────────────────────────────────────────────────────────────────────
   Problema: quando a viewport ≤ 1140px, o e-con-inner do Elementor vira
   width:100% com padding-inline:0 — conteúdo vai de borda a borda.

   Fix: adiciona 20px de padding lateral (mesmo padrão interno do site)
   a todas as seções de conteúdo da página.

   Excluídos:
     - Header (#689) e footer (#967) — templates globais
     - Seções com banners CTA (.a4q-cta-banner) — têm padding próprio
     - Seções com hero slider (.a4q-hero-slider) — full-width por design
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1140px) {
  html body .elementor:not(.elementor-689):not(.elementor-967) > .e-con:not(.a4q-maps-full) > .e-con-inner:not(:has(.a4q-cta-banner, .a4q-hero-slider, .a4q-hero-bg)) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── Laptops e notebooks (1024px – 1366px) ──────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1366px) {
  /* Fix estrutural: limita o inner para não ultrapassar a viewport */
  html body .elementor-689 .elementor-element.elementor-element-1e6606b > .e-con-inner,
  html body .elementor-689 .elementor-element.elementor-element-265b08d > .e-con-inner {
    width: 100%;
    max-width: calc(100% - 36px);
    margin-left: auto;
    margin-right: auto;
  }

  /* Logo e nav nas proporções originais do desktop */
  html body .elementor-689 .elementor-element.elementor-element-7b5dbbf {
    --width: 18%;
  }

  html body .elementor-689 .elementor-element.elementor-element-e918d78 {
    --width: 82%;
  }

  /* Impede que os itens do nav quebrem linha; reduz só as margens externas */
  html body .elementor-689 .elementor-element.elementor-element-102b155 .wpr-nav-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  html body .elementor-689 .elementor-element.elementor-element-102b155 .wpr-nav-menu > .menu-item {
    margin-left: 7px;
    margin-right: 7px;
  }

  html body .elementor-689 .elementor-element.elementor-element-102b155 .wpr-nav-menu .wpr-menu-item {
    font-size: 14px;
    padding-left: 7px;
    padding-right: 7px;
    white-space: nowrap;
  }
}

/* ── Notebooks menores (900px – 1024px) ─────────────────────────────────── */
@media (min-width: 900px) and (max-width: 1024px) {
  html body .elementor-689 .elementor-element.elementor-element-1e6606b > .e-con-inner,
  html body .elementor-689 .elementor-element.elementor-element-265b08d > .e-con-inner {
    width: 100%;
    max-width: calc(100% - 36px);
    margin-left: auto;
    margin-right: auto;
  }

  /* Mantém o logo no tamanho visual padrão (18%), sem redução */
  html body .elementor-689 .elementor-element.elementor-element-7b5dbbf {
    --width: 18%;
  }

  html body .elementor-689 .elementor-element.elementor-element-e918d78 {
    --width: 82%;
  }

  html body .elementor-689 .elementor-element.elementor-element-102b155 .wpr-nav-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  /* Em telas menores só reduz fonte e espaçamento, mantém o logo intacto */
  html body .elementor-689 .elementor-element.elementor-element-102b155 .wpr-nav-menu > .menu-item {
    margin-left: 4px;
    margin-right: 4px;
  }

  html body .elementor-689 .elementor-element.elementor-element-102b155 .wpr-nav-menu .wpr-menu-item {
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARGEM LATERAL GLOBAL — TABLET MODO PAISAGEM (landscape)
   ─────────────────────────────────────────────────────────────────────────
   Problema: em tablets girados (landscape), o conteúdo, cabeçalho e
   rodapé ficam com margens laterais insuficientes, encostando no bordo.

   Fix: aplica 50px de padding lateral em cabeçalho, rodapé e corpo
   para todas as telas de 768px a 1366px em orientação landscape.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
  /* Cabeçalho (template global #689) */
  html body .elementor-689 .elementor-element.elementor-element-1e6606b > .e-con-inner,
  html body .elementor-689 .elementor-element.elementor-element-265b08d > .e-con-inner {
    padding-left: 50px;
    padding-right: 50px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Rodapé (template global #967) */
  html body .elementor-967 > .e-con > .e-con-inner {
    padding-left: 50px;
    padding-right: 50px;
    box-sizing: border-box;
  }

  /* Corpo da página — todas as seções, exceto banners full-width */
  html body .elementor:not(.elementor-689):not(.elementor-967) > .e-con:not(.a4q-maps-full) > .e-con-inner:not(:has(.a4q-cta-banner, .a4q-hero-slider, .a4q-hero-bg)) {
    padding-left: 50px;
    padding-right: 50px;
  }

  /* Hero Slider — background permanece edge-to-edge; margem aplicada só no conteúdo interno */
  html body .a4q-hero-slider {
    padding-left: 0;
    padding-right: 0;
  }

  html body .a4q-hero-slider .a4q-hero-inner {
    padding-left: 50px !important;
    padding-right: 50px !important;
  }
}