/* Footer del sito, senza Elementor.
   Misure prese dal footer precedente a 1440px: fascia contenuti su #f1f3f7,
   quattro colonne 428/438/182/182 con 50px di spazio, barra finale separata. */

.of-pie{
  position:relative;
  background:#f1f3f7;
  color:#111;
  font-size:16px;
  /* 1,714 è l'interlinea del footer precedente: 27,424px su 16px. */
  line-height:1.714;
  overflow:hidden;
}

/* Filigrana: il logo del sito, in basso a sinistra, larghissimo e quasi
   trasparente. Misure prese dal footer precedente: 72vw, opacità 0.04. */
.of-pie::before{
  content:"";
  position:absolute;
  inset-block-end:0;
  inset-inline-start:0;
  width:72vw;
  aspect-ratio:1200/180;
  background:url(/wp-content/uploads/ortofiorito.svg) bottom left / contain no-repeat;
  opacity:.04;
  pointer-events:none;
}
.of-pie__interno,
.of-pie__coda{position:relative}
.of-pie__interno,
.of-pie__coda{
  max-width:1410px;
  margin-inline:auto;
}
.of-pie__interno{padding-inline:30px}
.of-pie__interno{
  display:grid;
  /* Le frazioni arrivano da PHP: dipendono da quante colonne ci sono e da
     che tipo sono. Vedi Aspetto -> Colonne del footer. */
  grid-template-columns:var(--of-pie-griglia,repeat(4,1fr));
  gap:50px;
  align-items:start;
  /* Sotto serve poco spazio: la barra finale ha gia il proprio. */
  padding-block:56px 10px;
}
.of-pie__marchio{margin:0 0 20px}
.of-pie__marchio img,
.of-pie__marchio .custom-logo{
  display:block;
  width:auto;
  height:30px;
}
.of-pie__nome{
  margin:0;
  font-size:20px;
  font-weight:600;
  line-height:1.2;
}
.of-pie__tagline{
  margin:6px 0 0;
  color:#5b5b64;
  font-size:14px;
}
.of-pie__titolo{
  margin:0 0 16px;
  font-size:16px;
  font-weight:600;
  color:#111;
}
.of-pie__indirizzo{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
}
/* La misura arriva dalla schermata del footer, come variabile inline. */
.of-pie__segnaposto{
  flex:0 0 auto;
  width:var(--of-marker,30px);
  height:var(--of-marker,30px);
  color:#5b5b64;
}
.of-pie__indirizzo-link{
  color:inherit;
  text-decoration:none;
}
.of-pie__indirizzo-link:hover,
.of-pie__indirizzo-link:focus-visible{text-decoration:underline}
.of-pie__recapito{margin:0 0 4px}
.of-pie__recapito a,
.of-pie__lista a{
  color:inherit;
  text-decoration:none;
}
.of-pie__recapito a:hover,
.of-pie__recapito a:focus-visible,
.of-pie__lista a:hover,
.of-pie__lista a:focus-visible{text-decoration:underline}
.of-pie__orari{margin:0}
.of-pie__lista{
  margin:0;padding:0;list-style:none;
  line-height:inherit;
}
/* Il respiro fra le voci si dà con lo spazio, non allargando l'interlinea:
   così le righe di una voce che va a capo restano vicine fra loro. */
.of-pie__lista li+li{margin-block-start:10px}

/* Barra finale: separata da una riga sottile, come prima. */
.of-pie__coda{
  display:flex;
  align-items:center;
  gap:24px;
  padding:6px 26px;
  border-top:1px solid rgba(17,17,17,.08);
  color:#5b5b64;
  font-size:14px;
}
.of-pie__coda p{margin:0}
/* Il copyright spinge lingua e pagamenti a destra. */
.of-pie__copyright{margin-inline-end:auto}
.of-pie__lingua{flex:0 0 auto}
.of-pie__pagamenti{
  display:flex;
  align-items:center;
  gap:10px;
}

@media(max-width:720px){
  .of-pie__coda{flex-wrap:wrap;gap:14px}
  .of-pie__copyright{flex:1 0 100%;margin-inline-end:0}
}

/* Sotto i 1024px le due colonne larghe restano appaiate e i menu vanno a capo;
   sotto i 720px si impila tutto. */
@media(max-width:1024px){
  .of-pie__interno{grid-template-columns:1fr 1fr !important;gap:40px;padding-block:44px 10px}
}
@media(max-width:720px){
  .of-pie__interno{grid-template-columns:1fr !important;gap:32px}
  .of-pie__interno{padding-inline:20px}
  .of-pie__coda{padding-inline:20px}
}

/* --- pallino dello stato di apertura ---
   Lo shortcode degli orari stampa <span class="of-dot">•</span>, che il tema
   rendeva a blocco e con il carattere a 28px: cadeva fuori asse e il glifo,
   dove il font non ce l'ha, diventava un quadratino.
   Qui il cerchio lo disegna il CSS: largo quanto la x del carattere e
   allineato al centro della "o" di "Chiuso" (è quello che fa vertical-align:
   middle, che parte dalla mezza altezza-x). Il glifo viene spinto fuori dal
   riquadro e ritagliato. */
.of-pie .of-hours-inline-status .of-dot{
  display:inline-block;
  width:.8em;
  height:.8em;
  margin-inline-end:.25em;
  border-radius:50%;
  background:currentColor;
  font-size:inherit;
  line-height:inherit;
  vertical-align:middle;
  overflow:hidden;
  text-indent:-10em;
}