/* ==========================================================================
   PIEDE DI PAGINA — condiviso fra la home e le pagine interne.

   Stava solo in pagine.css, quindi la home usava ancora il piede ereditato da
   WordPress: cinque gruppi schiacciati in una colonna sola, etichette e link
   con lo stesso peso, e - sotto i 600px - nascosto del tutto. Qui vive una
   volta sola, e le due parti del sito chiudono allo stesso modo.

   Il file e' autonomo di proposito: --bordo-oro e --margine esistono solo in
   pagine.css, quindi ogni variabile ha il suo valore di scorta e il piede
   rende uguale anche dove quelle variabili non sono definite.
   ========================================================================== */

.pie {
  margin-top: 8rem;
  border-top: 1px solid var(--bordo-oro, rgba(212, 175, 55, 0.15));
  /* Fondo pieno, non trasparente: sulla home dietro c'e' la fotografia della
     corona a tutta pagina, e il piede ci finiva sopra illeggibile. Colore e
     disegno restano proprieta' separate, cosi' la home puo' rimettere il suo
     tralcio di rose senza cancellare il resto. */
  background-color: var(--fondo, #0a0204);
  background-image: linear-gradient(to bottom, rgba(212, 175, 55, 0.03), transparent 40%);
  /* il piede sta fuori da #brx-content, quindi il maiuscolo a tappeto del
     sito lo raggiungeva: qui va tolto e rimesso solo sui titoli di colonna */
  text-transform: none;
  position: relative;
  z-index: 2;
}

.pie-limite {
  max-width: 132rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margine, 2.4rem);
  padding-right: var(--margine, 2.4rem);
}

.pie-alto {
  padding-top: 6rem;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.pie-marchio {
  font-family: 'PP Eiko', 'Bodoni Moda', serif;
  font-weight: 100;
  font-size: clamp(3.2rem, 9vw, 4.8rem);
  line-height: 1;
  color: var(--white, #f0f0f0);
  margin: 0 0 1.6rem;
}

.pie-claim {
  font-size: 1.4rem;
  line-height: 1.7;
  color: rgba(244, 242, 238, 0.6);
  margin: 0;
  max-width: 42rem;
}

.pie-colonne {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 2.4rem;
}

.pie-titolo {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold, #D4AF37);
  margin: 0 0 1.8rem;
}

.pie-colonna ul { list-style: none; margin: 0; padding: 0; }
.pie-colonna li { margin-bottom: 1.2rem; }

.pie-colonna a {
  font-size: 1.45rem;
  line-height: 1.5;
  color: rgba(244, 242, 238, 0.78);
  text-decoration: none;
  transition: color 0.3s ease;
}

.pie-colonna a:hover,
.pie-colonna a:focus-visible { color: var(--gold-lt, #F5E096); }

.pie-avvertenza {
  font-size: 1.2rem;
  line-height: 1.6;
  color: rgba(244, 242, 238, 0.42);
  margin: 1.6rem 0 0;
}

.pie-basso {
  padding-top: 3rem;
  padding-bottom: 4rem;
  border-top: 1px solid rgba(212, 175, 55, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-size: 1.25rem;
  color: rgba(244, 242, 238, 0.45);
}

.pie-basso p { margin: 0; }
.pie-basso a { color: rgba(244, 242, 238, 0.7); text-decoration: none; }
.pie-basso a:hover,
.pie-basso a:focus-visible { color: var(--gold-lt, #F5E096); }

/* Riga legale: separata dai crediti, perche' privacy e cookie sono
   informazioni di servizio, non firme d'autore. */
.pie-legale {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-legale li { margin: 0; }

/* Bottone che riapre le scelte sui cookie: per legge il consenso dev'essere
   revocabile con la stessa facilita' con cui e' stato dato. Sembra un link,
   ma e' un bottone perche' non porta a nessun indirizzo. */
.pie-scelte-cookie {
  font: inherit;
  color: rgba(244, 242, 238, 0.7);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.pie-scelte-cookie:hover,
.pie-scelte-cookie:focus-visible { color: var(--gold-lt, #F5E096); }

.pie-su {
  align-self: flex-start;
  font-family: 'Tenor Sans', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 242, 238, 0.55);
  text-decoration: none;
  transition: color 0.3s ease;
}

.pie-su:hover,
.pie-su:focus-visible { color: var(--gold-lt, #F5E096); }

/* Solo dove le colonne sono due e strette: senza min-width l'indirizzo di
   posta non si spezza mai, fa da larghezza minima e le due colonne escono
   sbilanciate. Da 1024px in su c'e' spazio e l'indirizzo va tenuto intero. */
@media (max-width: 1023px) {
  .pie-colonna { min-width: 0; overflow-wrap: anywhere; }
}

@media (min-width: 1024px) {
  .pie-alto {
    flex-direction: row;
    justify-content: space-between;
    gap: 8rem;
    padding-top: 8rem;
    padding-bottom: 6rem;
  }

  .pie-firma { flex: 0 0 34rem; }
  .pie-colonne { flex: 1; grid-template-columns: repeat(4, 1fr); gap: 3rem; }

  .pie-basso {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 3rem;
  }
}