/* ==========================================================================
   FUSION CNC — FOOTER
   Carries BOTH real locations: the corporate office and the Dantali factory.
   ========================================================================== */

.site-footer{
  background: var(--ink);
  color: var(--on-dark-2);
  padding-top: var(--s-20);
}
.site-footer h4{
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}

.footer-grid{
  display: grid;
  gap: var(--s-10);
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  padding-bottom: var(--s-16);
}
@media (max-width: 1000px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; gap: var(--s-8); } }

/* Footer logo sits on a white plaque — the dark original would vanish on
   #111, and recolouring the official mark is forbidden by the brand guide. */
.footer-brand img{
  height: 42px;
  width: auto;
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--r-sm);
}
.footer-brand p{
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  color: var(--on-dark-2);
  max-width: 38ch;
  line-height: 1.7;
}

.footer-links li + li{ margin-top: var(--s-3); }
.footer-links a{
  font-size: var(--t-sm);
  color: var(--on-dark-2);
  transition: color var(--dur-1) var(--ease-io), padding-left var(--dur-2) var(--ease);
}
.footer-links a:hover{ color: var(--brand); padding-left: 5px; }

/* Address / contact blocks */
.footer-loc + .footer-loc{ margin-top: var(--s-6); }
.footer-loc__label{
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-bright);   /* small text on the dark footer */
  margin-bottom: var(--s-2);
}
.footer-loc address{
  font-style: normal;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--on-dark-2);
}
.footer-contact li{
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-sm);
}
.footer-contact li + li{ margin-top: var(--s-3); }
.footer-contact svg{ width: 16px; height: 16px; color: var(--brand); flex: none; margin-top: 4px; }
.footer-contact a:hover{ color: #fff; }

/* Socials */
.socials{ display: flex; gap: var(--s-3); margin-top: var(--s-6); }
.socials a{
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-sm);
  color: var(--on-dark-2);
  transition: background var(--dur-1) var(--ease-io), color var(--dur-1) var(--ease-io), border-color var(--dur-1) var(--ease-io);
}
.socials a:hover{ background: var(--brand); color: var(--ink); border-color: var(--brand); }
.socials svg{ width: 18px; height: 18px; }

/* Bottom bar */
.footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-block: var(--s-6);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--t-xs);
  color: var(--on-dark-3);
}
.footer-bottom nav{ display: flex; gap: var(--s-5); flex-wrap: wrap; }
.footer-bottom a:hover{ color: #fff; }
