/* ==========================================================================
   11-FAQ.CSS  —  the frequently asked questions
   --------------------------------------------------------------------------
   Back on plain --cream, with Why EverInvites on --cream-deep above it, so
   the sections keep alternating without a single border between them.

   Deliberately NOT cards. Twelve boxed items would turn a clean list into
   clutter, and would compete with the template and feature cards that
   already use that treatment. Just hairlines.

   The rows are built by js/faq.js from the `faq.items` list in
   js/data/site-config.js.
   ========================================================================== */

.faq__inner {
  max-width: var(--faq-max);
  margin-inline: auto;
}

.faq__heading {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--ink);
  text-align: center;
}


/* ==========================================================================
   THE LIST
   A rule above the first row and below the last, and one between each pair.
   ========================================================================== */
.faq__list {
  margin-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}

.faq__item {
  border-bottom: 1px solid var(--hairline);
}

/* The <h3> is only here to give the questions a proper place in the page's
   heading structure. It carries no styling of its own. */
.faq__question-wrap {
  font: inherit;
  color: inherit;
  margin: 0;
}


/* ==========================================================================
   THE QUESTION
   The whole row is the button, so there is no small target to miss.
   ========================================================================== */
.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-height: var(--faq-row-min);
  padding-block: var(--space-4);
  text-align: left;

  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-faq-question);
  line-height: var(--lh-body);
  color: var(--ink);

  transition: color var(--dur-base) var(--ease-out);
}

/* Keeps a long question clear of the + even when it wraps to three lines */
.faq__question-text {
  padding-right: var(--space-5);
}

@media (hover: hover) {

  .faq__question:hover {
    color: var(--orange-deep);
  }
}


/* ==========================================================================
   THE + / −
   Two strokes. On open, only the upright one turns, which lands it exactly
   on top of the flat one and leaves a minus. Nothing fades, scales or spins.
   ========================================================================== */
.faq__icon {
  width: var(--faq-icon);
  height: var(--faq-icon);
  flex: none;
  /* nudged down so it sits on the first line of a wrapped question rather
     than drifting to the middle of the block */
  margin-top: 0.28em;
  /* the icon takes its colour from the button, so it turns orange on hover
     along with the words */
  color: inherit;
}

.faq__icon-bar {
  /* transform-box is what makes "the centre" mean the centre of this stroke
     rather than the corner of the whole drawing */
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__item.is-open .faq__icon-bar {
  transform: rotate(90deg);
}


/* ==========================================================================
   THE ANSWER
   Opened by animating grid-template-rows from 0fr to 1fr. The browser works
   out the answer's real height itself, at whatever width the screen happens
   to be — so nothing is ever clipped on a phone, and a short answer never
   sits waiting for a guessed height to finish.
   ========================================================================== */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

/* The inner wrapper does two jobs: it clips the text while the row is
   collapsing, and it takes the answer out of the page entirely when closed.
   `overflow: hidden` on its own would only hide the text visually — a screen
   reader would still read it out and the keyboard could still land in it.

   The switch to hidden waits until the collapse has finished, otherwise the
   answer would vanish instantly and you would watch the row close around an
   empty space. Opening is immediate. */
.faq__answer > .faq__answer-clip {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-base);
}

.faq__item.is-open .faq__answer > .faq__answer-clip {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.faq__answer-text {
  padding-top: var(--space-3);
  padding-bottom: var(--space-4);
  /* the same right padding as the question, so the two line up */
  padding-right: var(--space-5);
  max-width: var(--measure-answer);

  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  text-wrap: pretty;
}


/* ==========================================================================
   THE ARRIVAL
   Each row fades up on its own as it scrolls into view. No stagger across
   the twelve: the list is tall enough that they arrive in sequence anyway,
   and an added delay on top of that would read as lag by row eight.
   ========================================================================== */
.js .faq__item[data-reveal] {
  transform: translateY(16px);
}

.js .faq__item[data-reveal].is-visible {
  transform: translateY(0);
}


/* ==========================================================================
   THE CLOSING BLOCK
   ========================================================================== */
.faq__closing {
  margin-top: var(--space-7);
  text-align: center;
}

.faq__closing-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-faq-closing);
  line-height: 1.3;
  color: var(--ink);
}

.faq__closing .btn {
  margin-top: var(--space-4);
}

/* The real WhatsApp mark, sitting to the left of the label. This is a link
   that genuinely opens WhatsApp, which is the only place their trademark
   belongs. */
.faq__cta-glyph {
  display: inline-flex;
  flex: none;
}

.faq__cta-glyph svg {
  width: var(--wa-glyph);
  height: var(--wa-glyph);
}


/* ==========================================================================
   REDUCED MOTION
   Rows are simply present, and the accordion opens and closes instantly.
   Reduced motion means no animation — it does not mean no accordion, so
   every row still opens, closes and reads exactly as it should.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  .js .faq__item[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .faq__answer,
  .faq__answer > .faq__answer-clip,
  .faq__icon-bar {
    transition: none;
  }
}