/* mn-custom.css — ajustes manuais do rebuild (não gerado) */

/* rolagem suave para as âncoras do menu (o JS do Royal fazia isso) */
html { scroll-behavior: smooth; }

/* reset da margem padrão do navegador */
body { margin: 0; }

/* animação de entrada do Elementor sem JS: elemento NUNCA pode ficar invisível
   (gotcha desbrava: .elementor-invisible ficava hidden para sempre) */
.elementor-invisible { visibility: visible !important; opacity: 1 !important; }

/* mapa interativo (SVG inline auditado) */
.mn-mapa svg { max-width: 100%; height: auto; display: block; }

/* fonte Outfit no site inteiro (exceto ícones Font Awesome) */
body,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body a, body li, body ul, body ol, body div,
body figure, body figcaption, body blockquote,
body button, body input, body select, body textarea,
body span:not(.fas):not(.far):not(.fab):not([class*="fa-"]):not(.wpr-sub-icon):not(.mn-lang-caret) {
  font-family: 'Outfit', sans-serif !important;
}

/* seletor de idiomas: bandeira em <figure> + rótulo curto (Por/Esp/Eng) */
.mn-lang > a, .mn-lang .sub-menu a { display: inline-flex !important; align-items: center !important; gap: 7px; }
/* o widget do seletor tinha margin-top -27px (tunado p/ o texto longo antigo);
   com o rótulo curto isso desalinhava verticalmente do resto do nav */
