/* Slim footer on app pages (templates/partials/app_footer.html). The icon row
   matches the landing footer (css/shared/landing.css .footer-social). */
.app-footer { position: relative; z-index: 1; margin-top: 8px; border-top: 1px solid var(--pt-border, rgba(148, 163, 184, 0.2)); }
.app-footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 18px 24px 26px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.app-footer-community { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.app-footer-join { font-size: var(--t-small); font-weight: 600; color: var(--pt-accent, #2563eb); text-decoration: none; }
.app-footer-join:hover { text-decoration: underline; }
.app-footer-copy { margin: 0; font-size: var(--t-small); color: var(--pt-text-3, #64748b); }
.app-footer-copy a { color: inherit; }

.app-footer .footer-social, .app-social .footer-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.app-footer .footer-social a, .app-social .footer-social a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--pt-border, rgba(148, 163, 184, 0.25)); background: var(--pt-surface, rgba(255, 255, 255, 0.03));
  color: var(--brand, currentColor);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.app-footer .footer-social a:hover, .app-social .footer-social a:hover,
.app-footer .footer-social a:focus-visible, .app-social .footer-social a:focus-visible {
  border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); transform: translateY(-2px);
}
.app-footer .footer-social a:focus-visible, .app-social .footer-social a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.app-footer .footer-social--youtube, .app-social .footer-social--youtube   { --brand: #ff0000; }
.app-footer .footer-social--instagram, .app-social .footer-social--instagram { --brand: #e4405f; }
.app-footer .footer-social--discord, .app-social .footer-social--discord   { --brand: #5865f2; }
.app-footer .footer-social--linkedin, .app-social .footer-social--linkedin  { --brand: #0a66c2; }

@media (max-width: 720px) { .app-footer-inner { padding: 16px 16px 22px; } }

/* The same row inside the pricing page's own footer. */
.app-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }