/**
 * Schede ingrediente — impaginazione della pagina singola.
 *
 * Serve perche' il tipo `ingrediente` e' nuovo e dt-the7 lo impagina con il ripiego: a 390 e a
 * 768 il testo correva da bordo a bordo senza un margine, e l'H2 usciva piu' grande dell'H1
 * (40px contro 24px), cioe' la gerarchia rovesciata proprio sulla pagina che deve dimostrare di
 * essere un documento serio.
 *
 * Tutto e' ancorato a body.single-ingrediente: e' l'unico modo di vincere sui selettori del tema
 * senza spargere !important, e garantisce che nessuna di queste regole possa toccare gli
 * articoli, le pagine o il negozio. Niente :where() qui: azzererebbe la specificita' proprio
 * dove serve averla.
 */

body.single-ingrediente .page-title .wf-wrap,
body.single-ingrediente .content > article > .entry-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
  box-sizing: border-box;
}

body.single-ingrediente .entry-content {
  font-size: 17px;
  line-height: 1.75;
  color: #2a2f36;
}

/**
 * Il titolo.
 *
 * dt-the7 fissa la barra del titolo con
 *   #page .page-title-responsive-enabled.page-title .entry-title { font: 24px/26px ... }
 * cioe' specificita' (1,2,0) grazie all'ID. Un `body.single-ingrediente .entry-title` (0,2,1)
 * perde a ogni larghezza, e infatti perdeva: H1 a 24px e H2 a 25px, gerarchia rovesciata.
 *
 * Non e' una regola da rispettare per coerenza col resto del sito: gli articoli sono costruiti
 * in Elementor e il loro H1 e' un widget da 40px, quindi quella barra del tema non la usano
 * proprio. La scheda deve somigliare agli articoli, non alla barra.
 *
 * Si rientra dentro l'ID del tema invece di aggiungere !important: cosi' la regola resta
 * scavalcabile domani da chi arrivera' dopo, che e' esattamente quello che !important toglie.
 */
body.single-ingrediente #page .page-title .entry-title {
  font-size: 38px;
  line-height: 1.2;
  font-weight: 300;
  color: #032a49;
  letter-spacing: .01em;
}

/* L'H2 deve stare SOTTO l'H1, non sopra. */
body.single-ingrediente .entry-content h2 {
  font-size: 25px;
  line-height: 1.3;
  font-weight: 300;
  color: #032a49;
  margin: 2.4rem 0 .9rem;
}

body.single-ingrediente .entry-content p {
  margin: 0 0 1.15rem;
}

/* Il primo paragrafo e' la risposta estraibile: sta in grassetto nel testo, e qui prende anche
   il filetto oro, perche' chi arriva dalla ricerca deve trovarla senza cercarla. */
body.single-ingrediente .entry-content > p:first-child {
  font-size: 18.5px;
  line-height: 1.65;
  border-left: 3px solid #c5a059;
  padding-left: 1.1rem;
  margin-bottom: 1.8rem;
}
body.single-ingrediente .entry-content > p:first-child strong {
  font-weight: 500;
}

body.single-ingrediente .entry-content a {
  color: #032a49;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Firma della revisione: chi l'ha scritta, quando, e su quale fatto normativo si regge. */
.er-scheda-revisione {
  margin: 2.6rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid #e6e1d8;
  border-left: 3px solid #032a49;
  background: #fbfaf8;
  font-size: 14px;
  line-height: 1.65;
  color: #6b7280;
}
.er-scheda-revisione strong {
  color: #032a49;
  font-weight: 600;
}
.er-scheda-revisione p { margin: 0 0 .35rem; }
.er-scheda-revisione p:last-child { margin-bottom: 0; }

@media (max-width: 782px) {
  body.single-ingrediente #page .page-title .entry-title { font-size: 29px; line-height: 1.25; }
  body.single-ingrediente .entry-content { font-size: 16.5px; }
  body.single-ingrediente .entry-content h2 { font-size: 22px; }
  body.single-ingrediente .entry-content > p:first-child { font-size: 17.5px; }
  body.single-ingrediente .page-title .wf-wrap,
  body.single-ingrediente .content > article > .entry-content {
    padding-left: 18px;
    padding-right: 18px;
  }
}