.elementor-element.elementor-element-3a39313 { margin-top: 0 !important; }
.mn-lang-flag { display: inline-flex; margin: 0; padding: 0; line-height: 0; }
.mn-lang-flag img { display: block; width: 20px; height: 20px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.mn-lang-label { display: inline-block; line-height: 1; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.mn-lang > .sub-menu { background: #fff !important; min-width: 140px; padding: 6px 0 !important; border: none !important; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); overflow: hidden; }
.mn-lang > .sub-menu li { border: none !important; margin: 0 !important; }
.mn-lang .sub-menu a { justify-content: flex-start; width: 100%; box-sizing: border-box; padding: 11px 18px !important; background: #fff; }
.mn-lang .sub-menu a:hover { background: #f4f6f8 !important; color: #00904C !important; }
.mn-lang > .wpr-sub-icon { display: none !important; }
.mn-lang-caret { font-size: 12px; line-height: 1; }
div[class*="wpr-sub-icon-"] .wpr-mobile-nav-menu .mn-lang > a:after { content: none !important; }
.mn-lang.mn-open > a .mn-lang-caret, .mn-lang:hover > a .mn-lang-caret { color: #00904C; }

/* hover dos botões Elementor ("Saiba mais" etc.): overlay escuro sutil
   por cima da cor original (amarelo continua amarelo, azul continua azul),
   com elevação, sombra e transição rápida e suave */
a.elementor-button,
.elementor-button {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.elementor-button .elementor-button-content-wrapper {
  position: relative;
  z-index: 1;
}
a.elementor-button::after,
.elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.14);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 0;
}
a.elementor-button:hover,
a.elementor-button:focus-visible,
.elementor-button:hover,
.elementor-button:focus-visible {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
a.elementor-button:hover::after,
a.elementor-button:focus-visible::after,
.elementor-button:hover::after,
.elementor-button:focus-visible::after {
  opacity: 1;
}
a.elementor-button:active,
.elementor-button:active {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  a.elementor-button:hover,
  a.elementor-button:focus-visible,
  .elementor-button:hover,
  .elementor-button:focus-visible {
    transform: none;
  }
}

/* botões "Saiba mais": sem sublinhado e texto centralizado */
.elementor-widget-button a.elementor-button,
.elementor-widget-button a.elementor-button:hover,
.elementor-widget-button a.elementor-button:focus,
.elementor-widget-button a.elementor-button:visited {
  text-decoration: none !important;
}
.elementor-widget-button .elementor-button {
  text-align: center;
}
.elementor-widget-button .elementor-button .elementor-button-content-wrapper {
  justify-content: center;
}
.elementor-widget-button .elementor-button-wrapper {
  text-align: center;
}

/* ---- cabeçalho fixo acompanhando a rolagem ---- */
/* o container do cabeçalho (desktop + mobile ficam dentro dele) era absolute;
   agora é fixed para permanecer visível durante a rolagem */
.elementor-element.elementor-element-b349ae7 {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  --position: fixed;
  z-index: 9999;
}
/* transição suave do recuo/fundo ao rolar */
.elementor-element.elementor-element-e8ecce4,
.elementor-element.elementor-element-d60edf9 {
  transition: padding .25s ease, background-color .25s ease, box-shadow .25s ease;
}
/* estado "rolado" (interactions.js põe .mn-header-scrolled no body):
   padding-top reduzido (o padding original só fazia sentido sobre o vídeo);
   sem fundo — o "pill" branco do menu já garante a legibilidade */
body.mn-header-scrolled .elementor .elementor-element.elementor-element-e8ecce4 {
  --padding-top: 12px;
  --padding-bottom: 12px;
}
body.mn-header-scrolled .elementor .elementor-element.elementor-element-d60edf9 {
  --padding-top: 10px;
  --padding-bottom: 10px;
}
/* âncoras do menu: compensa a altura do cabeçalho fixo ao navegar */
.elementor-menu-anchor { scroll-margin-top: 130px; }
@media (max-width: 1024px) {
  .elementor-menu-anchor { scroll-margin-top: 150px; }
}

/* menu mobile: aberto via interactions.js (o Royal usava JS próprio) */
.wpr-mobile-nav-menu-container { position: relative; }
.wpr-mobile-open .wpr-mobile-nav-menu { display: block !important; pointer-events: auto !important; }
.wpr-mobile-nav-menu .sub-menu { display: none; position: static; width: 100%; list-style: none; margin: 0; padding: 0; }
.wpr-mobile-nav-menu .sub-menu.mn-open { display: block; }

/* submenu desktop aberto (interactions.js põe .mn-open no li) */
.wpr-nav-menu .menu-item-has-children.mn-open > .wpr-sub-menu { display: block; }

/* vídeo do herói: fundo decorativo — bloqueia toques/cliques para a UI do
   YouTube nunca aparecer (controls=0 não impede overlays ao interagir) */
.elementor-element-51d3d3a .elementor-wrapper { pointer-events: none; }
.elementor-element-51d3d3a iframe.elementor-video { pointer-events: none; }

/* recorte dos overlays de borda do YouTube (título no topo, logo embaixo):
   iframe mais alto que o wrapper (com overflow hidden) — o player mantém o
   vídeo 16:9 centralizado no iframe, então o tamanho visível não muda, mas
   os overlays presos às bordas do iframe ficam fora da área visível */
.elementor-element-51d3d3a .elementor-wrapper { overflow: hidden; }
.elementor-element-51d3d3a iframe.elementor-video {
  inset: auto;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: calc(100% + 240px);
}

/* vídeo do herói no mobile: técnica de "cover" — wrapper com altura fixa e
   iframe superdimensionado e centralizado, sem barras nem corte estranho */
@media (max-width: 1024px) {
  .elementor-element-51d3d3a .elementor-wrapper {
    aspect-ratio: auto;
    height: 60vh;
    min-height: 320px;
  }
  .elementor-element-51d3d3a iframe.elementor-video {
    left: 50%;
    transform: translate(-50%, -50%);
    /* vídeo 16:9 cobre o wrapper (largura >= 100vw e >= altura*16/9);
       +240px na altura recorta os overlays de borda do player */
    max-width: none;
    /* ~10% de zoom extra para garantir cobertura sem bordas */
    width: max(110vw, 118vh, 630px);
    height: calc(max(60vh, 62vw, 320px) + 240px);
  }
}

/* botão flutuante "voltar ao topo" (interactions.js controla .mn-top-visible) */
.mn-top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: #00904C;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
}
.mn-top-btn.mn-top-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.mn-top-btn:hover { background: #007a40; }
.mn-top-btn:focus-visible { outline: 3px solid rgba(0, 144, 76, .4); outline-offset: 2px; }

/* hover nas fotos de conteúdo: inclinação sutil pro lado (cards/galerias .webp; exclui logos, bandeiras e o mapa SVG) */
@media (hover: hover) and (pointer: fine) {
  .elementor-widget-image img[src$=".webp"]:not([src*="logo"]) {
    transition: transform .35s ease;
  }
  .elementor-widget-image:hover img[src$=".webp"]:not([src*="logo"]) {
    transform: rotate(2deg);
  }
}
