/* Site footer — always dark, the mirror image of testimonials always
   being light. Transparent (not painted #111111 directly) for the same
   reason testimonials is transparent: it participates in the shared
   --current-bg cross-fade (see section-theme.js) instead of creating a
   hard seam ahead of the transition finishing. Its own heading/contact/
   meta text all read --current-text/-text-muted rather than hardcoded
   white/grey, so they can never render in a color that doesn't match
   the background yet — same reasoning as .project__name in layout.css. */
.site-footer {
  padding: calc(var(--space-5) * 3) var(--space-3);
  --section-bg: #111111;
  --section-text: #ffffff;
  --section-text-muted: #a3a3a3;
}

/* CTA is centered at every breakpoint, matching the header and the
   project titles (which are all centered stacks) — the heading sits
   above the "Get in Touch" link. */
.site-footer__cta {
  text-align: center;
}

.site-footer__heading {
  font-size: var(--font-size-h2);
  letter-spacing: 0;
  line-height: var(--line-height-heading);
  color: var(--current-text, var(--color-text));
  transition: color 0.6s ease;
}

/* Shape comes from the shared .contact-pill (see css/layout.css) so this
   always matches the header's "Get in touch" button in size/padding/
   shape. Colors are independent, though: .contact-pill reads
   --contact-bg/-text/-hover-bg, and redefining those three custom
   properties here (rather than using them directly) scopes new values
   to just this element without touching the header's button — so
   setting the header to black doesn't also make the footer button
   invisible against the footer's always-dark background. Editable via
   site.json's footer.contact background/textColor/hoverBackground
   (--footer-contact-* vars, set by render-site.js); these are the
   fallback defaults if that's not set. */
.site-footer__contact {
  margin-top: var(--space-4);
  --contact-bg: var(--footer-contact-bg, #7259ff);
  --contact-text: var(--footer-contact-text, #ffffff);
  --contact-hover-bg: var(--footer-contact-hover-bg, #ff9d00);
}

.site-footer__meta {
  margin-top: calc(var(--space-5) * 3);
}

.site-footer__link,
.site-footer__location,
.site-footer__descriptor {
  font-size: 16px;
  line-height: 1.4;
  color: var(--current-text-muted, var(--color-text-muted));
  transition: color 0.6s ease;
}

.site-footer__link {
  display: inline-block;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--current-text, var(--color-text));
}

.site-footer__location {
  margin-top: var(--space-2);
}

/* The meta row stacks below 60rem (social block, then descriptor) — add
   breathing room so "Vancouver, BC, Canada" and the descriptor paragraph
   don't butt right up against each other. */
@media (max-width: 59.99rem) {
  .site-footer__descriptor {
    margin-top: var(--space-4);
  }
}

@media (min-width: 60rem) {
  .site-footer__meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    align-items: end;
  }

  .site-footer__descriptor {
    grid-column: 3;
  }
}