/* =========================
   menu.css (apenas menu / header / masthead / mobile menu)
   - Suporta o comportamento lateral/hamburger e sticky states
   -  :root (variáveis) já existe em style.css
   ========================= */

/* --------------------------
   HEADER / MASTHEAD / MENU
   -------------------------- */

   
   /* forçar tipo de letra no menú */
#site-navigation, #site-navigation a, .main-navigation, .main-navigation a {
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}

#masthead {
  position: relative;
  top:0; 
  width: 100%;
  border-bottom: none;
}

/* aplicar a posição fixa em masthead e dar opacidade */
#masthead.sticky {
  position: fixed;
  top: 0;
  max-height: 4rem;
  background-color: rgba(var(--main-color-rgb), 0.6)!important;
  transition: background-color 0.3s ease;
  z-index: 999; /*menu fica acima do slider*/
}

/* Quando o utilizador passa o rato em cima do header */
#masthead.sticky:hover {
  background-color: rgba(var(--main-color-rgb), 1); /* sólido */
}

#masthead.sticky.site-header {
  height: 15%;
  width: 100%;
}

/* Homepage header normal (transparente antes do scroll) */
.home #masthead:not(.sticky) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent !important;
  z-index: 10;
}

/* Homepage header sticky */
.home #masthead.sticky {
  position: fixed;
  background-color: rgba(var(--main-color-rgb), 0.8) !important;
  max-height: 5rem;
}

/* reposiciona menu secundário quando encolhe e estiliza cor letras */
#masthead .secondary-navigation ul a{
  position:relative;
  top:-0.7rem;
  color: var(--menu-font-color);
  right:-15rem;
}

/* esconde menu secundário redes sociais quando encolhe */
#masthead.sticky .secondary-navigation ul {
  position:absolute;
  right:20rem;
}

/* menu toggle quando se desce em telemóvel (posição inicial) */ 
#masthead.sticky .menu-toggle {
  position: fixed;
  top: 1rem;
  right:3rem;
  background-color: transparent;
}

/* esconde caixa pesquisa (se quiser) */
#masthead .site-search {
  display:none;
}

/* Estilo do item de menu ativo (da página atual) */
.site-header ul.menu li.current-menu-item a {
  color:var(--secondary-color);
  font-weight: bold;
}

/* Estilo do item de menu telemóvel - aparece uma linha ao passar por cima */
.site-header ul.menu li a:hover {
  background: none !important;
  color: var(--hover-color-1);
  font-weight: bold;
  position: relative;
}

/*hover só afeta links normais, não botões.*/
.site-header ul.menu li a:not(button):hover::before  {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px; /* espessura da linha */
  background-color: var(--hover-color-1);
}





/* fallback: quando main-navigation toggled */
.main-navigation.toggled .handheld-navigation {
  background-color:white!important;
  opacity:1!important;
}



/* ========== DROPDOWN DE SUBMENU DESKTOP ========== */
.main-navigation ul.menu ul li:last-child, .main-navigation ul.nav-menu ul li:last-child {
  /*margin-top:150px; mostra item operadoras e tarifarios */
}


#site-navigation .sub-menu {
  /* Por default o submenu fica escondido para funcionar como dropdown */
  display: none;
  position: absolute;
  left: 0;
  top: 55px; /* Distância do submenu a partir do menu principal */
  z-index: 9999;
   background: #212d45 !important;/* Cor de fundo personalizada*/
  /*background-color: #ADD8E6 !important; */
  border-radius: 5px;
}

/* Mostra o submenu ao passar o rato/foco sobre o item pai */
#site-navigation li.menu-item-has-children:hover > .sub-menu,
#site-navigation li.menu-item-has-children:focus > .sub-menu {
  display: block !important;
}


/* Estilo especial para os itens de submenu chamados "Pacotes" e "Operadoras/Tarifários" */
#menu-item-4581 a, #menu-item-4731 a {
  font-size: 0.75em; 
  background: #212d45 !important;
  color: #333 !important;
  padding: 6px 10px;
  border-radius: 5px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

/* Só em hover deve mudar o fundo/cor! */
#menu-item-4581 a:hover,
#menu-item-4731 a:hover {
  background: #ADD8E6 !important;/* cor de fundo dos itens */
  color: #fff; /* cor da letra */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}



