/* ---------- Footer (the page's one gold block) ---------- */
.site-footer {
  --surface: var(--c-fill);
  --tx: var(--text-on-gran);
  --tx-muted: var(--text-on-gran-muted);
  --line: var(--line-on-gran);
  background: var(--surface);
  color: var(--tx);
  line-height: 1.6;
  padding-top: clamp(50px, 8vw, 96px);
  margin-top: var(--section-y);
  /* Hairline top edge (v2 mockup): draws the seam when a spruce band sits
     flush above, invisible against the light page background otherwise */
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* When the page ends on a spruce band (har-finns-vi CTA strip), the band and
   footer must read as one dark block — kill the white slit between them */
main:has(> .gran-cta:last-child) + .site-footer,
main:has(> .sec--gran:last-child) + .site-footer {
  margin-top: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 48px;
}

/* Logo + name as one horizontal lockup, top-aligned with the nav columns */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.footer-mark {
  display: block;
  flex: 0 0 auto;
}

.footer-about h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--tx);
  margin-bottom: 0;
}

.footer-about h3 b {
  font-weight: 700;
}

.footer-about p {
  font-size: 0.95rem;
  color: var(--tx-muted);
  max-width: 42ch;
}

.footer-about p + p {
  margin-top: 12px;
}

.footer-address {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* Sans takes structure; mono stays only where facts live (address, legal line) */
.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-gran);
  margin-bottom: 14px;
}

.footer-col li + li {
  margin-top: 10px;
}

/* .site-footer prefix beats base.css's generic li a:not(.btn) prose-link
   rule, which would otherwise paint these accent-on-accent (invisible) */
.site-footer .footer-col a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--tx);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--speed);
}

.site-footer .footer-col a:hover {
  border-color: currentColor;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  justify-content: space-between;
  padding-block: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--tx-muted);
}

/* Social icons sit in the middle of the bottom row */
.footer-social {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-social a {
  color: var(--tx-muted);
  transition: color var(--speed);
}

.footer-social svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-social a:hover {
  color: var(--text-on-gran);
}

.footer-bottom a:hover {
  color: var(--text-on-gran);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* About block leads full-width; the three nav columns sit in a row below */
  .footer-about {
    grid-column: 1 / -1;
  }
}

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

  /* Stack the bottom row: space-between + the legal/cookie span gets too
     tight on phones and presses the last line against the right edge */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}