/* Header: full width, non limitato dal container */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  pointer-events: auto;
  background: none;
}

/* IMPORTANTE: rimuove l’effetto “contenitore” */
.site-header__inner{
  max-width: none;          /* <- prima era var(--container) */
  margin: 0;
  padding: 18px clamp(16px, 3vw, 44px);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.site-header__right{
  display:flex;
  align-items:center;
  gap: 10px;
}

* Brand in alto a destra con “pill” chiara per far leggere il logo nero */
.brand{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(251,250,247,.65);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.brand__logo{ height: 34px; width: auto; }


@media (max-width: 480px){
  .brand__logo{ height: 100px; }
}


/* Icone: coerenti col tema (gold) */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(162,143,87,.28);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.icon-btn:hover{ background: rgba(0,0,0,.35); }

/* SVG usa currentColor */
.icon{ width: 20px; height: 20px; color: var(--gold); }


/* =========================
   MEGA MENU OVERLAY
========================= */

/* MENU dropdown: pannello più largo e “importante” */
.menu__top{
  position: relative;
  padding-top: 10px;
  padding-bottom: 18px;
  margin-top: 200px;
  margin-right: 600px;
  margin-left: 600px;
}

.menu{
  position: relative;
}
.menu > summary{
  list-style: none;
  cursor: pointer;
}
.menu > summary::-webkit-details-marker{
  display: none;
}

/* Il summary diventa il tasto in alto a sinistra */
.menu > summary{
  list-style: none;
  cursor: pointer;
}
.menu > summary::-webkit-details-marker{
  display: none;
}

/* Icon toggle: hamburger vs close */
.icon--close{
  display: none;
}
.menu[open] .icon--hamb{
  display: none;
}
.menu[open] .icon--close{
  display: block;
}

/* Pannello full width (stile “overlay” elegante) */
.menu__panel{
  position: fixed;
  left: 0;
  right: 0;
  top: 0px;
  padding: 18px 0;
  overflow: auto;
}

/* Nav centrata, ma header resta full width */
.menu__nav{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 44px);

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 26px;
}

/* Link menu: EXACT style reference */
.menu__link{
  font-size: var(--caps-size);
  font-weight: var(--caps-weight);
  font-family: var(--font-ui);
  color: var(--gold);
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;

  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.menu__link:hover{
  border-color: rgba(162,143,87,.35);
  background: rgba(162,143,87,.08);
  text-decoration: none;
}

/* Watermark ornamentale (opzionale) */
.menu__panel::before{
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center 38%;
  background-size: min(860px, 78vw);
  opacity: .045;
  filter: invert(1) brightness(1.25) contrast(.95); /* più chiaro, meno pesante */
  pointer-events: none;
}

/* Velo per profondità */
.menu__panel::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), rgba(0,0,0,.88) 70%);
  pointer-events: none;
}

.menu__inner{
  position: relative;
  z-index: 1;

  max-width: none;
  width: min(1600px, 96vw);          /* grande ma controllato */
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 72px);
  padding-right: clamp(16px, 4vw, 72px);
  min-height: 100svh;            /* fondamentale */
  display: flex;                 /* fondamentale */
  flex-direction: column;        /* fondamentale */
}


/* Posizionamento del tasto X: lo summary deve restare cliccabile sopra overlay */
.menu[open] > summary{
  position: fixed;
  top: 14px;
  left: var(--pad);
  z-index: 120;
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
}
.menu[open] > summary .icon{
  color: rgba(255,255,255,.92);
}

/* Top: logo centro + lingue destra */
.menu__top{
  position: relative;
  padding-top: 10px;
  padding-bottom: 18px;
}

.menu__brand{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
.menu__brand-logo{
  height: 200px;
  width: auto;
  filter: invert(1);
  opacity: .95;
}

.menu__langs{
  position: static;          /* niente absolute */
  display: flex;
  flex-direction: column;    /* come reference: lista verticale */
  gap: 6px;
  text-align: right;
  margin-right: 10px;        /* distanza dal carrello */
}

.menu__lang{
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-ui);
  color: var(--gold);
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  opacity: .85;
  text-decoration: none;
}

