/* Tap2Wafa — the FAQ pages' own rules [CERT-1 F-ABUSE1-4] [FE-LAUNCH F-FEL-11].
   ------------------------------------------------------------------
   A SECOND stylesheet rather than rules added to the shared t2w sheet, and the reason is the
   content hash: editing the shared sheet renames it, and every page that references it has to
   change with it. The deployed `style-src 'self'` allows a second same-origin sheet and forbids
   the inline <style> that would otherwise be the obvious answer, so this file is the only shape
   that works.

   It carries ONLY what the FAQ adds: the contents list and the question list. The shell, the
   header, the footer, the theme, the beta band and the language control all come from the shared
   sheet, so these three pages cannot drift from the site they belong to.

   PLAIN SENTENCE (law 26): the FAQ used to be one page holding three languages behind a CSS
   toggle, and this file held that toggle; the owner ruled on 2026-09-21 that it becomes three
   real pages at /faq, /ar/faq and /ckb/faq, so the toggle is gone and what is left is the design
   of the questions themselves.

   NO `:has()`, AND NOW NOTHING THAT WOULD WANT IT. The ban this file has always carried stands:
   the panes are gone, the disclosures are native <details>, and every rule below is a plain
   selector that has worked in every browser for a decade. A café's customer reads this page on
   whatever phone they own.

   NO COLOUR LITERALS. Every colour is a token from the shared sheet, so both themes and the
   theme toggle keep working without this file knowing anything about either.

   LOGICAL PROPERTIES THROUGHOUT — `margin-inline`, `border-inline-start`, `padding-block`. Two of
   these three pages are right-to-left, and a physical `margin-left` would put the Arabic page's
   indent on the wrong side of the text.
   ------------------------------------------------------------------ */

/* ── THE PAGE ────────────────────────────────────────────────────────────── */

.faq { padding-block: var(--s12) var(--s16); }

.faq__head { margin-block-end: var(--s8); }
.faq__head h1 { margin-block-end: var(--s4); }

/* THE READING MEASURE. A line of text much longer than about seventy characters is hard to
   return from — the eye loses the start of the next line — and these answers are the longest
   prose on the site. 68ch is measured in the page's own font, so it holds in all three scripts
   rather than being a pixel width tuned to English. */
.faq__intro,
.faq__answer { max-inline-size: 68ch; }

.faq__intro {
  font-size: var(--fs-lead);
  color: var(--muted);
}

/* ── THE CONTENTS LIST ───────────────────────────────────────────────────── */

/* IT IS VISIBLE AT EVERY WIDTH, deliberately. The obvious "desktop only" treatment would hide it
   on a phone, and hiding a way of getting around the page is exactly the loss of functionality
   WCAG 2.2 SC 1.4.10 (Reflow) forbids at 320 CSS pixels. So it stays, and it is the LAYOUT that
   changes: a bordered card on a wide screen, a compact wrapped row on a phone. */
.faq__toc {
  margin-block-end: var(--s8);
  padding: var(--s4) var(--s6);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.faq__toc-heading {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block: 0 var(--s2);
}

.faq__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
}

.faq__toc a {
  display: inline-flex;
  align-items: center;
  /* The 44px floor is the target size, not the text size — WCAG 2.2 SC 2.5.8 asks 24px and the
     estate's own controls have used 44 since the first page, so a link in a list of links gets
     the same. */
  min-block-size: 44px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── THE GROUPS ──────────────────────────────────────────────────────────── */

.faq__group + .faq__group { margin-block-start: var(--s12); }

.faq__group-heading {
  font-size: var(--fs-h3);
  color: var(--heading);
  margin-block: 0 var(--s4);
  padding-block-end: var(--s2);
  border-block-end: 2px solid var(--accent-edge);
}

/* ── THE QUESTIONS ───────────────────────────────────────────────────────── */

/* NATIVE <details>, so the keyboard, the screen reader and the open/closed state are the
   browser's job rather than this site's. `site/build-faq.mjs` records why that decision was made
   rather than a scripted accordion. */
.faq__item {
  border-block-end: 1px solid var(--border);
}

.faq__item > summary {
  /* The default disclosure triangle is removed and replaced below, because its position and size
     are not controllable across browsers and it lands on the wrong side in a right-to-left page.
     BOTH lines are needed: `list-style` for the standard marker, the WebKit pseudo-element for
     older Safari, which ignores it. */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s4);
  /* 44px of height and the padding that makes it, so the whole row is the target and not just
     the words (SC 2.5.8, with room over the 24px minimum). */
  min-block-size: 44px;
  padding-block: var(--s3);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--heading);
}

.faq__item > summary::-webkit-details-marker { display: none; }

/* THE CHEVRON is drawn from two borders rather than written as a character. A `content: "+"`
   would be read out by some screen readers as part of the question, and a glyph would need a
   font that carries it in three scripts. Two borders rotated 45 degrees need neither.

   PHYSICAL BORDERS HERE, AND ONLY HERE, and the reason is measured rather than assumed: with the
   LOGICAL `border-inline-end` the chevron pointed DOWN on the English page and SIDEWAYS on the
   Arabic and Kurdish ones, because the inline end is the left edge in a right-to-left document,
   so the rotated corner turned with it. A chevron is a picture of a direction, not a piece of
   text: down means down in every script. Everything else in this file stays logical. */
.faq__item > summary::after {
  content: "";
  flex: none;
  margin-inline-start: auto;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}

/* THE OPEN STATE IS VISIBLE TWICE OVER — the chevron turns AND the question takes the accent
   colour — because a state shown by one thing only is a state somebody misses. Neither of them
   is colour alone: the chevron's rotation carries the same information without any colour at
   all, which is SC 1.4.1 (Use of Colour). */
.faq__item[open] > summary { color: var(--accent); }
.faq__item[open] > summary::after { transform: rotate(-135deg); }

.faq__answer {
  padding-block: 0 var(--s4);
  /* The answer is indented from the question by a rule on the reading side, so a long answer
     still reads as belonging to the question above it. `border-inline-start` puts that rule on
     the right in Arabic and Kurdish without a second rule for RTL. */
  padding-inline-start: var(--s4);
  border-inline-start: 2px solid var(--border-mid);
  margin-inline-start: var(--s1);
}

.faq__answer p { margin: 0; }

.faq__answer strong { color: var(--heading); }

.faq__answer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* THE FOCUS RING ON A SUMMARY, stated here because a `summary` is not an element the shared
   sheet's `a, button, input` focus rule reaches. Two pixels of the focus token with an offset,
   so it is visible against both themes' grounds (SC 2.4.7, and SC 2.4.11's requirement that the
   indicator is not obscured — the offset is what keeps it clear of the border below). */
.faq__item > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── PHONES ──────────────────────────────────────────────────────────────── */

@media (max-width: 48rem) {
  .faq { padding-block: var(--s8) var(--s12); }

  /* The contents list loses its card on a narrow screen: the border and the padding cost real
     width at 320px, and the links themselves are the useful part. */
  .faq__toc {
    padding: 0;
    background: none;
    border: 0;
  }

  .faq__toc ol { gap: var(--s1) var(--s4); }

  /* The question wraps to as many lines as it needs, and the chevron stays on the first line
     beside it rather than being pushed off the side. */
  .faq__item > summary { align-items: flex-start; }
  .faq__item > summary::after { margin-block-start: 0.45rem; }
}

/* ── MOTION IS OPT-OUT, LIKE EVERYWHERE ELSE ON THIS SITE ────────────────── */

@media (prefers-reduced-motion: reduce) {
  .faq__item > summary::after { transition: none; }
}