/* ==============================================
   MENU ACCESSIBILE - BASE STYLES
   ============================================== */

.menu-nav a {
  text-decoration: none;
  color: inherit;
}

/* Header container */
.menu-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-blue-primary);
  z-index: 1000;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

/* Navbar layout */
.menu-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin: 0 auto;
}


/* ==============================================
   MOBILE STYLES (< 1024px)
   ============================================== */

/* Mobile toggle button */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 2px solid var(--color-gray-800);
  border-radius: 4px;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
  transition: all 0.3s ease;
}

.menu-toggle:hover,
.menu-toggle:focus {
  outline: 2px solid var(--color-blue-secondary);
}

.menu-toggle span {
  width: 100%;
  height: 2px;
  background: var(--color-title-light);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* Hamburger animation */
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu container */
.main-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height per mobile browsers */
  background: var(--color-blue-secondary);;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.main-menu[data-visible="true"] {
  transform: translateX(0);
}

.main-menu > li > a {
  display: block;
  padding: 1rem 1.5rem;
  /* font-size: .9rem; */
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--color-title-light);
  transition: background 0.2s ease;
}

.main-menu > li > a:hover:not(.active),
.main-menu > li > a:focus {
  /* background: #ffffff0a; */
  background: oklch(0.5551 0.2446 273.32);
  outline: 2px solid #ffffff10;
  outline-offset: -2px;
}

/* Submenu toggle button mobile */
.submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: .05rem;
  /* font-size: 1.125rem; */
  color: var(--color-title-light);
  cursor: pointer;
  transition: background 0.2s ease;
  position: absolute;
  right: 1.25rem;
  top: 1rem;
}

.submenu-toggle:hover,
.submenu-toggle:focus {
  background: #ffffff0a;
  outline: 2px solid #ffffff10;
  outline-offset: -2px;
}

.submenu-toggle-icon {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  /* margin-left: 0.5rem; */
}

.submenu-toggle[aria-expanded="true"] .submenu-toggle-icon {
  transform: rotate(-135deg);
}

/* Submenu mobile */
.submenu, .megamenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #ffffff0a;
}

.submenu[data-visible="true"], 
.megamenu[data-visible="true"] {
  max-height: 900px; /* Valore sufficientemente alto */
}

.submenu li a,
.megamenu li a{
  display: block;
  color: var(--color-title-light);
  font-size: 1rem;
  transition: background 0.2s ease;
}
.submenu li a{
  padding: 0.875rem 1.5rem 0.875rem 2.5rem;
}
.megamenu li a{
  padding: 0.875rem 2.5rem;
}


/* .submenu li a:hover,
.submenu li a:focus,
.megamenu li a:hover,
.megamenu li a:focus {
  background: #ffffff0a;
  outline: 2px solid #ffffff10;
  outline-offset: -2px;
} */

@media (width < 64rem) {
  .main-menu {
    padding-top: 5rem!important;
  }
  /* .menu-nav ul:not(.wrapper) {
    padding: 0;
  } */
   .megamenu li svg {
    display: none;
  }
  .megamenu > ul > li ul {
    display: none;
  }
  .megamenu > ul.wrapper {
    padding: 0!important;
  }
}

/* ==============================================
   DESKTOP STYLES (>= 1024px)
   ============================================== */
