/*
 * @file
 * Styles for site footer.
 */

.site-footer {
  --footer-surface: var(--theme-surface);
  --footer-text-color-soft: var(--theme-text-color-soft);
  --footer-text-color-medium: var(--theme-text-color-medium);
  --footer-link-color: var(--theme-text-color-loud);
  --footer-border-color: var(--theme-border-color-alt);

  container-type: inline-size;
  padding-block: var(--spacing-component);
  background-color: var(--footer-surface);
  color: var(--footer-text-color-medium);
  border-image: linear-gradient(var(--footer-surface), var(--footer-surface)) fill 0 / / 0 0 50vh 0;

  &[class] :where(a:not([class*="button"])) {
    color: var(--footer-link-color);
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in oklch, currentColor 50%, transparent);
    transition: text-decoration 0.2s, text-underline-offset 0.2s, text-decoration-color 0.2s;
    box-shadow: none;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 0.7ex;
      text-decoration-color: currentColor;
    }
  }

  .text-content {
    font-size: inherit;
  }
}

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

.site-footer__left {
  grid-column: 1 / -1;

  @container (width > 700px) {
    grid-column: 1 / 9;
  }
}

.site-footer__right {
  grid-column: 1 / -1;

  @container (width > 700px) {
    grid-column: span 4 / -1;
    justify-self: end;
  }
}

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