/* Menu principale — livello "Argomenti" (mega a colonne) + comportamento mobile
   Foglio autonomo: molte pagine hanno il CSS inline, questo e' l'unico punto
   in cui vivono le regole del nuovo livello di menu. */

/* --- trigger "Argomenti": stessa resa delle altre voci, ma e' un <button> --- */
nav.main > .item.arg { position: static; }

nav.main > .item.arg > .arg-trigger{
  display:flex;align-items:center;gap:6px;
  padding:14px 12px;margin:0;
  background:none;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:.94rem;
  color:var(--navy,#16283c);line-height:1.2
}
nav.main > .item.arg > .arg-trigger:hover,
nav.main > .item.arg:hover > .arg-trigger,
nav.main > .item.arg:focus-within > .arg-trigger{ color:var(--rosso,#d8232a); }
nav.main > .item.arg > .arg-trigger:focus-visible{ outline:3px solid var(--rosso,#d8232a);outline-offset:-3px;border-radius:6px }

.arg-chev{width:11px;height:11px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
nav.main > .item.arg:hover .arg-chev,
nav.main > .item.arg:focus-within .arg-chev{transform:rotate(180deg)}

/* --- il pannello largo: ancorato all'header, non alla singola voce --- */
.mega-wide{
  left:50%;right:auto;transform:translateX(-50%);
  width:min(1120px,calc(100vw - 28px));
  min-width:0;padding:22px 24px;border-radius:0 0 14px 14px
}
nav.main > .item.arg:focus-within .mega-wide{display:block}

.mega-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 26px}
.mega-col{min-width:0}

.mega-h{
  display:block;padding:0 0 8px;margin:0 0 8px;
  border-bottom:2px solid var(--rosso,#d8232a);
  font-family:"Roboto Slab",Georgia,serif;font-size:.98rem;font-weight:700;
  color:var(--navy,#16283c);border-radius:0
}
.mega-h:hover{background:none;color:var(--rosso,#d8232a);text-decoration:none}
.mega-col a:not(.mega-h){font-size:.875rem;font-weight:600;padding:6px 8px}

/* --- mobile: il menu diventa un pannello a discesa sotto l'header --- */
@media(max-width:960px){
  nav.main{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-top:1px solid var(--linea,#e2e8ee);
    box-shadow:0 20px 40px rgba(16,40,60,.16);
    padding:8px 16px 20px;margin:0;
    max-height:calc(100vh - 100%);overflow-y:auto;-webkit-overflow-scrolling:touch
  }
  nav.main.open{display:flex}

  nav.main > .item,nav.main > .item.arg{position:static;border-bottom:1px solid var(--linea,#e2e8ee)}
  nav.main > .item:last-of-type{border-bottom:0}
  nav.main > .item > a,nav.main > .item.arg > .arg-trigger{padding:13px 4px;width:100%}
  .arg-chev{display:none}

  /* niente hover su touch: i sottomenu restano aperti, il pannello scorre */
  .mega,.mega-wide{
    display:block;position:static;transform:none;width:auto;
    border:0;box-shadow:none;padding:0 0 10px 10px;background:transparent
  }
  .mega-cols{grid-template-columns:1fr;gap:14px}
  .mega-h{border-bottom-width:1px;padding-bottom:5px;margin-bottom:4px}
  .mega a{padding:7px 6px;font-size:.88rem}
}

@media(prefers-reduced-motion:reduce){.arg-chev{transition:none}}