/* ========== MOBILE E TABLET ==========
@media (max-width: 1024px) {
  #site-navigation .sub-menu {
    /* No mobile/tablet o submenu deve ser flow normal 
    position: static;
    left: auto;
    top: auto;
    z-index: 9999;
    border-radius: 5px;
    display: none; /* ← Escondido por padrão - já está aqui! 
  }

  /* Submenu visível quando o pai tem classe 'toggled' 
  #site-navigation li.menu-item-has-children.toggled > .sub-menu {
    display: block !important;
  }

  /* Indicador visual (seta) para itens com submenu 
  /* --- SETA ÚNICA submenus: azul, alinhada, e só uma --- 

  #site-navigation li.menu-item-has-children > a::after {
    content: " ▼";
    font-size: 16px;
    margin-left: 10px;
    color: #ADD8E6 !important;      /* SÓ azul claro 
    transition: transform 0.3s;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    right: -2px;  /* afasta um pouco à direita se necessário 
  }




  /* Roda a seta quando aberto 
  #site-navigation li.menu-item-has-children.toggled > a::after {
    transform: rotate(180deg);
    color: #ADD8E6 !important;
    /*display: inline-block;*/
  }
}
 */

/* ========== LINKS DE SUBMENU (TODOS OS ESTADOS) ========== */
#site-navigation .sub-menu li a {
  /* Só cor e espaçamento, nunca posicionamento! */
  color: #ADD8E6 !important; /* Usa cor customizada para submenu */
  padding: 10px 20px;
  background: transparent;
  border: none;
  box-shadow: none;
}


#site-navigation .sub-menu {
  z-index: 99999 !important;
}

/* ========== menus estilização final ========== */
#site-navigation .sub-menu li a:hover {
  background: #23325b !important;
  color: #ADD8E6 !important;
  box-shadow: 0 2px 8px rgba(40,50,80,0.12);
  border-left: 3px solid #ADD8E6;
}

#site-navigation .sub-menu li a {
  padding: 12px 28px;
  line-height: 1.2;
  min-width: 190px;
}

/* Adiciona setinha no pai (usando :after) 
#site-navigation li.menu-item-has-children > a:after {
  content: " ▼";
  font-size: 0.7em;
  opacity: 0.65;
  margin-left: 5px;
}
*/
#site-navigation .sub-menu {
  box-shadow: 0 4px 28px rgba(33,45,69,0.09);
  border: 1.5px solid #183153;
}

#site-navigation .sub-menu {
  transition: opacity 0.23s;
  opacity: 0;
  pointer-events: none;
}

#site-navigation li.menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  pointer-events: auto;
}

#site-navigation, #site-navigation a {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}


/* --------------------------
   Media queries
   -------------------------- */


/* esconder o menu normal no mobile/tablet (controlado por media queries) */
/* Botão menu-toggle - comportamento e aparência */
@media (min-width: 1025px) {
  
  button#site-navigation-menu-toggle {
    display: none !important;
  }
  
  /*teste*/
header, 
#masthead, 
.site-header {
  /*outline: 2px solid red !important;*/
}
/*teste*/
nav, 
.main-navigation, 
#site-navigation {
 /* outline: 2px solid blue !important;*/
  
}
/*subir menu em desktop */
#menu-principal {
  /*outline: 2px solid green !important;*/
     margin-top: -200px;
    margin-left: 100px;
}

/* corrigir posição quando cabeçalho está sticky */
#masthead.sticky #menu-principal,
.site-header.sticky #menu-principal,
.is-sticky #menu-principal {
  margin-top: -60px !important; /* ajusta este valor até alinhar bem */
}
 
 
/*subir menu secundário em desktop */
 .secondary-navigation ul.menu a{  
     margin-top:-90px!important;
     
 } 
 
 /* ajustar posição do menu secundário quando o cabeçalho está sticky */
#masthead.sticky .secondary-navigation ul.menu,
.site-header.sticky .secondary-navigation ul.menu,
.is-sticky .secondary-navigation ul.menu {
 /* margin-top: -40px !important;   ajusta para baixo ou para cima */
  margin-left: -40px !important; /* move para a esquerda — ajusta o valor */
}
  
  
}

/* Estilo do botão hambúrguer (tablet para baixo) - mostrar em mobile tablet  */
@media (max-width: 1024px) {

  button.menu-toggle,
  button#site-navigation-menu-toggle {
   /* all: unset;*/
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    width: 44px;
    height: 44px;
    position: fixed !important;
    top: 10px;
    right: 20px;
    z-index: 10005;
    
    /*margin-top:-10px;*/
  }

