/* ==========================================================================
   Footer — tre colonne + coda, scritto mobile-first
   Fondo il piu' scuro della scala, cosi' la pagina si chiude sul tono con cui
   si e' aperta e il footer non compete con la sezione contatti sopra.
   ========================================================================== */

.edil-footer {
  background: var(--scuro-1);
  color: rgba(255, 255, 255, .68);
  padding-block: 56px 0;
  /* spazio in fondo: sotto c'e' il lucchetto fisso delle preferenze cookie,
     che senza questo margine coprirebbe i link legali */
  padding-bottom: 76px;
  font-size: 14.5px;
  line-height: 1.65;
}

.edil-footer__griglia {
  display: grid;
  gap: 40px;
}

/* --- Colonna prodotto --- */
.edil-footer__logo {
  height: 74px;
  width: auto;
  display: block;
  margin-bottom: 18px;
}

.edil-footer__pitch {
  margin: 0 0 18px;
  max-width: 42ch;
}

.edil-footer__area {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
  font-family: var(--f-etichetta);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.edil-footer__area:hover,
.edil-footer__area:focus-visible {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}

/* --- Titoli di colonna --- */
.edil-footer__titolo {
  font-family: var(--f-titolo);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: .01em;
}

/* --- Navigazione --- */
.edil-footer__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.edil-footer__link {
  /* 44px di area di tocco: un link alto 16px e' un bersaglio che si sbaglia */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .18s ease;
}
.edil-footer__link:hover,
.edil-footer__link:focus-visible {
  color: var(--azzurro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Societa' --- */
.edil-footer__brand {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .58);
}

.edil-footer__incloud {
  display: inline-block;
  line-height: 0;
  margin-bottom: 18px;
  border-radius: 8px;
}
.edil-footer__incloud img {
  /* Il logo InCloud e' molto largo (360x104) e porta dentro il payoff:
     sotto i 60px di altezza "Le aziende di domani, oggi." non si legge piu'. */
  height: 60px;
  width: auto;
  max-width: 100%;
  transition: opacity .18s ease;
}
.edil-footer__incloud:hover img { opacity: .85; }

.edil-footer__dati {
  display: grid;
  gap: 4px;
  font-style: normal;
  font-size: 14px;
  color: rgba(255, 255, 255, .66);
}
/* 700 e non 600: e' il peso di Roboto che il layout carica davvero. */
.edil-footer__dati strong { color: rgba(255, 255, 255, .82); font-weight: 700; }

/* Sottolineato SEMPRE: distinguere un link dal testo attorno col solo colore
   non basta a chi non percepisce bene i contrasti cromatici. */
.edil-footer__pec {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, .82);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.edil-footer__pec:hover,
.edil-footer__pec:focus-visible {
  color: var(--azzurro);
  text-decoration-thickness: 2px;
}

/* --- Coda --- */
.edil-footer__coda {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.edil-footer__copyright {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .52);
}

.edil-footer__famiglia {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.edil-footer__sorella {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .58);
  text-decoration: none;
}
.edil-footer__sorella:hover,
.edil-footer__sorella:focus-visible {
  color: var(--azzurro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Da tablet in su
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .edil-footer {
    padding-block: 72px 0;
    padding-bottom: 84px;
  }
  .edil-footer__griglia {
    grid-template-columns: 1.4fr .8fr 1.2fr;
    gap: 48px;
  }
  .edil-footer__coda {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}