/* ==========================================================================
   COMPONENT — Footer
   Markup:  components/footer.html   (footer#contact)
   Anchor:  #contact  (the nav "Contact" link points here)
   Note:    the brand block here repeats .brand / .brand-mark from nav.css —
            that styling is shared, so edit it once in nav.css.
   ========================================================================== */

footer{
  padding:50px 0 30px;
  background:#fbfcfa;
  border-top:1px solid var(--line);
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:60px;
  padding-bottom:40px;
}
.footer-brand p{
  margin-top:12px;
  max-width:310px;
  color:var(--muted);
  font-size:13px;
}
.footer-title{
  font-weight:800;
  font-size:13px;
  margin-bottom:15px;
  color:var(--green-dark);
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:13px;
  color:var(--muted);
}
.footer-links a:hover{color:var(--green)}
.footer-bottom{
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#89938f;
  font-size:11px;
}

/* ---------- Responsive ---------- */

@media(max-width:800px){
  .footer-top{grid-template-columns:1fr 1fr;gap:35px}
}

@media(max-width:560px){
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{display:block}
  .footer-bottom span{display:block;margin-top:8px}
}