/* ===================== HEADER ===================== */
    .site-header{
      position:fixed; inset:0 0 auto 0; height:var(--header-h);
      display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
      padding:0 18px; z-index:10;
      background:transparent;
      border-bottom:0 solid rgba(255,255,255,.06);
      transition:background .25s ease, transform .25s ease;
    }
    .site-header.scrolled{ background:rgba(0,0,0,.88); border-bottom-color:rgba(255,255,255,.08) }
    .site-header.hidden{ transform:translateY(-100%) }

    .logo{ justify-self:center; display:inline-flex; align-items:center; text-decoration:none; color:var(--text) }
    .logo img{ height:80px; width:auto; display:block }

    .header-right{ justify-self:end; position:relative }

    /* === Menu button minimal (solo linee con hover) === */
    .menu-btn{
      display:inline-flex; align-items:center; justify-content:center;
      width:40px; height:40px; background:transparent; border:none; cursor:pointer; color:var(--text);
      transition:color .2s ease;
    }
    .menu-icon{ position:relative; width:22px; height:14px }
    .menu-icon span{
      position:absolute; left:0; height:2px; background:currentColor; border-radius:2px; transition:background .2s ease
    }
    .menu-btn:hover .menu-icon span{ background:var(--hover-gray) }
    .menu-icon span:nth-child(1){ top:0;  width:22px }
    .menu-icon span:nth-child(2){ top:6px; width:18px }
    .menu-icon span:nth-child(3){ top:12px; width:14px }

    /* === Off-canvas panel right === */
    .menu-backdrop{
      position:fixed; inset:0; background:rgba(0,0,0,.55);
      opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:19;
    }
    .menu-backdrop.open{ opacity:1; pointer-events:auto }

    .menu-panel{
      position:fixed; top:0; right:0; height:100vh;
      width:clamp(820px, 45vw, 960px);
      background:var(--panel); color:#111; z-index:20;
      transform:translateX(100%); transition:transform .3s ease;
    }
    .menu-panel.open{ transform:translateX(0) }
    .menu-panel__inner{ padding:28px 28px 24px 32px; display:flex; flex-direction:column; height:100% }

    .menu-close{
      margin-left:auto; width:45px; height:45px; background:transparent; border:none; cursor:pointer;
      display:flex; align-items:center; justify-content:center; color:#111; transition:color .2s ease;
    }
    .menu-close:hover svg{ stroke:rgb(255, 255, 255) }
    .menu-list{ display:grid; gap:10px; margin:24px 0 0; padding:0; list-style:none }
    .menu-list a{ display:block; padding:10px 6px; text-decoration:none; color:#111; font-weight:700; letter-spacing:.02em; font-size:1.2rem; }
    .menu-list a:hover{ opacity:1 ; color: white}
    .menu-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:0.95rem }

    /* submenu container */
/* SUBMENU: default CLOSED */
.menu-item.has-sub .menu-sub{
  display: none;
}

/* SUBMENU: open */
.menu-item.has-sub.open .menu-sub{
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 4px 0 8px;
  padding: 0 0 0 14px;
}

/* button style (come link) */
.menu-subbtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 6px;
  background:transparent;
  border:none;
  cursor:pointer;

  color:#111;
  font-weight:700;
  letter-spacing:.02em;
  font-size:1.2rem;
  text-align:left;
}
.menu-subbtn:hover{ color:#fff; }

/* chevron rotate */
.menu-subbtn .chev{
  display:inline-flex;
  transition: transform .2s ease;
}
.menu-item.has-sub.open .menu-subbtn .chev{ transform: rotate(180deg); }

/* sub links */
.menu-sub a{
  display:block;
  padding:8px 6px;
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.02em;
  color: rgba(17,17,17,.92);
  opacity:.95;
}
.menu-sub a:hover{ color:#fff; opacity:1; }

.chev img{
  width:18px;
  height:18px;
  display:block;
}
/* quando hover sul bottone, cambia anche l’icona */
.menu-subbtn:hover .chev img{
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(1); /* diventa bianca */
}

/* quando è OPEN (chevron ruotata), stessa cosa */
.menu-item.has-sub.open .menu-subbtn{ color:#fff; }
.menu-item.has-sub.open .chev img{
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(1);
}