/**
 * Il carattere dei titoli, al posto di cufon.
 *
 * PRIMA. Titoli, bottoni e numeri erano disegnati da cufon: una libreria del
 * 2010 che leggeva il carattere Kozuka Gothic da un file .js e ridisegnava
 * ogni parola dentro un <canvas>. Costava quattro file per 50 KB, e il testo
 * cosi' prodotto non si poteva selezionare, non si poteva copiare e i motori
 * di ricerca non lo leggevano: per loro quelle pagine non avevano titoli.
 *
 * ADESSO. Un webfont vero, servito dal nostro server. 26 KB - meta' del peso -
 * e il testo resta testo: si seleziona, si copia, si cerca, si indicizza, e lo
 * legge anche chi usa uno screen reader.
 *
 * PERCHE' JOST. Kozuka Gothic Light e' un geometrico chiaro, di quelli
 * costruiti su cerchi e rette. Jost e' un geometrico aperto ( licenza SIL
 * Open Font ) disegnato sulla stessa idea, e alla luce e' la corrispondenza
 * piu' vicina che si trovi senza comprare una licenza. E' un font variabile:
 * un file solo copre tutti i pesi, dal 100 al 900.
 *
 * Gli elementi qui sotto sono ESATTAMENTE quelli che cufon-replace.js
 * sostituiva, cosi' il cambio non tocca niente che prima non toccasse.
 */

@font-face {
    font-family: 'Jost' ;
    src: url('../../fonts/jost-latin.woff2') format('woff2') ;
    font-weight: 100 900 ;      /* variabile: un file, tutti i pesi */
    font-style: normal ;
    font-display: swap ;        /* il testo si legge subito, non lampeggia vuoto */
}


/**
 * <- Gli stessi selettori di cufon-replace.js, peso chiaro ->
 *
 * ul.menu li a era nell'elenco di cufon ma nel sito non esiste nessun
 * ul.menu - il menu e' ul.kozuka - quindi non sostituiva niente e non serve
 * riportarlo.
 */
h2,
h3,
.social-icons span,
.banner a,
.banner p,
.box-1 a,
.button          { font-family: 'Jost', 'Century Gothic', Tahoma, Geneva, sans-serif ;
                   font-weight: 300 ; }


/** <- Il numero grande era l'unico in nero: cufon gli dava Kozuka_B_700 -> */
.number          { font-family: 'Jost', 'Century Gothic', Tahoma, Geneva, sans-serif ;
                   font-weight: 700 ; }


/**
 * <- IL SOTTOMENU, LEGGIBILE ->
 *
 * Una riga sola, e tocca solo il sottomenu.
 *
 * Il menu porta letter-spacing: -1px, che scende per eredita' anche sulle
 * voci delle tendine. Su testo tutto maiuscolo a 12px le lettere finiscono
 * addosso l'una all'altra: le maiuscole non hanno aste sopra e sotto a
 * distinguerle, si reggono solo sullo spazio fra loro.
 *
 * Qui si azzera quello, e basta. Corpo, interlinea, colori e disposizione
 * restano quelli di prima: la barra in alto non viene toccata, cosi' non
 * cambia larghezza e non manda a capo niente.
 */
#cssmenu ul ul li a         { letter-spacing: normal ; }


/**
 * <- IL BLOCCO UTENTE NON DEVE COPRIRE LA TENDINA ->
 *
 * Difetto segnalato: aprendo «Scuderia», il pallino verde dell'avatar finiva
 * sopra «Il Territorio». Blocco utente e tendina stavano entrambi a z-index 3,
 * e a parita' vince chi viene dopo nell'HTML - il blocco, che e' l'ultima voce.
 *
 * Alzare la sola tendina non basta: vive dentro il <li> di «Scuderia», che a
 * sua volta e' un contesto di impilamento a z-index 3, e i figli non ne
 * escono. Si alza il <li> intero mentre lo si punta.
 */
#cssmenu > ul > li:hover    { z-index: 20 ; }