/* Icone FontAwesome servite localmente come SVG mascherati.
   Sostituiscono il Kit CDN (kit.fontawesome.com), dinamico e quindi incompatibile con SRI.

   COME FUNZIONA
   Il tag <i> resta un <i> e viene disegnato con mask-image + currentColor, cosi' l'icona
   eredita il colore del testo come faceva il webfont. Nessun JavaScript coinvolto.

   Il selettore usa la sola classe dell'icona (.fa-plus) e non il prefisso di peso
   (.fal/.far/.fab): cosi' se un redattore scrive fas invece di fal l'icona si vede lo
   stesso. Il peso resta nel NOME FILE, che documenta quale variante va usata.

   PROVENIENZA DEGLI SVG
   light-* e regular-*  : Font Awesome Pro 7.3.1 (account in licenza)
   brands-*             : Font Awesome Free 6.7.2 (in FA i brands sono identici a Pro)

   AGGIUNGERE O SOSTITUIRE UN'ICONA
   1. Salvare l'SVG in images/icons/ con nome {peso}-{nome-icona}.svg
   2. Aggiungere/aggiornare qui sotto il blocco i.fa-{nome-icona}
   3. La width DEVE corrispondere al viewBox dell'SVG: larghezza / altezza, in em.
      Sostituendo un'icona con una variante di peso o versione diversa il viewBox spesso
      cambia: se non si aggiorna la width l'icona risulta schiacciata o distanziata male.
   Un'icona usata nei contenuti ma non elencata qui non si vede: e' voluto, meglio
   invisibile che un rettangolo pieno colorato. */

i.fa, i.fas, i.far, i.fal, i.fat, i.fad, i.fab,
i[class*="fa-solid"], i[class*="fa-regular"], i[class*="fa-light"],
i[class*="fa-thin"], i[class*="fa-brands"], i[class*="fa-sharp"] {
    display: inline-block;
    height: 1em;
    width: 1em;
    vertical-align: -0.125em;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

i.fa-plus {
    width: 0.875em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/light-plus.svg");
            mask-image: url("../images/icons/light-plus.svg");
}

i.fa-bed-alt {
    width: 1.000em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/light-bed-alt.svg");
            mask-image: url("../images/icons/light-bed-alt.svg");
}

i.fa-water {
    width: 1.000em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/regular-water.svg");
            mask-image: url("../images/icons/regular-water.svg");
}

i.fa-couch {
    width: 1.250em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/light-couch.svg");
            mask-image: url("../images/icons/light-couch.svg");
}

i.fa-arrow-right {
    width: 1.000em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/light-arrow-right.svg");
            mask-image: url("../images/icons/light-arrow-right.svg");
}

i.fa-bed {
    width: 1.125em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/light-bed.svg");
            mask-image: url("../images/icons/light-bed.svg");
}

i.fa-wheelchair {
    width: 1.000em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/light-wheelchair.svg");
            mask-image: url("../images/icons/light-wheelchair.svg");
}

i.fa-angle-down {
    width: 0.750em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/light-angle-down.svg");
            mask-image: url("../images/icons/light-angle-down.svg");
}

i.fa-instagram {
    width: 0.875em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/brands-instagram.svg");
            mask-image: url("../images/icons/brands-instagram.svg");
}

i.fa-facebook-f {
    width: 0.625em;
    background-color: currentColor;
    -webkit-mask-image: url("../images/icons/brands-facebook-f.svg");
            mask-image: url("../images/icons/brands-facebook-f.svg");
}