/* Fonts */

@font-face {
  font-family: "Work Sans";
  font-weight: 400;
  src: url("../fonts/static/WorkSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Work Sans";
  font-weight: 600;
  src: url("../fonts/static/WorkSans-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Work Sans";
  font-weight: 700;
  src: url("../fonts/static/WorkSans-Bold.ttf") format("truetype");
}

/* Colors */
:root {
  /* PRIMARY */
  --light-pink: hsl(275, 100%, 97%);
  --grayish-purple: hsl(292, 16%, 49%);
  --dark-purple: hsl(292, 42%, 14%);
  /* NEUTRAL */
  --white: hsl(0, 0%, 100%);
}

/* General Styling */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-size: calc((16 / 16) * 1rem);
  line-height: 1.3;
  font-family: "Work Sans", serif;
  font-weight: 400;
  color: var(--dark-purple);
  background-color: var(--light-pink);
}

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

.hidden {
  display: none !important;
}

/* Main */
main {
  min-height: calc(100vh - calc((100 / 16) * 1rem));
  padding: calc((40 / 16) * 1rem) calc((20 / 16) * 1rem);
  background-image: url(../images/background-pattern-mobile.svg);
  background-repeat: no-repeat;
  background-size: 101%;
  background-position: top -2px center;
}

/* card */
.card {
  max-width: calc((520 / 16) * 1rem);
  padding: calc((20 / 16) * 1rem);
  background-color: var(--white);
  border-radius: calc((10 / 16) * 1rem);
}

/* card header */
.card__header {
  display: flex;
  align-items: center;
  gap: calc((20 / 16) * 1rem);
}

.header__img {
  height: calc((30 / 16) * 1rem);
}

.header__text {
  font-size: calc((36 / 16) * 1rem);
}

/* card faq */
.card__faq {
  pointer-events: none;
  padding: calc((20 / 16) * 1rem) 0;
  border-bottom: calc((1.5 / 16) * 1rem) solid var(--light-pink);
}

.card__faq:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.card__faq:focus {
  outline: var(--grayish-purple) calc((2 / 16) * 1rem) solid;
}

.faq__icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.open .faq__icon {
  content: url(../images/icon-minus.svg);
}

.faq__question {
  pointer-events: all;
  cursor: pointer;
  font-weight: 600;
  padding-right: calc((70 / 16) * 1rem);
  position: relative;
}

.faq__question:hover {
  color: var(--grayish-purple);
}

.open .faq__question:hover {
  color: var(--dark-purple);
}

.open .faq__answer {
  padding-top: calc((20 / 16) * 1rem);
  height: fit-content;
}

.faq__answer {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

/* Footer */
footer {
  height: calc((100 / 16) * 1rem);
  min-width: calc((170 / 16) * 1rem);
  color: var(--dark-purple);
  background-color: transparent;
  font-size: calc((13 / 16) * 1rem);
  font-weight: 400;
  line-height: 1.3;

  flex-direction: column;
  gap: calc((5 / 16) * 1rem);
}

.boxv {
  display: none;
}

.attribution {
  font-size: calc((13 / 16) * 1rem);
}

.attribution a:link,
.attribution a:visited {
  color: var(--dark-purple);
  padding: calc((1 / 16) * 1rem);
  text-decoration: none;
}

.attribution a:hover,
.attribution a:active {
  color: var(--grayish-purple);
}

.attribution a:focus {
  outline: var(--grayish-purple) calc((2 / 16) * 1rem) solid;
}