/*barras do menu hamburguer*/
  button.menu-toggle::before,
  button.menu-toggle::after,
  button#site-navigation-menu-toggle::before,
  button#site-navigation-menu-toggle::after {
    display: none !important;
    content: none !important;
  }



  button.menu-toggle > span {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    transform: translate(-50%, -50%);
    transition: transform 0.35s ease, opacity 0.25s ease;
  }

  button.menu-toggle > span::before,
  button.menu-toggle > span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    transition: transform 0.35s ease, top 0.35s ease;
  }

  button.menu-toggle > span::before { top: -10px; }
  button.menu-toggle > span::after  { top: 10px;  }

  button.menu-toggle[aria-expanded="true"] > span {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
  }
  button.menu-toggle[aria-expanded="true"] > span::before {
    top: 0;
    transform: rotate(45deg);
    opacity: 1;
  }
  button.menu-toggle[aria-expanded="true"] > span::after {
    top: 0;
    transform: rotate(-45deg);
    opacity: 1;
  }

/* Remove TODOS os ::before e ::after do botão hambúrguer que não sejam as barras*/
button.menu-toggle::after,
button#site-navigation-menu-toggle::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Garantir que o X não tem efeitos extra */
.main-navigation.toggled::before {
  background: none !important;
  border: none !important;
}

 

/* Ajuste mobile pequeno */
@media (max-width: 480px) {
  button.menu-toggle > span { width: 24px; }
  button.menu-toggle { width: 40px; height: 40px; }
}

/* Ajuste do menu hambúrguer no tablet e dispositivos móveis */
@media (max-width: 1024px) {
  button.menu-toggle,
  button#site-navigation-menu-toggle {
    position: fixed !important;
    top: 25px !important;
    right: 20px !important;
    z-index: 9999 !important;
  }

  .site-header {
    position: relative;
    z-index: 1000;
  }
}



/* Esconder o botão hamburguer em desktop */
@media (min-width: 1025px) {
  button.menu-toggle {
    display: none !important;
  }
}








/* Mostrar o botão hamburguer em dispositivos móveis e tablets em modo retrato */
@media (max-width: 1024px) {
  button.menu-toggle {
    display: block !important;
  }
}

/* Mostrar (reforça) o botão hamburguer em dispositivos móveis e tablets em modo retrato */
@media (max-width: 1024px)and (orientation: portrait) {
  button.menu-toggle {
    display: block !important;
    
  }

  /* esconde o menu normal */
/* esconder apenas o menu de links acabar
  #site-navigation ul,
  .main-navigation ul {
   /* display: none !important; }
   
    */
   /*subir o menú hamburger em telemóvel em todas as páginas execpto home*/
  button.menu-toggle, button#site-navigation-menu-toggle,header#masthead .menu-toggle{
    margin-top: -10px !important;
  } 
  
   
   /*subir o menu hamburger em telemóvel em home*/
  .home #masthead.sticky .menu-toggle{
    margin-top: -20px !important;
  } 
   
  
}

/* Tablet portrait — esconder menu normal e mostrar só o botão */
/* Tablet portrait — esconder menu normal mas manter o lateral*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {      
  /* esconder apenas o menu principal quando ainda não está aberto 
  #site-navigation ul:not(.toggled) > ul.menu, .main-navigation ul:not(.toggled) > ul.menu{
    display: none !important;
  }
 
  #site-navigation ul.menu,
  .main-navigation ul.menu {
    display: none!important;
  }
  
  .main-navigation.toggled ul.menu {
    display: block !important;
  }
  
   */
  

  
  

  button.menu-toggle,
  button#site-navigation-menu-toggle {
    display: block !important;
  }
  
  
  #masthead.sticky .custom-logo-link img{
      margin-top:-30px;
  }
  
  
}/* fim media query */








/* Esconder texto 'Menu' do toggle */
button.menu-toggle {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  line-height: 0 !important;
  position: relative;
  z-index: 9999;
}

/* Regras para menu lateral (quando .main-navigation.toggled) - menu parcial lateral com gutter; quando menu está aberto */
@media (max-width: 1024px) {

  .main-navigation.toggled .menu,
  .main-navigation.toggled .menu-wrap,
  .main-navigation.toggled .menu-container {
    display: block !important;
    width: 60% !important;
    max-width: 420px !important;
    box-sizing: border-box !important;
    padding: 20px 18px !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    z-index: 10003 !important;
    background-color: rgba(var(--main-color-rgb),1) !important;
  }

  .main-navigation.toggled { z-index: 10002 !important; }

  button.menu-toggle,
  button#site-navigation-menu-toggle {
    position: fixed !important;
    top: 30px !important;
    right: calc(8vw) !important;
    z-index: 10005 !important;
    background: transparent !important;
    border: none !important;
    padding: 6px 10px !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  button.menu-toggle[aria-expanded="true"]::after,
  button#site-navigation-menu-toggle[aria-expanded="true"]::after {
    content: "✕" !important;
    font-size: 28px !important;
    color: #fff !important;
    display: inline-block !important;
    line-height: 1 !important;
    
    top: 0 !important;/*altura da cruz*/
  }

  button.menu-toggle[aria-expanded="true"] > span,
  button#site-navigation-menu-toggle[aria-expanded="true"] > span {
    display: none !important;
  }

  .main-navigation.toggled::before {
    content: "✕" !important;
    position: fixed !important;
    top: 14px !important;
    right: calc(8vw) !important;
    font-size: 28px !important;
    color: #fff !important;
    z-index: 10005 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  html.touch .main-navigation.toggled .menu {
    padding-right: 36px !important;
  }
}

