/* =============================================================
   comune.css — testata, menu e footer identici alla home
   ============================================================= */
html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
section[id], [id]{ scroll-margin-top:5.5rem; }

:root{
  --sabbia:#D8CEBE; --sabbia-alta:#E6DFD3; --notte:#14181D; --notte-alta:#1E242B;
  --osso:#F2EEE7; --plastilina:#D9481E; --grigio:#7B7568; --inchiostro:#14181D;
  --f-display:"Archivo",system-ui,sans-serif; --f-testo:"Archivo",system-ui,sans-serif;
  --f-dato:"Martian Mono",ui-monospace,monospace;
  --gutter:clamp(1.25rem,4vw,4.5rem); --max:1560px;
}
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }

.testata{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem var(--gutter); color:var(--osso);
  transition:background .35s ease, padding .35s ease;
}
.testata.compatta{
  background:color-mix(in srgb, var(--notte) 88%, transparent);
  backdrop-filter:blur(14px); padding-block:.7rem;
}
.marchio{
  font-family:var(--f-display); font-weight:700; font-stretch:118%;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; line-height:1; color:inherit;
}

.testata-dx{ display:flex; align-items:center; gap:clamp(.75rem,2vw,1.75rem); }
.lingue{ display:flex; gap:.4rem; font-family:var(--f-dato); font-size:.62rem; letter-spacing:.1em; }
.lingue a{ padding:.3rem .45rem; opacity:.5; border-bottom:1px solid transparent; text-decoration:none; color:inherit; }
.lingue a[aria-current="true"]{ opacity:1; border-bottom-color:var(--plastilina); }
.apri-menu{
  display:flex; align-items:center; gap:.6rem; background:none; border:0; color:inherit; cursor:pointer;
  font-family:var(--f-dato); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
}

/* ---- testata: social sempre in vista, una sola lingua ---- */

/* il marchio: il logotipo ufficiale al posto del nome composto */
.marchio{ display:inline-flex; align-items:center; line-height:0; }
.marchio-segno{ display:block; width:auto; height:clamp(13px,1.5vw,18px); color:currentColor; }
.testata.compatta .marchio-segno{ height:clamp(12px,1.3vw,15px); }
@media(max-width:620px){ .marchio-segno{ height:12px; } }
/* con l'ala sopra la I il segno è più alto: lo dimensiono sul totale,
   così le lettere restano grandi come prima */
.marchio-segno.con-ala{ height:clamp(24px,2.7vw,32px); }
.testata.compatta .marchio-segno.con-ala{ height:clamp(21px,2.3vw,27px); }
@media(max-width:620px){ .marchio-segno.con-ala{ height:22px; } }

