/*
  Il foglio di stile del sito pubblico.

  ═══════════════════════════════════════════════════════════════════════════
  ⚠️ QUESTO SITO SI PROGETTA SUL TELEFONO, NON SUL PORTATILE
  ═══════════════════════════════════════════════════════════════════════════

  Il traffico arriva da una campagna su Meta: quasi tutti aprono la pagina dal
  browser **dentro** Facebook o Instagram, su uno schermo da cinque pollici,
  con una mano sola, mentre fanno altro. Da questo discendono le tre regole che
  spiegano quasi ogni riga qui sotto:

  1. **le misure crescono, non calano.** Il foglio parte dal telefono e le
     media query aggiungono spazio per gli schermi grandi. Il contrario —
     partire dalla scrivania e restringere — lascia sempre qualcosa che sul
     telefono trabocca, e chi arriva da un annuncio non torna a riprovare;

  2. **niente che richieda un browser recente.** Il browser dentro l'app di
     Meta e' una WebView, e su iPhone e' la versione di Safari di quel
     telefono: chi ha un iPhone del 2019 ha Safari 13. Per questo lo spazio fra
     gli elementi in `flex` si fa con i **margini** e non con `gap`, che Safari
     ha imparato solo dalla 14.5 — e senza il quale la pagina non si rompe con
     un errore, si accartoccia in silenzio;

  3. **il pollice.** Ogni cosa che si preme e' alta almeno 48px, e l'invito
     principale resta a portata in fondo allo schermo mentre si scorre.

  ═══════════════════════════════════════════════════════════════════════════
  La tavolozza
  ═══════════════════════════════════════════════════════════════════════════

  Il **blu petrolio** e' quello del prodotto (`gestionale/tailwind.config.js`) e
  non si tocca: chi arriva dall'annuncio e poi entra nel gestionale deve
  riconoscere la stessa cosa.

  Accanto ci va un colore che chiami il dito, e la scelta non e' di gusto: sulla
  ruota dei colori l'opposto del blu-verde e' l'arancio-giallo, ed e' la ragione
  per cui un pulsante ambra su fondo petrolio si vede prima di qualunque altra
  cosa nello schermo. L'**ambra grano** ha anche il vantaggio di dire la cosa
  giusta a chi vendiamo: e' il colore del raccolto, non quello di un'azienda di
  software.

  ⚠️ **L'ambra del sito non e' l'arancio del prodotto.** Nel gestionale
  `#C2410C` vuol dire *allarme*, e li' e' l'unica tinta che grida. Qui serve un
  richiamo, non un avviso: `#E8A33D` e' piu' caldo, piu' chiaro, e non si
  confonde con quello. Se un giorno qualcuno volesse "riusare l'arancio che
  c'era gia'", questo e' il motivo per cui no.

  ⚠️ E sull'ambra il testo va **scuro**, mai bianco: bianco su `#E8A33D` da' un
  contrasto di 2,2:1, cioe' illeggibile al sole di un campo. Scuro da' 8,2:1.
*/

:root {
  /* --- il prodotto, invariato --------------------------------------------- */
  --carta: #ffffff;
  --inchiostro: #17161a;
  --inchiostro-morbido: #4a4741;
  --fumo: #8a8780;
  --filo: #f0eee9;
  --filo-forte: #e7e4de;
  --campo: #f7f6f3;
  --marchio: #1f4a57;
  --marchio-chiaro: #4a7c8c;
  --marchio-tenue: #e9f0f2;

  /* --- il petrolio profondo, per le sezioni piene -------------------------- */
  --marchio-fondo: #16363f;

  /* --- l'ambra che chiama il dito ------------------------------------------ */
  --ambra: #e8a33d;
  --ambra-scura: #c9832a;
  --grano-tenue: #fdf6ea;

  --misura: 68rem;
}

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

html {
  /* Su iOS, ruotando il telefono Safari ingrandisce il testo da solo. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  /*
    Caratteri di sistema: su ogni telefono ci sono gia', quindi il testo compare
    al primo fotogramma invece di lampeggiare quando arriva il font. Su una rete
    mobile lenta e' la differenza fra una pagina che si legge e una che sembra
    rotta — e chi arriva da un annuncio non aspetta.
  */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  /*
    ⚠️ Nessuna parola lunga deve poter allargare la pagina: su uno schermo da
    360px basta un indirizzo di posta per far comparire lo scorrimento
    orizzontale, e da li' in poi tutto sembra storto.
  */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Il lampo grigio al tocco su Android: lo sostituiamo con i nostri stati. */
a,
button {
  -webkit-tap-highlight-color: rgba(31, 74, 87, 0.15);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--ambra);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.dentro {
  max-width: var(--misura);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--marchio);
  color: var(--carta);
  padding: 0.75rem 1.25rem;
  z-index: 20;
}

.salta:focus {
  left: 0;
}

/* ═══ testata ═══════════════════════════════════════════════════════════════ */

header.testata {
  background: var(--marchio-fondo);
  padding: 0.9rem 0;
}

.testata .dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.marchio {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--carta);
  text-decoration: none;
}

