/* ============================================================
   FAQ: "מה שרוב הזוגות שואלים" (index.html #faq, right before the
   encore). Seven native <details> rows: Karantina question, Plex
   answer, a pink chevron that turns on open, thin --line separators.
   reveals.js toggles .in on every .rv, so nothing here sets opacity
   on .faq__item; the open/close motion lives on the answer only.
   Pure white type, pink only as light. No cream, no gold.
   ============================================================ */

.faq { position: relative; padding: clamp(5rem, 12vh, 10rem) 0 clamp(4rem, 10vh, 8rem); }
.faq__inner { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; display: grid; gap: clamp(1.2rem, 3vh, 2rem); }
.faq__head { display: grid; gap: 1rem; }
.faq__title { color: var(--ivory); }
.faq__intro { max-width: 60ch; }

/* ---------- the list ---------- */
.faq__list { list-style: none; margin: clamp(.6rem, 2vh, 1.4rem) 0 0; padding: 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

/* the question row: a block (inline spans such as the LTR "DJ" must flow with the text, so no flex here),
   the chevron sits in the padding at the inline end (left, in Hebrew) */
.faq__q {
  position: relative;
  display: block;
  padding: clamp(1.1rem, 2.4vh, 1.5rem) 0;
  padding-inline-end: 3.6rem;
  list-style: none;
  cursor: pointer;
  color: var(--ivory);
  text-shadow: 0 1px 2px rgba(5, 3, 4, .8), 0 2px 12px rgba(5, 3, 4, .45);
  transition: color .3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
body.has-cursor .faq__q { cursor: none; }
.faq__q:hover { color: var(--pink); }
.faq__q:focus-visible { outline: 2px solid var(--magenta-hi); outline-offset: 6px; border-radius: 6px; }

/* the chevron: a pink ring with a pink arrow, rotates and lights up on open */
.faq__q::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  width: 2.2rem;
  height: 2.2rem;
  margin-top: -1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 143, 187, .45);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23ff8fbb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 55% / 1rem 1rem no-repeat,
    rgba(10, 4, 7, .35);
  box-shadow: 0 0 0 0 rgba(255, 143, 187, 0);
  transition: transform .55s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out), box-shadow .45s var(--ease-out);
}
.faq__q:hover::after { border-color: rgba(255, 143, 187, .8); }
.faq__item[open] .faq__q::after {
  transform: rotate(180deg);
  border-color: var(--pink);
  background-color: rgba(255, 143, 187, .12);
  box-shadow: 0 0 20px rgba(255, 143, 187, .28);
}

/* the answer: Plex, bright white, kept clear of the chevron column */
.faq__a {
  padding: 0 0 clamp(1.3rem, 2.8vh, 1.8rem);
  padding-inline-end: clamp(2.6rem, 6vw, 3.6rem);
  max-width: 60ch;
  color: var(--text-2);
  text-shadow: 0 1px 2px rgba(5, 3, 4, .7);
}
.faq__item[open] .faq__a { animation: faq-open .55s var(--ease-out) both; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.faq__a a { color: var(--ivory); font-weight: 600; }
.faq__a a.link-line::after { background: var(--pink); }
.faq__a .ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* the one-line close: a plain sentence with two bright links (a <div>, so the text engine leaves the links alone) */
.faq__cta { margin-top: clamp(.6rem, 2vh, 1.2rem); color: var(--text-2); max-width: 60ch; }
.faq__cta a { color: var(--ivory); font-weight: 600; }
.faq__cta a.link-line::after { background: var(--pink); }
.faq__cta .ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  .faq { padding: clamp(4rem, 10vh, 6rem) 0 clamp(3rem, 8vh, 5rem); }
  .faq__q { padding: 1rem 0; padding-inline-end: 3rem; }
  .faq__q::after { width: 2rem; height: 2rem; margin-top: -1rem; background-size: .9rem .9rem; }
  .faq__a { padding-inline-end: 0; }
}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
  .faq__item[open] .faq__a { animation: none; }
}