/* Closing call-to-action banner and the site footer. Footer columns are built by footer.js. */

.closing-wrap { padding-top: calc(var(--spacing) * 10); }

.closing {
  position: relative;
  isolation: isolate;
  padding: calc(var(--spacing) * 16) calc(var(--spacing) * 6);
  border-radius: var(--radius-2xl);
  corner-shape: superellipse(var(--squircle-factor));
  background: url(assets/banner-dawn.webp) center bottom / cover;
  text-align: center;
}
/* Dot grid rising from the sunrise glow; dots grow and darken toward the bottom center. */
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(assets/closing-dots.svg) center bottom no-repeat;
}
/* closing-dots.js swaps the static dots for a live canvas when WebGL is available. */
.closing.has-live-dots::before { content: none; }
.closing > canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  corner-shape: inherit;
  pointer-events: none;
}
.closing h2 {
  margin-bottom: calc(var(--spacing) * 8);
  padding-top: calc(var(--spacing) * 4);
  color: var(--primary);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 450;
  line-height: calc(var(--spacing) * 9);
}

.btn-closing {
  height: calc(var(--spacing) * 10);
  padding: 0 calc(var(--spacing) * 2.5);
  border-radius: var(--radius-xl);
  corner-shape: superellipse(var(--squircle-factor));
  font-size: var(--text-sm);
}
.btn-closing img { width: 16px; height: 16px; filter: invert(1); }

.footer { padding-block: calc(var(--spacing) * 14); }
.footer .rail-inner { max-width: var(--breakpoint-2xl); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--spacing) * 8) calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 12);
  list-style: none;
}
.footer-col { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); min-width: 0; font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.footer-col > p { color: color-mix(in oklab, var(--muted-foreground) 80%, transparent); }
.footer-col ul { display: flex; flex-direction: column; gap: calc(var(--spacing) * 2); list-style: none; }

.footer-col a { text-decoration: dotted var(--muted-foreground); text-underline-offset: 2px; }
.footer-col a:hover { color: var(--muted-foreground); text-decoration-line: underline; }
.footer-col a img { display: inline-block; width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; }

.footer-rule { margin-block: calc(var(--spacing) * 6); border: 0; border-top: 1px solid var(--color-neutral-50); }

.footer-base {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
  font-size: var(--text-sm);
}
.socials { display: inline-flex; gap: calc(var(--spacing) * 2); color: var(--muted-foreground); list-style: none; }
.socials svg { display: block; width: 20px; height: 20px; }
.socials a:hover { color: var(--primary); }
.footer-note { max-width: var(--container-2xl); }

@media (min-width: 40rem) {
  .closing-wrap { padding-top: calc(var(--spacing) * 12); }
  .closing { padding: calc(var(--spacing) * 20) calc(var(--spacing) * 8); }
  .closing h2 { margin-bottom: calc(var(--spacing) * 10); padding-top: calc(var(--spacing) * 8); font-size: var(--text-4xl); line-height: calc(var(--spacing) * 11); }
  .footer { padding-block: calc(var(--spacing) * 16); }
  .footer-cols { grid-template-columns: repeat(3, 1fr); padding-bottom: calc(var(--spacing) * 16); }
  .footer-base { flex-direction: row; align-items: center; }
}
@media (min-width: 48rem) {
  .btn-closing { height: calc(var(--spacing) * 11); gap: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 3); font-size: var(--text-base); }
  .btn-closing img { width: 18px; height: 18px; }
}
@media (min-width: 80rem) {
  .closing-wrap { padding-top: calc(var(--spacing) * 16); }
  .closing { padding-block: calc(var(--spacing) * 24); }
  .closing h2 { font-size: 2.75rem; line-height: calc(var(--spacing) * 12); }
  .footer { padding-block: calc(var(--spacing) * 16); }
  .footer-cols { display: flex; flex-wrap: wrap; gap: calc(var(--spacing) * 6) calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 20); }
  .footer-col { flex: 1 0 auto; min-width: calc(var(--spacing) * 40); max-width: calc(var(--spacing) * 60); }
  .footer-col:last-child { flex-grow: 0; }
}