ul { margin: 0; padding: 0; list-style: none; }
.navbar {
    display: flex;
	z-index: 10;
    justify-content: space-between;
    align-items: center;
    color: #863526;
    padding: 0.5rem;
    position: relative;

}		


.menu-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  gap: 1rem;
}

.menu-links a {
    color: #863526;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

.menu-links a:hover {
       text-shadow: 7px 7px 10px #ffcc00;
	   background-color: #ffaa00;}
	

/* Nascondi il checkbox */
.menu-toggle { display: none; 
		
				}

/* Nascondi l'icona hamburger su desktop */
.hamburger-icon {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
	z-index:12;
	
}

.hamburger-icon .bar {
    width: 25px;
    height: 3px;
    background-color: #863526;
    /*transition: 0.3s;*/
}

.sub-menu {
  display: none;
  position: absolute;
   top: 65px;
  background-color: #ffcc00;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
}

.sub-menu2 {
  display: none;
  position: absolute;
  top: 65px;
  background-color: #ffcc00;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
}

.sub-menu3 {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #ffcc00;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
}
.sub-menu4{
  display: none;
  position: absolute;
  top: 40px;
  left: 100%;
  background-color: #ffcc00;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
}

.sub-menu5 {
  display: none;
  position: absolute;
  top: 80px;
  left: 100%;
  background-color: #ffcc00;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
}

.sub-menu a:hover {
       text-shadow: 7px 7px 10px #ffffff;
	    background-color: #ffaa00;}

.sub-menu2 a:hover {
       text-shadow: 7px 7px 10px #ffffff;
	    background-color: #ffaa00;}
		
.sub-menu3 a:hover {
       text-shadow: 7px 7px 10px #ffffff;
	    background-color: #ffaa00;}

.sub-menu4 a:hover {
       text-shadow: 7px 7px 10px #ffffff;
	    background-color: #ffaa00;}
		
.sub-menu5 a:hover {
       text-shadow: 7px 7px 10px #ffffff;
	    background-color: #ffaa00;}

/* Mostra al passaggio del mouse */
li:hover > .sub-menu {
  display: block;

}
li:hover > .sub-menu2 {
  display: block;
}

li:hover > .sub-menu3 {
  display: block;
}

li:hover > .sub-menu4 {
  display: block;
}

li:hover > .sub-menu5 {
  display: block;
}

/* Colori e stile */
.sub-menu a {
  background-color: #ffcc00;
   color: #863526;
  padding: 11px;
  text-decoration: none;
  display: block;
}

.sub-menu2 a {
  background-color: #ffcc00;
   color: #863526;
  padding: 11px;
  text-decoration: none;
  display: block;
}

.sub-menu3 a {
  background-color: #ffcc00;
   color: #863526;
  padding: 11px;
  text-decoration: none;
  display: block;
}

.sub-menu4 a {
  background-color: #ffcc00;
   color: #863526;
  padding: 11px;
  text-decoration: none;
  display: block;
}

.sub-menu5 a {
  background-color: #ffcc00;
   color: #863526;
  padding: 11px;
  text-decoration: none;
  display: block;
}

/* --- Media Query per Schermi Piccoli (< 768px) --- */
@media (max-width: 1020px) {
    .hamburger-icon {
        display: flex; /* Mostra l'hamburger */
		caret-color: transparent;
    }
	

    .menu-links {
        display: none; /* Nascondi menu di default */
        flex-direction: column;
		border: 1px solid #f0ba02;
		
        width: 170px;
        background-color: #fff0c9;
		top: 84%;
        position: absolute;
        
        right: 0;
        padding: 1rem 0;
        text-align: center;
		 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
	
	.sub-menu {
  display: none;
  position: absolute;
  right: 100%;
  top: 107px;

  background-color: #ffcc00;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 3;
}

	.sub-menu2{
  display: none;
  position: absolute;
  right: 100%;
  top: 67px;

  background-color: #ffcc00;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 4;
}

	.sub-menu3{
  display: none;
  position: absolute;
  left: -100%;
  top: 0;
 
  background-color: #ff0000;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 4;
}

.sub-menu4{
  display: none;
  position: absolute;
  left: -100%;
  top: 35;

  background-color: #ff0000;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 4;
}
.sub-menu5{
  display: none;
  position: absolute;
  left: -100%;
  top: 70;

  background-color: #ff0000;
  max-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 4;
}

    /* Mostra menu quando il checkbox è selezionato */
    .menu-toggle:checked ~ .menu-links {
        display: flex;

    }
}