/* Block: faq */

.faq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.faq__entry {
  border-bottom: var(--border-soft);
}

.faq__entry:first-child {
  border-top: var(--border-soft);
}

.faq__entry details {
  padding: var(--space-4) 0;
}

.faq__q,
.faq__question {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
  padding-right: var(--space-6);
  position: relative;
  user-select: none;
}

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

.faq__q::marker,
.faq__question::marker {
  display: none;
  content: "";
}

summary.faq__q,
summary.faq__question {
  list-style: none;
}

.faq__q::after,
.faq__question::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--color-accent);
  transition: transform var(--transition-base);
}

details[open] .faq__q::after,
details[open] .faq__question::after {
  content: "—";
}

.faq__num,
.faq__number {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--color-accent);
  flex: 0 0 auto;
  min-width: 32px;
  text-align: left;
  margin-right: var(--space-1);
}

.faq__q-text {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  color: var(--color-text);
  line-height: var(--lh-tight);
}

.faq__a,
.faq__answer {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0 calc(32px + var(--space-3));
  max-width: 560px;
}

@media (max-width: 600px) {
  .faq__q-text {
    font-size: 22px;
  }

  .faq__a,
  .faq__answer {
    margin-left: calc(24px + var(--space-2));
  }
}