/* ============================================================
   ORDITRA — piè di pagina
   Solo variabili di app.css: nessun colore letterale, così il
   footer segue il tema chiaro e quello scuro senza righe in più.
   Le classi sono prefissate "pie-" per non incrociare .piede
   del sito pubblico.
   ============================================================ */

.piede-sito {
  display: grid;
  gap: 24px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--f);
  font-size: 14.5px;
  padding: 34px 20px calc(30px + env(safe-area-inset-bottom));
}

/* minmax(0,1fr) e non 1fr: una email lunga altrimenti allarga la
   colonna e trascina la pagina in orizzontale. */
.piede-sito .pie-in {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 26px 32px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) {
  .piede-sito .pie-in { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .piede-sito .pie-marchio { grid-column: 1 / -1 }
}
@media (min-width: 900px) {
  .piede-sito .pie-in { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) }
  .piede-sito .pie-marchio { grid-column: auto }
}

/* ---------- marchio ---------- */
.piede-sito .pie-marchio { display: grid; gap: 10px; align-content: start }
.piede-sito .pie-segno {
  display: flex; align-items: center; gap: 9px;
  margin: 0; color: var(--ink);
}
.piede-sito .pie-logo { display: flex; color: var(--brand) }
.piede-sito .pie-logo svg { height: 21px; width: auto; flex: none }
.piede-sito .pie-nome { font-size: 17px; font-weight: 800; letter-spacing: .13em }
.piede-sito .pie-claim {
  margin: 0; max-width: 34ch;
  color: var(--ink-2); font-size: 14.5px; line-height: 1.5;
}

/* ---------- colonne ---------- */
.piede-sito .pie-col { display: grid; gap: 6px; align-content: start }
.piede-sito .pie-tit {
  margin: 0;
  font: 700 11.5px var(--f); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.piede-sito .pie-lista { list-style: none; margin: 0; padding: 0 }

/* Il footer si guarda dal telefono, spesso con una mano sola:
   ogni link è alto almeno 44px anche se il testo è corto. */
.piede-sito .pie-lista a {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 4px 0;
  color: var(--ink-2); text-decoration: none; font-size: 15px;
  border-radius: 8px; overflow-wrap: anywhere;
}
.piede-sito .pie-lista a:hover { color: var(--brand) }

/* Il solo elemento che si comporta da pulsante: largo quanto il suo
   testo, non quanto la colonna, altrimenti sembra una fascia.
   Il selettore ripete .pie-lista per pesare più della regola dei
   link qui sopra, che altrimenti vince su colore e spaziatura. */
.piede-sito .pie-lista .pie-wa {
  width: fit-content;
  max-width: 100%;
  padding: 4px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  font-weight: 600;
}
.piede-sito .pie-lista .pie-wa:hover { border-color: var(--brand); color: var(--brand) }
.piede-sito .pie-lista .pie-wa svg { width: 18px; height: 18px; fill: currentColor; flex: none }

.piede-sito .pie-zona { margin: 0; font-size: 14.5px; line-height: 1.5 }
.piede-sito .pie-zona strong { color: var(--ink); font-weight: 650 }

/* ---------- riga legale ---------- */
.piede-sito .pie-legale {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  color: var(--ink-3); font-size: 12.5px;
}
/* Il separatore è decorazione: sta nel CSS e non nel testo, così
   sparisce da solo quando P. IVA e referente non ci sono. */
.piede-sito .pie-legale span + span::before {
  content: "·";
  padding-right: 12px;
  color: var(--line-2);
}