/* ===========================================================================
   THE BODY — FAQ accordion for any page (js/faq.js), generalised 2026-10-28.
   Markup: scripts/site_kit.py faq_block(). The list sits in normal flow:
     <section class="sec sec--faq" data-g="--h:<Figma section height>">
       <div class="faq" data-g="--x:<left>;--y:<top>;--w:<width>">
   so the section grows as answers open (its Figma height is the minimum).
   Figma (Treatments 282:33): question Jost 26/32, answer 15.5/28, 1px --hair rule
   under each row. The Book page keeps its own copy in css/book-ui.css.
   =========================================================================== */
.sec--faq { height: auto; min-height: calc(var(--h) * var(--u)); padding-bottom: calc(var(--fb, 120) * var(--u)); }
.faq {
  position: relative;
  margin-left: calc(var(--x) * var(--u)); margin-top: calc(var(--y) * var(--u));   /* .sec clips (overflow: hidden), so this margin never collapses */
  width: calc(var(--w) * var(--u));
}
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-h { margin: 0; font: inherit; }
.faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: calc(24 * var(--u));
  width: 100%; padding: calc(27 * var(--u)) 0 calc(26 * var(--u)); margin: 0;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--body);
  font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: calc(-0.5 * var(--u));
  transition: color .25s ease, padding-bottom .45s cubic-bezier(.2,.7,.2,1);
}
/* Figma: 16px from an open question to its answer (26 under a closed one) */
.faq-item.is-open .faq-q { padding-bottom: calc(16 * var(--u)); }
.faq-q span { max-width: calc(708 * var(--u)); }
.faq-q:hover { color: var(--ink); }
.faq-q:focus-visible { outline: 2px solid var(--clay); outline-offset: calc(4 * var(--u)); border-radius: 4px; }
/* + that turns into – */
.faq-ic { position: relative; flex: none; width: calc(14 * var(--u)); height: calc(32 * var(--u)); margin-right: calc(7 * var(--u)); }
.faq-ic::before, .faq-ic::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -0.75px;
  background: var(--clay); transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.faq-ic::after { transform: rotate(90deg); }
.faq-item.is-open .faq-ic::after { transform: rotate(0deg); opacity: 0; }
/* answer: 0fr -> 1fr grid row animates to the content's real height */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-in { overflow: hidden; min-height: 0; }
.faq-a-in p {
  margin: 0; max-width: calc(680 * var(--u));
  font-size: calc(15.5 * var(--u)); line-height: calc(28 * var(--u));
  opacity: 0; translate: 0 calc(-6 * var(--u)); transition: opacity .35s ease, translate .45s cubic-bezier(.2,.7,.2,1);
}
.faq-a-in p + p { margin-top: calc(14 * var(--u)); }
.faq-a-in p:last-child { margin-bottom: calc(26 * var(--u)); }
.faq-a-in a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.faq-item.is-open .faq-a-in p { opacity: 1; translate: 0 0; transition-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-a-in p, .faq-ic::before, .faq-ic::after { transition: none !important; }
}