/*
 * @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);
  --footer-menu-mobile-vertical-spacing: 60px;

  container-type: inline-size;
  padding-block: var(--spacing-component);
  background-image: linear-gradient(to bottom,  #D3FF82,  #FAF9FF);
  color: var(--footer-text-color-medium);

  &[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;
    }
  }

  .button--light {
    --button-icon-fill: var(--primary);
    --button-icon-fill-hover: var(--primary);
    --button-icon-fill-active: var(--primary);
    --button-icon-background-color: var(--black);
    --button-icon-background-color-hover: var(--black);
    --button-icon-background-color-active: var(--black);
  }

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

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

  .site-footer__content {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--sp6);
    max-width: 700px;
  }

  .site-footer__bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: start;
    gap: 80px;
    grid-column: 1 / -1;
    margin-top: 150px;

    .region-footer-menu {
      @media (width >= 800px) {
        flex-basis: 600px;
      }
    }

    @media (width < 800px) {
      flex-direction: column;
      row-gap: var(--footer-menu-mobile-vertical-spacing);
      flex-basis: revert;
      margin-top: var(--footer-menu-mobile-vertical-spacing);

      .region-footer-menu {
        order: -1;
      }
    }
  }

  .site-footer__logo {
    max-width: 400px;
  }

  .site-footer__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
    width: 100%;
    justify-content: space-between;
    margin-top: var(--spacing-xl);
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: var(--body-s-size);

    @media (width > 700px) {
      justify-self: end;
    }

    .secondary-menu {
      --secondary-menu-font-size: var(--body-s-size);
    }

    .secondary-menu__list {
      flex-wrap: wrap;
      gap: 5px 20px;
    }

    .secondary-menu__link {
      padding-inline: 0;
    }
  }

  .footer-menu {
    font-family: var(--font-mono);
  }

  .footer-menu--level-1 {
    line-height: var(--spacing-xxs);

    &[class]:has(> .footer-menu__item--has-children) {
      @container (width > 700px) {
        display: flex;
        gap: 80px;
        justify-content: end;
      }
    }
  }

  .footer-menu__link:has(> svg) {
    align-items: center;
    gap: 10px;
    white-space: nowrap;

    &[class] {
      display: flex;
    }

    svg {
      flex-shrink: 0;
      width: 20px;
      margin-top: -5px;
    }
  }

  .footer-menu__link--level-1 {
    font-size: var(--body-m-size);
    text-transform: uppercase;

    &[class] {
      font-weight: normal !important;
      font-family: var(--font-mono);
    }
  }
}