/* 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.

   [UI-FIX F-UI-5] EACH QUESTION IS A CARD. The owner asked for the questions as sleek boxes with
   rounded edges, a soft radiant glow on hover, the answer inside the same box and a chevron that
   turns. The card is the site's own card recipe — the same radius, border and shadow tokens as
   the feature cards on the home page, and the same hover bloom written as a layered box-shadow
   (WEBSITE-SPEC §5.5 trap B: never a filter, which would blur the text). The open card takes the
   accent border so the state is visible from across the page; the chevron turns in a tinted
   circle so it is visible up close. The answer sits inside the card under a hairline. */
.faq__group .faq__item + .faq__item { margin-block-start: var(--s3); }

.faq__item {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.faq__item[open] {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-edge);
}

/* The soft radiant glow — the home page's card bloom, so the two surfaces read as one family.
   AFTER the open rule on purpose: an open card that is hovered keeps the glow (MEASURED before this
   order: the open rule, later in source at equal specificity, took the glow away on hover). */
.faq__item:hover {
  border-color: var(--accent-edge);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-edge), 0 10px 34px var(--glow-a);
  transform: translateY(-1px);
}


.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;
  position: relative;
  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). The inline-end padding leaves room
     for the chevron chip. */
  min-block-size: 44px;
  padding: var(--s4) calc(var(--s6) + 2.75rem) var(--s4) var(--s6);
  padding-inline: var(--s6) calc(var(--s6) + 2.75rem);
  border-radius: var(--r-lg);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--heading);
  transition: color var(--dur) var(--ease);
}

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

/* THE CHEVRON CHIP: a tinted circle at the inline end of the row (`::after`), with the chevron
   drawn inside it (`::before`) from two borders rotated 45 degrees — never a character, which a
   screen reader could read out, and never a glyph, which would need a font in three scripts.

   PHYSICAL BORDERS ON THE CHEVRON, AND ONLY THERE, 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. The chip and the chevron are
   PLACED with logical insets, so they sit at the reading end of the row in every language. */
.faq__item > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--s6);
  top: 50%;
  margin-top: -1rem;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--accent-soft);
  transition: background-color var(--dur) var(--ease);
}

.faq__item > summary::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-inline-end: calc(var(--s6) + 0.75rem);
  top: 50%;
  margin-top: -0.4rem;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--dur) var(--ease), margin-top var(--dur) var(--ease);
}

/* THE OPEN STATE IS VISIBLE THREE TIMES OVER — the card's border, the question's accent colour
   and the chevron turned upwards — because a state shown by one thing only is a state somebody
   misses. The chevron's rotation carries the 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 { background: var(--accent); }
.faq__item[open] > summary::before {
  margin-top: -0.1rem;
  border-color: var(--on-accent);
  transform: rotate(-135deg);
}

.faq__answer {
  /* Inside the same card, under a hairline: the answer belongs to the question above it. */
  margin: 0 var(--s6);
  padding-block: var(--s4) var(--s6);
  border-block-start: 1px solid var(--border);
}

.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 keeps it clear of the card's own border). */
.faq__item > summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-lg);
}

/* ── 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); }

  /* Tighter card padding on a phone, and the question wraps to as many lines as it needs while
     the chip stays centred on the row. */
  .faq__item > summary { padding-inline: var(--s4) calc(var(--s4) + 2.75rem); }
  .faq__item > summary::after { inset-inline-end: var(--s4); }
  .faq__item > summary::before { inset-inline-end: calc(var(--s4) + 0.75rem); }
  .faq__answer { margin: 0 var(--s4); }
}

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

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