.menu__lang:hover{
  opacity: 1;
}
.menu__lang.is-active{
  opacity: 1;
}

/* Mobile: resta vicino al carrello e non “sfora” */
@media (max-width: 520px){
  .menu__langs{
    gap: 5px;
    margin-right: 8px;
  }
  .menu__lang{
    font-size: 10px; /* leggermente più compatto */
  }
}

/* Griglia 4 colonne */
.menu__grid{
  align-self: center;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 28px);

  padding: 18px 0 12px;
}

/* Separatore verticale tra colonne (stile reference) */
.menu-col{
  padding: 25px 18px;
  border-right: 1px solid rgba(255,255,255,.10);
  border-top: 610px solid transparent; /* evita “salti” altezza su hover */

}
.menu-col:last-child{
  border-right: 0;
}

.menu-col__title{
  margin: 0 0 18px;
  font-size: 30px;          /* più grande */
  letter-spacing: .20em;
  font-weight: 850;
  color: rgba(255,255,255,.92);

  position: relative;
  display: inline-block;    /* serve per underline pulita */
  padding-bottom: 6px;
}

/* underline oro per i titoli */
.menu-col__title::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease, opacity 240ms ease;
  opacity: .95;
}

/* evidenziazione titolo su hover (desktop) e su touch (mobile) */
.menu-col:hover .menu-col__title,
.menu-col:active .menu-col__title{
  color: var(--gold);
}

.menu-col:hover .menu-col__title::after,
.menu-col:active .menu-col__title::after{
  transform: scaleX(1);
}

.menu-col__link{
  display: block;
  padding: 8px 0;
  font-size: 16px;
  color: rgba(255,255,255,.62);
  text-decoration: none;
  font-size: 20px;
}
.menu-col__link:hover{
  color: rgba(255,255,255,.95);
  text-decoration: none;
}

/* Bottom: social + contatti — sempre in fondo */
.menu__bottom{
  margin-top: auto;                 /* fondamentale: spinge in basso */
  border-top: 0 !important;         /* niente riga */
  padding-top: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));

  display: flex;
  align-items: center;
  justify-content: center;          /* più “reference-like” */
  gap: 18px;
  flex-wrap: wrap;

  /* (opzionale ma consigliato) lo mantiene visibile se scrolli */
  position: sticky;
  bottom: 0;

  /* sfondo per leggibilità sopra contenuto */
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,0));
}


.menu__social{
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Link social: caps gold (coerente con reference) */
.menu__social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;

  color: var(--gold);
  text-decoration: none;
  opacity: .85;
}
.menu__social-link:hover{ opacity: 1; }

/* Se dentro c’è una SVG icona */
.menu__social-link svg{
  width: 16px;
  height: 16px;
  color: var(--gold);
}


.menu__contacts{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;

  color: var(--gold);
  text-decoration: none;
  opacity: .92;
}
.menu__contacts:hover{ opacity: 1; }

/* Responsive: da 4 colonne a 2, poi a 1 */
@media (max-width: 980px){
  .menu__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .menu-col:nth-child(2){
    border-right: 0;
  }
}
@media (max-width: 560px){
  .menu__brand-logo{
    height: 44px;
  }
  .menu__grid{
    grid-template-columns: 1fr;
  }
  .menu-col{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding: 14px 0;
  }
  .menu-col:last-child{
    border-bottom: 0;
  }
}

/* (Opzionale) blocco scroll quando menu è aperto (supporto browser moderni) */
html:has(.menu[open]){
  overflow: hidden;
}

/* Mobile: menu più “verticale” */
@media (max-width: 520px){
  .menu__nav{
    justify-content: flex-start;
    gap: 10px;
  }
  .menu__link{
    width: 100%;
    text-align: left;
    border-radius: 12px;
  }
  .brand__logo{
    height: 30px;
  }
}



/* =========================
   MENU ANIMATIONS + POLISH
   (entrata + uscita)
========================= */

