/* ==========================================================================
   SOTTOMODA — Reset, tipografia, griglia
   Regola iOS: nessun antenato degli elementi sticky usa overflow: hidden.
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--c-nero);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--c-nero);
  color: var(--c-rosa);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Blocco scroll del menu, compatibile con iOS: vedi js/main.js */
body.is-locked {
  position: fixed;
  top: var(--lock-top, 0);
  left: 0;
  width: 100%;
}

h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---- iOS Safari ---- */
/* Bottoni senza l'aspetto di sistema (bordi arrotondati, gradiente) */
button, input[type="email"], input[type="text"], input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
/* Tocchi immediati: niente attesa del doppio tocco né zoom accidentale */
a, button, input, label, select, textarea, summary { touch-action: manipulation; }
/* iOS sbiadisce i bottoni disabilitati: qui il colore lo decide il CSS */
button:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
[hidden] { display: none !important; }

/* ---- Focus: arancio ovunque, rosa nei blocchi verdi ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-attivo);
  outline-offset: 3px;
}

/* ---- Tipografia condivisa ---- */
.display {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Griglia a 12 colonne ---- */
.wrap {
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

/* Sonda invisibile: misura 100svh per il JS senza dipendere dalla barra di Safari */
.svh-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: calc(var(--svh) * 100);
  visibility: hidden;
  pointer-events: none;
}

/* Sprite SVG nascosto */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
}

/* Ancore: non finire sotto l'header fisso */
[id] { scroll-margin-top: calc(var(--header-total) + 16px); }