/* Footer social links. One file rather than six copies, same reasoning as
 * public/nav-mobile.css — the footers are duplicated per page and drift.
 *
 * The site has two footer shapes:
 *   full      — index, about, tutor-signup: brand block + link columns
 *   minimal   — contact, privacy, terms: a copyright line and nothing else
 * `.footer-social` handles the first; add `.footer-social-center` for the
 * second, where there is no column to sit under.
 *
 * Icons are inline SVG on purpose. An icon font or a CDN sprite would be a
 * third-party request on every page for two small shapes, and these have to
 * work the same whether the visitor is a parent on a phone or a crawler.
 *
 * 38px targets: below ~44px is awkward on a phone, and these sit close
 * together, so they get a border to separate them rather than relying on
 * spacing alone.
 */

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.footer-social-center {
  justify-content: center;
  margin: 0 auto 1.4rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: #fff;
  border-color: var(--gold, #c8a455);
  background: rgba(255, 255, 255, 0.06);
}

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