/* ==========================================================================
   FAQ PAGE EXTRAS — only what style.css does not provide.
   Search box in the hero, live-search states for the tabbed accordions,
   and the "still have questions" contact card. Built on the global tokens.
   ========================================================================== */

/* Search form inside the page hero */
.faq-search {
  margin-top: 1.75rem;
  max-width: 620px;
}
.faq-search .input-group .input {
  background: rgba(255, 255, 255, .96);
  border-color: transparent;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.faq-search .input-group .input:focus { border-color: var(--teal-3); }
.faq-search__hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-top: .85rem;
  font-size: var(--fs-xs);
  color: var(--on-dark-muted);
}
.faq-search__hint button {
  font: inherit;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: var(--on-dark);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq-search__hint button:hover { background: rgba(255, 255, 255, .16); border-color: var(--brass-2); }

/* Tabbed FAQ: panel titles only appear while searching (results are grouped) */
.faq-panel__title { display: none; }
.faq-panel__title .badge { font-size: .62rem; }
.faq.is-searching .tabs__list { display: none; }
.faq.is-searching .faq-panel__title { display: flex; }
.faq.is-searching .tabs__panel { animation: none; }
.faq.is-searching .tabs__panel + .tabs__panel { margin-top: 2.5rem; }
.faq .accordion__item[hidden] { display: none; }

/* Result count / empty state */
.faq-status {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: -.75rem 0 1.5rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.faq-status[hidden] { display: none; }
.faq-status strong { color: var(--navy); }
.faq-status .link-arrow { font-size: var(--fs-sm); }
.faq-empty {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--white);
}
.faq-empty[hidden] { display: none; }
.faq-empty .icon-badge { margin: 0 auto 1rem; }
.faq-empty h3 { margin-bottom: .35rem; }
.faq-empty p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

/* Search-term highlight */
mark.faq-hit {
  background: var(--brass-soft);
  color: inherit;
  border-radius: 3px;
  padding: 0 .1em;
  box-shadow: 0 0 0 1px rgba(201, 164, 92, .35);
}

/* Trigger text wrapper (needed so we can rebuild highlights safely) */
.accordion__trigger .faq-q { flex: 1; }

/* Still have questions: contact card */
.faq-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.faq-contact__card {
  padding: clamp(1.75rem, 3vw, 2.4rem);
}
.faq-contact__card .info-list { margin: 1.5rem 0 1.75rem; }
.faq-contact__card .info-list svg { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--teal-3); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; margin-top: .15rem; }
.faq-contact__card .btn-row .btn { flex: 1 1 auto; }

@media (max-width: 1023px) {
  .faq-contact { grid-template-columns: 1fr; }
}