/* build: 4 */
.dm-faq__list {
  border-top: 1px solid var(--dm-blue-100, #003EFF);
}

.dm-faq__item {
  border-bottom: 1px solid var(--dm-blue-100, #003EFF);
}

/* A blue-100 rule on a blue or dark section is either invisible or barely off
   the background, so those schemes keep their own border colour. */

.dm-scheme--blue .dm-faq__list,
.dm-scheme--dark .dm-faq__list,
.dm-scheme--blue .dm-faq__item,
.dm-scheme--dark .dm-faq__item {
  border-color: var(--dm-border);
}

/* ---------------------------------------------------------------------------
   Expand / collapse animation, no JavaScript.

   ::details-content targets the part a <details> reveals, and
   interpolate-size: allow-keywords lets height animate to `auto` — otherwise a
   fixed height would be needed and long answers would clip.

   Browsers without support open instantly, which is the current behaviour, so
   nothing regresses.
   --------------------------------------------------------------------------- */

@supports selector(::details-content) {
  :root {
    interpolate-size: allow-keywords;
  }

  .dm-faq__item::details-content {
    block-size: 0;
    content-visibility: hidden;
    opacity: 0;
    overflow: hidden;
    transition:
      block-size 0.28s ease,
      opacity 0.28s ease,
      content-visibility 0.28s allow-discrete;
  }

  .dm-faq__item[open]::details-content {
    block-size: auto;
    content-visibility: visible;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-faq__item::details-content {
    transition: none;
  }
}

.dm-faq__question {
  align-items: center;
  color: var(--dm-accent);
  cursor: pointer;
  display: flex;
  font-size: var(--dm-text-title-l);
  font-weight: 500;
  gap: var(--dm-space-md, 24px);
  justify-content: space-between;
  line-height: 24px;
  list-style: none;
  padding-block: var(--dm-space-md, 24px);
}

/* Hide the default disclosure triangle */

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

.dm-faq__question::marker {
  content: "";
}

.dm-faq__question:focus-visible {
  outline: 2px solid var(--dm-accent);
  outline-offset: 4px;
}

.dm-faq__marker {
  --dm-icon-size: 42px;

  color: var(--dm-accent);
}

/* Swap plus for minus when the item is open */

.dm-faq__marker--minus,
.dm-faq__item[open] .dm-faq__marker--plus {
  display: none;
}

.dm-faq__item[open] .dm-faq__marker--minus {
  display: block;
}

.dm-faq__answer {
  font-size: var(--dm-text-body-l);
  line-height: var(--dm-lh-body-l);
  max-width: 68ch;
  padding-bottom: var(--dm-space-lg, 32px);
}

.dm-faq__answer > *:first-child {
  margin-top: 0;
}

.dm-faq__answer > *:last-child {
  margin-bottom: 0;
}