:root{
  /* metriche */
  --sum-icon-w:12px;
  --sum-gap:12px;

  --outer-pad: clamp(30px, 5vw, 60px);
  --menu-size:12px;
  --logo-h:22px;
  --line-h:18px;
  --pad-top:45px;
  --pad-btm:25px;
  --gap-left:32px;
  --gap-right:32px;
  --gap-around-logo:64px;
  --divider:#e6e6e6;
  --text:#111;
  --rowY:14px;
  --dd-head-gap:6px;
  --dd-item-gap:0px;
  --dd-item-line:1.32;

  /* dropdown desktop */
  --dd-overlap:20px;   /* il pannello “entra” sotto l’header (anti-gap) */
}

/* reset minimi */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html { overflow-y: scroll; }
body{font:400 12px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif; color:var(--text)}
a{color:inherit; text-decoration:none}

/* HEADER */
.site-header{ position:sticky; top:0; background:#fff; z-index:2000; transform: translateZ(0); /* micro-fix sticky Safari */ }
.hdr{
  width:100%;
  padding:var(--pad-top) var(--outer-pad) var(--pad-btm);
  display:grid;
  grid-template-columns:1fr var(--gap-around-logo) auto var(--gap-around-logo) 1fr;
  align-items:center;
  position:relative;            /* ⬅️ i dropdown si ancorano qui */
  z-index:2000; overflow:visible;
}

/* nav + logo */
.nav{display:flex; align-items:center; white-space:nowrap; font-size:var(--menu-size)}
.nav-left{grid-column:1; gap:var(--gap-left); justify-content:flex-start}
.nav-right{grid-column:5; gap:var(--gap-right); justify-content:flex-end}
.brand{ grid-column:3; display:flex; justify-content:center; align-items:center; position:relative; z-index:2002; }

/* Il logo NON cambia mai dimensione */
.brand img{ height: var(--logo-h) !important; width:auto; display:block }

/* wrapper voce top */
.nav .nav-item{
  position:static;              /* ⬅️ NON posizionato */
  display:inline-flex; align-items:center;
}

/* voce top — tecnica ghost via pseudo-elemento */
.link{ display:inline-grid; align-items:center; height:var(--line-h) }
.link::after{
  grid-area:1/1;
  content: attr(data-text);
  font-weight:700;
  visibility:hidden; pointer-events:none; white-space:nowrap;
}
.link .label{ grid-area:1/1; font-weight:400; white-space:nowrap }
.link:hover .label{ font-weight:700 }

/* =============== */
/* DROPDOWN DESKTOP */
/* =============== */
.dropdown{
  position:absolute; left:0; right:0;            /* ancorato alla .hdr */
  top: calc(100% - var(--dd-overlap));
  padding: var(--dd-overlap) var(--outer-pad) 0;  /* sovrappone 20px all’header */
  display:none; background:#fff; z-index:1201;
  overflow-y: visible;
  overflow-x: hidden;           /* nessuna scrollbar orizzontale a livello pagina */
  max-width: 100vw;
}

/* Dropdown: consenti il wrap del testo (la .nav usa nowrap) */
.dropdown,
.dropdown h4,
.dropdown .label{
  white-space: normal;
}

/* Facoltativo: spezza parole molto lunghe se necessario */
.dropdown .label{ overflow-wrap: anywhere; }


/* APERTURA STABILE: si controlla con .open sul wrapper */
.nav-item.has-dd > .dropdown{ display:none; }
.nav-item.has-dd.open > .dropdown{ display:block; }

/* Linea grigia FULLSCREEN esattamente sul bordo inferiore del dropdown */
.dropdown::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);   /* centra sulla viewport */
  width:100vw;                  /* fallback */
  width:100dvw;                 /* viewport “dinamica” → niente scrollbar gap */
  height:1px;
  background:var(--divider);
  pointer-events:none;
  z-index:2;
}

