/* ============================================================
   MENU AKASHA - VERSIONE TRASPARENTE / PREMIUM
   ============================================================ */

/* HAMBURGER */

.hamburger-akasha {
 position: fixed;
 top: 18px;
 right: 22px;
 z-index: 5000;
 border: 1px solid rgba(255, 216, 107, .45);
 background: rgba(20, 15, 15, .28);
 color: #f7f1e6;
 padding: 10px 15px;
 border-radius: 999px;
 cursor: pointer;
 font-size: 15px;
 font-weight: 700;
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 box-shadow: 0 0 22px rgba(0,0,0,.25);
}

 .hamburger-akasha span {
  margin-left: 6px;
 }

 .hamburger-akasha:hover {
  color: #ffd86b;
  border-color: rgba(255, 216, 107, .8);
  box-shadow: 0 0 20px rgba(255,216,107,.35);
 }

/* MENU PRINCIPALE */

.main-menu-akasha {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 4600;
 min-height: 48px;
 padding: 0 28px;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 24px;
 background: rgba(20, 5, 5, .18);
 backdrop-filter: blur(4px);
 -webkit-backdrop-filter: blur(4px);
 border-bottom: none;
 box-shadow: none;
 transform: translateY(-100%);
 transition: transform .35s ease;
}

 .main-menu-akasha::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient( 90deg, rgba(40,0,0,.55) 0%, rgba(40,0,0,0) 18%, rgba(40,0,0,0) 82%, rgba(40,0,0,.55) 100% );
 }

/* DESKTOP: menu sempre visibile */

@media (min-width: 769px) {
 .main-menu-akasha {
  transform: translateY(0) !important;
 }

 .hamburger-akasha {
  display: none !important;
 }

 body.home-page .home-header-akasha .brand-header {
  transform: translateY(48px) !important;
 }
}

/* LOGO */

.menu-logo {
 display: none;
}

/* PULSANTE CHIUSURA MENU */

.menu-close-akasha {
 display: none;
}

/* VOCI PRINCIPALI */

.menu-principale {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 4px;
 list-style: none;
 margin: 0;
 padding: 0;
}

 .menu-principale > li {
  position: relative;
 }

  .menu-principale > li > a {
   display: block;
   padding: 15px 10px;
   color: #f7f1e6;
   text-decoration: none;
   font-weight: 700;
   font-size: 14px;
   letter-spacing: .4px;
   white-space: nowrap;
   text-transform: uppercase;
  }

  .menu-principale > li:hover > a,
  .menu-principale > li:focus-within > a {
   color: #ffd86b;
   text-shadow: 0 0 12px rgba(255,216,107,.65);
  }

  /* SOTTOMENU DESKTOP */

  .menu-principale > li > ul {
   position: absolute;
   top: 100%;
   left: 50%;
   min-width: 260px;
   list-style: none;
   margin: 0;
   padding: 12px;
   background: rgba(255, 241, 173, .88);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 216, 107, .45);
   border-radius: 18px;
   box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 0 18px rgba(255,255,255,.18);
   opacity: 0;
   visibility: hidden;
   transform: translate(-50%, 10px);
   transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
  }

  .menu-principale > li:hover > ul,
  .menu-principale > li:focus-within > ul {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, 0);
  }

  .menu-principale > li > ul > li > a {
   display: block;
   padding: 10px 16px;
   border-radius: 12px;
   color: #6f1408;
   text-decoration: none;
   font-weight: 700;
   font-size: 14px;
   line-height: 1.35;
  }

   .menu-principale > li > ul > li > a:hover {
    color: #fff7d0;
    background: linear-gradient( 90deg, rgba(150, 20, 10, .90), rgba(205, 60, 20, .75) );
    text-shadow: 0 0 10px rgba(255,216,107,.45);
   }

/* TABLET */

@media (max-width: 1200px) and (min-width: 769px) {
 .main-menu-akasha {
  padding: 0 16px;
 }

 .menu-principale > li > a {
  font-size: 13px;
  padding-left: 8px;
  padding-right: 8px;
 }
}

/* MOBILE */

@media (max-width: 768px) {

 .hamburger-akasha {
  display: block !important;
  top: 14px;
  right: 14px;
  font-size: 14px;
  padding: 9px 13px;
  background: rgba(255, 248, 230, .88);
  color: #7a160d;
  border: 1px solid rgba(255, 216, 107, .55);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
 }

 .main-menu-akasha {
  transform: translateY(-100%) !important;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  max-height: 100vh;
  overflow-y: auto;
  padding: 62px 18px 18px 18px;
  background: linear-gradient( 180deg, rgba(255, 248, 230, .96) 0%, rgba(255, 241, 210, .94) 55%, rgba(255, 232, 185, .92) 100% );
 }

 .menu-close-akasha {
  display: block;
  position: absolute;
  top: 12px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(140, 35, 18, .18);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  color: #7a160d;
  font-size: 28px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  z-index: 5001;
  font-family: Arial, sans-serif;
 }

  .menu-close-akasha:hover {
   color: #c52f14;
   background: rgba(255, 216, 107, .25);
  }

 body.menu-revealed .main-menu-akasha {
  transform: translateY(0) !important;
 }

 body.menu-revealed .hamburger-akasha {
  display: none !important;
 }

 body.home-page .home-header-akasha .brand-header,
 body.home-page.menu-revealed .home-header-akasha .brand-header {
  transform: translateY(0) !important;
 }

 .main-menu-akasha::after {
  display: none;
 }

 .menu-principale {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
 }

  .menu-principale > li {
   position: relative;
   width: 100%;
   border: 1px solid rgba(140, 35, 18, .12);
   border-radius: 16px;
   background: rgba(255,255,255,.36);
   overflow: hidden;
  }

   .menu-principale > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    color: #7a160d;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    text-shadow: none;
   }

    .menu-principale > li > a::after {
     content: "▾";
     color: #a87916;
     font-size: 13px;
     margin-left: 12px;
    }

   .menu-principale > li.is-open > a::after {
    content: "▴";
   }

   .menu-principale > li > ul {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 12px 12px 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: rgba(255, 255, 255, .42) !important;
    border: none !important;
    border-top: 1px solid rgba(180, 120, 40, .18) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: none !important;
    list-style: none !important;
   }

   .menu-principale > li.is-open > ul {
    display: block !important;
   }

   .menu-principale > li > ul > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
   }

    .menu-principale > li > ul > li > a {
     display: block !important;
     width: 100% !important;
     padding: 10px 14px !important;
     color: #7a160d !important;
     background: transparent !important;
     font-size: 14px !important;
     font-weight: 600 !important;
     line-height: 1.35 !important;
     text-decoration: none !important;
     border-radius: 12px !important;
     text-align: left !important;
    }

     .menu-principale > li > ul > li > a:hover {
      color: #a62010 !important;
      background: rgba(255, 216, 107, .22) !important;
      text-shadow: none !important;
     }
}


/* ============================================================
   MILESTONE 6 - NAVIGAZIONE DA TASTIERA E TOUCH
   ============================================================ */
.hamburger-akasha:focus-visible,
.menu-close-akasha:focus-visible,
.main-menu-akasha a:focus-visible {
 outline: 3px solid #7a160d;
 outline-offset: 3px;
}

@media (max-width: 768px) {
 .hamburger-akasha,
 .menu-close-akasha,
 .menu-principale > li > a,
 .menu-principale > li > ul > li > a {
  min-height: 44px;
 }
}