/* ═══════════════════════════════════════════════════
   FAQ page — renders the same FAQ tree the chatbot uses
   (data/faq.js), so site + chatbot stay in sync.
   Native <details> accordions; built on the shared
   .page-hero / .section vocabulary.
   ═══════════════════════════════════════════════════ */

.faq-hero .page-hero-content { max-width: 760px; }

.faq-main { padding-top: var(--space-2xl); }

/* ── Jurisdiction jump nav ── */
.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: var(--space-2xl);
}
.faq-jump-link {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--white);
  font-family: var(--font-family);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.faq-jump-link:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ── Country group ── */
.faq-country {
  margin-bottom: var(--space-3xl);
  scroll-margin-top: calc(var(--nav-height) + 24px);
}
.faq-country:last-child { margin-bottom: 0; }
.faq-country-title {
  font-family: var(--font-family);
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--navy);
  padding-bottom: 12px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--gold);
}

/* ── Category + accordions ── */
.faq-cat { margin-bottom: 36px; }
.faq-cat:last-child { margin-bottom: 0; }
.faq-cat-title {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 12px;
}
.faq-list { border-top: 1px solid var(--border-subtle); }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-family);
  font-weight: var(--fw-semibold);
  font-size: 16.5px;
  color: var(--text-dark);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--navy); }
.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--gold-dark);
  stroke-width: 2.5;
  fill: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-a {
  padding: 0 4px 22px;
  max-width: 80ch;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-mid);
}