/* ========================== Footer ========================== */

main.site-content {
  position: relative;
  z-index: 1;
  background: var(--wp--preset--color--primary-bg);
  color: var(--wp--preset--color--primary-fg);
}

#smooth-content {
  padding-bottom: 100vh;
  position: relative;
  z-index: 1;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;
  padding: 15vh 0 var(--px-80);
  background: var(--wp--preset--color--secondary-bg);
  color: var(--wp--preset--color--secondary-fg);
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);

  @media (max-width: 47.998rem) {
    padding: 0 0 var(--px-80);
  }

  a:not(.btn):not(.footer__social-link) {
    text-decoration: underline;
    text-underline-offset: var(--px-4);
    text-decoration-thickness: var(--px-1);
  }

  .container.footer__inner {
    padding-bottom: 0;
  }

  .footer__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
  }

  .footer__content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--px-40);
    margin-bottom: var(--px-120);

    @media (max-width: 47.998rem) {
      margin-bottom: var(--px-44);
    }
  }

  .footer__content > div {
    min-width: var(--px-200);
  }

  .footer__brand {
    margin-right: 12%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--px-44) var(--px-24);

    .footer__tanovis {
      display: flex;
      flex-direction: row;
      gap: var(--px-24);

      @media (max-width: 47.998rem) {
        display: none;
      }
    }

    .footer__tanovis-text {
      max-width: var(--px-500);

      p {
        font-size: var(--px-12);
        line-height: 1.5;
      }
    }
  }

  .footer__logo {
    display: block;
    max-width: var(--px-300);
    width: 100%;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .footer__cta {
    display: flex;
    justify-content: center;
    align-self: flex-start;
    gap: var(--px-20);

    @media (max-width: 47.998rem) {
      justify-content: flex-start;
    }
  }

  .footer__socials-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--px-20);
    margin-top: var(--px-24);
  }
}

.footer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20vw;
  aspect-ratio: 16 / 9;
  background: var(--current-bg-color);
  z-index: 10;
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
}