/* ============================================================================
   Do Parque Pousada — header responsivo (hamburguer) para as paginas de pousada
   (Do Parque, Comfort, Estrela D'alva). O header e o template Elementor id=10
   (widget de menu = elementor-element-a0a96ad).
   ESTRATEGIA: no mobile o <nav> original do HFE e ESCONDIDO e o dp-header.js
   monta um painel proprio (.dp-mobile-menu) clonando os links — assim nenhuma
   regra do plugin HFE (height:0/visibility/animacoes) interfere.
   O fundo segue var(--e-global-color-primary) (navy padrao; vermelho no Comfort).
   ========================================================================== */

html{scroll-behavior:smooth}

/* ----------------------------------------------------------------------------
   Header ACIMA de qualquer elemento da pagina (o post-10.css deixava z-index:10
   e, com o sticky ativo, o conteudo passava por cima). O lightbox (.dp-lb,
   z 99999+) continua cobrindo o header quando aberto.
   -------------------------------------------------------------------------- */
header#masthead{position:relative;z-index:99990}
.elementor-10 section.elementor-element-b290ef4{z-index:99990 !important}
.sticky-element-placeholder{position:relative;z-index:99990}

/* ----------------------------------------------------------------------------
   Header mais SUTIL: logo menor (mantendo o vazamento p/ fora da barra, agora
   proporcional) e menos padding vertical nos itens do menu.
   Original: logo 30% da coluna (~265px) c/ margin-bottom -60px; itens 15px.
   -------------------------------------------------------------------------- */
.elementor-10 .elementor-element.elementor-element-b8ffb18{
  width:190px !important;max-width:190px !important;
  --container-widget-width:190px;
}
.elementor-10 .elementor-element.elementor-element-b8ffb18 > .elementor-widget-container{
  margin:0 0 -44px 0 !important;
}
.elementor-10 .elementor-element.elementor-element-b8ffb18 .hfe-site-logo img{max-width:100%}
.elementor-10 .elementor-element.elementor-element-a0a96ad .menu-item a.hfe-menu-item{
  padding-top:8px !important;padding-bottom:8px !important;
}
.elementor-10 .elementor-element.elementor-element-a63e650 .elementor-button{
  padding-top:10px !important;padding-bottom:10px !important;
}

/* ----------------------------------------------------------------------------
   Botao sutil "Ver outras pousadas" depois da logo (criado pelo dp-header.js).
   Pill discreto que funciona sobre navy e sobre o vermelho do Comfort.
   No mobile o pill some e o link vira item do menu hamburguer.
   -------------------------------------------------------------------------- */
/* a coluna logo+menu nao pode quebrar linha; o menu vira o item flexivel e
   alinha os itens a direita (classe hfe-nav-menu__align-right ja cuida do ul) */
.elementor-10 .elementor-element.elementor-element-70c1d84 > .elementor-widget-wrap{
  flex-wrap:nowrap !important;position:relative;
}
.elementor-10 .elementor-element.elementor-element-a0a96ad.elementor-widget{
  flex:1 1 auto;min-width:0;
}
.dp-outras{
  flex:0 0 auto;
  align-self:center;
  margin-left:16px;
  display:inline-flex;align-items:center;
  padding:7px 15px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  color:rgba(255,255,255,.88) !important;
  font:500 12px/1 Roboto,Arial,sans-serif;
  letter-spacing:.05em;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.dp-outras:hover,.dp-outras:focus{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.6);
  color:#fff !important;
}
/* em telas medias/mobile o pill sai (no <=1024 o link vive no menu hamburguer) */
@media (max-width:1199px){
  .dp-outras{display:none}
}
/* com o pill presente (desktop), itens do menu um pouco mais compactos p/ caber
   em uma linha (o padding original de 19px + pill estourava a coluna) */
@media (min-width:1200px){
  .elementor-10 .elementor-element.elementor-element-a0a96ad ul.hfe-nav-menu{flex-wrap:nowrap}
  .elementor-10 .elementor-element.elementor-element-a0a96ad .menu-item a.hfe-menu-item{
    padding-left:12px !important;padding-right:12px !important;
  }
}
/* item correspondente no menu mobile: mesmo estilo dos demais, so um traco mais forte */
.dp-mobile-menu a.dp-mm-outras{border-top:2px solid rgba(255,255,255,.28)}

/* painel proprio: escondido por padrao (inclusive no desktop) */
.dp-mobile-menu{display:none}

/* desktop: hamburguer escondido (reforco) */
.elementor-element-a0a96ad .hfe-nav-menu__toggle{display:none}

@media (max-width:1024px){
  /* barra vira ancora do painel */
  .elementor-10 section.elementor-element-b290ef4{position:relative}

  /* logo menor tambem no mobile (o post-10 mobile poe margin:0 — mantem o vazamento) */
  .elementor-10 .elementor-element.elementor-element-b8ffb18{
    width:150px !important;max-width:150px !important;
  }
  .elementor-10 .elementor-element.elementor-element-b8ffb18 > .elementor-widget-container{
    margin:0 0 -32px 0 !important;
  }

  /* menu horizontal do HFE some no mobile */
  .elementor-element-a0a96ad nav.hfe-nav-menu__layout-horizontal{display:none !important}

  /* hamburguer visivel a direita, branco */
  .elementor-element-a0a96ad .hfe-nav-menu__toggle{
    display:flex !important;
    align-items:center;justify-content:center;
    margin-left:auto;
    padding:10px 12px;
    cursor:pointer;
    color:#fff;font-size:26px;line-height:1;
  }
  .elementor-element-a0a96ad .hfe-nav-menu__toggle i{color:#fff}

  /* painel aberto: colado abaixo do header, largura total da section */
  .dp-mobile-menu.dp-aberto{
    display:block;
    position:absolute;left:0;right:0;top:100%;
    z-index:99999;
    background-color:var(--e-global-color-primary,#163481);
    box-shadow:0 16px 30px rgba(0,0,0,.38);
    padding:6px 0 10px;
  }
  .dp-mobile-menu a{
    display:block;
    padding:15px 24px;
    color:#fff;
    font-family:Roboto,Arial,sans-serif;
    font-size:15px;font-weight:500;letter-spacing:.06em;
    text-decoration:none;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .dp-mobile-menu a:first-child{border-top:0}
  .dp-mobile-menu a:hover,.dp-mobile-menu a:focus{background-color:rgba(255,255,255,.13)}
}