/* griglia interna */
.dropdown .guide{width:100%; margin:0}
.dropdown .inner{
  padding:16px 0 18px;
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap:64px; /* desktop: 64px (preferenza) */
  align-items:start;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dropdown .inner::-webkit-scrollbar{ display:none; }
.dropdown h4{margin:0 0 var(--dd-head-gap); font-weight:700; line-height:1.2}
.dropdown ul{margin:0; padding:0; list-style:none}
.dropdown li{margin:0; padding:0}

/* sottovoci — tecnica ghost via pseudo-elemento */
.dropdown li a{ display:inline-grid; line-height:var(--dd-item-line); padding:0 }
.dd-link{ display:inline-grid; grid-template-areas:"x"; position:relative; }
.dd-link::after{
  grid-area:x;
  content: attr(data-text);
  font-weight:700;
  visibility:hidden; pointer-events:none;
  line-height: var(--line-h);
}
.dd-link .label{ grid-area:x; font-weight:400; line-height:var(--line-h) }
.dd-link:hover .label{ font-weight:700 }

/* hit-area confortevole */
.dd-link::before{
  content:""; position:absolute; left:-12px; right:-12px; top:-6px; bottom:-6px; pointer-events:auto;
}

/* spaziatura verticale tra item del dropdown */
.dropdown li + li{margin-top:var(--dd-item-gap)}

/* ============= */
/* MOBILE ≤ 1024 */
/* ============= */
.mobile-trigger{
  display:none; grid-column:3; justify-content:center;
  margin:22px auto 0; background:transparent; border:0; padding:0; cursor:pointer; -webkit-appearance:none;
  position:relative; z-index:2002;
}
.icon-min{position:relative; width:22px; height:16px; display:block}
.icon-min span{position:absolute; left:0; right:0; height:1px; background:#111; transition:transform .44s ease, top .44s ease, bottom .44s ease, opacity .28s ease}
.icon-min .l1{top:2px}
.icon-min .l2{bottom:2px}
.mobile-trigger.open .icon-min .l1{top:7.5px; transform:rotate(45deg)}
.mobile-trigger.open .icon-min .l2{bottom:7.5px; transform:rotate(-45deg)}

.menu-overlay{
  position:fixed; inset:0; background:#fff; display:none;
  z-index:1900; padding: calc(var(--headerH, 0px) + 14px) var(--outer-pad) 24px;
  overflow:auto; overscroll-behavior:contain;
}
.menu-grid{max-width:720px; margin:0 auto; text-align:left}
details{margin:0; padding:0}
.lvl1,.lvl2,.lvl3{list-style:none; padding:0; margin:0}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
.sum{
  position:relative; display:block;
  padding:var(--rowY) calc(var(--sum-gap) + var(--sum-icon-w) + 12px) var(--rowY) 20px;
  text-align:left; cursor:pointer; user-select:none;
}
summary .sum::before,
summary .sum::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  right:var(--sum-gap); pointer-events:none; background:currentColor;
  transition:transform .36s ease, opacity .36s ease;
}
summary .sum::before{width:var(--sum-icon-w); height:1px}
summary .sum::after{width:1px; height:var(--sum-icon-w); right:calc(var(--sum-gap) + (var(--sum-icon-w)/2) - 0.5px)}
details[open] > summary .sum::after{ transform:translateY(-50%) scaleY(0.05); opacity:0 }

/* --- FIX: icona +/− immediata in chiusura (responsive menu) --- */
/* Stato "−": segue SUBITO la classe .open sul summary */
.menu-overlay details > summary.open .sum::after{
  transform: translateY(-50%) scaleY(0.05);
  opacity: 0;
}
/* Durante la chiusura: il details è ancora [open] ma il summary NON ha .open.
   Riporta SUBITO il “+” senza aspettare la fine dell’animazione del pannello. */
.menu-overlay details[open] > summary:not(.open) .sum::after{
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}

.lvl2,.lvl3{padding-bottom:0}
.lvl2 li,.lvl3 li{padding:4px 0}
.lvl3 li a{display:inline-block; padding:6px 0}

/* Accordion responsive affidabile */
.menu-overlay details > *:not(summary){
  overflow:hidden; height:0; transition:height .36s ease; will-change:height;
}
@media (prefers-reduced-motion: reduce){
  .menu-overlay details > *:not(summary){ transition:none; }
}

/* Responsive layout */
@media (max-width:1024px){
  .nav-left, .nav-right{ display:none; }
  .mobile-trigger{ display:inline-block; }
  .hdr{ padding-bottom:16px; display:block; text-align:center; } /* fix: pb mobile 32px */
  .brand{ display:block; margin:0 auto; }
  .brand img{ display:inline-block; }

  /* compattazione overlay */
  .menu-overlay{ --sum-gap: 8px; }
  .menu-overlay .sum{
    padding: var(--rowY) calc(var(--sum-gap) + var(--sum-icon-w) + 6px) var(--rowY) 12px;
  }
  .menu-overlay .lvl2{ margin-left:12px; }
  .menu-overlay .lvl3{ margin-left:22px; }
}

/* Spazio dedicato tra "Scritti" e "Studio" nel menu responsive */
@media (max-width:1024px){
  .menu-overlay .lvl1 > li.space-top{
    margin-top: clamp(18px, 4vw, 32px);
  }
}

/* accessibilità / tocchi */
*,*::before,*::after{-webkit-tap-highlight-color:transparent}

/* === Fallback apert. desktop anche SOLO con :hover (oltre alla classe .open) === */
@media (hover:hover){
  .nav-item.has-dd:hover > .dropdown{ display:block; }
}

/* === Overlay mobile pilotato da aria-hidden (JS lo imposta) === */
.menu-overlay[aria-hidden="true"]{ display:none; }
.menu-overlay[aria-hidden="false"]{ display:block; }

/* ===== SQUEEZE DESKTOP (entra su 13") senza ridurre logo o font ===== */
@media (min-width:1025px){
  /* Le colonne laterali possono stringersi; il logo resta al centro */
  .hdr{
    grid-template-columns:
      minmax(0,1fr)
      clamp(16px, 4vw, var(--gap-around-logo))   /* spazio a sinistra del logo */
      auto                                        /* logo */
      clamp(16px, 4vw, var(--gap-around-logo))   /* spazio a destra del logo */
      minmax(0,1fr) !important;

    /* padding orizzontale coerente: mai sotto 30px */
    padding-left:  var(--outer-pad) !important;
    padding-right: var(--outer-pad) !important;
  }

  /* Stringi SOLO il gap tra le voci (non tocchi logo o font) */
  .nav-left { gap: clamp(10px, 3.6vw, var(--gap-left))  !important; }
  .nav-right{ gap: clamp(10px, 3.6vw, var(--gap-right)) !important; }

  /* Impedisci che le nav “spingano” oltre la loro colonna */
  .nav, .nav-left, .nav-right{ min-width: 0; }
}

/* ===== DESKTOP A DUE STATI (normale >1280px, compatto 1025–1280px) ===== */

/* Stato COMPATTO: entra tutto su 13" senza invadere il logo */
@media (max-width:1280px) and (min-width:1025px){
  /* griglia: stringi SOLO lo spazio ai lati del logo (logo invariato) */
  .hdr{
    grid-template-columns:
      minmax(0,1fr)  /* colonna sx comprimibile */
      24px           /* spazio a sx del logo */
      auto           /* logo */
      24px           /* spazio a dx del logo */
      minmax(0,1fr) !important; /* colonna dx comprimibile */

    /* padding orizzontale coerente: mai sotto 30px (già gestito da --outer-pad) */
    padding-left:  var(--outer-pad) !important;
    padding-right: var(--outer-pad) !important;
  }

  /* voci: riduci lo spazio VUOTO tra le voci (non tocchi font/size) */
  .nav-left { gap: 14px !important; min-width:0; }
  .nav-right{ gap: 14px !important; min-width:0; }
  .nav{ min-width:0; }

  /* dropdown: riduci lo spazio tra le micro-categorie (colonne) */
  .dropdown .inner{ column-gap: 32px !important; }
}

/* === Attivi: sempre cliccabili, NESSUN bold fisso === */
.link.is-active{ cursor: pointer; }
.link.is-active .label{ font-weight: 400; }

.dd-link.is-active{ cursor: pointer; }
.dd-link.is-active .label{ font-weight: 400; }

/* Hover bold anche sugli attivi (top menu + dropdown) */
.link.is-active:hover .label,
.dd-link.is-active:hover .label{
  font-weight: 700;
}