/* ---------------------------------------------------------------
   Klyus FAQ
   Herda tipografia do tema. As três variáveis abaixo são o único
   lugar a ajustar se as cores da identidade forem outras.
   --------------------------------------------------------------- */

.klyus-faq {
  --kfaq-ink: #17253f;             /* azul da identidade */
  --kfaq-paper: #faf7f2;           /* creme */
  --kfaq-rule: rgba(23, 37, 63, .16);
  --kfaq-muted: rgba(23, 37, 63, .62);

  max-width: 46rem;
  margin: 0 auto;
  color: var(--kfaq-ink);
  font-family: inherit;
}

/* ---------- busca ---------- */
.kfaq-search { position: relative; margin: 0 0 1.75rem; }

.kfaq-search__input {
  width: 100%;
  padding: .95rem 2.75rem .95rem 0;
  font: inherit;
  font-size: 1.0625rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kfaq-rule);
  border-radius: 0;
  transition: border-color .25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.kfaq-search__input::placeholder { color: var(--kfaq-muted); opacity: 1; }
.kfaq-search__input:focus {
  outline: none;
  border-bottom-color: var(--kfaq-ink);
}
.kfaq-search__input::-webkit-search-cancel-button { display: none; }

.kfaq-search__clear {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 2rem; height: 2rem; line-height: 1;
  font-size: 1.5rem; color: var(--kfaq-muted);
  background: none; border: 0; cursor: pointer; padding: 0;
}
.kfaq-search__clear:hover { color: var(--kfaq-ink); }

/* ---------- filtros ---------- */
.kfaq-filters {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  margin: 0 0 1.25rem;
}
.kfaq-filter {
  font: inherit;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kfaq-muted);
  background: none; border: 0;
  padding: .45rem 0;
  cursor: pointer;
  position: relative;
  transition: color .2s ease;
}
.kfaq-filter::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.kfaq-filter:hover { color: var(--kfaq-ink); }
.kfaq-filter.is-active { color: var(--kfaq-ink); }
.kfaq-filter.is-active::after { transform: scaleX(1); }
.kfaq-filter:focus-visible { outline: 2px solid var(--kfaq-ink); outline-offset: 3px; }

/* ---------- contador ---------- */
.kfaq-count {
  font-size: .8rem; color: var(--kfaq-muted);
  margin: 0 0 1.75rem; min-height: 1.2em;
}

/* ---------- itens ---------- */
.kfaq-list { border-top: 1px solid var(--kfaq-rule); }

.kfaq-item { border-bottom: 1px solid var(--kfaq-rule); }
.kfaq-item[hidden] { display: none; }

.kfaq-item__heading { margin: 0; font-size: inherit; font-weight: inherit; }

.kfaq-item__button {
  display: flex; align-items: flex-start; gap: 1.25rem;
  width: 100%; text-align: left;
  padding: 1.35rem 0;
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: inherit;
  background: none; border: 0; cursor: pointer;
}
.kfaq-item__button:focus-visible { outline: 2px solid var(--kfaq-ink); outline-offset: 2px; }
.kfaq-item__q { flex: 1; }

.kfaq-item__icon {
  flex: none; position: relative;
  width: 13px; height: 13px; margin-top: .45rem;
}
.kfaq-item__icon::before,
.kfaq-item__icon::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}
.kfaq-item__icon::before { top: 6px; left: 0; width: 13px; height: 1px; }
.kfaq-item__icon::after  { left: 6px; top: 0; width: 1px; height: 13px; }
.kfaq-item__button[aria-expanded="true"] .kfaq-item__icon::after {
  transform: scaleY(0); opacity: 0;
}

/* painel */
.kfaq-item__panel { overflow: hidden; }
.kfaq-item__answer { padding: 0 0 1.6rem; max-width: 40rem; }
.kfaq-item__answer p {
  margin: 0 0 1em;
  font-size: .975rem;
  line-height: 1.75;
  color: var(--kfaq-muted);
}
.kfaq-item__answer p:last-child { margin-bottom: 0; }
.kfaq-item__related a {
  font-size: .875rem; color: var(--kfaq-ink);
  text-decoration: none; border-bottom: 1px solid var(--kfaq-rule);
}

/* animação suave, discreta */
@media (prefers-reduced-motion: no-preference) {
  .kfaq-item__panel { transition: height .32s cubic-bezier(.4, 0, .2, 1); }
}

/* ---------- vazio ---------- */
.kfaq-empty { padding: 3rem 0; text-align: center; }
.kfaq-empty[hidden] { display: none; }
.kfaq-empty__title { font-size: 1.1rem; margin: 0 0 .5rem; }
.kfaq-empty__text { font-size: .95rem; color: var(--kfaq-muted); margin: 0; }

/* ---------- destaque de busca ---------- */
.kfaq-item mark {
  background: rgba(23, 37, 63, .1);
  color: inherit; padding: 0 .1em;
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .kfaq-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.25rem;
    margin-inline: -1.25rem;
    padding-inline: 1.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .kfaq-filters::-webkit-scrollbar { display: none; }
  .kfaq-filter { white-space: nowrap; }
  .kfaq-item__button { font-size: 1rem; padding: 1.15rem 0; gap: 1rem; }
  .kfaq-item__answer p { font-size: .94rem; }
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}