/* Styles for faq-item.hbs — one question box.
   Ported from the legacy `components/custom/faqAccordion/FaqAccordionItem.vue`;
   the 1000 breakpoint and every size below are the legacy values. */

/* No bottom padding: the answer carries its own, so a closed box ends right
   under its title the way the legacy one did. `overflow: hidden` keeps the
   answer inside the rounded corners while it is mid-open. */
.faq-box {
  width: 100%;
  margin-bottom: 16px;
  padding: 16px 16px 0;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background-color: var(--gray-0);
  overflow: hidden;
}

/* `display: grid` is what drops the disclosure triangle in every engine that
   draws it as a list marker — the pseudo-element below covers older WebKit,
   which draws it separately. */
.faq-box-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
  cursor: pointer;
  list-style: none;
}

.faq-box-summary::-webkit-details-marker {
  display: none;
}

.faq-box-title {
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
}

/* 16x10, not a square: the mark is cut on a 20x10 viewBox, so a 16px-tall box
   would letterbox it down to a thin tick. At 16x10 it scales 0.8 and draws the
   same chunky chevron the legacy accordion had. Drawn pointing up, so the
   rotation lives on the closed state and unwinds on open — again as in legacy. */
.faq-box-arrow {
  width: 16px;
  height: 10px;
  color: var(--gray-900);
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.faq-box[open] .faq-box-arrow {
  transform: rotate(0);
}

/* 14px/23px at every width, deliberately. The legacy stylesheet carries a
   `@media (min-width: 1000px)` rule that raises answer text to 16px/26px, but it
   is scoped to `p` — and the legacy answers were escaped text plus `<br>` inside
   a `.rich-content` div, never `<p>` elements, so that rule matched nothing and
   the live site reads 14px on desktop too. Porting it would have been copying a
   rule the old site never applied. */
.faq-box-answer {
  padding-bottom: 20px;
  color: var(--gray-500);
  font-size: 14px;
  font-weight: 400;
  line-height: 23px;
}

/* Every line of every answer is a bare <p>, and the global reset already zeroes
   its margins — so paragraphs run at a flat 23px with no gap between them, and
   no answer gets a treatment (bullets, indents, extra spacing) that its
   neighbours do not. That is what the legacy section looked like: each answer was
   one string of newline-separated lines joined with <br>, so every line in every
   answer sat on the same rhythm. Do not give one answer a list or a paragraph
   gap — the inconsistency is what reads as broken, not the density. */

/* Animates the open/close where the engine can interpolate a length to `auto`.
   Everywhere else the answer simply appears, which is what <details> does on its
   own — the transition is the enhancement, not the behaviour. `interpolate-size`
   is inherited, so it is set on the box rather than on `:root`: this is the only
   region that needs it. */
@supports (interpolate-size: allow-keywords) {
  .faq-box {
    interpolate-size: allow-keywords;
  }

  .faq-box::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.5s cubic-bezier(0.77, 0, 0.175, 1),
      content-visibility 0.5s cubic-bezier(0.77, 0, 0.175, 1) allow-discrete;
  }

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

@media (prefers-reduced-motion: reduce) {
  .faq-box-arrow,
  .faq-box::details-content {
    transition: none;
  }
}

@media (min-width: 1000px) {
  .faq-box-title {
    font-size: 18px;
    line-height: 29px;
  }
}