/* the footer on every page: one quiet line. The year and the name on the left, the connections (the same as on
   the about page) as small logos in the middle, each name rising above it on hover or focus, and the legal
   notice on the right. Colours: the cobalt print tokens of each page (--text, --muted, --panel, --bg) */
.site-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 4px 16px;
  font: 13px/1 "DM Sans", sans-serif;
  color: var(--muted, #a3a09a);
}
.site-foot .foot-copy {
  justify-self: start;
}
.site-foot .foot-legal {
  justify-self: end;
  color: var(--muted, #a3a09a);
  text-decoration: none;
  transition: color 0.25s;
}
.site-foot .foot-end {
  justify-self: end;
  display: flex;
  gap: 20px;
}
/* the Site Manager link: only on localhost (nav.js), in the admin pencils' strawberry red */
.site-foot .foot-manage {
  color: #ff3b5c;
  text-decoration: none;
  transition: color 0.25s;
}
.site-foot .foot-manage:hover {
  color: #ff7088;
}
.site-foot .foot-legal:hover,
.site-foot .foot-legal[aria-current="page"] {
  color: var(--text, #eeeae0);
}
.site-foot a:focus-visible {
  outline: 2px solid var(--text, #eeeae0);
  outline-offset: 3px;
  border-radius: 6px;
}
.socials {
  display: flex;
  gap: 4px;
}
.so {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--muted, #a3a09a);
  transition: color 0.25s, background-color 0.25s;
}
.so-logo {
  width: 16px;
  height: 16px;
}
.so:hover,
.so:focus-visible {
  color: var(--text, #eeeae0);
  background: var(--panel, #18191d);
}
.so::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--text, #eeeae0);
  color: var(--bg, #0d0e11);
  font: 500 12px/1 "DM Sans", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -50% 4px;
  transition: opacity 0.2s, translate 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.so:hover::after,
.so:focus-visible::after {
  opacity: 1;
  translate: -50% 0;
}
.so:first-child::after {
  left: 0;
  translate: 0 4px;
}
.so:first-child:hover::after,
.so:first-child:focus-visible::after {
  translate: 0 0;
}
.so:last-child::after {
  left: auto;
  right: 0;
  translate: 0 4px;
}
.so:last-child:hover::after,
.so:last-child:focus-visible::after {
  translate: 0 0;
}
/* on a sub page it closes the page */
.sub-foot.site-foot,
.bar.site-foot {
  margin-top: auto;
  padding: 16px 0 20px;
}
@media (max-width: 560px) {
  .site-foot {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px 0 12px;
    gap: 8px;
  }
  .site-foot .foot-copy {
    display: none;
  }
  .socials {
    gap: 0;
  }
}