/* Make the menu overlay fixed and full-screen fallback */
.main-navigation.toggled .menu {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100vh !important;
  overflow-y: auto !important;
  background-color: rgba(var(--main-color-rgb),1) !important;
  z-index: 9999 !important;
  padding: 20px 0 !important;
  box-sizing: border-box;
}

/* menu lateral ocupa só parte da tela em algumas variantes */
.main-navigation.toggled .menu {
  background-color: rgba(var(--main-color-rgb),1) !important;
  width: 65% !important;
  max-width: 360px;
  padding: 20px;
  box-sizing: border-box;
}

/* Botão X no menu mobile (visual) */
button.menu-toggle.toggled::after {
  content: "✕";
  font-size: 26px;
  color: #fff;
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 10000;
  background: none !important;
  border: none !important;
}

/* Quando o menu está toggled, garantir links visíveis */
.main-navigation.toggled .menu a {
  color: #fff !important;
  display: block;
  padding: 10px 0;
}
.main-navigation.toggled .menu a:hover {
  color: #ffd6d6 !important;
}

/* Forçar X visual dentro do menu lateral */
button.menu-toggle.toggled {
  position: absolute !important;
  top: 15px;
  right: 15px;
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-size: 24px !important;
  cursor: pointer;
  z-index: 9999;
}

/* Menu overlay (optionally used by JS) */
.menu-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.4);
  z-index: 9998;
  display: block;
}

/* Specific corrections & fallbacks to avoid menu being hidden in landscape phones */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  #masthead .secondary-navigation ul a
 /*  #masthead .main-navigation ul.menu, 
 .site-header .main-navigation, 
  .main-navigation ul ul li a */
  {
    display: none !important;
  }}
  
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  /* Esconde SEMPRE o menu normal */
  .main-navigation .menu {
    display: none !important;
  }
  /* Mostra o menu só quando está toggled (hamburguer clicado) */
  .main-navigation.toggled .menu {
    display: block !important;
  }
  /* Oculta submenus por padrão */
  .main-navigation .menu .sub-menu {
    display: none !important;
  }
  /* Mostra submenu só quando item pai está toggled */
  .main-navigation .menu li.menu-item-has-children.toggled > .sub-menu {
    display: block !important;
  }
}
  
  
  
  

  button.menu-toggle, button#site-navigation-menu-toggle,
  .main-navigation.toggled ul.menu li a,
  .storefront-hamburger-menu-active .main-navigation div.menu,
  .storefront-hamburger-menu-active,
  header#masthead .main-navigation ul li.current-menu-item > a,
  header#masthead .menu-toggle, #masthead.sticky .menu-toggle,
  .main-navigation.toggled .menu {
    display: block !important;
  }

  .site-header { max-height:75px!important; }
  #masthead.sticky .site-header, #masthead.sticky { max-height:50px!important; }

  .site-header .custom-logo-link img { max-height:50px!important; margin-top:-40px!important; }
  #masthead.sticky .custom-logo-link img{ max-height:30px!important; }
}

/* Portrait: toggle visible */
@media only screen and (max-width: 1024px) and (orientation: portrait) {
  button.menu-toggle,ul.menu,.main-navigation.toggled ul.menu li a {
    display: block !important;
  }
}

/* ensure toggle visible on landscape small screens */
@media only screen and (max-width: 1024px) and (orientation: landscape) {
  button.menu-toggle, button#site-navigation-menu-toggle {
    /*all: unset;*/
    display: block !important;
    position: fixed !important;
    top: 14px !important;
    right: 20px !important;
    z-index: 10005 !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 28px !important;
    cursor: pointer !important;
  }
}

/* Forçar links/menu brancos em todos os estados (header-specific) */
header#masthead .main-navigation a,
header#masthead .main-navigation ul li a,
header#masthead .secondary-navigation a,
header#masthead .menu-toggle,
header#masthead .site-search a,
#site-navigation a {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
  
}





header#masthead .main-navigation a:hover,
header#masthead .main-navigation ul li.current-menu-item > a {
  color: #ffd6d6 !important;
}

/* sticky global priority for menu */
header#masthead.site-header,
#masthead {
  transition: background-color .25s ease, box-shadow .25s ease !important;
  z-index: 9999;
}

