/* ============================================================================
   BASE — il pavimento tecnico
   ----------------------------------------------------------------------------
   Qui c'è solo quello che deve valere identico in OGNI bozza: reset,
   accessibilità, tipografia di partenza, due contenitori. Nessuna decisione
   di design: niente stili di card, di hero, di sezione.

   Il CSS del sito si scrive in `site.css`, non qui. Questo file si estende
   solo se si scopre che manca un pezzo di pavimento a tutte le bozze.
   ========================================================================= */

/* ——— Reset —————————————————————————————————————————————————————————————— */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Lo scroll fluido lo gestisce Lenis (app.js): senza questo si accavallano. */
  scroll-behavior: auto;
}

body {
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--t-corpo);
  line-height: var(--interlinea);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* ——— Tipografia di partenza ————————————————————————————————————————————— */

h1,
h2,
h3,
h4 {
  font-family: var(--font-titoli);
  line-height: var(--interlinea-titoli);
  letter-spacing: var(--spaziatura-titoli);
  text-wrap: balance;
  font-weight: 600;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

/* `* { margin: 0 }` sopra azzera anche i titoli: senza questo, un h2 seguito
   da un paragrafo li rende visivamente incollati — scoperto a schermo, non è
   un dettaglio. In un contenitore flex/grid con `gap` proprio, sovrascrivi
   punto per punto (`h3 { margin-bottom: 0 }`), non è la norma. */
h1,
h2,
h3,
h4 {
  margin-bottom: var(--spazio-blocco);
}

p,
li {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Ogni <ul>/<ol> di navigazione o struttura porta `role="list"` (i browser
   tolgono la semantica di lista quando si toglie list-style, role="list" la
   restituisce agli screen reader). Senza questo reset i pallini di default
   del browser spuntano ovunque — nell'header, nel menu mobile, in ogni
   elenco — anche dove nel design non c'è nessun elenco puntato. */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

/* ——— Accessibilità ——————————————————————————————————————————————————————
   Non negoziabile: il focus da tastiera deve restare visibile ovunque, e il
   salto al contenuto deve funzionare. Si può cambiare l'aspetto, non
   togliere. */

:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
  border-radius: 2px;
}

.salta-al-contenuto {
  position: absolute;
  left: var(--gronda);
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--accento);
  color: var(--su-accento);
  transform: translateY(-120%);
  transition: transform var(--durata-breve) var(--curva);
}

.salta-al-contenuto:focus-visible {
  transform: translateY(0);
}

/* Nasconde all'occhio ma non allo screen reader. */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ——— Contenitori ————————————————————————————————————————————————————————
   Due soli, di proposito. Il resto delle griglie si scrive per questo sito. */

.u-contenitore {
  width: 100%;
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--gronda);
}

.u-lettura {
  max-width: var(--larghezza-lettura);
}

/* Per una frase isolata che è metadato, non corpo del testo — "prezzi su
   richiesta", "check-in dalle 15", un disclaimer breve. Un pallino sospeso
   davanti a una frase qualunque, senza contenitore né tipografia diversa dal
   corpo, si legge come un elenco puntato lasciato a metà: scoperto a
   schermo, non è un dettaglio. Un vero chip — sfondo, raggio coerente con la
   forma assegnata, corpo più piccolo — si legge come nota di design apposta,
   non come markup dimenticato. Il pallino resta `aria-hidden`: la nota deve
   avere senso anche senza.

   Sfondo su `currentColor`, non su `--fondo-alt`: `--fondo-alt` in questo
   sistema può essere la sezione scura dell'alternanza (vedi RESPIRO in
   tokens.css), quindi non è garantito chiaro. Un colore fisso qui poteva
   uscire testo scuro su fondo scuro — successo davvero, 2,2:1 di contrasto
   invece del 4,5:1 minimo. `currentColor` eredita il colore già corretto
   della sezione che lo ospita, chiara o scura che sia: zero rischio. */
.u-nota {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--raggio-interattivo);
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: var(--t-piccolo);
}

.u-nota::before {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accento);
}

.u-sezione {
  padding-block: var(--spazio-sezione);
}

.u-sezione--fitta {
  padding-block: calc(var(--spazio-sezione) * 0.45);
}

/* Qualunque sezione con un id (le ancore del menu) non deve atterrare sotto
   l'header sticky: --altezza-header la scrive app.js a runtime, letta
   dall'header vero di QUESTO sito. Vale sia per il click sull'ancora sia per
   un salto nativo del browser (focus da tastiera, link diretto con #hash). */
[id] {
  scroll-margin-top: var(--altezza-header, 0px);
}

/* ——— Movimento ——————————————————————————————————————————————————————————
   Stato di partenza dei reveal: nascosto SOLO se il JS è vivo e il movimento
   è consentito (`html.js-movimento`, messa da app.js). Senza questa guardia,
   un errore di sintassi nel JS lascerebbe la pagina bianca invece che
   semplicemente senza animazioni. */

.js-movimento [data-reveal]:not(.e-rivelato) {
  opacity: 0;
  transform: translateY(1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Il contenuto resta visibile: senza questa riga, chi ha il movimento
     ridotto vedrebbe una pagina vuota. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Lenis: obbligatorio finché app.js lo inizializza. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}