/*
 * The questions at the foot of every page.
 *
 * ONE FILE FOR THREE PAGES, for the same reason `faq-copy.js` is one file: the
 * homepage and the two vertical pages have separate stylesheets, so a FAQ styled
 * in both would be two looks drifting apart from the day it shipped.
 *
 * It only uses tokens BOTH families already define (--ink, --muted, --hairline,
 * --display, --body). The accent is the one place they differ: the homepage
 * calls it --aurora and a vertical page calls it --key, so the chain below asks
 * for --key first, falls back to --aurora, and falls back again to the green
 * literal. A missing token would otherwise render as an invisible focus ring,
 * which is the kind of break nobody sees until somebody is navigating by
 * keyboard.
 */

.faq { border-top: 1px solid var(--hairline); padding-top: 34px; }

.faq h2 { font: 600 22px/1.25 var(--display); margin: 0 0 6px; color: var(--ink); }

/*
 * The thirteen languages, always visible rather than behind the question.
 *
 * Helgi asked for the supported languages to be ON the site. Putting the list
 * inside a collapsed answer would technically satisfy that and practically
 * hide it, and the list is the most persuasive thing in this section for an
 * operator whose guests are not Icelandic.
 */
.faq .langs-line {
  word-break: keep-all; /* never split 中文 or 日本語 across two lines */
  font: 400 15px/2 var(--body);
  color: var(--muted);
  margin: 0 0 26px;
  max-width: 46em;
  /* Long, and full of scripts with different metrics. Let it breathe. */
  word-spacing: .06em;
}

.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:first-of-type { border-top: 1px solid var(--hairline); }

.faq summary {
  font: 600 17px/1.45 var(--body);
  color: var(--ink);
  cursor: pointer;
  padding: 15px 34px 15px 0;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

/* The same chevron the homepage already uses on its collapsed sections. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 21px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] > summary::after { transform: rotate(225deg); top: 24px; }

.faq summary:focus-visible {
  outline: 2px solid var(--key, var(--aurora, #4FDCAE));
  outline-offset: 3px;
  border-radius: 3px;
}

.faq details p {
  font: 400 15.5px/1.65 var(--body);
  color: var(--muted);
  margin: 0 0 16px;
  max-width: 42em;
  padding-right: 34px;
}

/* The footer links, on every page. privacy.html and terms.html existed for a
   week and were reachable from nowhere at all. */
.foot-links { margin-top: 10px; }
.foot-links a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.foot-links a:hover, .foot-links a:focus-visible { color: var(--ink); }

@media (max-width: 560px) {
  .faq .langs-line { font-size: 14.5px; line-height: 1.9; }
  .faq summary { font-size: 16px; }
}