@media (width >= 64rem) {
  
  .menu-toggle {
    display: none;
  }

  .menu-overlay {
    display: none;
  }

  .main-menu {
    position: static;
    display: flex;
    align-items: center;
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    transform: none;
    overflow: visible;
    box-shadow: none;
    background: transparent;
    gap: 0.5rem;
  }

  .main-menu > li {
    /* position: relative; */
    border: none;
  }

  .main-menu > li > a {
    padding: 0.5rem 1rem;
    font-size: .85rem;
    border-radius: 4px;
  }
  .main-menu > li a.active{
    color: var(--color-blue-secondary-accent)
  }

  /* Desktop: voci con submenu */
  .menu-item-has-submenu > a {
    padding-right: 1.5rem!important;
    position: relative;
  }

  .menu-item-has-submenu > a::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
  }

  .menu-item-has-submenu:hover > a::after,
  .menu-item-has-submenu:focus-within > a::after {
    transform: translateY(-50%) rotate(-135deg);
  }

  /* Nasconde il button toggle su desktop */
  .submenu-toggle {
    display: none;
  }

  /* Submenu desktop */
  .submenu,
  .megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-blue-primary);
    border-radius: 4px;
    padding: 0.5rem 0;
    opacity: 0;
    /* opacity: 1; */
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    max-height: none;
    z-index: 100;
  }
  .megamenu {
    width: 100vw;
    top: 80%;
    padding-bottom: 2rem;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(40px);
  }
  .megamenu > ul{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .megamenu > ul > li:not(:first-child){
    border-radius: .5rem;
    padding: 1rem;
    background: #ffffff0a;
  }
  .megamenu > ul > li:first-child{
    padding: 1.5rem 1rem 1rem;
  }
  .megamenu li svg {
    translate: 2px 0;
    scale: 0.75;
  }
  .megamenu li a{
    padding: 0.875rem 0;
  }
  .megamenu li a:hover:not(.active, .button-service){
    color: white;
    text-decoration: underline;
  }
  .megamenu li > a:hover > span{
    text-decoration: underline;
    text-underline-offset: 0.25rem;
  }
  .megamenu li ul li a{
    font-size: .85rem;
    color: var(--color-body-light);
    padding: .2rem 0;
    transition: .2s;
  }
  .megamenu li ul li a:hover{
    color: white;
  }

  /* Mostra submenu con hover e focus */
  .menu-item-has-submenu:hover .submenu,
  .menu-item-has-submenu:focus-within .submenu,
  .menu-item-has-submenu:hover .megamenu,
  .menu-item-has-submenu:focus-within .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .submenu[data-visible="true"],
  .megamenu[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: none;
  }

  .submenu li a {
    padding: 0.5rem 1.25rem;
    color: var(--color-body-light);
    border-radius: 4px;
    background: transparent;
  }

  .submenu li a:hover:not(.active),
  .submenu li a:focus:not(.active) {
    color: var(--color-title-light);
    background: var(--color-blue-secondary);
  }
  .submenu li a.active{
    color: var(--color-blue-secondary-accent)
  }

  a.button-service{
    font-size: .75rem;
    display: inline-flex!important;
    justify-content: center!important;
    align-items: center!important;
    padding: 0 1.5rem!important;
    height: 3rem;
    background-color: var(--color-blue-secondary);
    color: white;
    border-radius: .25rem;
    transition: .2s;
  }
  a.button-service:hover{
    background-color: var(--color-blue-700);
  }

  /* .button.button-primary{@apply bg-blue-secondary text-white hover:bg-blue-700} */
}

/* ==============================================
   UTILITY & ACCESSIBILITY
   ============================================== */

/* Skip link per accessibilità */
/* .skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0066cc;
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
} */

/* .skip-link:focus {
  top: 0;
} */

/* Screen reader only */
/* .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
} */

/* Previene scroll del body quando menu è aperto su mobile */
body.menu-open {
  overflow: hidden;
}

@media (min-width: 1024px) {
  body.menu-open {
    overflow: auto;
  }
}

/* Focus visibile per tutti gli elementi interattivi */
.menu-nav a:focus,
.menu-nav button:focus {
  outline: 2px solid var(--color-blue-secondary-accent);
  outline-offset: 2px;
}

/* Riduce motion per utenti con preferenze accessibility */
@media (prefers-reduced-motion: reduce) {
  .main-menu,
  .menu-overlay,
  .submenu,
  .menu-toggle span,
  .submenu-toggle-icon {
    transition: none;
  }
}