/* Loaded by the shared public-page runtime so legacy generated pages receive
   the same footer layout without needing individual markup migrations. */
.footer {
  padding: 3.25rem 0 2rem;
  border-top: 1px solid rgba(150, 192, 220, 0.14);
}

.footer .footer-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
}

.footer .footer-inner > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  grid-column: 1;
  grid-row: 1;
}

.footer .footer-mission-link {
  grid-column: auto;
  grid-row: auto;
  align-self: start;
  justify-self: start;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

.footer .footer-mission-logo {
  grid-column: auto;
  grid-row: auto;
  margin-top: 0;
}

.footer .footer-nav { grid-column: 2; grid-row: 1; }
.footer .footer-app { grid-column: 3; grid-row: 1; }
.footer .footer-socials { grid-column: 4; grid-row: 1; }

.footer .footer-legal {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(150, 192, 220, 0.1);
}

/* Human/profile pages load an older footer stylesheet after the global one.
   Reassert the Stripe treatment here so its blue social-button rule cannot
   leave a mismatched background and purple shadow. */
.footer .footer-socials__button.stripe-button {
  border-color: rgba(123, 114, 255, 0.55);
  background: linear-gradient(135deg, #635bff 0%, #7a72ff 100%);
  color: #ffffff;
  box-shadow: 0 16px 32px rgba(61, 51, 196, 0.24);
}

.footer .footer-socials__button.stripe-button:hover,
.footer .footer-socials__button.stripe-button:focus-visible {
  border-color: rgba(167, 161, 255, 0.8);
  background: linear-gradient(135deg, #726bff 0%, #8a84ff 100%);
  color: #ffffff;
  filter: saturate(1.05);
}

@media (max-width: 980px) {
  .footer .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer .footer-inner > div:first-child {
    grid-column: auto;
    grid-row: auto;
  }
  .footer .footer-mission-link,
  .footer .footer-mission-logo,
  .footer .footer-nav,
  .footer .footer-app,
  .footer .footer-socials { grid-column: auto; grid-row: auto; justify-self: start; }
}

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