.faq {
  width: 100%;
  padding-block: var(--section-padding-y);
}

.faq__header {
  margin-bottom: var(--space-5);
}

.faq__title {
  font-size: var(--fs-2xl);
}

.faq__title-part--blue {
  color: var(--color-blue);
}

.faq__title-part--red {
  color: var(--color-red);
}

.faq__subtitle {
  margin-top: var(--space-1);
  color: var(--color-red);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.faq__tabs {
  position: relative;
}

.faq__tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.faq__tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-gray-medium);
}

.faq__tab-label {
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.faq__tab-radio:nth-of-type(1):checked ~ .faq__tab-list .faq__tab-label:nth-child(1),
.faq__tab-radio:nth-of-type(2):checked ~ .faq__tab-list .faq__tab-label:nth-child(2),
.faq__tab-radio:nth-of-type(3):checked ~ .faq__tab-list .faq__tab-label:nth-child(3),
.faq__tab-radio:nth-of-type(4):checked ~ .faq__tab-list .faq__tab-label:nth-child(4) {
  background-color: var(--color-blue);
  color: var(--color-white);
  border-bottom-color: var(--color-blue);
}

.faq__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
}

.faq__tab-radio:nth-of-type(1):checked ~ .faq__panels .faq__panel:nth-child(1),
.faq__tab-radio:nth-of-type(2):checked ~ .faq__panels .faq__panel:nth-child(2),
.faq__tab-radio:nth-of-type(3):checked ~ .faq__panels .faq__panel:nth-child(3),
.faq__tab-radio:nth-of-type(4):checked ~ .faq__panels .faq__panel:nth-child(4) {
  display: flex;
}

.faq__item {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-gray-medium);
}

.faq__item[open] {
  border-color: var(--color-blue);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-blue);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--color-red);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.faq__item[open] .faq__question::after {
  content: "−";
}

.faq__answer {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .faq__title {
    font-size: var(--fs-3xl);
  }

  .faq__tab-label {
    font-size: var(--fs-base);
  }
}