/* Stili di pie' di pagina, scritti a mano.
   Vanno inseriti nel corpo della pagina, non nell'head: e' l'ordine
   che avevano su WordPress, e da cui dipende quali regole vincono. */
/* ============================ TOKEN ============================ */
.athena-ft {
  --blue-600: #2B53A0;
  --navy-950: #0B1730;
  --navy-900: #112140;
  --blue-700: #22417f;
  --blue-500: #3f6bc0;
  --blue-100: #dbe6fa;

  --gold-300: #ffd98a;
  --gold-200: #ffe6a3;

  --font-display: "Fraunces", "Roboto Slab", Georgia, serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;   --sp-8: 4rem;

  --container: 1320px;
}

.athena-ft *, .athena-ft *::before, .athena-ft *::after { box-sizing: border-box; }
.athena-ft {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.65;
  background: var(--navy-950);
  color: rgba(255,255,255,.72);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
.athena-ft img { max-width: 100%; height: auto; display: block; border: 0; }
.athena-ft a { color: rgba(255,255,255,.86); text-decoration: none; }
.athena-ft a:hover { color: #fff; }
.athena-ft p { margin: 0; }

.athena-ft .contenitore {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

/* ============================ LA FASCIA NEWSLETTER ============================ */
.athena-ft .news {
  /* navy PIATTO, non sfumato. Il piede e' fatto di tre pezzi separati
     (questo blocco, il modulo Elementor, il blocco 2): con una
     sfumatura ogni pezzo la farebbe ripartire da capo, e nei punti di
     giunzione si vedrebbe un gradino, che sembra una riga. */
  background: var(--navy-950);
  /* NIENTE bordo qui sotto: il titolo e i campi sono la stessa fascia,
     una riga in mezzo la taglierebbe in due. L'unica riga di
     separazione sta sotto al modulo, e divide la newsletter dal resto
     del piede. Se vuoi il navy tutto continuo, togli anche quella:
     e' il border-bottom su .elementor-2033 .elementor-widget-form. */
  padding-block: var(--sp-7) var(--sp-4);
}
.athena-ft .news__titolo {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
.athena-ft .news__titolo::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  background: var(--gold-300);
  margin-top: var(--sp-4);
}

/* ==================================================================
   IL MODULO DELLA NEWSLETTER
   Resta il widget Form di Elementor: qui cambia solo l'aspetto, e si
   dipinge lo stesso navy dei blocchi, cosi' fra un pezzo e l'altro
   non resta una striscia bianca.
   ================================================================== */

.elementor-2033 .elementor-widget-form {
  /* stesso identico navy degli altri due pezzi, e nessun bordo:
     il piede deve leggersi come una superficie sola */
  background: #0B1730 !important;
  background-image: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 0 3rem !important;
}
.elementor-2033 .elementor-widget-form .elementor-form {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Nome ed Email affiancati, il pulsante di fianco */
.elementor-2033 .elementor-form-fields-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr auto;
  gap: .75rem;
  align-items: start;
  margin: 0 !important;
}
.elementor-2033 .elementor-field-group {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
}
/* il pulsante sta in prima riga accanto ai campi; i consensi vanno a
   capo sotto, su tutta la larghezza. Senza il posizionamento esplicito
   il pulsante finiva su una riga tutta sua, in mezzo al vuoto. */
.elementor-2033 .elementor-field-group.elementor-field-type-submit {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start;
}
.elementor-2033 .elementor-field-type-acceptance { grid-column: 1 / -1 !important; }

@media (max-width: 780px) {
  .elementor-2033 .elementor-form-fields-wrapper { grid-template-columns: 1fr; }
  .elementor-2033 .elementor-field-group.elementor-field-type-submit {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .elementor-2033 .elementor-widget-form .elementor-button { width: 100%; }
}

/* le etichette non servono: i campi hanno gia' il segnaposto */
.elementor-2033 .elementor-field-group > .elementor-field-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.elementor-2033 .elementor-field-textual {
  font-family: "Roboto", sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #0a2540 !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 6px !important;
  padding: .85em 1.1em !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.elementor-2033 .elementor-field-textual:focus {
  outline: none;
  border-color: #ffd98a !important;
  box-shadow: 0 0 0 3px rgba(255,217,138,.28) !important;
}
.elementor-2033 .elementor-field-textual::placeholder { color: #8a97ab !important; }

/* le due caselle di consenso */
.elementor-2033 .elementor-field-type-acceptance .elementor-field-subgroup,
.elementor-2033 .elementor-field-type-acceptance .elementor-field-option {
  display: flex !important;
  align-items: flex-start;
  gap: .6rem;
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(255,255,255,.68);
}
.elementor-2033 .elementor-acceptance-field {
  appearance: none; -webkit-appearance: none;
  width: 18px !important; height: 18px !important; min-width: 18px;
  flex: none; margin: 2px 0 0 !important;
  border: 1.5px solid rgba(255,255,255,.45) !important;
  border-radius: 4px !important;
  background: transparent;
  cursor: pointer;
}
.elementor-2033 .elementor-acceptance-field:checked {
  background: #ffd98a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23112140' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat !important;
  border-color: #ffd98a !important;
}
.elementor-2033 .elementor-field-type-acceptance a { color: #ffd98a; text-decoration: underline; }

/* il pulsante */
.elementor-2033 .elementor-widget-form .elementor-button {
  font-family: "Roboto", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  background-color: #ffd98a !important;
  color: #112140 !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: .95em 2em !important;
  white-space: nowrap;
  transition: background-color .18s ease, transform .18s ease;
}
.elementor-2033 .elementor-widget-form .elementor-button:hover {
  background-color: #ffe6a3 !important;
  transform: translateY(-1px);
}
.elementor-2033 .elementor-message { font-size: .85rem !important; color: rgba(255,255,255,.8) !important; }

.athena-ft :focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .athena-ft *, .athena-ft *::before, .athena-ft *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}

/* i widget HTML non devono aggiungere margini o padding loro */
.elementor-2033 .elementor-widget-html:has(.athena-ft) { margin: 0 !important; }
.elementor-2033 .elementor-widget-wrap:has(> .elementor-widget-html > .elementor-widget-container > .athena-ft),
.elementor-2033 .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-html > .elementor-widget-container > .athena-ft) {
  padding: 0 !important;
}



/* ============================ IL CORPO DEL PIEDE ============================ */
/* lo sfondo e' quello di .athena-ft (navy piatto #0B1730), lo stesso
   del blocco 1 e del modulo in mezzo: nessuna sfumatura, cosi' fra un
   pezzo e l'altro non si vede nessuna giunzione */
.athena-ft .piede { padding-block: var(--sp-8) var(--sp-6); }

.athena-ft .piede__alto {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) repeat(3, minmax(180px, 1fr));
  gap: var(--sp-7) var(--sp-6);
}
@media (max-width: 1080px) {
  .athena-ft .piede__alto { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .athena-ft .piede__alto { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* la colonna del marchio */
.athena-ft .marchio img { width: 168px; margin-bottom: var(--sp-4); }
.athena-ft .marchio p {
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin-bottom: var(--sp-5);
  max-width: 28ch;
}
.athena-ft .social { display: flex; gap: var(--sp-3); }
.athena-ft .social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.86);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.athena-ft .social a:hover {
  background: var(--gold-300);
  border-color: var(--gold-300);
  color: var(--navy-900);
  transform: translateY(-2px);
}
.athena-ft .social svg { width: 18px; height: 18px; fill: currentColor; }

/* le tre colonne di link */
.athena-ft .colonna h3 {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin: 0 0 var(--sp-4);
}
.athena-ft .colonna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.athena-ft .colonna a {
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(255,255,255,.76);
  display: inline-block;
}
.athena-ft .colonna a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ============================ CONFORMITA' E LOGHI ============================ */
.athena-ft .conformita {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
}
.athena-ft .conformita p {
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(255,255,255,.72);
  max-width: 90ch;
  margin-inline: auto;
}
.athena-ft .conformita b, .athena-ft .conformita strong { color: #fff; font-weight: 600; }
.athena-ft .conformita a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 2px; }
.athena-ft .conformita a:hover { color: var(--gold-200); }

.athena-ft .albi {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-6);
}
@media (max-width: 1080px) { .athena-ft .albi { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .athena-ft .albi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .athena-ft .albi { grid-template-columns: repeat(2, 1fr); } }
/* tutti i loghi nello stesso riquadro, cosi' non ballano sulla riga */
.athena-ft .albi span {
  display: flex; align-items: center; justify-content: center;
  height: 68px;
  padding: var(--sp-3);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
/* altezza massima in pixel e non in percentuale: dentro una griglia
   il 100% non ha un riferimento certo e i loghi sbordavano */
.athena-ft .albi img {
  max-height: 44px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* ============================ DATI SOCIETARI E LEGALI ============================ */
.athena-ft .coda {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
  text-align: center;
  font-size: .82rem;
  line-height: 1.7;
  color: rgba(255,255,255,.6);
}
.athena-ft .coda a { color: rgba(255,255,255,.78); }
.athena-ft .coda a:hover { color: #fff; text-decoration: underline; }
.athena-ft .coda__legali {
  margin-top: var(--sp-4);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .35rem .9rem;
}
.athena-ft .coda__legali a { white-space: nowrap; }
.athena-ft .coda__legali span { color: rgba(255,255,255,.28); }
/* sul telefono i link legali vanno a capo continuamente e le stanghette
   finiscono a inizio riga: li' spariscono e restano gli spazi */
@media (max-width: 600px) {
  .athena-ft .coda__legali { gap: .5rem 1rem; }
  .athena-ft .coda__legali span { display: none; }
}