/* Extra safety: ensure sticky positioning forced if JS didn't toggle */
#masthead.sticky {
  position: fixed !important;
}

/* Minor corrections for cart/search visibility toggles (if you hide them) */
#masthead.sticky .site-header-cart .cart-contents,
.site-header-cart .cart-contents {
  display:none;
}

/* If there are theme-specific classes like storefront-hamburger-menu-active, correct offsets */
.storefront-hamburger-menu-active .main-navigation.toggled .handheld-navigation{
  left: -100px;
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.7);
}


.storefront-hamburger-menu-active .main-navigation div.menu {
  width: auto!important; 
}


/* =========================
   CORREÇÕES FINAIS MENU MOBILE + HOME HEADER
   ========================= */

/* Garantir que o botão hambúrguer fica sempre visível no topo */
.home #masthead:not(.sticky) button.menu-toggle {
  z-index: 99999 !important;
  position: fixed !important;
  top: 1.2rem !important;
  right: 1.4rem !important;
}

/* Evitar que o header absoluto esconda o botão */
.home #masthead:not(.sticky) {
  z-index: 99 !important;
}

/* Corrigir cor e visibilidade dos links do menu mobile */
@media (max-width: 1024px) {
  .main-navigation.toggled .menu a {
    color: #fff !important;
    opacity: 1 !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  .main-navigation.toggled .menu a {
    color: #fff !important;
    opacity: 1 !important;
    margin-top: 0 !important;
  }
}


 /*=========================
   AJUSTES FINAIS MOBILE/TABLET
   ========================= */

/* --- Espaçamento e ordem dos links no menu lateral --- */
@media (max-width: 1024px) {
.storefront-hamburger-menu-active .main-navigation .handheld-navigation > ul{
          margin-top: 0;  /* Remove margem negativa */
  padding-top: 60px;  /* Espaço para o botão X */
}



  .main-navigation.toggled .menu li {
    display: block;
    padding: 0 !important;  /* Reduzido */
    margin: 0 !important;  /* Sem margem entre itens */
    text-align: left !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);  /* Linha mais suave */
  }

.main-navigation.toggled .menu li a {
    display: block;
    padding: 12px 16px !important;  /* Espaçamento interno confortável */
    margin: 0 !important;
    font-size: 15px;  /* Tamanho de fonte adequado */
    line-height: 1.4;
    color: #fff !important;
  }




  /* Corrige a ordem dos submenus (não devem ir parar ao fim da lista) */
    .main-navigation.toggled .menu ul.sub-menu {
    margin: 0 0 0 15px !important;  /* Indentação */
    padding: 0 !important;
    background: rgba(255,255,255,0.08); /* ← Esta linha controla o fundo sem efeito??? */
  }

   .main-navigation.toggled .menu ul.sub-menu li {
    padding: 10px 12px !important;  /* Mais compacto */
    border: none !important;
    font-size: 14px;
  }

}



/* --- Ajustar tamanho do logótipo no mobile e tablet --- */
@media (max-width: 1024px) {
  .site-header .custom-logo-link img {
    max-height: 70px !important; /*controla tamanho do logotipo em mobile e tablet*/
    width: auto !important;
    margin-top: 10px !important;
  }
}

/* --- Ajustar tamanho do logótipo em tablets (modo paisagem) --- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .site-header .custom-logo-link img {
    max-height: 70px !important;
    margin-top: -30px !important;
  }
}

/* --- Prevenir o menu lateral de tapar o logotipo em tablets --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-navigation.toggled .menu {
    width: 55% !important; /* ligeiramente mais estreito em tablet */
  }
}


/* -- ajustes finais --*/
/* Garantir que o botão hamburguer aparece em mobile landscape */
@media only screen and (max-width: 812px) and (orientation: landscape) {
  button.menu-toggle,
  button#site-navigation-menu-toggle {
    display: block !important;
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 10005 !important;
  }

  /* esconder menu normal */
  .main-navigation:not(.toggled) > ul.menu {
  display: none !important;
}
}



  
/* Mostrar (reforça) o botão hamburguer em dispositivos móveis e tablets em modo paisagem */
@media (max-width: 1024px) and (orientation: landscape) {
  button.menu-toggle {
    display: block !important;
     }
}

/*teste*/
/* ===== FIX GLOBAL: botão sempre visível em landscape (abrange vários widths) ===== */
@media (max-width: 1024px) and (orientation: landscape),
       (max-width: 812px) and (orientation: landscape),
       (max-width: 768px) and (orientation: landscape) {
  /* botão com id real (o que viste no DOM) */
  #site-navigation-menu-toggle.menu-toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 100100 !important; /* bem acima */
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
  }

  /* garantir que não há pseudo-elementos a esconder o botão */
  #site-navigation-menu-toggle.menu-toggle::before,
  #site-navigation-menu-toggle.menu-toggle::after {
    display: none !important;
    content: none !important;
  }
}



