/* ============================================================
   Footer (inc/footer.php): newsletter in testa, logo e colonne
   di link, riga del copyright. Su mobile le colonne diventano
   voci a fisarmonica, chiuse finché non si toccano.
   Tutto è racchiuso in .ft, così non tocca il resto del sito.
   ============================================================ */

.ft{
  --ft-navy:#172644;
  --ft-viola:#9D6494;
  --ft-viola-dark:#7e4a76;
  --ft-viola-light:#f0cfe9;
  --ft-line:rgba(255,255,255,.12);
  clear:both;
  background:var(--ft-navy);
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.6;
  text-align:left;
}
.ft *{box-sizing:border-box}
.ft a{text-decoration:none;color:inherit;transition:color .2s}
.ft a:hover{color:#fff}

/* stessa larghezza del contenuto di .container_1440 (1440px meno 20px di padding per lato) */
.ft .ft-in{
  width:min(1400px,calc(100% - 40px));
  margin:0 auto;
}
.ft .ft-in--corpo{padding-top:70px}

/* ---------- newsletter ---------- */
.ft .ft-nl{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  padding-bottom:50px;
  margin-bottom:56px;
  border-bottom:1px solid var(--ft-line);
}
.ft .ft-nl-titolo{
  display:block;
  color:#fff;
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
}
.ft .ft-nl p{margin:10px 0 0}
.ft .ft-nl-riga{display:flex;gap:8px}
/* il selettore lungo vince sulle regole generali degli input di style.css */
.ft .ft-nl-riga input[type=email]{
  flex:1;
  min-width:0;
  width:auto;
  height:50px;
  margin:0;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:6px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:.95rem;
  font-family:inherit;
}
.ft .ft-nl-riga input[type=email]::placeholder{color:rgba(255,255,255,.55)}
.ft .ft-nl-riga input[type=email]:focus{outline:0;border-color:var(--ft-viola)}
.ft .ft-nl-riga button{
  height:50px;
  padding:0 24px;
  border:0;
  border-radius:6px;
  background:var(--ft-viola);
  color:#fff;
  font-size:.95rem;
  font-weight:800;
  font-family:inherit;
  cursor:pointer;
  transition:background .2s;
}
.ft .ft-nl-riga button:hover{background:var(--ft-viola-dark)}
.ft .ft-nl-privacy{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-top:12px;
  font-size:.78rem;
  line-height:1.45;
  cursor:pointer;
}
.ft .ft-nl-privacy input{flex:0 0 auto;margin:2px 0 0}
.ft .ft-nl-privacy a{text-decoration:underline}
/* honeypot: fuori schermo, i bot lo compilano */
.ft .ft-nl-hp{position:absolute;left:-9999px;top:-9999px}

/* ---------- logo e colonne ---------- */
/* desktop: logo e descrizione in alto a sinistra, social e Comune sotto,
   le colonne di link occupano entrambe le righe */
.ft .ft-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  grid-template-rows:auto 1fr;
  gap:0 40px;
}
.ft .ft-brand{grid-column:1;grid-row:1}
.ft .ft-extra{grid-column:1;grid-row:2}
.ft .ft-col{grid-row:1 / span 2}
.ft .ft-brand p{
  max-width:380px;
  margin:22px 0 26px;
  font-size:.95rem;
  line-height:1.65;
}
.ft .ft-social{display:flex;align-items:center;gap:10px}
.ft .ft-social span{
  margin-right:6px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ft-viola-light);
}
.ft .ft-social a{
  width:42px;height:42px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:6px;
  color:#fff;
  font-size:18px;
  transition:background .2s,border-color .2s;
}
.ft .ft-social a:hover{background:var(--ft-viola);border-color:var(--ft-viola)}
.ft .ft-comune{display:block;width:170px;max-width:100%;height:auto;margin-top:30px}

.ft .ft-col h4{margin:0 0 18px}
/* su desktop il pulsante è solo un titolo: si apre a fisarmonica sotto i 760px */
.ft .ft-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:0;
  border:0;
  background:none;
  color:var(--ft-viola-light);
  font:inherit;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:left;
  pointer-events:none;
}
.ft .ft-toggle svg{
  display:none;
  width:18px;height:18px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .25s;
}
.ft .ft-links a{display:block;padding:5px 0;font-size:.95rem}
.ft .ft-links .ft-forte{font-weight:700;color:#fff}

/* ---------- copyright ---------- */
.ft .ft-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
  margin-top:60px;
  padding:22px 0;
  border-top:1px solid var(--ft-line);
  color:rgba(255,255,255,.6);
  font-size:.85rem;
}
/* pagine senza newsletter e colonne (area operatori): resta solo la riga */
.ft .ft-bottom:first-child{margin-top:0;border-top:0}
.ft .ft-credits{margin-left:auto}
.ft .ft-credits a{font-weight:700}

/* simbolo delle frecce del vecchio footer, in filigrana sul lato destro (solo desktop, come prima) */
@media (min-width:1024px){
  .ft{position:relative;isolation:isolate;overflow:hidden}
  .ft:before{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:231px;
    height:302px;
    transform:translateY(-50%);
    background:url(../img/bg_footer.png) right center/contain no-repeat;
    opacity:.08;
    pointer-events:none;
    z-index:-1;
  }
}

@media (max-width:900px){
  .ft .ft-nl{grid-template-columns:1fr;gap:24px}
  /* sotto i 900px: logo e descrizione, poi le colonne, poi social e Comune */
  .ft .ft-grid{grid-template-columns:1fr 1fr 1fr;grid-template-rows:none;gap:40px}
  .ft .ft-brand,.ft .ft-extra{grid-column:1/-1;grid-row:auto}
  .ft .ft-brand p{margin-bottom:0}
  .ft .ft-col{grid-row:auto}
  .ft .ft-extra{order:2}
}

/* mobile: colonne a fisarmonica */
@media (max-width:760px){
  .ft .ft-in--corpo{padding-top:50px}
  .ft .ft-nl{padding-bottom:40px;margin-bottom:40px}
  .ft .ft-nl-riga{flex-direction:column}
  /* in colonna flex:1 azzererebbe l'altezza del campo */
  .ft .ft-nl-riga input[type=email]{flex:0 0 auto;width:100%}
  .ft .ft-grid{grid-template-columns:1fr;gap:0}
  .ft .ft-brand{margin-bottom:30px}
  .ft .ft-extra{margin-top:30px}
  .ft .ft-col{border-top:1px solid var(--ft-line)}
  .ft .ft-col:last-child{border-bottom:1px solid var(--ft-line)}
  .ft .ft-col h4{margin:0}
  .ft .ft-toggle{min-height:56px;pointer-events:auto;cursor:pointer}
  .ft .ft-toggle:focus-visible{outline:2px solid var(--ft-viola-light);outline-offset:2px}
  .ft .ft-toggle svg{display:block}
  .ft .ft-col.is-aperta .ft-toggle svg{transform:rotate(180deg)}
  .ft .ft-links{display:none;padding:0 0 18px}
  .ft .ft-col.is-aperta .ft-links{display:block}
  .ft .ft-bottom{margin-top:34px}
  .ft .ft-credits{margin-left:0}
}