/* Site footer (footer.html). It carries the theme's .dark-mode class, so it
   always renders with the default theme's dark tokens, matching whatnot.com's
   black footer even when the page is in light mode. layout.css stretches it to
   the full viewport width; its content lines up with the header on the
   centred container through --wn-inset (set by layout.css from 1056px).
   Layout breakpoints are container queries on the footer's own width. */
.whatnot-footer {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 32px var(--wn-inset, 24px);
  border-top: var(--scalar-border-width, 1px) solid var(--scalar-border-color);
  font-family: var(--scalar-font);
  color: var(--scalar-color-1);
  background: var(--scalar-background-1);
}

.whatnot-footer a,
.whatnot-footer a:hover {
  font-weight: var(--scalar-regular);
  text-decoration: none;
}

.whatnot-footer__top,
.whatnot-footer__bottom {
  display: flex;
  gap: 48px;
}

.whatnot-footer__top {
  flex-direction: column;
  justify-content: space-between;
}

.whatnot-footer__logo {
  display: block;
  height: 35px;
  width: auto;
}

.whatnot-footer__app {
  display: none;
}

.whatnot-footer__links {
  display: flex;
  gap: 48px;
}

.whatnot-footer__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.whatnot-footer__group b {
  padding: 8px 0 12px;
  font-size: var(--scalar-font-size-3);
  font-weight: var(--scalar-bold);
}

.whatnot-footer__group a {
  color: var(--scalar-color-2);
  font-size: var(--scalar-small);
}

.whatnot-footer__group a:hover {
  color: var(--scalar-color-1);
}

.whatnot-footer__bottom {
  flex-direction: column-reverse;
}

.whatnot-footer__legal {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 12px 0;
  color: var(--scalar-color-3);
  font-size: var(--scalar-small);
}

.whatnot-footer__legal a {
  color: var(--scalar-color-3);
}

.whatnot-footer__legal a:hover {
  color: var(--scalar-color-2);
}

.whatnot-footer__socials {
  display: flex;
  flex: none;
  gap: 16px;
}

.whatnot-footer__socials a {
  display: inline-flex;
  color: var(--scalar-color-2);
}

.whatnot-footer__socials a:hover {
  color: var(--scalar-color-1);
}

.whatnot-footer__socials svg {
  width: 24px;
  height: 24px;
}

@container (max-width: 639px) {
  .whatnot-footer__app {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--scalar-button-1);
    color: var(--scalar-button-1-color);
  }

  .whatnot-footer a.whatnot-footer__app {
    font-weight: var(--scalar-semibold);
  }

  .whatnot-footer__app:hover {
    background: var(--scalar-button-1-hover);
  }

  .whatnot-footer__app svg {
    width: 20px;
    height: 20px;
  }
}

@container (min-width: 640px) {
  .whatnot-footer__top {
    flex-direction: row;
  }

  .whatnot-footer__links {
    gap: 24px;
  }

  .whatnot-footer__group {
    width: 224px;
  }

  .whatnot-footer__bottom {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}