/*
  FAQ (faqBlock, MB-111; contract umbraco/blocks/faqBlock.md). Mobile first; one column at every width.
  Each question is a box (quiet surface, thin border, small radius); the question is a button with the arrow at its end.
  Motion as measured on the source by FC-P1 (motion.md row 4), the same at every width:
    - the answer grows from 0 to its height and back: grid-template-rows 0fr <-> 1fr, 0.35 s ease-out;
    - the arrow turns 180 degrees with it, 0.35 s ease-out;
    - a closed box grows to scale(1.005) on hover in 0.2 s linear; an open box stays at scale(1);
    - the border width and the question's weight change at once.
  A closed answer is visibility: hidden once its close has run (its links leave the tab order); reduced motion: every
  change at once. Without script (@media (scripting: none)) and in the Visual tab (.faq--all-open) every answer is shown.
  A site restyles it through these variables in its own CSS (e.g. on .faq):
    --faq-gap, --faq-item-bg, --faq-item-border, --faq-item-border-width, --faq-item-border-width-open, --faq-item-radius,
    --faq-item-padding, --faq-question-size, --faq-question-weight, --faq-question-weight-open, --faq-question-gap-open,
    --faq-arrow-box, --faq-duration, --faq-easing, --faq-hover-scale, --faq-hover-duration, --faq-answer-measure.
  MB-135 (LR-FP): the boxes take master's card defaults (--card-border, --card-radius, --card-padding; the quiet fill stays,
  Q4 b); under 640 px a little less padding and a 32 px arrow box (D13); the answer's lines stop at about 70 characters
  while the box keeps the full width (D9); an optional button under the questions (M11). A site that wants its own look
  (FuelChief: its grey, 3 px corners, 20 px padding, its border) sets the variables above.
*/
.faq {
  --faq-gap: var(--space-3);
  --faq-item-bg: color-mix(in srgb, var(--color-heading) 6%, transparent);
  --faq-item-border: var(--card-border);
  --faq-item-border-width: 1px;
  --faq-item-border-width-open: 2px;
  --faq-item-radius: var(--card-radius);
  --faq-item-padding: var(--space-4);
  --faq-question-size: var(--fs-h4);
  --faq-question-weight: var(--fw-semibold);
  --faq-question-weight-open: var(--fw-bold);
  --faq-question-gap-open: var(--space-2);
  --faq-arrow-box: 32px;
  --faq-answer-measure: 56ch;
  --faq-duration: 0.35s;
  --faq-easing: ease-out;
  --faq-hover-scale: 1.005;
  --faq-hover-duration: 0.2s;
  padding: var(--section-space) var(--page-gutter);
}
.faq__inner { max-width: var(--container-max); margin: 0 auto; }
.faq__intro > * + * { margin-top: var(--space-4); }
.faq__eyebrow { margin: 0; }
.faq__heading { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); text-wrap: balance; overflow-wrap: break-word; }

.faq__list { display: grid; gap: var(--faq-gap); margin-top: var(--space-8); }

.faq__item {
  position: relative;
  min-width: 0;
  padding: var(--faq-item-padding);
  background: var(--faq-item-bg);
  border: var(--faq-item-border-width) solid var(--faq-item-border);
  border-radius: var(--faq-item-radius);
  cursor: pointer;
  transition: transform var(--faq-hover-duration) linear;
}
.faq__item:hover { transform: scale(var(--faq-hover-scale)); }
.faq__item.is-open { border-width: var(--faq-item-border-width-open); transform: scale(1); }

.faq__question-heading { margin: 0; font-size: var(--faq-question-size); line-height: var(--lh-heading); }
.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-heading);
  font: inherit;
  font-weight: var(--faq-question-weight);
  text-align: start;
  cursor: pointer;
}
.faq__question:focus-visible { outline-offset: 6px; }
.faq__question-text { min-width: 0; overflow-wrap: break-word; }
.faq__item.is-open .faq__question { font-weight: var(--faq-question-weight-open); }
.faq__item.is-open .faq__question-heading { margin-bottom: var(--faq-question-gap-open); }

/* The arrow sits in a box as tall as --faq-arrow-box, centred on the question's first line. */
.faq__arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--faq-arrow-box);
  height: var(--faq-arrow-box);
  margin-block: calc((1em * var(--lh-heading) - var(--faq-arrow-box)) / 2);
  transition: transform var(--faq-duration) var(--faq-easing);
}
.faq__item.is-open .faq__arrow { transform: rotate(180deg); }

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--faq-duration) var(--faq-easing), visibility 0s linear var(--faq-duration);
}
.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--faq-duration) var(--faq-easing), visibility 0s linear 0s;
}
/* clip, with a margin only while open, so a focused link's ring inside the answer is not cut off. */
.faq__answer-inner { min-height: 0; overflow: clip; }
.faq__item.is-open .faq__answer-inner { overflow-clip-margin: 6px; }
.faq__answer-text { max-width: var(--faq-answer-measure); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); cursor: auto; }
.faq__answer-text > :first-child { margin-top: 0; }
.faq__answer-text > :last-child { margin-bottom: 0; }

.faq__button { margin: var(--space-8) 0 0; }

@media (min-width: 640px) {
  .faq { --faq-item-padding: var(--card-padding); --faq-arrow-box: 40px; }
}
@media (min-width: 768px) {
  .faq { --faq-question-gap-open: var(--space-3); }
}

/* Every answer shown: without script, and in the Visual tab. */
.faq--all-open .faq__item { cursor: auto; }
.faq--all-open .faq__item:hover { transform: none; }
.faq--all-open .faq__answer { grid-template-rows: 1fr; visibility: visible; }
.faq--all-open .faq__question-heading { margin-bottom: var(--faq-question-gap-open); }
@media (scripting: none) {
  .faq__item { cursor: auto; }
  .faq__item:hover { transform: none; }
  .faq__answer { grid-template-rows: 1fr; visibility: visible; }
  .faq__arrow { display: none; }
  .faq__question-heading { margin-bottom: var(--faq-question-gap-open); }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item, .faq__arrow, .faq__answer, .faq__item.is-open .faq__answer { transition: none; }
}