/* ======================================================
   BL TENDE – FOOTER COMPLETO (2025) – REV. FYMERA
   Full Width | Responsive | Accessibile | Fix Mobile
   Hover/Underline in stile header
   Include: "Fymera Agency" (CSS-only)
====================================================== */

/* ======================================================
   0. VARIABILI (coerenti con header)
====================================================== */
:root {
  --bl-blue: #0f6fb3;
  --bl-text: #1e293b;
  --bl-bg: #ffffff;

  --bl-footer-bg: #0b1220;
  --bl-footer-surface: rgba(255,255,255,0.06);
  --bl-footer-border: rgba(255,255,255,0.12);
  --bl-footer-text: rgba(255,255,255,0.84);
  --bl-footer-muted: rgba(255,255,255,0.62);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ======================================================
   1. WRAPPER FOOTER
====================================================== */
.bl-footer {
  position: relative;
  width: 100%;
  background: var(--bl-footer-bg);
  color: var(--bl-footer-text);
  overflow: hidden;

  /* FIX: niente “margine sotto” fantasma */
  margin: 0 !important;
  padding: 0 !important;
}

/* Glow discreto top */
.bl-footer::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  width: 900px;
  height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(15,111,179,0.22) 0%, rgba(15,111,179,0) 70%);
  pointer-events: none;
  filter: blur(2px);
}

/* Micro texture (molto soft) */
.bl-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 55%),
              radial-gradient(circle at 80% 40%, rgba(15,111,179,0.10) 0%, rgba(15,111,179,0) 55%);
  pointer-events: none;
  opacity: 0.55;
}

/* ======================================================
   2. CONTAINER
====================================================== */
.bl-footer-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;

  /* meno aria sotto rispetto a prima */
  padding: 56px 24px 14px;

  z-index: 1;
}

/* ======================================================
   3. GRIGLIA PRINCIPALE
====================================================== */
.bl-footer-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.15fr;
  gap: 26px;
  align-items: start;
}

/* ======================================================
   4. BRAND / LOGO / TESTO
====================================================== */
.bl-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px; /* ridotto */
}

.bl-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;

  /* hover feel */
  transition: transform .28s var(--ease), opacity .28s var(--ease);
  transform-origin: left center;
}

.bl-footer-logo:hover {
  transform: translateY(-1px);
  opacity: 0.98;
}

/* LOGO: ridotto e “forzato” (tema spesso sovrascrive le img) */
.bl-footer-logo img {
  height: clamp(76px, 6.5vw, 110px) !important; /* più piccolo del tuo screenshot */
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain;

  /* più pulito */
  filter: saturate(1.02) contrast(1.02);
}

/* Tagline più compatta */
.bl-footer-tagline {
  font-size: 14px;
  line-height: 1.55;
  color: var(--bl-footer-muted);
  max-width: 48ch;

  /* FIX: togli “spazio sotto” inutilmente grande */
  margin: 0;
}

/* Badge */
.bl-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.bl-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--bl-footer-surface);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.78);

  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}

.bl-footer-badge:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.14);
}

/* ======================================================
   5. COLONNE LINK
====================================================== */
.bl-footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bl-footer-title {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin: 0;
}

.bl-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Link con underline animata come header */
.bl-footer-links a {
  position: relative;
  color: var(--bl-footer-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.92;
  padding: 4px 0;

  transition: transform .25s var(--ease), opacity .25s var(--ease), color .25s var(--ease);
}

.bl-footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: rgba(15,111,179,0.9);

  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s var(--ease);
}

.bl-footer-links a:hover {
  transform: translateX(6px);
  opacity: 1;
  color: #ffffff;
}

.bl-footer-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.bl-footer-links a:focus-visible {
  outline: 2px solid rgba(15,111,179,0.9);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ======================================================
   6. CONTATTI / CTA
====================================================== */
.bl-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bl-footer-contact p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bl-footer-muted);
}

.bl-footer-contact a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
  transition: opacity .25s var(--ease), color .25s var(--ease);
}

.bl-footer-contact a:hover {
  opacity: 0.92;
  color: rgba(255,255,255,0.96);
}

/* CTA: già bella, la rendo più “header-like” */
.bl-footer-cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 16px;
  border-radius: 12px;

  background: var(--bl-blue);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.01em;

  box-shadow: 0 14px 28px rgba(15,111,179,0.22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  position: relative;
  overflow: hidden;
}

/* Glow come header */
.bl-footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.bl-footer-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(15,111,179,0.28);
  filter: saturate(1.05);
}

.bl-footer-cta:hover::before {
  opacity: 1;
}

.bl-footer-cta:focus-visible {
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 4px;
}

/* ======================================================
   7. DIVISORE + BOTTOM BAR
====================================================== */
.bl-footer-divider {
  margin: 34px 0 12px;
  height: 1px;
  background: var(--bl-footer-border);
}

/* Bottom bar più compatta (meno “vuoto sotto”) */
.bl-footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;

  padding: 8px 0 0;
  margin: 0; /* niente spazio extra */
}

