/* From the live .tt-faq-item (research/faq-staging.md): question 1rem / 1.2
   (.heading-sm), answer 0.9rem (.text-sm), a fine line below, a plus that
   turns into a minus. Webflow renders the Question and Answer props as slot
   content, like the CMS slot: the item sets the question's look on the
   heading around it, and the answer's through the shared text variables.
   Spacing sits inside the item, so a Collection List in the category's slot
   needs no gap of its own. Light and dark use the --tt-dark space toggle. */
.pAkefbRu4lclUjsrzvj9 {
  --_d-line: var(--tt-dark) var(--white-a-20, rgba(255, 255, 255, 0.2));
  --_d-icon-bg: var(--tt-dark) var(--white-a-10, rgba(255, 255, 255, 0.1));
  --_d-answer: var(--tt-dark) var(--white-a-60, rgba(255, 255, 255, 0.7));
  --_d-strong: var(--tt-dark) var(--white-a-100, #fff);
  --_line: var(--_d-line, rgba(13, 13, 13, 0.08));
  --_icon-bg: var(--_d-icon-bg, rgba(13, 13, 13, 0.05));
  --_answer: var(--_d-answer, rgba(13, 13, 13, 0.7));
  --_strong: var(--_d-strong, var(--black-a-100, #0d0d0d));
  --_ease: cubic-bezier(0.22, 1, 0.36, 1);

  box-sizing: border-box;
  display: block;
  border-bottom: 1px solid var(--_line);
  /* Opens smoothly to its natural height where the browser can. */
  interpolate-size: allow-keywords;
}

.pAkefbRu4lclUjsrzvj9 *,
.pAkefbRu4lclUjsrzvj9 *::before,
.pAkefbRu4lclUjsrzvj9 *::after {
  box-sizing: border-box;
}

.pAkefbRu4lclUjsrzvj9 [data-part="summary"] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 0.9rem;
  list-style: none;
  cursor: pointer;
  border-radius: var(--tt-radius-xs, 0.5rem);
}

.pAkefbRu4lclUjsrzvj9 [data-part="summary"]::-webkit-details-marker {
  display: none;
}

.pAkefbRu4lclUjsrzvj9 [data-part="summary"]:focus-visible {
  outline: 2px solid var(--tt-color-brand, #6f00ff);
  outline-offset: 2px;
}

.pAkefbRu4lclUjsrzvj9 [data-part="question"] {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: var(--tt-heading-sm, 1rem);
  line-height: var(--tt-heading-sm-lh, 1.2);
  font-weight: var(--tt-heading-weight, 600);
  font-feature-settings: "ss03" on, "ss08" on, "ss12" on;
  text-wrap: pretty;
}

/* Plus that turns into a minus; a soft circle behind it on hover. */
.pAkefbRu4lclUjsrzvj9 [data-part="icon"] {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: calc((var(--tt-heading-sm-lh, 1.2) * 1em - 1.5rem) / 2);
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.2s ease;
}

.pAkefbRu4lclUjsrzvj9 [data-part="icon"]::before,
.pAkefbRu4lclUjsrzvj9 [data-part="icon"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 2px;
  margin: -1px 0 0 -0.3rem;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s var(--_ease);
}

.pAkefbRu4lclUjsrzvj9 [data-part="icon"]::after {
  transform: rotate(90deg);
}

.pAkefbRu4lclUjsrzvj9[open] [data-part="icon"]::after {
  transform: rotate(0deg);
}

@media (hover: hover) {
  .pAkefbRu4lclUjsrzvj9 [data-part="summary"]:hover [data-part="icon"] {
    background: var(--_icon-bg);
  }
}

.pAkefbRu4lclUjsrzvj9 [data-part="answer"] {
  /* The answer (prop or CMS slot) lives in the page and gets its look from
     the paragraph tag style, which reads these (README rule 2). */
  --tt-text-size: var(--tt-text-xs, 0.9rem);
  --tt-text-color: var(--_answer);

  padding: 0 2.5rem 1.1rem 0;
  color: var(--_answer);
  font-size: var(--tt-text-xs, 0.9rem);
  line-height: 1.5;
}

/* Height and a short fade, only where ::details-content exists. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .pAkefbRu4lclUjsrzvj9::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size 0.4s var(--_ease),
        content-visibility 0.4s allow-discrete;
    }

    .pAkefbRu4lclUjsrzvj9[open]::details-content {
      block-size: auto;
    }

    .pAkefbRu4lclUjsrzvj9 [data-part="answer"] {
      opacity: 0;
      translate: 0 -0.25rem;
      transition:
        opacity 0.3s ease,
        translate 0.4s var(--_ease);
    }

    .pAkefbRu4lclUjsrzvj9[open] [data-part="answer"] {
      opacity: 1;
      translate: 0 0;
    }
  }
}