/* ==========================================================================
   FOOTER.CSS — Exact Stitch Output Extraction
   ========================================================================== */

.footer {
  background-color: var(--bg-slate-950);
  width: 100%;
  padding-top: 96px; /* py-24 */
  padding-bottom: 96px;
  border-top: 1px solid var(--gold-20);
}

.footer__inner {
  max-width: 1280px; /* max-w-screen-xl */
  margin: 0 auto;
  padding: 0 48px; /* px-12 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.footer__logo {
  font-family: var(--serif);
  font-size: 20px; /* text-xl */
  color: var(--gold);
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px; /* gap-6 */
}

.footer__link {
  font-family: var(--sans);
  font-size: 10px; /* text-[10px] */
  letter-spacing: 0.1em; /* tracking-widest */
  text-transform: uppercase;
  color: var(--text-slate-600);
  transition: color var(--t-fast);
}

.footer__link:hover {
  color: var(--on-surface);
}
.footer__link:focus-visible {
  outline: 1px solid var(--gold);
}

.footer__copyright {
  font-family: var(--sans);
  font-size: 10px; /* text-[10px] */
  letter-spacing: 0.1em; /* tracking-widest */
  text-transform: uppercase;
  color: var(--text-slate-600);
}

/* Mobile */
@media (max-width: 768px) {
  .footer__inner {
    flex-direction: column;
    text-align: center;
    padding: 0 24px;
  }
}