/**
 * @file
 * The footer components.
 *
 * It includes styles for the footer itself and its
 * components.
 */


/*
MARK: FOOTER
*/

/*
MARK: Mobile - base
*/

.footer{
  background-color: var(--color-primary--1);
  color: var(--color-white);

  display: flex;
  padding: 48px 16px;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  align-self: stretch;


  .footer__logo{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;

    .logo{
      flex-shrink: 0;
      aspect-ratio: 281 / 42;
      width: 281px;
      background-image: url("../../images/Logo\ NETEXIAL\ white.svg");
      background-size: contain;
    }
  }
  .footer__content_top{
    display: flex;
    flex-direction: column;
    width: 100%;


    .footer__wrapper{
      .footer__body{
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-align: center;
      }
      .footer__socials .menu{
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 16px 0;
        gap: 16px;

        
        .linkedin a::before{
          background-image: url("../../images/socials/linkedin.svg");
        }
        .facebook a::before{
          background-image: url("../../images/socials/facebook.svg");
        }
        .youtube a::before{
          background-image: url("../../images/socials/youtube.svg");
        }
        .insta a::before{
          background-image: url("../../images/socials/Insta.svg");
        }
        .linkedin, .facebook, .youtube, .insta {

          >a{
            width: 40px;
            height: 40px;

            position: relative;
            display: flex;
            flex-direction: row;
            gap:40px;
            overflow: hidden;

            &::before{
              position: relative;
              content: '';
              width: 40px;
              /* height: 40px; */
              flex-shrink: 0;
              aspect-ratio: 1/1;
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
        }
      }
    }
    .footer__nav-contact .menu{
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  }
  hr{
    width: 100%;
    height: 1px;
    background-color: var(--color-white);
  }
  .footer__content_bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    .footer__date{
      p{
        margin: 0;
      }
    }
    .footer__nav-legal .menu{
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  }
}

/*
MARK: 800px
*/
@media all and (min-width: 800px) {
  .footer{
    padding: 48px 80px;
    align-items: flex-start;

    .footer__logo{
      justify-content: left;
    }
    .footer__content_top{
      flex-direction: row;
      justify-content: space-between;
      gap: 50px;

      .footer__wrapper{
        .footer__body{
          text-align: unset;
          *{
            margin: 0;
          }
        }
        .footer__socials .menu{
          justify-content: start;
        }
      }
      .footer__nav-contact{ 
        flex-shrink: 0;
        .menu{
          align-items: end;

          .menu__item {
            flex-shrink: 0;
          }
        }
      }
    }
    .footer__content_bottom{
      flex-direction: row;
      justify-content: space-between;
      align-items: start;

      .footer__nav-legal .menu{
        align-items: end;
      }
    }
  }
}

/*
MARK: 1000px
*/
@media all and (min-width: 1000px) {
  .footer{
    padding: 96px 160px;

    .footer__logo{
      justify-content: left;
    }
  }
}


/*
MARK: 1200px
*/
@media all and (min-width: 1200px) {
  .footer{
    .footer__content_bottom{
      .footer__nav-legal .menu{
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
      }
    }
  }
}