/* Marchio Wattly — versione orizzontale (icona + parola).
   L'icona è un file SVG a sé (serve anche come favicon), la parola è testo
   vero: così resta nitida a qualunque ingrandimento e la si può leggere
   anche dagli screen reader. I colori sono quelli del marchio, fissi, non
   presi dal tema: verde #12c777, azzurro #2fc3f7, e per le lettere centrali
   il verde-nero #0a2e26.
   Uso: <span class="marchio"><img class="marchio-icona" src="...svg" alt=""><span class="marchio-parola"><i class="m-w">w</i><i class="m-a">attl</i><i class="m-y">y</i></span></span>
   La misura la decide il font-size dell'elemento che lo contiene. */

.marchio { display: inline-flex; align-items: center; gap: .37em; line-height: 1; }
/* L'icona è volutamente molto più alta delle lettere: nel marchio orizzontale
   sta a 2,9 volte l'altezza delle lettere, non a 1,5. Con un'icona più piccola
   il marchio sembra un'icona appiccicata a una scritta. */
.marchio-icona { width: 2.2em; height: 2.2em; flex: none; display: block; }
.marchio-parola {
  font-size: 1em; font-weight: 500; letter-spacing: .03em;
  text-transform: lowercase; white-space: nowrap;
}
/* <i> è usato perché è il tag più corto che non porta stili suoi: qui serve
   solo a dare un colore diverso a pezzi della stessa parola. */
.marchio-parola i { font-style: normal; }
.marchio-parola .m-w { color: #12c777; }
.marchio-parola .m-a { color: #0a2e26; }
.marchio-parola .m-y { color: #2fc3f7; }