.bl-footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.68);
  line-height: 1.4;
}

.bl-footer-legal {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.bl-footer-legal a {
  position: relative;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-weight: 800;
  padding: 4px 0;

  transition: color .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease);
}

.bl-footer-legal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: rgba(255,255,255,0.75);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s var(--ease);
}

.bl-footer-legal a:hover {
  color: rgba(255,255,255,0.92);
  transform: translateY(-1px);
}

.bl-footer-legal a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ======================================================
   8. FYMERA AGENCY (richiesto) – CSS ONLY
   - Nascondo "Powered by"
   - Mostro "Fymera Agency" come testo del link
====================================================== */
.bl-powered {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 12px;
  color: rgba(255,255,255,0.66);
  line-height: 1.4;

  justify-content: flex-end;
}

/* nascondo label "Powered by" senza rompere layout */
.bl-powered span {
  display: none !important;
}

/* Link: stile + sostituzione testo */
.bl-powered a {
  position: relative;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.02em;

  /* nascondo il testo reale "Fymera" visivamente */
  font-size: 0 !important;
  line-height: 0 !important;

  transition: opacity .25s var(--ease);
}

/* testo visuale richiesto */
.bl-powered a::before {
  content: "Fymera Agency";
  font-size: 12px;
  line-height: 1.4;

  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(15,111,179,0.75);
  text-underline-offset: 4px;

  color: rgba(255,255,255,0.92);
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease), transform .25s var(--ease);
  display: inline-block;
}

.bl-powered a:hover::before {
  color: #ffffff;
  text-decoration-color: rgba(255,255,255,0.9);
  transform: translateY(-1px);
}

.bl-powered a:focus-visible {
  outline: 2px solid rgba(15,111,179,0.9);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ======================================================
   9. BACK TO TOP (opzionale, pronto)
====================================================== */
.bl-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(11,18,32,0.82);
  color: #ffffff;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
  z-index: 9998;

  backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bl-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.bl-to-top:hover {
  background: rgba(15,111,179,0.9);
}

.bl-to-top:focus-visible {
  outline: 2px solid rgba(15,111,179,0.95);
  outline-offset: 4px;
}

/* ======================================================
   10. RESPONSIVE
====================================================== */
@media (max-width: 991px) {
  .bl-footer-inner {
    padding: 46px 16px 12px;
  }

  .bl-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .bl-footer-brand {
    grid-column: 1 / -1;
  }

  .bl-footer-logo img {
    height: clamp(68px, 10vw, 92px) !important;
  }

  .bl-footer-bottom {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 10px;
    padding-top: 6px;
  }

  .bl-powered {
    justify-content: flex-start;
  }

  .bl-footer-legal {
    justify-content: flex-start;
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .bl-footer-grid {
    grid-template-columns: 1fr;
  }

  .bl-footer-cta {
    width: 100%;
  }

  .bl-footer-tagline {
    font-size: 13.5px;
  }
}

/* ======================================================
   11. SAFETY FIX: immagini dentro footer
====================================================== */
.bl-footer img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ======================================================
   12. RIDUZIONE MOTION (accessibilità)
====================================================== */
@media (prefers-reduced-motion: reduce) {
  .bl-footer * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .bl-to-top {
    transform: none !important;
  }
}
/* ======================================================
   FIX: niente spazio sotto footer (sticky footer layout)
====================================================== */
html, body {
  height: 100%;
}

body {
  min-height: 100vh;
}

/* Blocksy wrapper: nel tuo footer.php si chiude con </div> -> è #main-container */
#main-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* il main deve “prendersi” lo spazio disponibile */
#main-container > main {
  flex: 1 0 auto;
}

/* il footer custom va in fondo */
.bl-footer {
  margin-top: auto;
}
/* Centra logo dentro la colonna brand */
.bl-footer-brand {
  align-items: center;
  text-align: center;
}

.bl-footer-logo {
  justify-content: center;
}
@media (max-width: 991px) {

  /* centra tutto il footer su mobile */
  .bl-footer,
  .bl-footer * {
    text-align: center;
  }

  /* centra colonne e blocchi */
  .bl-footer-brand,
  .bl-footer-col,
  .bl-footer-contact,
  .bl-footer-bottom {
    align-items: center;
    justify-items: center;
  }

  /* lista link centrata */
  .bl-footer-links {
    align-items: center;
  }

  /* badge centrati */
  .bl-footer-badges {
    justify-content: center;
  }

  /* CTA centrata e a larghezza “bella” */
  .bl-footer-cta {
    width: min(360px, 100%);
  }

  /* bottom bar: tutto centrato */
  .bl-footer-bottom {
    justify-content: center;
  }

  .bl-footer-legal {
    justify-content: center;
  }

  .bl-powered {
    justify-content: center;
  }

  /* hover “da centro”: niente scivolata laterale */
  .bl-footer-links a:hover {
    transform: translateY(-1px);
  }
}