/* ===== assets/css/components/faq.css ===== */
/* =============================================================================
   faq.css — Varedat.io · 04 FAQ   (v30: rebuilt to the client's reference)
   Three columns, mirrored for RTL by logical properties alone: display heading
   at the inline start (right), numbered list in the middle, contact note at the
   inline end (left). Sits on the white the journey resolves into.
   WP mapping: assets/css/components/faq.css + template-parts/sections/faq.php
   ============================================================================= */
.faq {
  position: relative;
  /* v31: #fefefe, not #ffffff. The journey's stage paints #fefefe and the hand-over puts the
     two surfaces edge to edge, where one level of luminance between them reads as a band. */
  background: #fefefe;
  color: var(--color-ink);
  padding-block: clamp(3.5rem, 6vw, 6rem);
}
.faq__inner { display: grid; gap: var(--space-6); }

.faq__head { align-self: start; }
/* v31: the display heading was set at up to 4.75rem against 1.125rem questions — a 4.2×
   jump that made the column shout over the list it is labelling. 2.75rem tops it out, which
   is about 2.4× the question size and matches the reference's own relationship. */
.faq__title {
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  font-family: "Morabba", var(--font-sans);
  text-wrap: balance;
}
.faq__lead {
  font-size: var(--text-small);
  line-height: 1.75;
  color: var(--color-ink-2);
  max-inline-size: 24ch;
  text-wrap: pretty;
  margin: 0;
}

/* ---------- the list ---------- */
.faq__list { border-block-start: 1px solid var(--color-line); }
.faq__item { border-block-end: 1px solid var(--color-line); }

/* v31: rows were 1.5rem of padding either side of a 1.125rem question — about 130 px each,
   so nine of them filled a 2 500 px screen and the list read as a stack of empty boxes.
   1rem/0.875rem here, and the number and dot columns tightened to match. */
.faq__q {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 0.75rem;
  align-items: center;
  gap: var(--space-3);
  padding-block: clamp(0.875rem, 0.7rem + 0.4vw, 1.125rem);
  cursor: pointer;
  list-style: none;                        /* kill the default triangle … */
}
.faq__q::-webkit-details-marker { display: none; }    /* … including Safari's */
.faq__q:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-sm); }

.faq__num {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--color-line-strong);
  font-variant-numeric: tabular-nums;
}

/* The question, written twice. .base is the settled ink pass, .acc the blue one;
   both are the SAME fillText-equivalent under different clips, which is how the
   journey's copy does it — a per-character loop would break Persian joining. */
.faq__q-text {
  position: relative;
  font-size: clamp(0.9375rem, 0.89rem + 0.22vw, 1.0625rem);
  line-height: 1.5;
  font-weight: 600;
  margin: 0;
  text-wrap: pretty;
  transition: color var(--transition-fast);
}
.faq__q-text .base { display: block; }
.faq__q-text .acc {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  color: #4f52e0;
  user-select: none;
  pointer-events: none;
  clip-path: inset(0 0 0 100%);            /* nothing until the wipe runs */
}
.faq__q:hover .faq__q-text { color: var(--color-accent); }

/* the marker: a dot that opens into a ring */
.faq__dot {
  justify-self: end;
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.faq__item[open] .faq__dot { background: #4f52e0; box-shadow: 0 0 0 4px rgba(79, 82, 224, 0.16); }

.faq__a { padding-block-end: var(--space-5); padding-inline-end: calc(2.25rem + var(--space-3)); max-inline-size: 58ch; }
.faq__a p { font-size: var(--text-small); line-height: 1.85; color: var(--color-ink-2); margin: 0; text-wrap: pretty; }

/* ---------- the contact note ---------- */
.faq__aside { align-self: start; }
.faq__aside-text { font-size: var(--text-small); line-height: 1.75; margin: 0 0 var(--space-4); max-inline-size: 22ch; text-wrap: pretty; }
/* v31: 0.18em of tracking is a Latin-display device. Applied to Persian it pulls the letters
   out of their joins, which is what «ثـبـت اسـتـعـلام» was doing in the client's screenshot. */
.faq__aside-cta {
  display: inline-block;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;      /* v39: it is an anchor now that #request exists */
  color: var(--color-accent);
  border-block-end: 1px solid currentColor;
  padding-block-end: 2px;
  margin: 0;
}

/* native disclosure animation where supported; a plain open/close everywhere else */
@supports (interpolate-size: allow-keywords) {
  .faq__item::details-content {
    block-size: 0; overflow: hidden; opacity: 0;
    transition: block-size var(--transition-slow), opacity var(--transition-base), content-visibility var(--transition-slow) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; opacity: 1; }
}

@media (min-width: 64em) {
  .faq__inner {
    /* v31: the middle column had minmax(0,1fr) against two fixed columns on an 82rem
       container, so on a wide screen the questions stretched to ~46rem and the contact
       column was squeezed against the gutter. The list is capped and the outer columns
       carry the slack instead. */
    grid-template-columns: minmax(0, 15rem) minmax(0, 42rem) minmax(0, 15rem);
    justify-content: space-between;
    gap: var(--space-7);
    align-items: start;
  }
  .faq__head, .faq__aside { position: sticky; inset-block-start: var(--space-7); }
}

@media (prefers-reduced-motion: reduce) {
  .faq__q-text, .faq__dot { transition: none; }
  .faq__q-text .acc { display: none; }
  .faq__q-text .base { clip-path: none !important; }
  @supports (interpolate-size: allow-keywords) { .faq__item::details-content { transition: none; } }
}

/* ---------- the aircraft hands over to this section ----------
   `fj-cut` is set by the journey's loading gate the moment a module reports
   ready, so it is only ever true when there IS a journey to hand over FROM. If
   the module never boots the class is never added, the pull-up never happens and
   the FAQ sits after the journey as an ordinary section — which is the only
   acceptable failure mode, because a negative margin on a section nobody can
   uncover would make the copy unreachable. */
html.fj-cut .journey { z-index: 1; background: transparent; }
html.fj-cut .faq-slot { margin-block-start: -100dvh; position: relative; z-index: 0; }
.faq.is-pinned { position: fixed; inset-block-start: 0; inset-inline: 0; }
/* .journey carries background:#0d0d0f, and it paints ABOVE .faq once it has a z-index —
   so behind the clip you would have seen its black, not the section. The sticky stage
   covers the viewport for the whole chapter, so the section's own background is the only
   one that is ever needed. The page falls back to white rather than the preview's near
   black for the same reason: by this point everything on screen has resolved to white. */
html.fj-cut { background: #fefefe; }