/*
  ⚠️ Sul telefono il menu **non c'e'**.

  Non e' una rinuncia: e' che con una pagina sola e cinque ancore, un menu a
  panino su uno schermo da cinque pollici e' un pulsante in piu' da premere per
  arrivare dove si arriva scorrendo. Chi arriva da un annuncio scorre; il menu
  serve a chi guarda da un portatile, e da 48rem in su ricompare.
*/
.testata nav {
  display: none;
}

/* ═══ apertura ══════════════════════════════════════════════════════════════ */

.apertura {
  background: var(--marchio-fondo);
  color: var(--carta);
  padding: 2.5rem 0 3rem;
}

.apertura h1 {
  /*
    Il minimo e' 1.85rem e non meno: sotto, su un telefono stretto il titolo
    diventa un paragrafo, e la prima schermata smette di dire una cosa sola.
  */
  font-size: clamp(1.85rem, 7.5vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  max-width: 18ch;
}

.apertura .sommario {
  font-size: 1.06rem;
  color: #d5e2e6;
  margin: 0 0 1.75rem;
  max-width: 46ch;
}

.apertura strong {
  color: var(--carta);
}

/* ═══ i pulsanti ════════════════════════════════════════════════════════════ */

/*
  ⚠️ Niente `gap`: lo spazio fra i pulsanti si fa col margine.

  Safari lo sostiene nei `flex` solo dalla 14.5 (aprile 2021), e la WebView
  dentro l'app di Meta su un iPhone piu' vecchio e' esattamente quel Safari. Con
  `gap` i due pulsanti si toccherebbero, senza nessun errore da nessuna parte.
*/
.azioni {
  display: block;
}

.bottone {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--ambra);
  color: var(--inchiostro);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  /* 48px pieni di altezza: e' la misura sotto la quale un pollice sbaglia. */
  padding: 0.95rem 1.5rem;
  border-radius: 10px;
  border: 2px solid var(--ambra);
  margin-bottom: 0.7rem;
}

.bottone:active {
  background: var(--ambra-scura);
  border-color: var(--ambra-scura);
}

.bottone.secondario {
  background: transparent;
  color: var(--carta);
  border-color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.bottone.secondario:active {
  background: rgba(255, 255, 255, 0.12);
}

/* Sul chiaro, il secondario diventa scuro. */
section .bottone.secondario {
  color: var(--marchio);
  border-color: var(--filo-forte);
}

/* ═══ la striscia dei tre motivi ════════════════════════════════════════════ */

/*
  Sta subito sotto l'apertura perche' e' la seconda cosa che si legge, e su un
  telefono e' spesso l'ultima prima di decidere se restare.
*/
.motivi {
  background: var(--grano-tenue);
  border-bottom: 1px solid var(--filo-forte);
  padding: 1.75rem 0;
}

.motivi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.motivi li {
  padding-left: 1.85rem;
  position: relative;
  font-size: 1rem;
  color: var(--inchiostro-morbido);
}

/* La spunta e' disegnata col bordo: nessuna immagine, nessun carattere speciale
   che su un telefono vecchio rischia di diventare un rettangolo vuoto. */
.motivi li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.45rem;
  width: 0.45rem;
  height: 0.8rem;
  border: solid var(--marchio);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.motivi strong {
  color: var(--inchiostro);
}

/* ═══ sezioni ═══════════════════════════════════════════════════════════════ */

section {
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--filo);
}

section.spenta {
  background: var(--campo);
}

section.calda {
  background: var(--grano-tenue);
}

h2 {
  font-size: clamp(1.4rem, 5.5vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 0 0 0.9rem;
  max-width: 24ch;
}

h3 {
  font-size: 1.06rem;
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}

p {
  max-width: 66ch;
}

.occhiello {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--marchio-chiaro);
  margin: 0 0 0.6rem;
}

/* ═══ griglie ═══════════════════════════════════════════════════════════════ */

/*
  `gap` qui si puo': nella griglia Safari lo sostiene dalla 10.1, cioe' da
  sempre per chiunque possa aprire questa pagina. E' solo nel `flex` che e'
  arrivato tardi.
*/
.griglia {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 1.75rem;
}

.scheda h3 {
  color: var(--marchio);
}

.scheda p {
  margin: 0;
  color: var(--inchiostro-morbido);
  font-size: 0.97rem;
}

.riquadro {
  background: var(--carta);
  border: 1px solid var(--filo-forte);
  border-radius: 12px;
  padding: 1.25rem;
}

/* ═══ i tre modi di timbrare ════════════════════════════════════════════════ */

