/* ==========================================================================
   Footer — encerramento do convite.
   ========================================================================== */

.footer {
  background-color: var(--footer-surface);
  color: var(--text-on-dark);
  padding-block: var(--space-8);
  text-align: center;
}

.footer__inner {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}

.footer__monogram {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border-on-dark);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  color: var(--text-on-dark);
  margin-bottom: var(--space-2);
}

.footer__names {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text-on-dark);
}

.footer__date,
.footer__hashtag,
.footer__contact {
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

.footer__contact a {
  /* --serenity-light fica em 4.16:1 sobre o azul do rodapé; o tom pálido
     alcança 5.57:1 sem sair da paleta. */
  color: var(--serenity-pale);
}

.footer__contact a:hover {
  color: var(--text-on-dark);
}

/* --- Crédito de quem fez o site ------------------------------------------
   Um filete separa o convite da assinatura, e o corpo menor mantém a
   marca discreta: o destaque do rodapé continua sendo o casal. */
.footer__credito {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-on-dark);
  width: min(100%, 28rem);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-snug);
}

.footer__marca {
  color: var(--serenity-pale);
  font-weight: 600;
}

.footer__marca:hover {
  color: var(--text-on-dark);
}

.footer__credito-contato {
  display: block;
  margin-top: var(--space-2);
}

.footer__credito-contato a {
  /* Mesmo tom do e-mail dos noivos: 5.57:1 sobre o azul do rodapé. */
  color: var(--serenity-pale);
  white-space: nowrap;
}

.footer__credito-contato a:hover {
  color: var(--text-on-dark);
}