/* Durata unica (JS può leggerla se vuoi allineare i timeout) */
:root{
  --menu-anim-ms: 520ms;
}

/* OVERLAY */
.menu__panel{
  /* stato base (chiuso) */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;

  transition:
    opacity var(--menu-anim-ms) ease,
    transform calc(var(--menu-anim-ms) + 80ms) cubic-bezier(.2,.9,.2,1);

  will-change: opacity, transform;
}

/* quando <details open> */
.menu[open] .menu__panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* contenuto interno */
.menu__inner{
  opacity: 0;
  transform: translateY(18px);

  transition:
    opacity calc(var(--menu-anim-ms) + 120ms) ease 90ms,
    transform calc(var(--menu-anim-ms) + 220ms) cubic-bezier(.2,.9,.2,1) 90ms;

  will-change: opacity, transform;
}

.menu[open] .menu__inner{
  opacity: 1;
  transform: translateY(0);
}

/* logo top */
.menu__brand-logo{
  transform: translateY(-6px);
  opacity: 0;

  transition:
    transform calc(var(--menu-anim-ms) + 200ms) cubic-bezier(.2,.9,.2,1) 120ms,
    opacity calc(var(--menu-anim-ms) + 100ms) ease 120ms;
}

.menu[open] .menu__brand-logo{
  transform: translateY(0);
  opacity: .95;
}

/* colonne: stagger leggero */
.menu-col{
  transform: translateY(12px);
  opacity: 0;

  transition:
    transform calc(var(--menu-anim-ms) + 200ms) cubic-bezier(.2,.9,.2,1),
    opacity calc(var(--menu-anim-ms) + 120ms) ease;

  will-change: transform, opacity;
}

.menu[open] .menu-col{
  transform: translateY(0);
  opacity: 1;
}

.menu[open] .menu-col:nth-child(1){ transition-delay: 140ms; }
.menu[open] .menu-col:nth-child(2){ transition-delay: 200ms; }
.menu[open] .menu-col:nth-child(3){ transition-delay: 260ms; }
.menu[open] .menu-col:nth-child(4){ transition-delay: 320ms; }

/* underline elegante + hover */
.menu-col__link,
.menu__social-link,
.menu__contacts{
  position: relative;
  text-decoration: none;
}

/* linea */
.menu-col__link::after,
.menu__social-link::after,
.menu__contacts::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;

  /* se vuoi effetto “oro” al posto del bianco:
     background: rgba(198,165,91,.85); */
  background: rgba(255,255,255,.68);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
  opacity: .90;
}

.menu-col__link{
  transition: transform 220ms ease, color 220ms ease;
}

.menu-col__link:hover,
.menu__social-link:hover{
  color: rgba(255,255,255,.95);
}

.menu-col__link:hover::after,
.menu__social-link:hover::after,
.menu__contacts:hover::after{
  transform: scaleX(1);
}

.menu-col__link:hover{
  transform: translateX(2px);
}

/* tasto X premium */
.menu[open] > summary{
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.menu[open] > summary:hover{
  background: rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.20);
  transform: translateY(-1px);
}

/* watermark fade */
.menu__panel::before{
  transition: opacity calc(var(--menu-anim-ms) + 200ms) ease;
}
.menu[open] .menu__panel::before{
  opacity: .07;
}

/* =========================
   CHIUSURA ANIMATA (JS)
========================= */
.menu__panel.is-closing{
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  pointer-events: none !important;
}

/* durante closing, fai rientrare anche il contenuto */
.menu__panel.is-closing .menu__inner{
  opacity: 0 !important;
  transform: translateY(18px) !important;
}

/* (opzionale) disattiva lo stagger in chiusura per evitare “salti” */
.menu__panel.is-closing .menu-col{
  transition-delay: 0ms !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .menu__panel,
  .menu__inner,
  .menu__brand-logo,
  .menu-col,
  .menu-col__link,
  .menu-col__link::after,
  .menu__social-link::after,
  .menu__contacts::after{
    transition: none !important;
  }
}