/* The site footer, on its own.
 *
 * These rules used to live in site.css. They moved here on 2026-08-27 when the
 * contact form needed a footer: that page deliberately does not load site.css,
 * which is 1400 lines written for the long marketing pages and would collide
 * with the narrow document layout the contact and privacy pages use. Copying
 * the rules into contact.css was the other option and was rejected, because a
 * second copy drifts the first time somebody changes a colour.
 *
 * So this file is the only definition, and every page carrying a footer links
 * it: the homepage, the upskilling page, and the contact page.
 *
 * It depends on base.css for its colour and font variables and on nothing else.
 * Do not reach for anything defined in site.css in here, or the contact page
 * quietly loses it.
 */

/* The footer's own inner column, rather than the .wrap in site.css. The values
   match that .wrap exactly, so the homepage and the upskilling page look
   identical to how they did before this file existed. */
.site-footer .wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2.75rem, 6vw, 4.75rem) 1.5rem;
}

/* The contact page is a 40rem document, not a 72rem marketing page. Left at the
   full width, the footer's contents would start and end nowhere near the column
   above them. */
.site-footer--narrow .wrap {
  max-width: 40rem;
  padding: 2.5rem 1.25rem 3rem;
}

.site-footer {
  background: var(--ink);
  color: var(--paper);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  align-items: baseline;
}

.site-footer p {
  font-size: 0.9rem;
}

.site-footer__links {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}

.site-footer a {
  color: var(--sky);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-footer a:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.site-footer :focus-visible {
  outline-color: var(--orange);
}

.site-footer__legal {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(248, 250, 248, 0.16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #b7b2bd;
}

.site-footer__legal span:not(:last-child)::after {
  content: "·";
  margin-left: 0.5rem;
  color: #6a6570;
}

/* Below this width the links stop being pushed to the right and sit under the
   tagline instead. The same breakpoint site.css uses for its own grids. */
@media (max-width: 900px) {
  .site-footer__links {
    margin-left: 0;
  }

  /* The narrow footer's column is already narrower than the viewport here, so
     it only needs the page's own side padding. */
  .site-footer--narrow .wrap {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}