/*
 * Le fasce colorate da usare sulle row del costruttore.
 *
 * Si applicano scrivendo il nome della classe nel campo «Extra class name»
 * della row (Design Options → CSS → Extra class name). Non c'è nient'altro da
 * configurare: la row resta una row del costruttore, e togliendo la classe
 * torna com'era.
 *
 * Perché un file e non lo sfondo della row. Il costruttore sa mettere un
 * colore pieno o un'immagine; una sfumatura si fa a mano nel CSS della row,
 * una row per volta, e dopo tre row nessuno sa più quali hanno la sfumatura
 * giusta e quali una variante nata da un copia-incolla. Qui il colore è
 * scritto in un posto solo: cambiarlo lì li cambia tutti.
 */

/* -----------------------------------------------------------------------------
 * Fascia verde — la sfumatura dell'intestazione
 *
 * Dal verde-petrolio scuro a sinistra al verde a destra, in diagonale leggera.
 * I due colori sono i capi della sfumatura; il terzo, in mezzo, non è
 * decorativo: senza, il passaggio fra un ciano scuro e un verde medio attraversa
 * una zona spenta e si vede una banda grigia a metà fascia.
 * -------------------------------------------------------------------------- */
.sothra-fascia-verde {
  --sothra-fascia-da: #0f5f6b;
  --sothra-fascia-mezzo: #167b6e;
  --sothra-fascia-a: #2fa269;

  position: relative;
  background-image: linear-gradient(
    100deg,
    var(--sothra-fascia-da) 0%,
    var(--sothra-fascia-mezzo) 48%,
    var(--sothra-fascia-a) 100%
  );
  background-color: var(--sothra-fascia-da);
  color: #fff;
}

/*
 * Il testo dentro la fascia.
 *
 * Betheme colora titoli e paragrafi dalle opzioni del tema, con selettori che
 * una classe sola non batte: `.sothra-fascia-verde .the_content_wrapper h1` è
 * (0,2,1) e vince su quel che il tema dichiara per i titoli dentro il
 * contenuto. Senza queste righe la fascia è verde e il testo resta grigio
 * scuro — illeggibile su metà della sfumatura.
 */
.sothra-fascia-verde h1,
.sothra-fascia-verde h2,
.sothra-fascia-verde h3,
.sothra-fascia-verde h4,
.sothra-fascia-verde h5,
.sothra-fascia-verde h6,
.sothra-fascia-verde p,
.sothra-fascia-verde li,
.sothra-fascia-verde .column_attr,
.sothra-fascia-verde .wpb_text_column {
  color: #fff;
}

/* I link restano link: sottolineati, perché sul verde il solo cambio di
   colore non basta a distinguerli dal testo. */
.sothra-fascia-verde a:not(.button):not(.sothra-search__submit) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sothra-fascia-verde a:not(.button):not(.sothra-search__submit):hover,
.sothra-fascia-verde a:not(.button):not(.sothra-search__submit):focus-visible {
  color: #d8f3e4;
}

/* Il motore di ricerca dentro la fascia tiene i propri colori: è una scheda
   bianca sopra il verde, non testo sul verde. */
.sothra-fascia-verde .sothra-search a,
.sothra-fascia-verde .sothra-search p,
.sothra-fascia-verde .sothra-search li {
  color: inherit;
  text-decoration: none;
}

/* Un po' d'aria sopra e sotto, se la row non ne ha di suo. La scrive con
   `:where()`, che vale zero di specificità: basta impostare il padding dalle
   opzioni della row per avere la meglio, senza dover scrivere `!important`
   da nessuna parte. */
:where(.sothra-fascia-verde) {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (max-width: 767px) {
  :where(.sothra-fascia-verde) {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
}