/* Initial Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Custom Properties */
:root {
  /* Font */
  --ff-primary: "Work Sans", Arial, Helvetica, sans-serif;

  /* Font Sizes */
  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-xxl: 2rem;
  --fs-xxxl: 2.5rem;
  --fs-xxxxl: 3.5rem;
  --fs-xxxxxl: 4.5rem;

  /* Colors */
  --clr-purple-950: hsl(292, 42%, 14%);
  --clr-purple-600: hsl(292, 16%, 49%);
  --clr-purple-100: hsl(275, 100%, 97%);
  --clr-violet-600: hsl(281, 83%, 54%);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-s: 0.75rem;
  --spacing-m: 1rem;
  --spacing-l: 1.25rem;
  --spacing-xl: 1.5rem;
  --spacing-xxl: 2rem;
  --spacing-xxxl: 2.5rem;
  --spacing-xxxxl: 3.5rem;
  --spacing-xxxxxl: 4.5rem;
}

/* Base Styles */
body {
  font-family: var(--ff-primary);
  line-height: 1.5;
  background-color: var(--clr-purple-100);
}

h1 {
  font-size: var(--fs-xxxxl);
}

/* Layout Components */
.section {
  width: 100%;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-xxl);
}

/* UI Components */
.section--faq {
  background-image: url("./images/background-pattern-desktop.svg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.faq {
  background-color: white;
  border-radius: 20px;
  padding: var(--spacing-xxxl);
  max-width: 50rem;
}

.faq__header {
  display: flex;
  gap: var(--spacing-m);
  align-items: center;
}

.faq__acc-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq__acc-question p {
  font-size: var(--fs-l);
  font-weight: bold;
  margin-top: var(--spacing-l);
  margin-bottom: var(--spacing-l);
}

.faq__minus-icon {
  display: none;
}

.faq__acc-answer {
  max-width: 95%;
  color: var(--clr-purple-950);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq__acc-answer.active {
  padding-bottom: var(--spacing-xl);
}

.faq__plus-icon,
.faq__minus-icon {
  cursor: pointer;
}