/*
 * Stile dell'area contenuto delle pagine gestite da WordPress.
 * I valori riproducono quelli rilevati sulle pagine originali:
 *   titolo pagina   Lato 700 20pt  #1c1c1c
 *   frase a mano    Caveat 700 20pt #e69138
 *   testo corrente  Montserrat 400 14pt #bf7300 giustificato
 *   titolo sezione  Lato 700 20pt  #070d63
 *   formazione      Montserrat 500 14pt #783f04
 */

/* L'intestazione del sito è a posizione fissa su top:0. Quando l'utente è
   connesso, la barra di amministrazione di WordPress le finisce sopra e la
   nasconde: la faccio scendere della stessa altezza della barra.
   (Sulle pagine non ancora convertite il problema non si pone: non chiamando
   wp_footer() la barra di amministrazione non viene proprio mostrata.) */
body.admin-bar [jsname="rtFGi"] {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar [jsname="rtFGi"] {
    top: 46px !important;
  }
}

/* fascia a tutta larghezza: riprende lo sfondo crema delle sezioni originali,
   così il colore non cambia a metà pagina */
.maryuska-page {
  width: 100%;
  background: #fdf9ee;
  font-family: Montserrat, Arial, sans-serif;
  color: #bf7300;
  overflow-x: hidden;
}

/* Larghezza dell'area contenuto misurata sulla pagina originale: il contenuto
   occupa 1137 px, dal margine sinistro 63 al 1200. */
.maryuska-page-inner {
  max-width: 1137px;
  margin: 0 auto;
  padding: 24px 0 64px;
}

/* Le colonne hanno larghezze fisse diverse a seconda della sezione: i valori
   sono impostati riga per riga nel contenuto, qui azzero solo lo spazio
   automatico perché le distanze sono già incluse in quelle larghezze. */
.maryuska-page .wp-block-columns {
  gap: 0 !important;
  margin: 0 0 96px;
  align-items: flex-start;
  flex-wrap: nowrap;
}

/* senza questo le colonne si allargano oltre la quota assegnata e
   l'impaginazione salta.
   flex-shrink: 0 perché le quote sono misure, non desideri: in "Laboratori"
   l'immagine di destra sborda dalla fascia del testo (come le righe di
   separazione) e la riga somma più del 100% — senza questo tutte le colonne si
   restringevano un po', l'immagine veniva 3 px più piccola e da lì in giù la
   pagina scendeva di 3 px. */
.maryuska-page .wp-block-column {
  flex-grow: 0;
  flex-shrink: 0;
  min-width: 0;
}

/* Il blocco del percorso formativo è più stretto e leggermente rientrato. */
.maryuska-page .maryuska-formazione {
  margin-left: 8px;
  max-width: 894px;
}

/* Gli elenchi sono senza punti, come nell'originale: servono solo a separare
   le voci del percorso formativo. */
.maryuska-page ul,
.maryuska-page ol {
  list-style: none;
  padding-left: 0;
  margin: 0 0 20px;
}

.maryuska-page li {
  list-style: none;
  display: block;
}

/* Le immagini conservano la dimensione che avevano nell'originale invece di
   allargarsi fino a riempire la colonna. */
.maryuska-page .maryuska-img-piccola img {
  width: 81.4%;   /* 166 su una colonna di 204 */
}

.maryuska-page .maryuska-img-grande img {
  width: 90.7%;   /* 362 su una colonna di 399 */
}

/* Nell'originale il testo non è allineato in alto con l'immagine: parte più in
   basso. Questi sono gli scarti misurati sulla pagina di riferimento. */
.maryuska-page .maryuska-col-claim { padding-top: 150px; }
.maryuska-page .maryuska-col-testo { padding-top: 34px; }

@media (max-width: 767px) {
  .maryuska-page .maryuska-col-claim,
  .maryuska-page .maryuska-col-testo { padding-top: 0; }
}

.maryuska-page p {
  font-size: 14pt;
  line-height: 1.55;
  text-align: justify;
  margin: 0 0 18px;
}

.maryuska-page h1 {
  font-family: Lato, Arial, sans-serif;
  font-weight: 700;
  font-size: 20pt;
  color: #1c1c1c;
  text-align: center;
  margin: 0 0 26px;
}

.maryuska-page h2 {
  font-family: Lato, Arial, sans-serif;
  font-weight: 700;
  font-size: 20pt;
  color: #070d63;
  text-align: left;
  margin: 44px 0 18px;
}

/* la frase manoscritta in apertura */
.maryuska-page .maryuska-claim p,
.maryuska-page p.maryuska-claim {
  font-family: Caveat, cursive;
  font-weight: 700;
  font-size: 20pt;
  color: #e69138;
  line-height: 1.35;
}

/* elenco del percorso formativo */
.maryuska-page .maryuska-formazione,
.maryuska-page .maryuska-formazione p,
.maryuska-page .maryuska-formazione li {
  color: #783f04;
  font-weight: 500;
}

.maryuska-page .maryuska-formazione li {
  font-size: 14pt;
  line-height: 1.55;
  text-align: justify;
  margin-bottom: 14px;
}

.maryuska-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

.maryuska-page .wp-block-image {
  margin: 0 0 22px;
}

@media (max-width: 1180px) {
  /* le proporzioni restano, serve solo un po' di respiro ai lati */
  .maryuska-page-inner { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 767px) {
  .maryuska-page { padding: 18px 0 44px; }
  .maryuska-page .wp-block-columns {
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-bottom: 40px;
  }
  .maryuska-page .wp-block-column { flex-basis: 100% !important; }
  .maryuska-page .maryuska-formazione { margin-left: 0; max-width: none; }
  .maryuska-page h1, .maryuska-page h2,
  .maryuska-page p.maryuska-claim,
  .maryuska-page .maryuska-claim p { font-size: 17pt; }
}