/* ==========================================================================
   Site footer
   ========================================================================== */

.site-footer {
  background: var(--brand);
  color: rgba(255,255,255,0.82);
  padding-block: var(--sp-8) var(--sp-5);
}
.site-footer a { color: rgba(255,255,255,0.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.footer-brand img {
  height: 88px; width: auto; margin-bottom: var(--sp-4);
  /* The dark logo is invisible on dark green. Until a white logo
     variant (knest-logo-white.svg, playbook p.8) is supplied, sit it
     on a small white plate so it stays legible. */
  background: #fff;
  padding: var(--sp-3);
  border-radius: var(--r-md);
}
.footer-brand p { font-size: var(--fs-300); max-width: 34ch; }

.footer-col h2 {
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  color: #fff;
  margin-bottom: var(--sp-4);
  letter-spacing: 0.02em;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.footer-col li a { display: inline-flex; min-height: 32px; align-items: center; font-size: var(--fs-400); }

.footer-contact address { font-style: normal; font-size: var(--fs-400); line-height: 1.8; }
.footer-contact .toll { color: var(--orange-300); font-weight: var(--fw-bold); }

.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.1);
}
.footer-social a:hover { background: var(--brand-accent); }
.footer-social svg { width: 20px; height: 20px; fill: #fff; }

.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-300);
}