/* ============================================================
   FAQ — questions that open in place (built for /pricing; FAQ blocks repeat across bir.ch)
   Requires: tokens.css, page.css

   <details> per question: works without JavaScript, several can be open at once.
   The question row is a Surface fill, radius 12 (controls); on hover it darkens to Surface muted
   (live #EDECF2 → #E6E5EB, snapped to the tokens); on a dark page Background/Grey → Grey Hover.
   The plus turns into a cross when open (.plus-icon, patterns.css).
   ============================================================ */

/* one width for every FAQ (Liliya's review 22.10.2026: /ai and /stage differed): 8 of 12 columns, centred; phones full */
.faq-block { width: calc(8 / 12 * 100%); margin-inline: auto; }
@media (max-width: 47.9375rem) { .faq-block { width: 100%; } }

.faq { display: grid; gap: var(--space-xs); --motion-dur: var(--duration-toggle); --motion-ease: var(--ease-toggle); }
.faq__item { border-radius: var(--radius-md); background: var(--color-surface); transition: background-color var(--duration-hover) var(--ease-hover); }
@media (hover: hover) { .faq__item:hover { background: var(--color-surface-muted); } }
/* Dark pages (/stage): Background/Grey, on hover Grey Hover — live #2B2B2B → #313131 snapped to the tokens */
.theme-dark .faq__item { background: var(--color-bg-grey); }
@media (hover: hover) { .theme-dark .faq__item:hover { background: var(--color-bg-grey-hover); } }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space);
  cursor: pointer;
  list-style: none;
  font-weight: 600; /* Paragraph LG's own weight: a question is the row's title (live had Regular 400; 500 read as body text) */
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: var(--border-thick) solid var(--color-accent-indigo); outline-offset: var(--border-thin); border-radius: var(--radius-md); }
@media (prefers-reduced-motion: reduce) { .faq__item { transition: none; } }
/* the answer's box animates its height (faq.js), so the air lives on the text inside, not on the box */
.faq__a { overflow: hidden; }
.faq__a > p { padding: 0 var(--space) var(--space); } /* more air inside the grey rows */
.faq__item[open] { cursor: pointer; } /* a click on an open card closes it (faq.js) */
.faq__a a { color: var(--color-accent-indigo); text-decoration: none; padding-block: var(--space-xxs); transition: color var(--duration-hover) var(--ease-hover); } /* links in answers read as links: Indigo, no underline, as .link-arrow (Indigo on black text 3.2:1); the padding lets them reach the 24 touch height on phones */
@media (hover: hover) { .faq__a a:hover { color: oklch(from var(--color-accent-indigo) calc(l - 0.12) c h); } }
/* dark pages: Indigo reads 2.5:1 on the grey question — text links on dark are Indigo Light, white under the mouse (27.10.2026) */
.theme-dark .faq__a a { color: var(--color-accent-indigo-light); }
@media (hover: hover) { .theme-dark .faq__a a:hover { color: var(--color-text); } }
@media (prefers-reduced-motion: reduce) { .faq__a a { transition: none; } }