/* ==========================================================================
   ALLINEAMENTO

   Prima qui c'era una riga sola, main e tutto quello che contiene centrato
   con !important, piu' una sessantina di regole per rimettere in mezzo le
   cose che quella riga sbilanciava, e in fondo una "regola di ultima
   istanza, batte tutto" per le FAQ. Il centro non era una scelta di
   composizione: era una forzatura, e le forzature si vedono.

   Adesso il centro e' la voce del sito e resta ovunque il testo sia breve:
   titoli, occhielli, righe di navigazione, targhette, bottoni. Cambia una
   cosa sola, e cambia dove si legge davvero: i blocchi di prosa vanno a
   sinistra, dentro una misura di sessantadue battute.
   Il motivo non e' di gusto ed e' l'unico che conta qui: leggendo, l'occhio
   torna a capo cercando un margine. Se il margine si sposta a ogni riga,
   ogni riga costa un pezzetto di attenzione in piu'. Su un titolo di sei
   parole non si sente, su una scheda di lingua con undici curiosita' si
   sente eccome.
   ========================================================================== */

main{text-align:center}

/* I blocchi restano in asse: quando un titolo o un paragrafo ha una misura
   massima, lo spazio che avanza si divide a destra e a sinistra. E' il
   centro della composizione, che e' un'altra cosa dal centro del testo:
   la colonna sta in mezzo alla pagina, le righe dentro cominciano tutte
   dallo stesso punto. */
main :is(h1,h2,h3,h4,p,ul,ol,figure,blockquote,.display,.lede,.hero-sub,
         .lgp-lead,.sec-t,.hw-lead,.ab-h2){
  margin-left:auto;margin-right:auto;
}

/* La prosa. Sinistra, misura corta, blocco centrato nella pagina: il
   contenitore resta in asse con tutto il resto, il testo dentro no. */
.prosa,
main .lgd-facts li,
main .lgd-apart,
main .lgd-why p,
main .lgw-n,
main .lgw-g,
main .odd p,
main .lgc-apart,
main .ab-faq details p,
main .ab-mission p,
main .ab-intro-t p{
  text-align:left;
  max-width:62ch;
  margin-left:auto;
  margin-right:auto;
}
/* dentro la scheda della lingua il blocco e' gia' stretto: li' la misura
   la detta la colonna, non le sessantadue battute */
main .lgd-facts li,
main .lgd-apart,
main .lgd-why p{max-width:none}

/* Quello che resta in mezzo perche' e' breve o perche' e' una fila. */
main img, main svg, main table, main form, main .wrap{margin-left:auto;margin-right:auto}
main .hw-btns, main .lgp-more, main .fh-form, main .mos, main .filters,
main .pick-row, main .wotd-acts, main .lgm-row{justify-content:center}
main .mos{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px}
main .tile{display:flex;flex-direction:column;justify-content:center;align-items:center}
main .wotd-flag-row{display:flex;justify-content:center;align-items:center}
main .curve, main .chart, main canvas{margin-left:auto;margin-right:auto;display:block}
main .ab-face-img{display:block;margin:1.6rem auto;float:none}

/* Le liste tornano liste: pallino a sinistra e testo allineato sotto se'
   stesso. Prima erano centrate con il pallino dentro il testo, che e' il
   modo in cui una lista smette di sembrare una lista. */
main .prosa ul, main .prosa ol, main .ab-faq ul, main .ab-faq ol{
  list-style-position:outside;text-align:left;
  max-width:62ch;margin-left:auto;margin-right:auto;padding-left:1.2em}

/* Le FAQ sono un elenco, e un elenco ha un margine. La domanda comincia a
   sinistra, il piu' va in fondo alla riga, sopra il filetto: cosi' tutti i
   segni stanno incolonnati e si capisce che sono lo stesso comando ripetuto.
   Centrate, ogni domanda partiva da un punto diverso e il piu' finiva a
   cinque ascisse diverse in cinque righe. */
main .ab-faq .faq{width:min(700px,92%);margin-left:auto;margin-right:auto}
main .ab-faq summary{display:flex;justify-content:space-between;align-items:baseline;
  gap:1.4em;text-align:left}
main .ab-faq summary::after{position:static}

@media(max-width:768px){
  .nav-mob, .nav-mob *{text-align:center}
  .nav-mob .nm-links{align-items:center}
  .nav-mob .nm-links a{width:100%}
  .nav-mob .nm-foot{display:flex;flex-direction:column;align-items:center}
  .nav-mob .nm-soc-row{display:flex;justify-content:center}
  footer, footer *{text-align:center}
  footer > div > div{justify-content:center}
  /* su una colonna stretta la misura la detta lo schermo */
  .prosa, main .odd p, main .ab-faq details p{max-width:none}
}