/* Ajuste para o contêiner de header com Flexbox */
.site-header .container {
    display: flex;
    justify-content: space-between; /* Distribui logo, menu e botão */
    align-items: center; /* Alinha os elementos verticalmente */
    width: 100%; /* Garante que o contêiner ocupe toda a largura disponível */
    flex-wrap: wrap; /* Permite quebra de linha */
}

/* Alinhamento do menu */
#site-navigation.main-navigation {
    display: flex;
    justify-content: center; /* Centraliza o menu horizontalmente */
    align-items: center; /* Alinha o menu verticalmente */
    flex: 2; /* Garante que o menu ocupe um espaço apropriado */
	
}

/* Botão "RESERVAR" ajustado */
#cta-reservar-header {
    flex: 0; /* Não deixa o botão ocupar mais espaço que o necessário */
    display: inline-block;
    max-width: 150px; /* Limita a largura do botão */
    padding: 10px 15px; /* Espaçamento interno do botão */
    background-color: #FC8251;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-align: center; /* Centraliza o texto dentro do botão */
    transition: background-color 0.3s;
    white-space: nowrap; /* Evita quebra de linha no texto */
}

#cta-reservar-header:hover {
    color: #8B4513; /* Cor mais escura no hover */
}

/* Links do submenu (texto preto) */
#site-navigation.main-navigation .menu-item-has-children .sub-menu a {
  font-family:lato;  
	color: #000000;
    padding: 10px 15px;
    display: block;
    transition: background-color 0.3s;
}

/* Fundo castanho ao hover */
#site-navigation.main-navigation .menu-item-has-children .sub-menu a:hover {
    background-color: #8B4513;
    color: #ffffff;
}

/* Primeiro header (fixo) */
.promo-header {
    background-color: #e36d3c; /* Verde escuro */
    text-align: center;
    padding: 10px 15px;
    font-family: Lato;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
    position: fixed; /* Fixo no topo */
    top: 0;
    width: 100%;
    z-index: 1000; /* Para estar acima de outros elementos */
}

.promo-header a {
    color: #ffffff; /* Texto branco */
    text-decoration: none; /* Sem sublinhado */
    display: inline-block;
    width: 100%; /* Link cobre toda a frase */
}

.promo-header a:hover {
    color: #8B4513; /* Castanho no hover */
}

/* Segundo header (fixo com fundo transparente inicialmente) */
#masthead {
    top: 30px; /* Distância abaixo do primeiro header */
    width: 100%;
    background: transparent; /* Fundo transparente inicialmente */
    z-index: 999; /* Logo abaixo do primeiro header */
    transition: background-color 0.3s, color 0.3s, padding 0.3s; /* Efeito de transição suave */
}

/* Estilo para o container dentro do segundo header, quando rolado */
#masthead.scrolled .container.is-fluid {
    background-color: #ffffff; /* Fundo branco quando rolado */
}

#masthead .container {
    padding: 20px; /* Espaçamento interno */
}

/* Menu do segundo header (texto branco inicialmente) */
#site-navigation.main-navigation a {
    color: #ffffff; /* Texto branco inicialmente */
    transition: color 0.3s; /* Transição suave para o texto */
}

#masthead.scrolled #site-navigation.main-navigation a {
    color: #000000; /* Texto preto quando rolado */
}

/* Estilo para o ícone do menu */
#site-navigation.main-navigation .menu-toggle .nav-icon {
    background-color: #ffffff; /* Cor de fundo inicial do ícone */
    color: #ffffff; /* Cor inicial do ícone */
    margin-top: 8px; /* Margem superior de 8px */
    margin-left: -15px; /* Margem esquerda de -15px */
    padding-top: 2px; /* Padding de 2px no topo */
}

/* Estilo para o ícone do menu quando o header estiver rolado */
#masthead.scrolled .menu-toggle .nav-icon {
    background-color: #000000; /* Cor preta para o ícone quando rolado */
    color: #000000; /* Cor preta para o ícone quando rolado */
}

/* Responsividade */

/* Tablet (768px a 1024px) */
@media (max-width: 1024px) {
    .site-header .container {
        display: flex;
        align-items: center;
        flex-wrap: wrap; /* Permite quebra de linha */
        padding: 5px 10px; /* Espaçamento menor */
    }

    .site-branding {
        flex: 1;
        text-align: left;
        margin-bottom: 10px; /* Espaçamento inferior */
						z-index: 1001;
    }

    #site-navigation.main-navigation {
        flex: 2;
        justify-content: flex-start;
        margin-bottom: 10px; /* Espaçamento inferior */
    }

    #cta-reservar-header {
			flex: 0;
        max-width: 150px;
        margin: 0 auto;
        padding: 10px 15px;
			z-index: 1000;
    }

    #masthead {
        top: 40px; /* Ajusta distância */
        background-color: transparent;
    }

    .menu-toggle {
        display: block;
        margin-right: center;
        flex: 3;
			z-index: 1000;
			
    }

    #site-navigation.main-navigation.active {
        display: flex;
        flex-direction: column; /* Alinha itens verticalmente */
			
	
	}

    /* Controle do submenu no tablet */
    #site-navigation.main-navigation .sub-menu {
        display: none; /* Inicialmente escondido */
			font-size: 14px
    }

    #site-navigation.main-navigation .menu-item-has-children.active .sub-menu {
        display: block;
			line-height: 1.25
    }
}

/* Mobile (até 768px) */
@media (max-width: 768px) {
   
	.promo-header {
        font-size: 14px; /* Tamanho de fonte menor */
        padding: 8px 10px; /* Menos padding */
        letter-spacing: 0px;
        width: 100%;
        line-height: 1.25;
    }
    #masthead .container {
        padding: 10px;
    }

    #site-navigation.main-navigation {
			
				display: none; /* Esconde o menu principal */
        position: fixed; /* Fixar o menu */
        left: 0;
        right: 0;
        background-color: #ffffff; /* Cor de fundo branca */
        width: 100%;
        max-height: 700px; /* Altura máxima do menu */
        z-index: 999; /* Para que fique acima de outros elementos */
        transition: all 0.3s ease-in-out; /* Transição suave ao abrir e fechar */
    }

    body {
        padding-top: 20px; /* Ajuste para header fixo */
    }

    #cta-reservar-header {
        margin-left: 40px;
			color:white!important;
    }

    #site-navigation.main-navigation.active {
        display: block; /* Exibe o menu quando ativado */
			  flex-direction: column; /* Coloca os itens do menu em formato vertical */
    }
    /* Controle do submenu no mobile */
    #site-navigation.main-navigation .sub-menu {
        display: none; /* Inicialmente escondido */
    }

    #site-navigation.main-navigation .menu-item-has-children.active .sub-menu {
        display: block; /* Exibe o submenu quando o item for clicado */
    }

    /* Mudar menu para vertical no mobile */
    #site-navigation.main-navigation {
        display: flex;
        flex-direction: column; /* Coloca os itens do menu em formato vertical */
    }

    #site-navigation.main-navigation .menu-item {
        width: 100%; /* Força o menu a ocupar 100% da largura */
    }
/* Fundo branco ao hover */
#site-navigation.main-navigation .menu-item-has-children .sub-menu a:hover {
    background-color: #ffffff;
    color: #ffffff;
}
	
	#primary-menu .menu-item-has-children::after {
   content: "→"
}