/* ==========================================================================
   FAQ
   A single centred column of accordion items. One answer is open at a time,
   and the arrow button rotates as its answer expands.
   ========================================================================== */

.faq {

  --item-bg: #fffdf8;
  --list-w: 860;

  position: relative;
  padding-block: calc(110 * var(--u)) calc(130 * var(--u));
  background-color: var(--c-bg);
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.faq__title {
  max-width: calc(760 * var(--u));
  margin: 0 auto calc(54 * var(--u));
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: calc(42 * var(--u));
  line-height: 1.25;
  text-align: center;
  color: var(--c-text);
  text-wrap: balance;
}

.faq__title em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: calc(53 * var(--u));
  color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   List
   -------------------------------------------------------------------------- */

.faq__list {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  width: min(calc(var(--list-w) * var(--u)), calc(100% - 96 * var(--u)));
  margin-inline: auto;
}

.faq__item {
  border-radius: calc(14 * var(--u));
  background-color: var(--item-bg);
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(43 28 18 / 0.04),
              0 calc(8 * var(--u)) calc(22 * var(--u)) rgb(43 28 18 / 0.06);
  transition: box-shadow 0.35s var(--ease-out);
}

.faq__item.is-open {
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgb(43 28 18 / 0.06),
              0 calc(14 * var(--u)) calc(32 * var(--u)) rgb(43 28 18 / 0.10);
}

/* --------------------------------------------------------------------------
   Question row
   -------------------------------------------------------------------------- */

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  width: 100%;
  padding: calc(24 * var(--u)) calc(28 * var(--u));
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: calc(22 * var(--u));
  line-height: 1.35;
  text-align: left;
  color: var(--c-text);
}

.faq__arrow {
  flex: none;
  display: grid;
  place-items: center;
  /* The disc is gone, but the box stays: it is what the rotation turns about,
     and at 38u it keeps a comfortable target around a 15u glyph. */
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  color: var(--c-primary);
  /* Hover used to be carried by the disc going from 12% to 22%. With nothing
     behind the glyph, the stroke itself has to darken instead. */
  transition: color 0.3s var(--ease-out);
}

.faq__question:hover .faq__arrow {
  color: #d76208;
}

.faq__arrow svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Answer
   -------------------------------------------------------------------------- */

.faq__answer {
  overflow: hidden;   /* so the height tween clips instead of spilling text */
}

.js .faq__answer {
  height: 0;
  visibility: hidden;
}

.faq__answer p {
  padding: 0 calc(28 * var(--u)) calc(26 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1.6;
  color: rgb(43 28 18 / 0.75);
  text-wrap: wrap;
}