@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --white: hsl(0, 0%, 100%);
  --pink: hsl(281, 83%, 54%);
  --light-pink: hsl(275, 100%, 97%);
  --grayish-purple: hsl(292, 16%, 49%);
  --dark-purple: hsl(292, 42%, 14%);
}

html {
  box-sizing: border-box;
  font-size: 62.5%; /* 1rem = 10px, 10px/16px = 62.5% */
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Work Sans', serif;
  background-color: var(--light-pink);
  background-image: url(/assets/images/background-pattern-desktop.svg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100vw auto;

  min-height: 100vh;

  display: flex;
  justify-content: center;
}

.faq__container {
  width: 60rem;
  background-color: var(--white);
  margin-top: 16.7rem;
  padding: 4rem;
  border-radius: 1.6rem;
  box-shadow: 0 3.2rem 5.6rem 0 hsl(281, 100, 23, 10%);
}

.faq__heading {
  display: inline-block;
  font-size: 5.6rem;
  font-weight: 700;
  color: var(--dark-purple);
  margin-bottom: 3.2rem;

  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.faq {
  margin: 2.4rem 0;
  border-bottom: 1px solid var(--light-pink);
  position: relative;
  transition: 0.3s ease;
}

.faq:nth-child(5) {
  border-bottom: 0;
}

.faq__title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--dark-purple);
  padding-right: 2.4rem;
  margin-bottom: 2.4rem;
}

.faq__title:hover {
  cursor: pointer;
  color: var(--pink);
}

.faq__text {
  display: none;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 150%;
  color: var(--grayish-purple);
  margin-bottom: 2.4rem;
}

.faq.active .faq__text {
  display: block;
}

.faq__toggle {
  background: transparent;
  border: 0;
  position: absolute;
  top: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.faq__toggle .faq__minus__icon {
  display: none;
}

.faq.active .faq__toggle .faq__minus__icon {
  display: block;
}

.faq.active .faq__toggle .faq__plus__icon {
  display: none;
}

@media screen and (max-width: 425px) {
  body {
    background-image: url(/assets/images/background-pattern-mobile.svg);
  }

  .faq__container {
    width: 40rem;
    margin: 15rem 2.4rem;
    padding: 2.8rem;
  }

  .faq__heading {
    font-size: 3.6rem;
    margin-bottom: 2.8rem;
    gap: 2rem;
  }

  .faq {
    margin: 2.2rem 0;
  }

  .faq__title {
    font-size: 1.7rem;
    margin-bottom: 2.2rem;
  }

  .faq__text {
    font-size: 1.5rem;
    margin-bottom: 2.2rem;
  }
}

@media screen and (max-width: 375px) {
  body {
    background-image: url(/assets/images/background-pattern-mobile.svg);
  }

  .faq__container {
    width: 32.7rem;
    margin: 14.2rem 2.4rem;
    padding: 2.4rem;
  }

  .faq__heading {
    font-size: 3.2rem;
    margin-bottom: 2.4rem;
  }

  .faq {
    margin: 2rem 0;
  }

  .faq__title {
    font-size: 1.6rem;
  }

  .faq__text {
    display: none;
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 320px) {
  .faq__container {
    width: 28rem;
    margin: 12rem 1.6rem;
    padding: 2rem;
  }

  .faq__heading {
    font-size: 2.8rem;
    margin-bottom: 2rem;
    gap: 1.6rem;
  }

  .faq {
    margin: 1.6rem 0;
  }

  .faq__title {
    font-size: 1.4rem;
    margin-bottom: 1.6rem;
    padding-right: 2rem;
  }

  .faq__text {
    font-size: 1.3rem;
    margin-bottom: 1.6rem;
    line-height: 140%;
  }

  .faq__toggle {
    transform: scale(0.9);
  }
}