/*
 * Piè di pagina — aspetto
 *
 * Origine: .site-footer / .footer-* di source-clean/styles.css, piu' i due
 * blocchi @media (1180 e 820). Ogni valore letto.
 *
 * ⚠️ Lo sfondo e' #101010: il QUINTO nero del sorgente, dopo #121212
 * (palette), #090909 (collage Persone e pannello Contatti), #050505 (schede
 * della galleria) e #111111 (fasce scure, normalizzato). Non e' nella
 * palette: resta letterale ed esposto come controllo.
 *
 * ⚠️ La griglia dichiara CINQUE colonne — `minmax(280px,1.15fr)` piu'
 * `repeat(4, minmax(160px,.62fr))` — ma il sorgente ne riempie quattro: il
 * blocco del marchio e tre colonne. La quinta resta vuota, e questo stringe
 * le altre. E' cosi' nell'originale; il controllo *Colonne* permette di
 * portarla a 3.
 *
 * Indice
 *   1. griglia
 *   2. marchio
 *   3. titoli e testo
 *   4. colonne
 *   5. barra in basso
 *   6. impilamento
 */

/* ======================================================================
   1. GRIGLIA
   ====================================================================== */
.falone-footer {
  display: grid;
  grid-template-columns:
    minmax(var(--falone-footer-main-min, 280px), var(--falone-footer-main-fr, 1.15fr))
    repeat(var(--falone-footer-cols, 4),
      minmax(var(--falone-footer-col-min, 160px), var(--falone-footer-col-fr, .62fr)));
  gap: var(--falone-footer-gap, 46px);
  padding:
    var(--falone-footer-pad-top, 78px)
    var(--falone-footer-pad-x, 52px)
    var(--falone-footer-pad-bottom, 34px);
  background: var(--falone-footer-bg, #101010);
  color: var(--falone-footer-ink, #fff);
}

.falone-footer__main,
.falone-footer__col,
.falone-footer__bottom {
  margin-left: var(--falone-indent, 0px);
}

/* ======================================================================
   2. MARCHIO
   ======================================================================
   ⚠️ Selettore DISCENDENTE sull'<img>: `.elementor img { height: auto;
   box-shadow: none }` ha specificita' (0,1,1) e batterebbe la classe sola,
   lasciando il logo alla sua altezza naturale invece dei 58px. Trappola
   gia' presa tre volte: Persone, Garanzie, Metodo.

   object-position: left center — il logo resta ancorato a sinistra dentro
   il suo riquadro, non si centra. */
.falone-footer__brand {
  display: block;
  width: var(--falone-footer-brand-w, 168px);
  height: var(--falone-footer-brand-h, 58px);
}

.falone-footer__brand .falone-footer__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.falone-footer__lead {
  max-width: var(--falone-footer-lead-max, 430px);
  margin: var(--falone-footer-lead-top, 28px) 0 0;
}

/* ======================================================================
   3. TITOLI E TESTO
   ====================================================================== */
.falone-footer__h3 {
  margin: 0 0 var(--falone-footer-h3-gap, 22px);
  color: var(--falone-footer-ink, #fff);
  font-family: var(--falone-font-display, "Jost", sans-serif);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ⚠️ Selettori DISCENDENTI anche per il testo: fra i bersagli c'e' <a>, e
   Hello Elementor pubblica `a:active, a:hover { color: #336 }` con
   specificita' (0,1,1). Con due classi (0,2,0) la regola di base tiene, e
   l'hover piu' sotto fa (0,2,1) per battere quel blu navy. */
.falone-footer .falone-footer__text,
.falone-footer .falone-footer__link {
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.75;
  text-decoration: none;

  color: rgba(255, 255, 255, .64);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-footer-ink, #fff) calc(var(--falone-footer-text-op, .64) * 100%),
    transparent);
}

/* ⚠️ (0,2,1): serve per superare il `a:hover { color: #336 }` del tema
   padre, che e' (0,1,1). Coperto anche :active, che sta nella stessa
   regola del reset. */
.falone-footer a.falone-footer__link:hover,
.falone-footer a.falone-footer__link:focus-visible,
.falone-footer a.falone-footer__link:active {
  color: var(--falone-footer-accent, #f7941d);
}

/* nell'originale i link del piè di pagina non hanno contorno di messa a
   fuoco: aggiunta nostra, o chi naviga da tastiera non sa dove si trova */
.falone-footer a:focus-visible {
  outline: 2px solid var(--falone-footer-accent, #f7941d);
  outline-offset: 3px;
}

/* ======================================================================
   4. COLONNE
   ====================================================================== */
.falone-footer__col {
  display: grid;
  align-content: start;
  gap: var(--falone-footer-col-gap, 12px);
}

.falone-footer__col p { margin: 0; }

/* nelle colonne i recapiti e le voci di menu stanno uno per riga */
.falone-footer__col .falone-footer__link,
.falone-footer__col .falone-footer__text { display: block; }

/* la colonna del menu ha un suo corpo: piu' piccolo, grassetto, spaziato */
.falone-footer__col--menu .falone-footer__link {
  width: max-content;
  max-width: 100%;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ======================================================================
   5. BARRA IN BASSO
   ====================================================================== */
.falone-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--falone-footer-bottom-gap, 24px);
  margin-top: var(--falone-footer-bottom-top, 42px);
  padding-top: var(--falone-footer-bottom-pad, 24px);

  border-top: 1px solid rgba(255, 255, 255, .14);   /* ripiego */
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .falone-footer__bottom {
    border-top-color: color-mix(in srgb,
      var(--falone-footer-ink, #fff) calc(var(--falone-footer-line-op, .14) * 100%),
      transparent);
  }
}

.falone-footer .falone-footer__note {
  font-family: var(--falone-font-body, "Plus Jakarta Sans", sans-serif);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.75;

  color: rgba(255, 255, 255, .64);   /* ripiego */
  color: color-mix(in srgb,
    var(--falone-footer-ink, #fff) calc(var(--falone-footer-text-op, .64) * 100%),
    transparent);
}

/* ======================================================================
   6. IMPILAMENTO
   ======================================================================
   Il sorgente scala su DUE soglie: a 1180 va a due colonne col blocco del
   marchio a tutta larghezza, a 820 a una sola. */
@media (max-width: 1180px) {
  .falone-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .falone-footer__main { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .falone-footer {
    grid-template-columns: 1fr;
    padding:
      var(--falone-footer-pad-top-tablet, 58px)
      var(--falone-footer-pad-x-tablet, 18px)
      var(--falone-footer-pad-bottom-tablet, 28px);
  }
  /* da flex a grid: le due note si impilano invece di stringersi */
  .falone-footer__bottom { display: grid; }
}