/* Footer section — ported from robotmoney-site/src/components/Footer.tsx
   Original markup used Tailwind utilities; translated here to plain CSS. */

/* <footer className="relative border-t border-[var(--color-border)]"> */
.footer {
  position: relative;
}

/* each block: <div className="border-t border-[var(--color-border)]"> */
.footer__section {
  border-top: 1px solid var(--color-border);
}

/* <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12"> (links block)
   reused for bottom bar (py-6) via footer__bottom override */
.footer__inner {
  max-width: 80rem;        /* max-w-7xl */
  margin-inline: auto;     /* mx-auto */
  padding-inline: 1.5rem;  /* px-6 */
  padding-block: 2.75rem;  /* reduced from py-12 */
}

/* <div className="grid md:grid-cols-5 gap-10"> */
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* reduced from gap-10 */
}

/* <div className="space-y-4 ..."> — vertical rhythm between direct children */
.footer__col > * + * {
  margin-top: 0.9rem; /* reduced from space-y-4 */
}

/* <div className="flex items-center gap-3"> */
.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
}

.footer__logo {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* <span className="font-mono text-sm tracking-wider"> */
.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* <p className="text-xs text-[var(--color-text-dim)] leading-relaxed"> */
.footer__about {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 42ch;
}

/* inline accent links inside the about copy */
.footer__link-accent {
  color: var(--color-accent);
  text-decoration: none;
}
.footer__link-accent:hover {
  text-decoration: underline;
}

/* <h4 className="text-[10px] font-mono uppercase tracking-[0.2em] text-[var(--color-text-dim)]"> */
.footer__heading {
  margin: 0;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em; /* tracking-[0.2em] */
  color: var(--color-text-dim);
}

/* <div className="space-y-2"> link group */
.footer__links {
  display: flex;
  flex-direction: column;
}
.footer__links > * + * {
  margin-top: 0.4rem; /* reduced from space-y-2 */
}

/* <a className="block text-sm text-[var(--color-text-muted)] hover:text-[var(--color-accent)] transition-colors"> */
.footer__link {
  display: block;
  font-size: 0.875rem; /* text-sm */
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s var(--ease-out-expo);
}
.footer__link:hover {
  color: var(--color-accent);
}

/* Bottom bar inner:
   <div className="... py-6 flex flex-col md:flex-row items-center justify-between gap-4"> */
.footer__bottom {
  padding-block: 1.25rem; /* reduced from py-6 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem; /* reduced from gap-4 */
}

/* <p className="text-[10px] font-mono text-[var(--color-text-dim)] ..."> */
.footer__fineprint {
  margin: 0;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-text-dim);
}

/* legal blurb: max-w-2xl text-center md:text-left */
.footer__fineprint--legal {
  max-width: 42rem; /* max-w-2xl */
  text-align: center;
}

/* ── md: breakpoint (Tailwind md = 768px) ── */
@media (min-width: 768px) {
  /* grid md:grid-cols-5 */
  .footer__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  /* md:col-span-2 on the brand column */
  .footer__col--brand {
    grid-column: span 2 / span 2;
  }
  /* md:flex-row + md:text-left on the bottom bar */
  .footer__bottom {
    flex-direction: row;
  }
  .footer__fineprint--legal {
    text-align: left;
  }
}

/* ── lg: breakpoint (Tailwind lg = 1024px) — lg:px-8 ── */
@media (min-width: 1024px) {
  .footer__inner {
    padding-inline: 2rem; /* px-8 */
  }
}