/* il lettering nel piede, senza sottotitolo */
.piede h2.piede-lettering{ margin:0; line-height:0; font-size:inherit; }
.piede-segno{ display:block; width:clamp(11rem,22vw,17rem); height:auto; color:var(--osso); }
.piede-segno path:nth-child(-n+2){ fill:var(--plastilina); }
.solo-lettori{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* il lettering nome+cognome con l'ala: due righe, quindi più alto */
.marchio-segno.combo{ height:clamp(38px,3.6vw,50px); }
.testata.compatta .marchio-segno.combo{ height:clamp(32px,3vw,40px); }
@media(max-width:620px){ .marchio-segno.combo{ height:36px; } .testata.compatta .marchio-segno.combo{ height:32px; } }



.testata-social{ display:flex; align-items:center; gap:clamp(.5rem,1.4vw,.9rem); margin-left:auto; margin-right:clamp(.7rem,2vw,1.4rem); }
.testata-social a{ display:block; width:18px; height:18px; color:currentColor; opacity:.7; transition:opacity .25s, color .25s; }
.testata-social a:hover{ opacity:1; color:var(--plastilina); }
.testata-social svg{ width:100%; height:100%; fill:currentColor; stroke:none; display:block; }
.lingue button[aria-pressed="true"], .lingue a[aria-current="true"]{ display:none; }
.lingua-altra{ font-family:var(--f-dato); font-size:.62rem; letter-spacing:.1em; text-decoration:none; color:inherit; opacity:.7; }
.lingua-altra:hover{ opacity:1; color:var(--plastilina); }
@media(max-width:620px){
  .testata-social a{ width:17px; height:17px; }
  .testata-social{ gap:.55rem; margin-right:.7rem; }
}
.apri-menu i{ display:block; width:26px; height:9px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; }

.menu{
  position:fixed; inset:0; z-index:70; background:var(--notte); color:var(--osso);
  display:grid; grid-template-rows:auto 1fr auto; padding:1.1rem var(--gutter) var(--gutter);
  clip-path:inset(0 0 100% 0); transition:clip-path .6s cubic-bezier(.7,0,.2,1); overflow-y:auto;
}
.menu[data-aperto="1"]{ clip-path:inset(0 0 0 0); }
.menu-testa{ display:flex; justify-content:space-between; align-items:center; }
.menu-voci{ list-style:none; margin:auto 0; padding:0; display:grid; gap:.15rem; }
.menu-voci a{
  text-decoration:none; display:flex; align-items:baseline; gap:1rem; color:inherit;
  font-family:var(--f-display); font-weight:600; font-stretch:110%;
  font-size:clamp(1.6rem,5.2vw,3.1rem); line-height:1.12; letter-spacing:-.02em;
  opacity:.62; transition:opacity .25s, color .25s;
}
.menu-voci a:hover,.menu-voci a:focus-visible{ opacity:1; color:var(--plastilina); }
.menu-voci em{ font-family:var(--f-dato); font-style:normal; font-size:.6rem; opacity:.45; letter-spacing:.1em; }
.menu-piede{ display:flex; flex-wrap:wrap; gap:1.2rem; font-family:var(--f-dato); font-size:.62rem; letter-spacing:.1em; opacity:.6; }
.menu-piede a{ text-decoration:none; color:inherit; }

.piede{ background:var(--notte); color:var(--osso); padding-block:clamp(3.5rem,7vw,6rem) 2rem; }
.piede-alto{ display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:start; }
@media(min-width:900px){ .piede-alto{ grid-template-columns:1.4fr .8fr .8fr; } }
.piede h2{ font-family:var(--f-display); font-weight:700; font-stretch:120%; text-transform:uppercase;
  font-size:clamp(2rem,6vw,4.4rem); line-height:.9; letter-spacing:-.04em; margin:0; }
.piede .occhiello-nota{ max-width:46ch; color:#9AA2AC; margin:1.1rem 0 0; }
.piede-col h3{ font-family:var(--f-dato); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.5; margin:0 0 1rem; font-weight:400; }
.piede-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.piede-col a{ text-decoration:none; opacity:.75; font-size:.92rem; color:inherit; }
.piede-col a:hover{ opacity:1; color:var(--plastilina); }
.piede-basso{
  margin-top:clamp(3rem,6vw,5rem); padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb,var(--osso) 16%,transparent);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-family:var(--f-dato); font-size:.56rem; letter-spacing:.1em; opacity:.45;
}
.piede-basso a{ text-decoration:none; color:inherit; }
.azioni{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.bottone{ display:inline-flex; align-items:center; gap:.7rem; padding:.95rem 1.5rem; text-decoration:none;
  font-family:var(--f-dato); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--plastilina); color:var(--osso); transition:background .25s; }
.bottone.vuoto{ background:none; border:1px solid color-mix(in srgb,currentColor 35%,transparent); color:inherit; }
.bottone.vuoto:hover{ border-color:currentColor; }


/* la firma di Web Athletics nel piede */
.firma-wa{ display:inline-flex; align-items:center; opacity:.55; transition:opacity .25s; }
.firma-wa:hover{ opacity:1; }
.firma-wa img{ display:block; height:17px; width:auto; }