/* Standard site footer — markup lives in partials/footer.php and is
   copied into every static page by scripts/sync-site-footer.py.

   Self-contained on purpose: pages across the site load different CSS
   (Bootstrap + style.css, the links-page kit, trending pages without
   Font Awesome, guide pages with their own reset), so every rule here
   resets what it relies on and nothing depends on an icon font. All
   classes are .sf-* so legacy .footer-* rules never apply. */

.sf {
  display: block;
  position: relative;
  margin: 0;
  padding: 4.5rem 0 2rem;
  background: #07021a;
  border-top: 1px solid rgba(199, 145, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
  font-family: "InterVariable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.sf *,
.sf *::before,
.sf *::after { box-sizing: border-box; }
.sf p { text-align: left; }

.sf-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.sf-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
}
@media (max-width: 991px) {
  .sf-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }
  .sf-brand { grid-column: 1 / -1; }
}
@media (max-width: 991px) and (min-width: 600px) {
  .sf-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* brand column */
.sf .sf-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.sf .sf-logo:hover { color: #fff; text-decoration: none; }
.sf .sf-logo img {
  display: block;
  width: 32px;
  height: 32px;
}
.sf .sf-tagline {
  max-width: 32ch;
  margin: 1rem 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.sf .sf-email {
  display: inline-block;
  margin-bottom: 1.4rem;
  color: #c791ff;
  font-size: 0.92rem;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.sf .sf-email:hover { color: #e9d5ff; text-decoration: underline; }
.sf .sf-cta {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #9041cc, #6d28d9);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(122, 45, 180, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sf .sf-cta:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(122, 45, 180, 0.4);
}

/* link columns */
.sf .sf-title {
  margin: 0 0 1.1rem;
  padding: 0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c791ff;
  background: none;
  border: 0;
}
.sf .sf-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf .sf-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf .sf-list li::before { content: none; }
.sf .sf-list a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.15s ease;
}
.sf .sf-list a:hover,
.sf .sf-list a:focus-visible {
  color: #fff;
  text-decoration: none;
}

/* bottom bar */
.sf .sf-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(199, 145, 255, 0.12);
}
.sf .sf-copy {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}
.sf .sf-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf .sf-social li { margin: 0; padding: 0; list-style: none; }
.sf .sf-social li::before { content: none; }
.sf .sf-social a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  text-decoration: none;
}
.sf .sf-social a:hover { color: #fff; text-decoration: none; }

.sf a:focus-visible {
  outline: 2px solid #c791ff;
  outline-offset: 3px;
  border-radius: 4px;
}