.numerata {
  counter-reset: passo;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.numerata li {
  counter-increment: passo;
  position: relative;
  padding-left: 3rem;
  min-height: 2.2rem;
}

.numerata li::before {
  content: counter(passo);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.2rem;
  height: 2.2rem;
  line-height: 2.2rem;
  text-align: center;
  border-radius: 50%;
  background: var(--marchio);
  color: var(--carta);
  font-weight: 700;
  font-size: 0.95rem;
}

/* ═══ la nota di franchezza ═════════════════════════════════════════════════ */

.franchezza {
  border-left: 4px solid var(--ambra);
  background: var(--carta);
  padding: 1.1rem 1.25rem;
  border-radius: 0 10px 10px 0;
  margin-top: 1.75rem;
}

.franchezza p {
  margin: 0;
  color: var(--inchiostro-morbido);
  font-size: 0.97rem;
}

.franchezza p + p {
  margin-top: 0.7rem;
}

/* ═══ contatti ══════════════════════════════════════════════════════════════ */

.contatto a {
  color: var(--marchio);
  font-weight: 700;
}

/* ═══ la barra che resta in fondo ═══════════════════════════════════════════ */

/*
  ⚠️ Sul telefono l'invito resta a portata di pollice mentre si scorre.

  E' l'unico elemento fisso di tutto il sito, e si giustifica solo qui: chi
  arriva da un annuncio decide durante lo scorrimento, e un pulsante che e'
  rimasto tre schermate piu' su e' un pulsante che non esiste.

  `env(safe-area-inset-bottom)` tiene la barra sopra la striscia dell'iPhone
  senza tacca fisica: senza, meta' del pulsante finisce sotto quella barretta e
  non si preme. Sui telefoni che non conoscono `env` vale zero, che e' giusto.
*/
.barra {
  display: none;
}

/* ═══ piede ═════════════════════════════════════════════════════════════════ */

footer {
  padding: 2rem 0 2.5rem;
  font-size: 0.9rem;
  color: var(--fumo);
  background: var(--marchio-fondo);
}

footer p {
  margin: 0 0 0.6rem;
  color: #b9cbd0;
}

footer a {
  color: var(--carta);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Da qui in su lo schermo e' grande: si aggiunge, non si toglie
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 36rem) {
  .dentro {
    padding: 0 1.5rem;
  }

  /* I due pulsanti stanno in riga, con il margine al posto di `gap`. */
  .azioni {
    display: flex;
    flex-wrap: wrap;
  }

  .bottone {
    display: inline-block;
    width: auto;
    margin-right: 0.75rem;
  }

  .griglia,
  .numerata {
    grid-template-columns: repeat(2, 1fr);
  }

  .motivi ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 48rem) {
  body {
    font-size: 17.5px;
  }

  .testata nav {
    display: flex;
    flex-wrap: wrap;
  }

  .testata nav a {
    color: #cfdde1;
    text-decoration: none;
    font-size: 0.94rem;
    margin-left: 1.5rem;
    /* Anche col mouse il bersaglio resta comodo. */
    padding: 0.35rem 0;
  }

  .testata nav a:hover {
    color: var(--carta);
    text-decoration: underline;
    text-underline-offset: 5px;
  }

  .apertura {
    padding: 4.5rem 0 4rem;
  }

  section {
    padding: 3.75rem 0;
  }

  .motivi {
    padding: 2rem 0;
  }

  .griglia {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.75rem;
    margin-top: 2.25rem;
  }

  .numerata {
    grid-template-columns: repeat(3, 1fr);
  }

  .bottone:hover {
    background: var(--ambra-scura);
    border-color: var(--ambra-scura);
  }

  .bottone.secondario:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  section .bottone.secondario:hover {
    background: var(--marchio-tenue);
    border-color: var(--marchio-chiaro);
  }
}

/* ═══ la barra fissa: solo dove serve ═══════════════════════════════════════ */

/*
  Compare **solo sul telefono** — sopra i 48rem l'invito e' gia' visibile in
  cima e in fondo, e una barra fissa ruberebbe spazio a nulla.

  E solo se lo schermo e' alto abbastanza: su un telefono in orizzontale una
  barra fissa si mangia un terzo della pagina.
*/
@media (max-width: 47.99rem) and (min-height: 26rem) {
  .barra {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    background: rgba(22, 54, 63, 0.97);
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .barra .bottone {
    margin: 0;
    font-size: 1rem;
    padding: 0.85rem 1rem;
  }

  /* Lo spazio perche' il piede non finisca sotto la barra. */
  footer {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══ chi preferisce meno movimento ═════════════════════════════════════════ */

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

/* ═══ pagine di testo (privacy) ═════════════════════════════════════════════ */

.testo {
  padding: 2.25rem 0 3rem;
}

.testo h1 {
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.testo .data {
  color: var(--fumo);
  font-size: 0.9rem;
  margin: 0 0 2rem;
}

.testo h2 {
  font-size: 1.2rem;
  margin-top: 2rem;
}

.testo ul {
  max-width: 66ch;
  padding-left: 1.25rem;
}

.testo li {
  margin-bottom: 0.5rem;
}

/* ═══ carta ═════════════════════════════════════════════════════════════════ */

@media print {
  .testata nav,
  .azioni,
  .salta,
  .barra {
    display: none;
  }

  .apertura,
  header.testata,
  footer {
    background: #fff;
    color: #000;
  }

  .apertura .sommario,
  footer p {
    color: #000;
  }

  body {
    font-size: 11pt;
  }

  section {
    border: 0;
    padding: 1rem 0;
  }
}