/* public/assets/css/base.css | 2026-10-24 | V.1.0 */
/* =============================================================================
   BLOCCO: Base (reset leggero, tipografia, contenitori, sezioni, griglie)

   Scopo:       Regole generali, scritte MOBILE-FIRST: nessuna media query per
                il telefono, poi solo @media (min-width: 640px / 1024px).
   Vincoli:     Mai @media (max-width). Testo base 18px su mobile, 16px da 1024.
                Touch target >= 48px (vedi componenti.css).
   Dipendenze:  token.css
   NON FARE:    Terzo breakpoint, larghezze fisse in px sui blocchi di testo.
   ============================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px; /* le ancore non finiscono sotto la testata fissa */
}

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: 1.125rem;        /* 18px su mobile */
  line-height: 1.6;
  color: var(--testo);
  background: var(--fondo);
  padding-bottom: calc(var(--barra-azione-h) + env(safe-area-inset-bottom));
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}
h1 { font-size: 1.9rem; font-weight: 800; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible { outline: none; box-shadow: var(--fuoco); border-radius: 4px; }

.lead { font-size: 1.15rem; color: var(--testo-2); max-width: 46em; }

.occhiello {
  font-family: var(--font-titoli);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rosso-700);
  margin-bottom: 0.5rem;
}

.visivamente-nascosto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.salta {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 1000;
  padding: 12px 16px;
  background: var(--nero);
  color: var(--bianco);
  border-radius: var(--raggio);
}
.salta:focus { top: 8px; }

/* Contenitori */
.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 var(--margine);
}
.contenitore--testo { max-width: var(--larghezza-testo); }

/* Sezioni */
.sezione { padding: 40px 0; }
.sezione--stretta { padding-top: 8px; }
.sezione--alt { background: var(--fondo-alt); }
.sezione--testata { padding: 24px 0 16px; }

/* Griglie: una colonna su mobile */
.griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Testo lungo da Markdown */
.testo { overflow-wrap: break-word; }
.testo h2 { margin-top: 2rem; font-size: 1.3rem; }
.testo h3 { margin-top: 1.5rem; font-size: 1.1rem; }
.testo ul, .testo ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.testo li { margin-bottom: 0.4rem; }
.testo table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 1rem; display: block; overflow-x: auto; }
.testo th, .testo td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.testo > :first-child { margin-top: 0; }

@media (min-width: 640px) {
  :root { --margine: 24px; }
  h1 { font-size: 2.2rem; }
  .sezione { padding: 56px 0; }
  .sezione--testata { padding: 40px 0 24px; }
  .sezione--stretta { padding-top: 8px; }
  .griglia--2,
  .griglia--3 { grid-template-columns: 1fr 1fr; gap: 20px; }
}

@media (min-width: 1024px) {
  :root { --margine: 32px; }
  body { font-size: 1rem; padding-bottom: 0; }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.7rem; }
  .lead { font-size: 1.2rem; }
  .sezione { padding: 80px 0; }
  .sezione--testata { padding: 56px 0 32px; }
  .sezione--stretta { padding-top: 8px; }
  .griglia--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}