/* ===== FIX TABLET PORTRAIT (768 - 1024) =====
   Forçar sidebar ao abrir e garantir submenus em fluxo (não absolute)
================================================================== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  /* Forçar que o menu toggled fica visível e ocupa sidebar da esquerda */
  .main-navigation.toggled,
  nav#site-navigation.toggled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 65% !important;          /* ajusta se quiseres 60% ou 70% */
    max-width: 420px !important;
    height: 100vh !important;
    z-index: 100050 !important;
    background-color: rgba(var(--main-color-rgb), 1) !important; /* mantém a tua cor intacta */
    box-shadow: 0 0 40px rgba(0,0,0,0.35) !important;
    overflow-y: auto !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }

  /* O .menu interno também forçado a block */
  .main-navigation.toggled .menu,
  .main-navigation.toggled ul.menu {
    display: block !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 64px !important; /* espaço para o botão X */
  }

  /* Submenus dentro do sidebar: fluxo normal (não absolute) 
  .main-navigation.toggled .menu .sub-menu,
  nav#site-navigation.toggled .sub-menu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    z-index: auto !important;
    display: block !important; /* visível quando o parent estiver toggled 
    padding-left: 16px !important; /* indent 
    margin: 6px 0 6px 0 !important;
  }

/* Submenus escondidos por padrão */
.main-navigation .menu .sub-menu,
nav#site-navigation .sub-menu {
  display: none !important;
}

/* Mostra submenu só quando LI pai tem .toggled */
.main-navigation .menu li.menu-item-has-children.toggled > .sub-menu,
nav#site-navigation .menu li.menu-item-has-children.toggled > .sub-menu {
  display: block !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  z-index: auto !important;
  padding-left: 16px !important;
  margin: 6px 0 !important;
}


  /* Itens de submenu: visuais para não sobrepor */
  .main-navigation.toggled .menu .sub-menu li,
  nav#site-navigation.toggled .sub-menu li {
    padding: 8px 12px !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  /* Se houver classes que escondem o UL principal, anulá-las */
  nav#site-navigation ul.menu:not(.toggled),
  .main-navigation ul.menu:not(.toggled) {
    display: none !important;
  }
  nav#site-navigation.toggled ul.menu,
  .main-navigation.toggled ul.menu {
    display: block !important;
  }
}

/* ===== Safety: garantir comportamento genérico do toggled (pequeno snippet) ===== */
.main-navigation.toggled .menu,
nav#site-navigation.toggled .menu,
.main-navigation.toggled ul.menu,
nav#site-navigation.toggled ul.menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}



/*reforço para apararecer em mobile landscape*/
/* --- Reforçar visibilidade do botão hamburguer em mobile/tablet landscape --- */
@media (max-width: 1024px) and (orientation: landscape),
       (max-width: 900px) and (orientation: landscape),
       (max-width: 820px) and (orientation: landscape) {
    button.menu-toggle,
    #site-navigation-menu-toggle.menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 100100 !important;
        background: transparent !important;
        color: #fff !important;
        
         height: 50px !important; /* espaço onde aparecem os traços do menú */
         overflow: visible !important;

        
    }
}

/* --- FIX FINAL: botão hamburguer sempre visível em mobile landscape --- */
@media (max-width: 1024px) and (orientation: landscape) {
  button.menu-toggle,
  #site-navigation-menu-toggle.menu-toggle {
    display: block !important;
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 100100 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /*teste*/
 .main-navigation .menu .sub-menu { display: none !important; }
.main-navigation .menu li.menu-item-has-children.toggled > .sub-menu { display: block !important; } 
  
  
}



/* --- Ajustar alinhamento do menu lateral em tablet portrait --- */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
   
  .main-navigation.toggled,
  nav#site-navigation.toggled {
    padding-top: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .main-navigation.toggled .menu,
  nav#site-navigation.toggled .menu {
    padding-top: 32px !important;
    padding-left: 12px !important;
  }
  /* Submenus mais indentados */
  .main-navigation.toggled .menu .sub-menu,
  nav#site-navigation.toggled .sub-menu {
    padding-left: 16px !important;
    margin-top: 8px !important;
  }
  
  /*esconder menu secundário*/
  .secondary-navigation .menu{
      display:none!important;
  }
  
  /*ajusta drop-down de submenu*/
  
  .main-navigation.toggled {
    position: relative !important;
  }
  
  
