/*
 * Tipografia di base per il contenuto WordPress "standard" (titoli e
 * paragrafi generati da the_content() senza una classe di pattern
 * dedicata, es. il testo di chiusura delle pagine servizio importate
 * da JSON): stessi caratteri e le stesse dimensioni già usati
 * nell'homepage (Nunito Sans per i titoli, Geologica per il corpo,
 * vedi hero.css/pattern-servizio.css).
 *
 * Selettori con specificità azzerata (:where()) così da restare un
 * fallback: qualunque classe di pattern (es. .pattern-servizio__titolo)
 * continua a prevalere senza bisogno di !important.
 *
 * .page-content (template base `page.php`): stesso contenitore già
 * usato dal pattern "Servizio" (max-width 1594px, stesso padding e
 * stesso breakpoint di 767px), così una Pagina generica composta di
 * blocchi nativi resta allineata alle sezioni della homepage.
 */
.page-content {
  max-width: 1594px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

@media (width <= 767px) {
  .page-content {
    padding: 1rem 0.5rem;
  }
}

/*
 * .page-content--piena (template `page-larghezza-piena.php`): stesso
 * padding verticale del contenitore normale, ma nessun max-width né
 * padding laterale — il contenuto occupa tutta la larghezza disponibile.
 */
.page-content--piena {
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

@media (width <= 767px) {
  .page-content--piena {
    padding-right: 0;
    padding-left: 0;
  }
}

:where(#primary) h1 {
  font-family: var(--font-titles);
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
}

:where(#primary) h2 {
  font-family: var(--font-titles);
  font-size: clamp(2rem, 4vw, 3.33rem);
  font-weight: 900;
  line-height: 1.15;
}

:where(#primary) h3 {
  font-family: var(--font-titles);
  font-size: clamp(1.25rem, 2.5vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
}

:where(#primary) h4 {
  font-family: var(--font-titles);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

:where(#primary) h5 {
  font-family: var(--font-titles);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

:where(#primary) h6 {
  font-family: var(--font-titles);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

:where(#primary) p,
:where(#primary) li {
  font-family: var(--font-geologica);
  font-size: 1.1rem;
  font-weight: 200;
  line-height: 1.6;
}

/*
 * Tabelle di contenuto: intestazione verde brand (var(--color-green),
 * già usato come sfondo pieno in box-servizi.css/cards-passaggi.css),
 * bordi e righe alternate su var(--color-card-inactive), coerente con
 * il grigio bordi già usato in cards-passaggi.css.
 */
:where(#primary) table {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  border: 1px solid var(--color-card-inactive);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-geologica);
}

:where(#primary) thead {
  background: var(--color-green);
}

:where(#primary) th {
  padding: 0.75rem 1rem;
  font-weight: 700;
  color: var(--color-white);
  text-align: left;
}

:where(#primary) td {
  padding: 0.75rem 1rem;
  color: var(--color-card-text);
  border-top: 1px solid var(--color-card-inactive);
}

:where(#primary) tbody tr:nth-child(even) {
  background: var(--color-footer-background);
}

/*
 * Box in evidenza (es. avviso, nota informativa): sfondo verde chiaro
 * ottenuto come tint di var(--color-green) (10%), stesso bordo verde
 * già usato su badge-categorie.css/recensioni.css/
 * pattern-lista-smaltimenti.css (1.5px solid var(--color-green)).
 */
.blocco-evidenza {
  padding: 1.5rem;
  background: color-mix(in srgb, var(--color-green) 10%, var(--color-white));
  border: 1.5px solid var(--color-green);
  border-radius: 12px;
}

/*
 * Blocco "codice": sfondo grigio chiaro var(--color-form-background)
 * (già usato per lo sfondo dei campi form in form-contatti.css), bordo
 * leggermente più scuro var(--color-card-inactive).
 */
:where(#primary) code {
  padding: 0.15em 0.4em;
  font-family: monospace;
  background: var(--color-form-background);
  border: 1px solid var(--color-card-inactive);
  border-radius: 6px;
}

:where(#primary) pre {
  padding: 1rem;
  overflow-x: auto;
  background: var(--color-form-background);
  border: 1px solid var(--color-card-inactive);
  border-radius: 6px;
}

:where(#primary) pre code {
  padding: 0;
  background: none;
  border: none;
}