/* BIEPE - faq page */

.faq-groups-section { --sec-bg: var(--color-bg); --sec-fg: var(--color-text); --sec-muted: var(--color-text-muted); --kicker: var(--color-primary); --sec-py: 5rem; --sec-py-lg: 7rem;
  background: var(--sec-bg); color: var(--sec-fg); padding-block: var(--sec-py); @media (width >= 1024px) { padding-block: var(--sec-py-lg); } }
.faqpage__group { margin-block-end: 3.5rem; &:last-child { margin-block-end: 0; } @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.faqpage__list { margin-block-start: 1.5rem; border-block-start: var(--border-width) solid var(--color-border); }
.faq-item { border-block-end: var(--border-width) solid var(--color-border); padding-block: 0.5rem; transition: padding-block-end var(--faq-duration, 320ms) var(--ease); &::details-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--faq-duration, 320ms) var(--ease), content-visibility var(--faq-duration, 320ms) allow-discrete; } &[open] { padding-block-end: 2rem; } &[open]::details-content { grid-template-rows: 1fr; } @media (prefers-reduced-motion: reduce) { transition: none; &::details-content { transition: none; } } @supports (animation-timeline: view()) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @media (prefers-reduced-motion: reduce) { animation: none; } }
.faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem; cursor: pointer; list-style: none; font-size: 1.125rem; line-height: 1.75rem; font-weight: var(--weight-semibold); &::-webkit-details-marker { display: none; } &:focus { outline: none; } &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } }
.faq-item__chev { --ico-size: 1.25rem; transition: transform 320ms var(--ease); }
.faq-item__a { margin: 0; max-inline-size: 42rem; min-block-size: 0; overflow: hidden; line-height: 1.75rem; color: var(--color-text-muted); }