/* ============================================================
   faq.css  -  THE FREQUENTLY ASKED QUESTIONS PAGE

   Nikita: this file only styles faq.html. It turns the list of
   questions into a clean "accordion": each question is a row you
   click to slide its answer open.

   The accordion is built from the browser's own <details> and
   <summary> tags (see faq.html), so it works even if JavaScript
   is switched off. We only restyle it here - the open/close
   behaviour is handled by the browser for free.

   Every colour, size, and gap below pulls from tokens.css, so the
   page automatically matches the rest of the site.
============================================================ */

/* ----------------------------------------------------------
   HERO  -  the page title block at the top
---------------------------------------------------------- */
.faq-hero {
  padding-block-end: var(--space-xl);
}

.faq-title {
  margin-block-start: var(--space-md);
}
/* Stack the two title lines and let the italic word sit in gold. */
.faq-title span { display: block; }
.faq-title em   { color: var(--gold); font-style: italic; }

.faq-intro {
  margin-block-start: var(--space-lg);
  max-width: var(--reading-max-w);
  color: var(--ash);
}

/* ----------------------------------------------------------
   THE ACCORDION LIST
   A single column, kept narrow enough that answer lines stay
   comfortable to read.
---------------------------------------------------------- */
.faq-list {
  max-width: 860px;
  border-block-start: 1px solid var(--rule);
}

.faq-item {
  border-block-end: 1px solid var(--rule);
}

/* ----------------------------------------------------------
   THE QUESTION  -  the clickable row (<summary>)
---------------------------------------------------------- */
.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h3-lg);
  line-height: var(--lh-snug);
  color: var(--ink);
  transition: color var(--dur-base) var(--ease-out);
  /* Hide the browser's default open/close triangle so we can draw
     our own chevron on the right. */
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }

.faq-q:hover {
  color: var(--gold-deep);
}

/* Keyboard focus ring (for people navigating with the Tab key). */
.faq-q:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 3px;
}

/* The chevron on the right. It is a small SVG drawn in ink that
   rotates a half-turn when the question is open. */
.faq-q::after {
  content: "";
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-block-start: 0.12em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231F1B16%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209l6%206%206-6%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Hover and open states swap the chevron to gold. */
.faq-q:hover::after,
.faq-item[open] .faq-q::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23C9A84C%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209l6%206%206-6%27%2F%3E%3C%2Fsvg%3E");
}

.faq-item[open] .faq-q {
  color: var(--gold-deep);
}
.faq-item[open] .faq-q::after {
  transform: rotate(180deg);
}

/* ----------------------------------------------------------
   THE ANSWER  -  the panel that slides into view
---------------------------------------------------------- */
.faq-a {
  padding-block-end: var(--space-lg);
  max-width: var(--reading-max-w);
}
.faq-a p {
  margin: 0;
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* A soft fade-and-rise as the answer opens. */
.faq-item[open] .faq-a {
  animation: faq-open var(--dur-base) var(--ease-out) both;
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------
   CLOSING CTA  -  the "still have a question?" line
---------------------------------------------------------- */
.faq-more {
  margin-block-start: var(--space-2xl);
  max-width: var(--reading-max-w);
}
.faq-more p {
  font-size: var(--type-lede);
  line-height: var(--lh-lede);
  color: var(--ink);
  margin: 0;
}

/* ----------------------------------------------------------
   REDUCED MOTION
   If the visitor has "reduce motion" switched on, drop the
   open animation. The accordion still opens, just instantly.
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-a { animation: none; }
  .faq-q::after { transition: none; }
}

/* ----------------------------------------------------------
   SMALL SCREENS  (<= 640px)
   Tighten the gap between the question and its chevron so long
   questions still have room.
---------------------------------------------------------- */
@media (max-width: 640px) {
  .faq-q { gap: var(--space-sm); }
}