/* ESTILOS DO MENU */
/* Desktop menu */
nav ul {
  list-style:none;
  display:flex;
  gap:1.5rem;
  margin:0;
  padding:0;
}
nav ul li {
  position:relative;
}
nav ul li a {
	font-family: 'Montserrat-Bold';
	color: #FF0;
	padding-left: 5px;
	line-height: 35px;
	text-decoration:none;
	transition:.3s;
	display:block;
}
nav ul li a:hover {
  color:#60a5fa;
}

/* Submenu desktop: fade + slide down */
nav ul li ul {
  position:absolute;
  top:100%;
  left:0;
  background:#111827;
  list-style:none;
  padding:0.5rem 0;
  min-width:150px;
  border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
  z-index:100;
}
nav ul li:hover > ul {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
nav ul li ul li a {
  padding:0.5rem 1rem;
}

/* Hamburger */
.menu-toggle {
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:28px;
  height:20px;
  cursor:pointer;
  z-index:1003;
}
.menu-toggle span {
  display:block;
  height:4px;
  background: #000;
  border-radius:2px;
  transition:.4s ease;
  transform-origin:center;
}
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active span:nth-child(2) {
  opacity:0;
}
.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* NAVEGAÇÃO */
nav a {
  text-decoration:none;
  border-radius:4px;
  transition: background .3s;
}
nav a.active {
  background:#60a5fa;
}
nav a.active:hover{
	color: #131827;
}
/* FIM DE NAVEGAÇÃO */



/* Overlay */
#overlay {
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.5);
  opacity:0;
  visibility:hidden;
  transition: opacity .3s ease;
  z-index:1001;
}
#overlay.show {
  opacity:1;
  visibility:visible;
  background: rgba(0,0,0,0.5) linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
}



/* Mobile menu */
@media (max-width:869px) {
  nav {
    position:fixed;
    top:0;
    left:-260px;
    width:260px;
    height:100%;
    background:#111827;
    padding-top:60px;
    transition:left .4s ease;
    z-index:1002;
    overflow:visible; /* Corrigido para submenu não desaparecer */
  }
  nav ul {
    flex-direction:column;
    gap:1.5rem;
    padding-left:1rem;
  }
  nav ul li {
    opacity:0;
    transform:translateX(-20px);
    transition: all .4s ease;
  }
  nav.show {
    left:0;
  }
  nav.show li {
    opacity:1;
    transform:translateX(0);
  }
  nav.show li:nth-child(1){ transition-delay:.1s; }
  nav.show li:nth-child(2){ transition-delay:.2s; }
  nav.show li:nth-child(3){ transition-delay:.3s; }
  nav.show li:nth-child(4){ transition-delay:.4s; }
  nav.show li:nth-child(5){ transition-delay:.5s; }

  /* Submenu mobile ajustado: slide horizontal */
  nav ul li ul {
    position:absolute;
    left:100%;
    top:0;
    transform:translateX(-100%);
    opacity:0;
    transition: transform .4s ease, opacity .4s ease;
    background:#111827;
    padding:0.5rem 1rem;
    min-width:150px;
    border-radius:4px;
    box-shadow:0 4px 12px rgba(0,0,0,.3);
    z-index:500; /* garante acima de outros itens */
  }

  nav ul li.open > ul {
    transform:translateX(0);
    opacity:1;
  }

	.menu-toggle{
		display:flex;
		margin-right: 20px;
	}
}

/* Desktop overrides */
@media (min-width:870px) {
  nav {
    position:static;
	background-color: #555657;
    width:auto;
    height:auto;
    padding: 8px;
    display:block;
	margin-right: 20px;
	border-radius: 5px;
  }
  nav ul {
    display:flex;
    flex-direction:row;
    gap:1.5rem;
    padding:0;
  }
  nav ul li {
    opacity:1;
    transform:none;
    transition:none;
  }
  nav a.active {
  	padding-right: 5px;
	}
}