/* The site footer, on graphite: the logo (its dark version) with a line about Dr. Beran and a button,
   three columns of links, then a 1px line and the copyright with the legal links.
   Phones: one under another; from 576px the links two across; from 992px the logo and three link columns in a row. */

.site-footer {
  --focus-ring: 0 0 0 var(--sp-1) var(--c-focus-ring-on-dark);
  color: var(--c-on-dark);
  background-color: var(--c-dark);
}

.site-footer__inner {
  padding-block: var(--sp-24) var(--sp-10);
}

.site-footer__main {
  display: grid;
  gap: var(--sp-12) var(--sp-8);
}

@media (min-width: 576px) {
  .site-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  .site-footer__main {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: auto;
  }
}

/* --- Logo, line and button --- */
.site-footer__brand {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--sp-6);
}

.site-footer__home {
  display: block;
  color: var(--c-on-dark);
  border-radius: var(--radius-1);
}

.site-footer__about {
  color: var(--c-on-dark-muted);
}

/* --- Link columns --- */
.site-footer__heading {
  font-family: var(--font-body); /* the sans-serif, not the headings' serif */
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-on-dark);
}

.site-footer__links {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.site-footer__link {
  color: var(--c-on-dark-muted);
  text-decoration: none;
  border-radius: var(--radius-1);
  transition: color var(--duration-fast) var(--ease);
}

.site-footer__link:hover {
  color: var(--c-on-dark);
}

/* --- Bottom row: copyright and legal links, under a 1px line --- */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  font-size: var(--fs-small);
  border-top: var(--border-1) solid var(--c-line-on-dark);
}

.site-footer__copy {
  color: var(--c-on-dark-muted);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}