/* editorial.css - le pagine di testo lungo: «Come funziona» e «Da che cosa dipende il
   prezzo».

   Il resto del sito e' fatto di elenchi, schede e moduli. Qui invece si legge, e le
   regole utili sono poche e note: una riga corta, un'interlinea larga, e abbastanza
   spazio fra una sezione e l'altra da far vedere dove finisce un discorso.

   Carica dopo style.css e responsive.css, quindi puo' correggerli senza `!important`. */

.editorial {
  /* Il foglio bianco non deve toccare la fascia rossa dell'intestazione, ne' il piede. */
  padding: 26px 10px 44px 10px;
  /* `style.css` ha `main { text-align: center }`, che sul resto del sito ha senso perche'
     il contenuto sono griglie di schede e titoli brevi. Su venti paragrafi di prosa e'
     illeggibile: senza un margine sinistro fisso l'occhio non trova l'inizio della riga
     successiva. Va rimesso a sinistra qui, non tolto di la'. */
  text-align: left;
}

/* Il titolo di pagina non dichiara una `line-height` ne' in style.css ne' in
   responsive.css, quindi eredita i 21px del `body` mentre il carattere e' di 32 o 46:
   finche' il titolo sta su una riga non si vede, ma questi titoli vanno a capo e le due
   righe si sovrapponevano. Si corregge qui e non in style.css perche' li' il valore
   ereditato e' quello con cui sono state misurate le altre pagine. */
.editorial .page-title {
  line-height: 1.15;
  margin-bottom: 20px;
}

/* La misura della riga.
   Il primo tentativo diceva `max-width: 42em` per ottenere 68 caratteri, e non funzionava:
   `em` si calcola sul carattere **dell'elemento**, e `.wrap` eredita i 13px del `body`,
   non i 18 del testo. Uscivano 546px, cioe' una colonna stretta e persa in mezzo a uno
   schermo largo. Qui la misura e' in pixel proprio per non dipendere da quale carattere
   erediti il contenitore.
   760px a 18px sono circa 80 caratteri per riga, che e' il limite alto della lettura
   continua: piu' lunga e l'occhio fatica a ritrovare la riga dopo. */
.editorial .wrap {
  max-width: 760px;
  margin: 0 auto;
  /* Il testo sta su un foglio bianco invece che sul fondo della pagina. Non e'
     decorazione: senza, una colonna di testo in mezzo a un fondo vuoto sembra un errore
     di impaginazione, ed e' esattamente come e' stata letta. Il foglio dice che la
     larghezza e' una scelta. */
  background: #fff;
  padding: 36px 40px 44px 40px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.editorial p,
.editorial li {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: #333;
}

.editorial p {
  margin: 0 0 16px 0;
}

/* L'attacco: piu' grande del corpo, perche' e' la parte che decide se si continua a
   leggere. Non grassetto, che a questa misura diventa rumore. */
.editorial .editorial-lead {
  font-size: 20px;
  line-height: 1.55;
  color: #212121;
  margin-bottom: 22px;
}

/* Lo stacco fra sezioni. Il margine sopra e' molto piu' grande di quello sotto, cosi' il
   titolo appartiene visibilmente al testo che lo segue e non a quello che lo precede. */
.editorial section {
  margin: 44px 0 0 0;
}

.editorial .section-title {
  /* 44px, che e' la misura di style.css, e' giusto per l'intestazione di una sezione della
     home, dove ce ne sono quattro in tutta la pagina. Qui ce ne sono otto e introducono
     paragrafi, non blocchi: a quella misura la pagina sembrerebbe un indice. */
  font-size: 30px;
  margin: 0 0 14px 0;
  line-height: 1.25;
  text-wrap: balance;
}

.editorial h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #212121;
  margin: 26px 0 8px 0;
}

.editorial ul,
.editorial ol {
  margin: 0 0 16px 0;
  padding-left: 22px;
}

.editorial li {
  margin-bottom: 8px;
}

/* I sei passi. Sono numerati e la numerazione e' parte del contenuto, non decorazione:
   un lettore dice «sono al passo 4», e la pagina lo nomina piu' avanti («vedi il passo
   4»). Quindi il numero deve vedersi, e non basta il pallino della lista. */
.editorial .editorial-steps {
  list-style: none;
  counter-reset: passo;
  padding-left: 0;
  margin: 0;
}

.editorial .editorial-steps > li {
  counter-increment: passo;
  position: relative;
  padding-left: 52px;
  margin-bottom: 26px;
}

.editorial .editorial-steps > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  background: #212121;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.editorial .editorial-steps > li > h3 {
  margin-top: 4px;
}

/* Il rosso del sito e' `#f12224`, ma sul fondo chiaro della pagina da' 3,77 contro 1 di
   contrasto, sotto il minimo di 4,5 per il testo normale: un collegamento dentro un
   paragrafo va letto, non solo visto. `#ca191a` e' il rosso che il sito usa gia' per il
   passaggio del mouse sul pulsante di invio, ed e' a 5,14. */
.editorial a {
  color: #ca191a;
  text-decoration: underline;
}

.editorial a:hover,
.editorial a:focus-visible {
  text-decoration: none;
}

/* L'invito ad agire. E' un collegamento, non un pulsante finto: resta tale da tastiera e
   per chi legge con uno screen reader, e si vede come un pulsante perche' a fine sezione
   deve pesare piu' del testo intorno. */
.editorial .editorial-cta {
  display: inline-block;
  /* Identico al pulsante di invio del modulo (`.contact input[type=submit]`): e' il
     colore con cui il visitatore riconosce l'azione su questo sito. */
  background: #f12224;
  color: #fff;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  padding: 13px 26px;
  border-radius: 3px;
  margin-top: 6px;
}

.editorial .editorial-cta:hover,
.editorial .editorial-cta:focus-visible {
  background: #ca191a;
  text-decoration: none;
}

/* Telefono. La misura della riga la da' gia' lo schermo, quindi qui si tolgono solo le
   dimensioni pensate per il desktop. */
@media (max-width: 680px) {
  /* I 40px di lato del foglio, su uno schermo da telefono, si mangerebbero un quinto
     della riga. Il foglio resta, ma da bordo a bordo e senza angoli arrotondati: a questa
     larghezza un margine intorno al margine non aggiunge niente. */
  .editorial {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }

  .editorial .wrap {
    padding: 22px 18px 30px 18px;
    border-radius: 0;
    box-shadow: none;
  }

  .editorial p,
  .editorial li {
    font-size: 17px;
  }

  .editorial .editorial-lead {
    font-size: 18px;
  }

  .editorial .section-title {
    font-size: 25px;
  }

  .editorial section {
    margin-top: 34px;
  }

  .editorial .editorial-steps > li {
    padding-left: 44px;
  }

  .editorial .editorial-steps > li::before {
    width: 31px;
    height: 31px;
    line-height: 31px;
    font-size: 16px;
  }
}