/**
 * Collection FAQs — values from /specs/mens-collection-page.spec.md
 */

.collection-faqs-section {
  font-family: var(--font-sans);
}

.collection-faqs {
  max-width: 56rem;
  margin-inline: auto;
  padding: calc(var(--spacing) * 16) calc(var(--spacing) * 5);
}

.collection-faqs__title {
  margin-bottom: calc(var(--spacing) * 8);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 28px;
  letter-spacing: var(--tracking-widest);
  text-align: center;
  text-transform: uppercase;
  color: rgb(0, 0, 0);
}

.collection-faqs__intro {
  max-width: 48rem;
  margin: 0 auto calc(var(--spacing) * 16);
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-light-charcoal);
}

.collection-faqs__list {
  border-top: 1px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
}

.collection-faqs__item + .collection-faqs__item {
  border-top: 1px solid var(--color-black);
}

.collection-faqs__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 6);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: rgb(0, 0, 0);
}

.collection-faqs__question {
  font-size: 18px;
  line-height: 28px;
}

.collection-faqs__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.collection-faqs__icon-svg {
  width: 2rem;
  height: 2rem;
}

.collection-faqs__icon-svg--minus {
  display: none;
}

.collection-faqs__item.is-open .collection-faqs__icon-svg--plus {
  display: none;
}

.collection-faqs__item.is-open .collection-faqs__icon-svg--minus {
  display: block;
}

.collection-faqs__panel {
  padding-bottom: calc(var(--spacing) * 6);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-light-charcoal);
  transition: opacity 0.2s ease-in;
}

.collection-faqs__panel p {
  margin: 0;
}