/* =========================================================
   FAQ page — extends styles.css with the search/category UI
   ========================================================= */

.qa-hero{
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}
.qa-hero h1{
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  max-width: 20ch;
  margin-bottom: .5em;
}
.qa-hero-lede{
  font-size: 1.08rem;
  color: var(--text-muted);
  max-width: 62ch;
  margin-bottom: 1.5rem;
}
.qa-hero-note{
  display:flex;
  gap: .8rem;
  align-items:flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  max-width: 62ch;
}
.qa-hero-note svg{ flex:none; color: var(--gold-dark); margin-top: 2px; }
.qa-hero-note p{ margin:0; font-size: .9rem; color: var(--text-muted); }
.qa-hero-note a{ font-weight: 600; }

/* Toolbar: search + category chips */
.qa-toolbar{
  position: sticky;
  top: 76px;
  z-index: 300;
  background: rgba(232,234,225,.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding-block: 1rem;
}
.qa-search{
  display:flex;
  align-items:center;
  gap: .7rem;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .7rem 1.1rem;
  margin-bottom: .9rem;
  max-width: 560px;
}
.qa-search svg{ flex:none; color: var(--text-muted); }
.qa-search input{
  border:0; outline:0; background:transparent;
  font: inherit; color: var(--text); width:100%;
}
.qa-search-count{
  flex: none;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.qa-nav{
  display:flex;
  flex-wrap:wrap;
  gap: .5rem;
  max-height: 4.6em;
  overflow: hidden;
  transition: max-height .25s ease;
}
.qa-nav.expanded{ max-height: 20em; }
.qa-nav a{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration:none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .85rem;
  white-space: nowrap;
}
.qa-nav a:hover{ border-color: var(--gold); }
.qa-nav a span{
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-muted);
  background: var(--paper-hi);
  border-radius: 999px;
  padding: 0 .45em;
}

.qa-empty{
  text-align:center;
  color: var(--text-muted);
  padding: 3rem 1rem;
  font-size: 1rem;
}

/* Category sections */
.qa-cat{
  padding-block: 2.4rem;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 150px;
}
.qa-cat:nth-child(odd){ background: var(--paper-hi); }
.qa-cat-head{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.qa-cat-head h2{ font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin:0; }
.qa-count{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.qa-cat .faq-list{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display:grid;
  gap: .7rem;
  max-width: 900px;
}

.qa-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 2rem;
  flex-wrap:wrap;
  background: var(--ink);
  color: var(--text-on-ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
}
.qa-cta-inner h2{ color:#fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.qa-cta-inner p{ color: var(--text-on-ink-muted); margin:0; max-width: 46ch; }
.qa-cta-inner .eyebrow{ color: var(--gold); }
.qa-cta-actions{ display:flex; gap: .8rem; flex-wrap:wrap; }
.qa-cta{ padding-block: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 620px){
  .qa-toolbar{ top: 0; }
  .qa-cat{ scroll-margin-top: 96px; }
}