/* =========================
   VARIABILI
========================= */
:root{
  --rosa-header: rgba(245,208,225,.5); /* header trasparente */
  --rosa-mega:   #f2bfd4;              /* box mega più scuro */
  --ink:         #1C1F33;
  --ink-soft:    #253;
}

/* =========================
   HEADER BASE
========================= */
.header{
  width:95%;
  margin:0 auto;
  background-color:var(--rosa-header);
  padding:clamp(.5rem,2vw,1rem);
  border-radius:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(1rem,3vw,3rem);
  backdrop-filter:blur(2px);
  position:relative;            /* serve per ancorare il mega */
  z-index:10;
  box-shadow:inset 0 0 10px rgba(0,0,0,.25);
}

/* Nav lista orizzontale (desktop/tablet) */
.header nav > ul {
  display: flex;
  gap: clamp(1rem, 2vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Link base + bottone mega come link */
.header a,
.header .mega-toggle{
  color:var(--ink);
  text-decoration:none;
  font-weight:normal;
  letter-spacing:.5px;
  font-size:clamp(1.2rem,1.3vw,1.4rem);
  transition:color .3s ease;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.header a:hover,
.header .mega-toggle:hover{ color:#e06699; }

/* =========================
   HAMBURGER (STRUTTURA)
========================= */
.hamburger{
  display:none;                /* visibile solo su mobile */
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:10px;
  padding:6px 12px;
  align-items:center;
  gap:10px;
  transition:box-shadow .2s ease, background-color .2s ease;
}
.hamburger:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(224,102,153,.35);
}
.hamburger-icon{
  position:relative;
  width:24px; height:16px; flex:0 0 24px;
}
.hamburger-icon .hamburger-bar{
  position:absolute; left:0; right:0; height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
  transform-origin:50% 50%;
}
.hamburger-icon .hamburger-bar:nth-child(1){ top:0; }
.hamburger-icon .hamburger-bar:nth-child(2){ top:7px; }
.hamburger-icon .hamburger-bar:nth-child(3){ top:14px; }

.hamburger-text{
  font-size:1rem; line-height:1; font-weight:300; color:var(--ink); white-space:nowrap;
}

/* Stato aperto: icona a “X” */
.header.header--menu-open .hamburger{
  box-shadow:inset 0 0 10px rgba(0,0,0,.25);
  background-color:rgba(245,208,225,.6);
}
.header.header--menu-open .hamburger-icon .hamburger-bar:nth-child(1){ top:7px; transform:rotate(45deg); }
.header.header--menu-open .hamburger-icon .hamburger-bar:nth-child(2){ opacity:0; }
.header.header--menu-open .hamburger-icon .hamburger-bar:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* =========================
   MOBILE ONLY (<=768px)
========================= */
@media (max-width:768px){
  .hamburger{ display:inline-flex; height:44px; }
  .header{ justify-content:center; }

  /* nascondi il menu finché non è aperto */
  .header nav{
    position:absolute; top:100%; left:0; right:0; width:100%;
  }
  .header nav ul{ display:none; }

  /* pannello menu aperto (verticale) */
  .header.header--menu-open nav > ul{
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 8px auto 0;
  padding: 12px;
  width: 95%;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 0 10px rgba(0,0,0,.25);
}

  /* link più grandi per touch */
  .header nav a,
  .header .mega-toggle{
    display:block;
    padding:10px 6px;
    font-size:1.05rem;
  }
}

/* =========================
   TABLET/DESKTOP (>=769px)
========================= */
@media (min-width:769px){
  .hamburger{ display:none !important; }
  .header nav ul{ display:flex; }
}

/* =========================
   MEGA MENU “SERVIZI”
========================= */
/* il <li> non è il riferimento di posizionamento */
.has-mega{ position:static; }

/* pannello: centrato, a larghezza dell’header, riquadro rosa scuro */
.mega{
  position: absolute;
  top: 100%;                 /* niente gap */
  left: 0;
  right: 0;
  margin: 0 auto;
  display: none;
  background: var(--rosa-mega);
  border: 1px solid rgba(0,0,0,.06);
  border-top: none;          /* attaccato al menù */
  border-radius: 0 0 12px 12px; /* NO smusso sopra, smusso solo sotto */
  box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 0 10px rgba(0,0,0,.25);
  padding: 14px 0;
  z-index: 1;
}
.has-mega.mega-open > .mega{ display:block; }

/* contenuto interno centrato e a colonne */
.mega-inner{
  width:95%;
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6, minmax(160px,1fr));
  column-gap:28px;
  row-gap:8px;
}

/* colonna: titolo + elenco verticale */
.mega-col{ min-width:160px; }
.mega-title{
  margin:0 0 6px;
  font-weight:800;
  font-size:.85rem;
  color:#2e2a85;
}
.mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;              /* verticali */
  flex-direction: column;     /* asse Y */
  gap: 6px;
}
.mega-list li { display: block; }
.mega-list a {
  display: block;
  padding: 2px 0;                     /* meno spazio verticale */
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);  /* più piccolo */
  line-height: 1.2;
  color: #0b1220;
  text-decoration: none;
  border-radius: 8px;
}
.mega-list a:hover { color: #009fe3; }

/* Mega nel menu mobile: entra nel flusso */
@media (max-width:768px){
  .has-mega{ width:100%; }
  .mega{
    position:static;
    top:auto; left:auto; right:auto;
    margin-top:6px;
    box-shadow:inset 0 0 10px rgba(0,0,0,.25);
    padding:8px 0;
  }
  .mega-inner{
    width:100%; max-width:none;
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:16px; row-gap:10px;
    padding:8px 12px;
  }
}
/* usa la stessa variabile per header e mega */
:root{ --hdr-radius: 12px; }

/* l'header resta com'è, ma dichiariamo il raggio con la variabile */
.header{ border-radius: var(--hdr-radius); overflow: visible; }

/* pannello mega: attaccato e che si infila sotto l’header */
.mega{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - var(--hdr-radius)); /* sale di 12px per coprire gli angoli */
  margin: 0;
  display: none;
  background: var(--rosa-mega);
  border: 1px solid rgba(0,0,0,.06);
  border-top: none;                           /* nessun bordo tra i due */
  border-radius: 0 0 var(--hdr-radius) var(--hdr-radius); /* arrotondata solo sotto */
  box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 0 10px rgba(0,0,0,.25);
  padding: 14px 0;
  z-index: 1000;
}
.has-mega.mega-open > .mega{ display:block; }

/* Mobile: torna nel flusso, con angoli tutti arrotondati */
@media (max-width:768px){
  .mega{
    position: static;
    top: auto;
    border-top: 1px solid rgba(0,0,0,.06);
    border-radius: var(--hdr-radius);
    box-shadow: inset 0 0 10px rgba(0,0,0,.25);
  }
}
.mega-list{ gap:0; }
.mega-list li+li{
  border-top:1px dashed rgba(28,31,51,.15);
  margin-top:6px; padding-top:6px;
}
.header .mega-toggle{
  font-weight: 300 !important;       /* forza peso normale */
  font-synthesis-weight: none;       /* evita finto bold del browser */
  -webkit-font-smoothing: antialiased;
}