.main-navigation .menu .sub-menu,
nav#site-navigation .menu .sub-menu {
    position: absolute !important;
    left: 0 !important;
    top: 42px !important; /* ajusta para o espaçamento correto! */
    z-index: 9999 !important;
    background: #212d45 !important;
    box-shadow: 0 4px 18px rgba(33,45,69,0.12) !important;
    border-radius: 6px !important;
    min-width: 180px;
    display: none !important;
}

.main-navigation .menu li.menu-item-has-children.toggled > .sub-menu,
nav#site-navigation .menu li.menu-item-has-children.toggled > .sub-menu {
    display: block !important;
}

.main-navigation .menu li.menu-item-has-children.toggled {
    position: relative!important;
    padding-bottom: 82px; /* ajusta o valor ao tamanho real do teu submenu */
  }
  
  
  .main-navigation .menu li.menu-item-has-children > a::after {
    content: " ▼";
    font-size: 16px;
    margin-left: 8px;
    color: #ADD8E6;
    transition: transform 0.3s;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    right: -2px;  /* ajusta se quiseres afastar mais */
  }
  .main-navigation .menu li.menu-item-has-children.toggled > a::after {
    transform: rotate(180deg);
    color: #ADD8E6;
    margin-left: 8px;
    /* display: inline-block; */
  }
  
  /* Força alinhamento só nos itens desejados */
#menu-item-1524,
  #menu-item-1520,
  #menu-item-5161 {
    position: static !important;
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    display: block !important;
    float: none !important;
    clear: both !important;
  }
  
 .site-header,
  #masthead {

    min-height: 90px !important; /* ALTURA HEADER */
    z-index: 9999;
padding-top: 12px !important;
padding-bottom: 18px !important;
  }
  #masthead.sticky .custom-logo-link img {
    
    max-height: 80px !important;
    margin: 0 !important;
  }
  button.menu-toggle, button#site-navigation-menu-toggle {
   
    z-index: 10005 !important;
  }
  
#masthead.sticky .menu-toggle {
  margin-top: -20px;
}
 
 /*retirar empaço em branco homepage tablet portrait*/ 
 div.wppb-row-parent.wppb-row-1757267080199 {
margin-top: -350px!important; } 
  
  
}/*fim media query */


/* ajustar em telemóvel landscape traços de menú
@media (max-width: 812px) and (orientation: landscape) {
  #site-navigation-menu-toggle {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
  }
  #site-navigation-menu-toggle span {
    display: block !important;
    position: absolute !important;
    left: 4px !important;
    top: 16px !important;
    width: 32px !important;
    height: 3px !important;
    background: #000 !important;
    border-radius: 2px !important;
    z-index: 10001 !important;
    color: transparent !important;
  }
  #site-navigation-menu-toggle span::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: -8px !important;
    width: 32px !important;
    height: 3px !important;
    background: red !important;
    border-radius: 2px !important;
    z-index: 10002 !important;
  }
  #site-navigation-menu-toggle span::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    width: 32px !important;
    height: 3px !important;
    background: blue !important;
    border-radius: 2px !important;
    z-index: 10003 !important;
  }
}



@media (max-width: 812px) and (orientation: landscape) {
  #site-navigation-menu-toggle span {
    background: #000 !important;
    
  }
  #site-navigation-menu-toggle span::before {
    background: red !important;
   
  }
  #site-navigation-menu-toggle span::after {
    background: blue !important;
 
  }
}
*/


/* ===== corrigir hambúrguer que só mostra 1 traço =====
@media (max-width: 1024px) and (orientation: landscape) {
    .main-navigation.toggled,
  nav#site-navigation.toggled {
    padding-top: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .main-navigation.toggled .menu,
  nav#site-navigation.toggled .menu {
    padding-top: 32px !important;
    padding-left: 12px !important;
  }
  /* Submenus mais indentados 
  .main-navigation.toggled .menu .sub-menu,
  nav#site-navigation.toggled .sub-menu {
    padding-left: 16px !important;
    margin-top: 8px !important;
  }
    
}  
    
 */
  /* garantir que o span e as barras existem e aparecem 
  #site-navigation-menu-toggle.menu-toggle > span {
    display: block !important;
    position: relative !important;
    width: 28px !important;
    height: 3px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #site-navigation-menu-toggle.menu-toggle > span::before,
  #site-navigation-menu-toggle.menu-toggle > span::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #site-navigation-menu-toggle.menu-toggle > span::before {
    top: -8px !important;
  }

  #site-navigation-menu-toggle.menu-toggle > span::after {
    top: 8px !important;
  }

  /* quando o menu está aberto (aria-expanded="true"), transformar em X  
  #site-navigation-menu-toggle.menu-toggle[aria-expanded="true"] > span {
    background: transparent !important;
  }
  #site-navigation-menu-toggle.menu-toggle[aria-expanded="true"] > span::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }
  #site-navigation-menu-toggle.menu-toggle[aria-expanded="true"] > span::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }
}
*/


