/*
 * Il piè di pagina del sito, uguale su tutte le pagine pubbliche.
 *
 * Sta in un file suo e non in sito.css perché lo usa anche il manuale:
 * scripts/pubblica-manuale.mjs copia il <footer class="piede-sito"> di
 * come-funziona.html in fondo al manuale e collega questo foglio, e il manuale
 * sito.css non lo carica. Per questo qui niente dipende da sito.css: colori
 * dai token con il loro valore di ripiego (la build controlla che siano quelli
 * del design system), carattere Instrument Sans se la pagina lo ha dichiarato
 * (le pagine del sito sì, il manuale no: lì vale il carattere di sistema).
 *
 * Il testo si ripete in ogni HTML (non ci sono inclusioni), l'aspetto no: una
 * pagina non può avere i dati della società scritti più piccoli o di un altro
 * colore. I selettori partono da footer.piede-sito, più forti del «footer» o
 * dell'«a» generici che una pagina può avere nel suo stile.
 *
 * Reggono due forme di markup: quella di oggi (tre colonne dentro
 * .piede-sito-colonne) e quella di prima (logo, due paragrafi e i collegamenti
 * in fila), che resta nel manuale pubblicato finché non lo si rigenera.
 */
footer.piede-sito {
  background: var(--ak-dark, #313138);
  color: #c9c9cf;                       /* 7,8:1 sul grafite */
  border: 0;
  border-top: 6px solid var(--ak-yellow, #fbe304);
  padding: 48px 0 44px;
  margin: 0;
  font-family: 'Instrument Sans', 'Instrument Sans ripiego', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  text-align: left;
}
footer.piede-sito .piede-sito-interno {
  width: min(100% - 2 * clamp(16px, 5vw, 64px), 1200px);
  max-width: none;
  margin: 0 auto;
}
footer.piede-sito p { margin: 0 0 12px; color: #c9c9cf; font-size: 15px; }
footer.piede-sito strong { color: #fff; font-weight: 600; }
footer.piede-sito a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  background: none;
}
footer.piede-sito a:hover { color: var(--ak-yellow, #fbe304); text-decoration-thickness: 2px; }
footer.piede-sito a:focus-visible {
  outline: 3px solid var(--ak-yellow, #fbe304);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Il logo di AK: assets/logo-ak-innovation-piede.png, 306×90 px, tre volte i
   102×30 mostrati, così resta nitido anche sui telefoni a densità tripla
   (quello da 150×44 si vedeva morbido). Ricavato da logo_ak_black.jpg
   (1280×373, il logo di AK su nero) con la stessa inquadratura e il fondo
   grafite #313138 del piede; 4 KB. Il manuale pubblicato usa ancora
   logo-ak-innovation-dark.png finché non si rigenera. */
footer.piede-sito .piede-sito-logo { height: 30px; width: auto; display: block; margin: 0 0 16px; }

/* I collegamenti alle pagine, nella forma di prima: in fila sotto un filetto. */
footer.piede-sito .piede-sito-collegamenti {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #4a4a52;
}
footer.piede-sito .piede-sito-collegamenti a { text-decoration: none; color: #e8e8ea; }
footer.piede-sito .piede-sito-collegamenti a:hover { color: var(--ak-yellow, #fbe304); text-decoration: underline; }

/* La forma di oggi: tre colonne da 900 px in su, una sotto l'altra prima. */
footer.piede-sito .piede-sito-colonne {
  display: grid;
  gap: 32px 48px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  footer.piede-sito .piede-sito-colonne { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
}
footer.piede-sito .piede-sito-titoletto {
  margin: 0 0 12px;
  color: #fff;
  font-family: 'Archivo', 'Archivo ripiego', 'Arial Narrow', Arial, sans-serif;
  font-stretch: 72%;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
}
/* Sulle pagine che il visitatore apre dal telefono (ingresso, documenti:
   quelle con l'intestazione essenziale) niente usa Archivo, e i soli
   «Contatti» e «Pagine» facevano scaricare 90 KB di carattere. Lì i
   titoletti sono nel carattere del testo. */
body:has(> header.testata-essenziale) footer.piede-sito .piede-sito-titoletto {
  font-family: 'Instrument Sans', 'Instrument Sans ripiego', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-stretch: 100%;
  font-weight: 700;
  font-size: 18px;
}
footer.piede-sito .piede-sito-colonne .piede-sito-collegamenti {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
footer.piede-sito ul.piede-sito-elenco { list-style: none; margin: 0; padding: 0; }
footer.piede-sito ul.piede-sito-elenco li { margin: 0; padding: 0; }
/* Alti 40 px: si toccano senza prendere quello sopra o sotto. Sul telefono
   le pagine stanno su due colonne, se ci stanno, perché la lista non sia
   più lunga del resto del piede. */
footer.piede-sito .piede-sito-colonne .piede-sito-collegamenti ul.piede-sito-elenco {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  column-gap: 20px;
}
@media (min-width: 900px) {
  footer.piede-sito .piede-sito-colonne .piede-sito-collegamenti ul.piede-sito-elenco { grid-template-columns: minmax(0, 1fr); }
}
footer.piede-sito .piede-sito-colonne .piede-sito-collegamenti a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  line-height: 1.25;
}
footer.piede-sito .piede-sito-contatti ul.piede-sito-elenco li { margin: 0 0 12px; }
footer.piede-sito .piede-sito-contatti li span { display: block; }

@media print {
  footer.piede-sito { background: #fff; color: #000; border-top: 1px solid #000; }
  footer.piede-sito p, footer.piede-sito strong, footer.piede-sito a { color: #000; }
  footer.piede-sito .piede-sito-collegamenti { display: none; }
}