/*
 * Stili tipografici delle pagine convertite (Gruppo A).
 * Generati misurando le pagine originali: famiglia, corpo, colore e
 * allineamento sono quelli rilevati, non scelti a mano.
 *
 * Il corpo del testo corrente è scritto in punti perché in punti è scritto
 * l'originale: nei template di contenuto le uniche misure sono 14pt, 13pt e
 * 12.5pt (i valori in pixel appartengono al menu e al piè di pagina). 14pt
 * vale 18,667 px: arrotondarlo a 19 px allarga il testo dell'1,8% e a fine
 * riga cambia il punto in cui va a capo — su "La mia menopausa" un paragrafo
 * passava da quattro righe a cinque.
 */

.maryuska-page .mk-1 {
  font-family: Lato, Arial, sans-serif;
  font-size: 40px;
  color: rgb(28, 28, 28);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-2 {
  font-family: Comfortaa, Arial, sans-serif;
  font-size: 24px;
  color: rgb(7, 13, 99);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-3 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 24px;
  color: rgb(7, 13, 99);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-4 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(7, 13, 99);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-5 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 24px;
  color: rgb(230, 145, 56);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-6 {
  font-family: Caveat, cursive;
  font-size: 14pt;
  color: rgb(191, 115, 0);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-7 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(7, 13, 99);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-8 {
  font-family: Comfortaa, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(7, 13, 99);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-9 {
  font-family: Lato, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(191, 115, 0);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-10 {
  font-family: Lato, Arial, sans-serif;
  font-size: 32px;
  color: rgb(28, 28, 28);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-11 {
  font-family: Caveat, cursive;
  font-size: 32px;
  color: rgb(230, 145, 56);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-12 {
  font-family: Caveat, cursive;
  font-size: 14pt;
  color: rgb(230, 145, 56);
  text-align: right;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-13 {
  font-family: Lato, Arial, sans-serif;
  font-size: 32px;
  color: rgb(7, 13, 99);
  text-align: left;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-14 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(120, 63, 4);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-15 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(230, 145, 56);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-16 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(7, 13, 99);
  text-align: left;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-17 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(120, 63, 4);
  text-align: left;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-18 {
  font-family: Lato, Arial, sans-serif;
  font-size: 11pt;
  color: rgb(120, 63, 4);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-19 {
  font-family: Lato, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(0, 0, 0);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-20 {
  font-family: Caveat, cursive;
  font-size: 32px;
  color: rgb(230, 145, 56);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-21 {
  font-family: Lato, Arial, sans-serif;
  font-size: 32px;
  color: rgb(7, 13, 99);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-22 {
  font-family: Comfortaa, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(7, 13, 99);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-23 {
  font-family: Comfortaa, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(230, 145, 56);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-24 {
  font-family: Arial, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(0, 0, 0);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-25 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(230, 145, 56);
  text-align: left;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-26 {
  font-family: Comfortaa, Arial, sans-serif;
  font-size: 10pt;
  color: rgb(7, 13, 99);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-27 {
  font-family: Comfortaa, Arial, sans-serif;
  font-size: 16px;
  color: rgb(7, 13, 99);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-28 {
  font-family: Lato, Arial, sans-serif;
  font-size: 32px;
  color: rgb(7, 13, 99);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-29 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(120, 63, 4);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

/*
 * La home ha una tavolozza sua: il titolo è nero pieno e non il quasi-nero
 * delle altre pagine, il richiamo in apertura è in Caveat a 30 punti, e le
 * didascalie sotto le fotografie sono in Lato blu.
 */
.maryuska-page .mk-33 {
  font-family: Lato, Arial, sans-serif;
  font-size: 24pt;
  color: rgb(0, 0, 0);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-34 {
  font-family: Caveat, cursive;
  font-size: 30pt;
  color: rgb(7, 13, 99);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-35 {
  font-family: Caveat, cursive;
  font-size: 24pt;
  color: rgb(191, 115, 0);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-36 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(191, 115, 0);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-37 {
  font-family: Lato, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(7, 13, 99);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-38 {
  font-family: Caveat, cursive;
  font-size: 14pt;
  color: rgb(28, 28, 28);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* la citazione in apertura di "Educazione dei sessi" e la sua firma: è l'unica
   pagina che usa Nunito, accodato in functions.php come Comfortaa */
.maryuska-page .mk-31 {
  font-family: Nunito, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(7, 13, 99);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

.maryuska-page .mk-32 {
  font-family: Nunito, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(230, 145, 56);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* il racconto in prima persona di "Su di me": stesso corpo del testo corrente
   ma un marrone più caldo, e peso normale invece che 500 */
.maryuska-page .mk-30 {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14pt;
  color: rgb(191, 115, 0);
  text-align: justify;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* le colonne generate automaticamente non devono allargarsi oltre la quota */
.maryuska-page .wp-block-columns { align-items: flex-start; }

/*
 * Utilità.
 * Le classi mk- descrivono famiglia, corpo, colore e allineamento, non il peso:
 * il grassetto si mette dall'editor, il peso intermedio 500 che l'originale usa
 * spesso non ha un comando nell'editor e serve questa classe.
 */
.maryuska-page .mk-w500 { font-weight: 500; }

/*
 * Collegamenti dentro il testo.
 * Nell'originale il colore del collegamento non si vede: a decidere è lo
 * <span> dentro (l'indirizzo di Incisex su "La sessuologia" è arancione come
 * il paragrafo che lo contiene) e la sottolineatura non c'è.
 */
.maryuska-page a.mk-collegamento {
  color: inherit;
  text-decoration: none;
  /* un indirizzo lungo è una parola sola: senza questo, sul telefono esce
     dalla pagina. Sullo schermo grande ci sta in una riga e non cambia nulla. */
  overflow-wrap: anywhere;
}

/*
 * Collegamenti interni dentro il testo.
 *
 * Diversa da mk-collegamento apposta: quella non si vede — colore ereditato
 * e nessuna sottolineatura — e andava bene per l'unico caso che c'era,
 * l'indirizzo di Incisex scritto per esteso, che si capisce da sé. Ma due
 * parole in mezzo a un paragrafo, senza nessun segno, nessuno le clicca:
 * sarebbe un collegamento buono solo per il motore di ricerca.
 *
 * Qui si aggiunge la sola sottolineatura: carattere, corpo, peso e colore
 * restano quelli del testo attorno, qualunque essi siano. Lo stacco di 3 px
 * e il tratto sottile servono a non appesantire la riga; l'interlinea non
 * cambia, perché la sottolineatura non entra nel calcolo dell'altezza.
 */
.maryuska-page a.mk-interno {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.maryuska-page a.mk-interno:hover,
.maryuska-page a.mk-interno:focus-visible {
  text-decoration-thickness: 2px;
}

/*
 * Righe di separazione fra le sezioni.
 * Nell'originale sono strisce alte 2 px, nere al 15%, larghe 1154 px: sedici
 * più della fascia del testo, otto per parte. Qui sono blocchi separatore
 * veri, che nell'editor si vedono e si spostano come tutti gli altri.
 */
.maryuska-page .wp-block-separator.mk-divisorio {
  width: 101.5%;
  margin: 0 0 0 -0.69%;
  border: 0;
  height: 2px;
  background: rgba(0, 0, 0, 0.15);
}

@media (max-width: 767px) {
  .maryuska-page .wp-block-separator.mk-divisorio { width: 100%; margin-left: 0; }
}

/*
 * Nessuno stacco sotto il blocco.
 * Le classi mk- lasciano 14 px sotto ogni blocco, che è la misura di
 * "Contatti". Dove i paragrafi si susseguono più fitti (nell'originale lo
 * stacco è spesso di 8 punti, cioè 10,7 px) quei 14 px sono già più del
 * dovuto e la distanza non si può togliere con uno spaziatore, che non può
 * essere negativo. Con questa classe lo stacco automatico sparisce e tutta la
 * distanza verticale sta nel blocco spaziatore, dove si legge e si cambia.
 */
.maryuska-page .mk-senza-stacco { margin-bottom: 0; }

/*
 * Interlinea.
 * Nell'originale non è la stessa per tutta la pagina: chi ha scritto i testi
 * l'ha decisa blocco per blocco. Il valore più diffuso è 1,5 ed è quello che
 * le classi mk- portano di serie, quindi senza classe; questi sono gli altri
 * tre rilevati. Contano sui paragrafi di più righe, dove uno scarto di
 * interlinea si moltiplica per il numero di righe.
 */
.maryuska-page .mk-interlinea-102 { line-height: 1.02; }
.maryuska-page .mk-interlinea-120 { line-height: 1.2; }
.maryuska-page .mk-interlinea-128 { line-height: 1.284; }
.maryuska-page .mk-interlinea-138 { line-height: 1.38; }
.maryuska-page .mk-interlinea-153 { line-height: 1.53; }
.maryuska-page .mk-interlinea-161 { line-height: 1.61; }
.maryuska-page .mk-interlinea-180 { line-height: 1.8; }

/*
 * Elenchi puntati.
 * Quadratini, voce rientrata di 40 px (di 20 con mk-rientro-20), 7 px fra una
 * voce e l'altra. Il quadratino prende il colore della voce, che nell'originale
 * è sempre il marrone del testo corrente anche quando le parole sono arancioni:
 * per questo il colore del segno è fissato qui e non dipende dalla classe
 * tipografica messa sulla voce.
 * Serve la classe perché content.css toglie i punti a tutti gli elenchi (li
 * usa "Su di me" per il percorso formativo, dove i punti non ci sono).
 */
.maryuska-page ul.mk-elenco {
  list-style: square;
  padding-left: 0;
  margin: 0;
}

.maryuska-page ul.mk-elenco li {
  display: list-item;
  list-style: square;
  margin: 6px 0 0 40px;
}

.maryuska-page ul.mk-elenco li:first-child { margin-top: 0; }

/* Dove l'originale infila nella voce l'icona di ancoraggio invisibile, la
   gabbia della riga cresce di 1 px e il passo diventa 7. */
.maryuska-page ul.mk-elenco.mk-voci-7 li { margin-top: 7px; }
.maryuska-page ul.mk-elenco.mk-voci-7 li:first-child { margin-top: 0; }

.maryuska-page ul.mk-elenco.mk-rientro-20 li { margin-left: 20px; }

/*
 * Righe che partono un filo prima della fascia.
 * Nella home le file di fotografie cominciano 8 px a sinistra del testo, come
 * fanno le righe di separazione: è il bordo della griglia dell'originale, non
 * un errore. 8 px su 1137 sono lo 0,70%. Va spostata, non marginata: un margine
 * negativo allarga il blocco (la larghezza è lo spazio disponibile meno i
 * margini), le colonne crescono e le fotografie con loro.
 */
.maryuska-page .wp-block-columns.mk-fuori-8 {
  position: relative;
  left: -0.70%;
}

/*
 * Il pulsante "Passa all'azione" in fondo alla home: riquadro bianco con un
 * filo di bordo scuro e gli angoli appena arrotondati, non testo semplice.
 */
.maryuska-page p.mk-pulsante {
  background: #fff;
  border: 1px solid rgb(28, 28, 28);
  border-radius: 4px;
  padding: 3.6px 0;
}

/*
 * Didascalie sotto le fotografie della home.
 * Nell'originale sono 8 px più strette della fotografia per parte: sembra un
 * dettaglio, ma è quello che decide dove va a capo il testo su due righe.
 */
.maryuska-page p.mk-didascalia { margin-left: 8px; margin-right: 8px; }

/*
 * Rientri dei blocchi di testo.
 * Diversi paragrafi partono più a destra della fascia (o della colonna) che li
 * contiene: nell'originale sono contenitori annidati, qui basta un margine, che
 * nell'editor si vede e si toglie. Valgono solo per paragrafi e titoli, così
 * non si sommano al rientro delle voci di elenco qui sopra.
 */
.maryuska-page p.mk-rientro-20,
.maryuska-page h2.mk-rientro-20 { margin-left: 20px; }
.maryuska-page p.mk-rientro-40,
.maryuska-page h2.mk-rientro-40 { margin-left: 40px; }
.maryuska-page p.mk-rientro-60,
.maryuska-page h2.mk-rientro-60 { margin-left: 60px; }

/* Il colore del quadratino non segue quello delle parole: è quello della voce,
   che nell'originale cambia da pagina a pagina (marrone in "Individuale o di
   coppia", blu in "Laboratori"). Va detto, non dedotto dalla classe. */
.maryuska-page ul.mk-elenco.mk-segno-marrone li::marker { color: rgb(120, 63, 4); }
.maryuska-page ul.mk-elenco.mk-segno-blu li::marker { color: rgb(7, 13, 99); }

/* Allineamento a sinistra quando la classe tipografica è centrata ma il blocco,
   nell'originale, parte da un punto preciso: così il bordo sinistro non dipende
   dalla larghezza della colonna. */
.maryuska-page .mk-sinistra { text-align: left; }

/*
 * Icone di 28 px (posta, Instagram, Facebook).
 * Sono blocchi immagine veri, ognuno nella propria colonna: le distanze fra
 * l'una e l'altra stanno nelle larghezze delle colonne, misurate sulla pagina
 * originale. Messe dentro un paragrafo sarebbero contenuto che l'editor a
 * blocchi non riconosce e segnalerebbe alla prima modifica.
 */
.maryuska-page .mk-icona-blocco {
  width: 28px;
  margin: 0;
}

.maryuska-page .mk-icona-blocco img {
  width: 28px;
  height: 28px;
}

/* l'icona della posta è centrata nella sua colonna, le altre partono da sinistra */
.maryuska-page .mk-icona-blocco.mk-centrata {
  margin-left: auto;
  margin-right: auto;
}

/*
 * Righe a stacco esplicito.
 * Le righe a colonne portano di serie 96 px di stacco, che è la misura di
 * "Su di me". Sulle altre pagine le distanze verticali sono tutte diverse:
 * con questa classe lo stacco automatico sparisce e ogni distanza si legge
 * nel blocco spaziatore che la produce, dove è anche modificabile.
 */
.maryuska-page .wp-block-columns.mk-riga { margin-bottom: 0; }

/*
 * Sul telefono le colonne si impilano una sotto l'altra. Quelle vuote servono
 * solo a tenere le distanze orizzontali: impilate non tengono più niente e
 * lascerebbero buchi, perché fra una colonna e l'altra c'è comunque lo stacco.
 */
@media (max-width: 767px) {
  .maryuska-page .wp-block-column:empty { display: none; }
}