/*
@media (max-width: 1024px) and (orientation: landscape) {
  #site-navigation-menu-toggle.menu-toggle > span {
    display: block !important;
    position: relative !important;
    width: 28px !important;
    height: 3px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #site-navigation-menu-toggle.menu-toggle > span::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: -8px !important;
    width: 100% !important;
    height: 3px !important;
    /*background: #fff !important;
    background: red !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #site-navigation-menu-toggle.menu-toggle > span::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    width: 100% !important;
    height: 3px !important;
    /*background: #fff !important;
    background: blue !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #site-navigation-menu-toggle.menu-toggle[aria-expanded="true"] > span {
    background: transparent !important;
  }
  #site-navigation-menu-toggle.menu-toggle[aria-expanded="true"] > span::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }
  #site-navigation-menu-toggle.menu-toggle[aria-expanded="true"] > span::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }
}

*/

@media (max-width: 1024px) and (orientation: landscape) {
    .main-navigation.toggled,
  nav#site-navigation.toggled {
    padding-top: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .main-navigation.toggled .menu,
  nav#site-navigation.toggled .menu {
    padding-top: 32px !important;
    padding-left: 12px !important;
  }
  /* Submenus mais indentados */
  .main-navigation.toggled .menu .sub-menu,
  nav#site-navigation.toggled .sub-menu {
    padding-left: 16px !important;
    margin-top: 8px !important;
  }
    
  #site-navigation-menu-toggle.menu-toggle > span {
    display: block !important;
    position: relative !important;
    width: 28px !important;
    height: 3px !important;
    margin: 0 auto !important;
    background: #fff !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #site-navigation-menu-toggle.menu-toggle > span::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: -8px !important;
    width: 100% !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #site-navigation-menu-toggle.menu-toggle > span::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    width: 100% !important;
    height: 3px !important;
    background: #fff !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #site-navigation-menu-toggle.menu-toggle[aria-expanded="true"] > span {
    background: transparent !important;
  }
  #site-navigation-menu-toggle.menu-toggle[aria-expanded="true"] > span::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }
  #site-navigation-menu-toggle.menu-toggle[aria-expanded="true"] > span::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }
  

  
  /* relocalizar menú hamburger para cima - sem sticky*/
  #site-navigation-menu-toggle.menu-toggle {
              all: unset;
  margin-top: -35px !important; /* ou outro valor negativo */
  margin-right:50px !important;
}
 
  /* relocalizar menú hamburger para cima - com sticky*/
 #masthead.sticky #site-navigation-menu-toggle.menu-toggle{
    margin-top: -45px !important;  /* ajusta só para o estado sticky */
    /*border: 2px solid green !important;*/
  } 


  
  
  /*ajustes sub-menú*/
  .main-navigation .menu li.menu-item-has-children > a::after {
    content: " ▼";
    font-size: 16px;
    margin-left: 8px;
    color: #ADD8E6;
    transition: transform 0.3s;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    right: -2px;  /* ajusta se quiseres afastar mais */
  }
  .main-navigation .menu li.menu-item-has-children.toggled > a::after {
    transform: rotate(180deg);
    color: #ADD8E6;
    margin-left: 8px;
    /* display: inline-block; */
  }
  

  
    /* Força alinhamento só nos itens desejados */
#menu-item-1524,
  #menu-item-1520,
  #menu-item-5161 {
    position: static !important;
    left: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    display: block !important;
    float: none !important;
    clear: both !important;
  }
  
  .main-navigation::before, .main-navigation::after{
      margin-top: -10px;
  }
  
}/*fim media query*/

/*forçar bandeiras em gtranslate */

body div.gt_white_content .gt_languages a,
body div.gt_white_content .gt_languages span {
  color: red !important;
}


div.gt_white_content .gt_languages a,
div.gt_white_content .gt_languages span {
  color: #222 !important;
}

/* E reforça também para as bandeiras */
div.gt_white_content .gt_languages img {
  display: inline-block !important;
  opacity: 1 !important;
  filter: none !important;
  background: none !important;
  width: 18px !important;
  height: 14px !important;
  vertical-align: middle !important;
}

/*teste


@media (max-width: 950px) and (orientation: landscape) {
  #site-navigation-menu-toggle.menu-toggle {
     margin-top: 0 !important;
     position: relative;
     /*top: calc((altura_do_header_sticky / 2) - (altura_do_toggle / 2));
     top:50%;
     transform: translateY(-50%);
     border: 2px solid red !important;
  }
}
*/