/* boureal.css — ajustes da versão offline/PHP (sem React) */

/* ── Vídeo de fundo (hero) injetado a partir do pageData ───────────────────── */
.s-bg-video { position: relative; overflow: hidden; }
.boureal-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.boureal-bg-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;   /* 16:9 cobrindo a seção */
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}
/* conteúdo do hero acima do vídeo e do overlay */
.s-bg-video > .s-section-content,
.s-bg-video > .content,
.s-bg-video > .s-overlay,
.s-bg-video .container,
.s-bg-video .s-section-item-wrapper { position: relative; z-index: 3; }

/* fallback escuro do hero no localhost (Vimeo bloqueado) — injetado via JS */
.boureal-hero-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, #0b1a2e 0%, #1c2c46 100%);
}

/* ── Navbar fixa = a navbar real (a "normal" tem visibility:hidden no bundle) ── */
.s-navbar-desktop-fixed { display: block !important; transition: background-color .25s ease; }
/* a navbar "normal" fica oculta sobreposta — impede que intercepte cliques */
.s-navbar-desktop-normal { pointer-events: none !important; }

/* Logo: só temos a versão escura, então clareia (branco) sobre o hero escuro */
.s-navbar-desktop-fixed .s-logo-image img {
  filter: brightness(0) invert(1);
  transition: filter .25s ease;
}

/* ── Ao rolar: navbar branca + texto/logo escuros (como no original) ────────── */
.boureal-scrolled .s-navbar-desktop-fixed {
  background-color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.boureal-scrolled .s-navbar-desktop-fixed .s-logo-image img { filter: none; }
.boureal-scrolled .s-navbar-desktop-fixed .s-nav-text,
.boureal-scrolled .s-navbar-desktop-fixed .s-font-nav_item,
.boureal-scrolled .s-navbar-desktop-fixed .s-nav-dropdown-text,
.boureal-scrolled .s-navbar-desktop-fixed .s-nav-link-container i,
.boureal-scrolled .s-navbar-desktop-fixed a { color: #2b2b2b !important; }

/* ── Dropdown da navbar abrindo no hover (popover é position:fixed no bundle) ── */
.s-nav-li.s-navbar-dropdown { position: relative; }
.s-nav-li.s-navbar-dropdown .nav-dropdown-popover {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease;
}
.s-nav-li.s-navbar-dropdown:hover .nav-dropdown-popover,
.s-nav-li.s-navbar-dropdown.open .nav-dropdown-popover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: block !important;
}

/* ── Ícones sociais do footer (injetados via JS, renderizados com Font Awesome) */
.boureal-social {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}
.boureal-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #c2a25a;            /* dourado claro, como no original */
  color: #fff !important;
  font-size: 14px;
  text-decoration: none;
  transition: opacity .2s ease;
}
.boureal-social a:hover { opacity: .85; }
/* posiciona na faixa do copyright, à direita */
.boureal-social.boureal-social-bottom {
  position: absolute;
  right: 40px;
  bottom: 24px;
}

/* ── Toggle de idioma (PT | EN) ────────────────────────────────────────────── */
#boureal-lang-toggle {
  position: fixed;
  top: 14px; right: 16px;
  z-index: 1000000;
  display: flex; gap: 2px;
  font-family: "Open Sans", sans-serif;
  font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, .9);
  border-radius: 20px; padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
#boureal-lang-toggle a {
  text-decoration: none; color: #50555c;
  padding: 4px 10px; border-radius: 16px; line-height: 1;
}
#boureal-lang-toggle a.active { background: #997214; color: #fff; }

/* ── Menu mobile (fallback sem React) ──────────────────────────────────────── */
.boureal-mobile-open .s-navbar-mobile-menu,
.boureal-mobile-open .s-mobile-nav-menu { display: block !important; }

/* ── video-bg-wrap: React-only, sem React sobra um div preto sobre o hero ─── */
.video-bg-wrap { display: none !important; }

/* ── Hero: s-section-full-height no container é adicionado pelo React.
   Sem React o hero fica menor (só altura do conteúdo).
   s-new-title-section é exclusivo do hero nas service pages. ── */
.s-section.s-section-full.s-new-title-section { min-height: 100vh; }

/* ── s-map-skeleton iframes: posicionados com coords absolutas do React.
   Sem React sobrepõem conteúdo em posições hardcoded. ── */
[id^="s-map-skeleton"] { display: none !important; }

/* ── s-animation-page-slide_in: keyframe começa em opacity:0/translateY.
   Sem React o flash de 0.75s fica visível. Força conteúdo visível imediatamente. ── */
.s-animation-page-slide_in,
.s-animation-page-slide_in-before {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Thin-stripe banner (s-banner-section): imagem 1200×6 px ────────────────
   Sem React/Slick o container expande para a altura padrão da seção e estica
   o stripe de 6 px em um bloco enorme. Colapsamos toda a cadeia para 6 px.
 ─────────────────────────────────────────────────────────────────────────── */
.s-section.s-banner-section {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.s-section.s-banner-section .s-component,
.s-section.s-banner-section .s-component-content,
.s-section.s-banner-section .slider-container,
.s-section.s-banner-section .iosslider,
.s-section.s-banner-section .slider,
.s-section.s-banner-section .slick-slider,
.s-section.s-banner-section .slick-list,
.s-section.s-banner-section .slick-track,
.s-section.s-banner-section .slick-slide,
.s-section.s-banner-section .slick-slide > div,
.s-section.s-banner-section .slick-slide-item-wrapper {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* item da imagem: trava em 6 px e preenche exatamente */
.s-section.s-banner-section .s-bg-image.item {
  height: 6px !important;
  min-height: 0 !important;
  background-size: 100% 100% !important;
}
/* blurred-layer fica visível sem o React (que adiciona .loaded p/ escondê-lo) */
.s-section.s-banner-section .blurred-layer { display: none !important; }
/* img placeholder (opacity:0 do React) ocupa espaço sem React */
.s-section.s-banner-section .slick-slide-item-wrapper img { display: none !important; }