/*
 * =====================================================================
 * Bonus Tariflow – Stili Principali (main.css)
 * =====================================================================
 * Progetto   : Landing Page Bonus Tariflow
 * Cliente    : Golem Net SRL SB – Via Monte Napoleone 8, 20121 Milano
 * Creatore   : Francesco Vicari
 * Versione   : 2.0.0
 * Ultima mod.: 2025
 * =====================================================================
 * Struttura:
 *   1. Token di design (variabili CSS)
 *   2. Reset e normalizzazione
 *   3. Tipografia globale
 *   4. Layout e contenitore
 *   5. Utilità trasversali
 *   6. Media query responsive
 * =====================================================================
 */

/* ─────────────────────────────────────────────────────────────────── */
/* 1. TOKEN DI DESIGN                                                   */
/* ─────────────────────────────────────────────────────────────────── */
:root {
  /* Palette colori – derivata dalla brochure e dal logo */
  --c-navy:          #0D1E35;   /* Sfondo scuro (copertina brochure)   */
  --c-navy-m:        #122441;   /* Navy medio per sezioni alternate     */
  --c-navy-l:        #1A3254;   /* Navy chiaro per card su scuro        */
  --c-teal:          #00C4D8;   /* Accento teal (logo "flow")           */
  --c-teal-d:        #00A0B2;   /* Teal scuro per hover                 */
  --c-teal-xs:       rgba(0,196,216,.10); /* Teal trasparente           */
  --c-blu:           #1D6FA4;   /* Blu primario (logo "Tari")           */
  --c-blu-d:         #155A87;   /* Blu scuro per hover                  */
  --c-rosso:         #B01C24;   /* Rosso Golem Net                      */
  --c-rosso-d:       #8A1219;   /* Rosso scuro per hover                */
  --c-testo:         #1A2433;   /* Testo principale su bianco           */
  --c-testo-2:       #4A5E72;   /* Testo secondario / muted             */
  --c-testo-3:       #7A8FA3;   /* Didascalie e label                   */
  --c-sfondo:        #F4F7FB;   /* Sfondo sezioni chiare                */
  --c-bianco:        #FFFFFF;
  --c-bordo:         #DDE4EE;   /* Bordi card e divisori                */
  --c-bordo-scuro:   rgba(255,255,255,.08); /* Bordi su sfondi scuri   */

  /* Ombre */
  --ombra-xs: 0 1px 4px rgba(13,30,53,.06);
  --ombra-s:  0 4px 12px rgba(13,30,53,.08);
  --ombra-m:  0 8px 28px rgba(13,30,53,.12);
  --ombra-l:  0 24px 64px rgba(13,30,53,.16);
  --ombra-teal: 0 12px 40px rgba(0,196,216,.25);
  --ombra-rosso: 0 12px 40px rgba(176,28,36,.35);

  /* Raggi */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;
  --r-xl: 28px;

  /* Tipografia */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-black:   900;

  /* Spaziatura contenitore (max-width 1280px con padding adattivo) */
  --lato: max(1.5rem, calc((100vw - 1280px) / 2 + 2rem));

  /* Altezza navigazione */
  --h-nav: 72px;

  /* Transizioni */
  --t-veloce:  0.18s ease;
  --t-media:   0.30s ease;
  --t-lenta:   0.50s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────────────────────────────────────────────── */
/* 2. RESET E NORMALIZZAZIONE                                           */
/* ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Scorrimento fluido nativo */
  scroll-behavior: smooth;
  /* Dimensione base per calcoli rem */
  font-size: 16px;
  /* Antialiasing testo */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Larghezza scroll bar non sposta il layout */
  scrollbar-gutter: stable;
}

/* Rispetta le preferenze di movimento ridotto dell'utente */
@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;
  }
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-testo);
  background-color: var(--c-bianco);
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* Ridimensionamento SVG icone */
svg { display: block; flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────── */
/* 3. TIPOGRAFIA                                                        */
/* ─────────────────────────────────────────────────────────────────── */

/* Scale tipografica fluida */
.t-display {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: var(--fw-black);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.t-h1 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.t-h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: var(--fw-extra);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.t-h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

.t-lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
  color: var(--c-testo-2);
}

/* Label di sezione (micro-testo sopra il titolo) */
.etichetta-sezione {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-teal);
  margin-bottom: 0.75rem;
}

/* Evidenziazione teal nel testo */
.accento-teal  { color: var(--c-teal); }
.accento-rosso { color: var(--c-rosso); }
.accento-blu   { color: var(--c-blu); }

/* ─────────────────────────────────────────────────────────────────── */
/* 4. LAYOUT E CONTENITORE                                             */
/* ─────────────────────────────────────────────────────────────────── */

/* Wrapper interno alle sezioni – limita la larghezza a 1280px */
.contenitore {
  width: 100%;
  padding-left:  var(--lato);
  padding-right: var(--lato);
}

/* Sezioni standard con padding verticale uniforme */
.sezione {
  padding-top:    96px;
  padding-bottom: 96px;
}

.sezione--compatta {
  padding-top:    64px;
  padding-bottom: 64px;
}

/* Griglie generiche */
.griglia-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.griglia-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.griglia-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* Testa sezione (label + titolo + sottotitolo) */
.testa-sezione {
  margin-bottom: 3.5rem;
}

.testa-sezione--centro {
  text-align: center;
}

.testa-sezione--centro .t-lead {
  max-width: 640px;
  margin: 0.8rem auto 0;
}

/* ─────────────────────────────────────────────────────────────────── */
/* 5. UTILITÀ TRASVERSALI                                              */
/* ─────────────────────────────────────────────────────────────────── */

/* Barra di avanzamento lettura (in cima alla viewport) */
#barra-progresso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-teal), var(--c-blu));
  z-index: 200;
  transition: width 0.1s linear;
}

/* Link "salta al contenuto" per accessibilità da tastiera */
.salta-contenuto {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--c-teal);
  color: var(--c-navy);
  font-weight: var(--fw-bold);
  border-radius: var(--r-m);
  z-index: 9999;
  transition: top var(--t-veloce);
}

.salta-contenuto:focus {
  top: 1rem;
  outline: 3px solid var(--c-bianco);
  outline-offset: 2px;
}

/* Focus visibile su tutti gli elementi interattivi */
:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────── */
/* 6. RESPONSIVE                                                        */
/* ─────────────────────────────────────────────────────────────────── */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  .griglia-2 { gap: 3rem; }
  .griglia-3 { grid-template-columns: repeat(2, 1fr); }
  .griglia-4 { grid-template-columns: repeat(2, 1fr); }
  .sezione { padding-top: 80px; padding-bottom: 80px; }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  .griglia-2 { grid-template-columns: 1fr; gap: 2.5rem; }
  .griglia-3 { grid-template-columns: 1fr; }
  .griglia-4 { grid-template-columns: 1fr; }
  .sezione   { padding-top: 64px; padding-bottom: 64px; }
  .testa-sezione { margin-bottom: 2.5rem; }
}