/* ==========================================================================
   Ajuda — docs/specs/Suporte/pagina-de-suporte.md

   Nada de novo no sistema de desenho: as fichas de filtro seguem o padrão das
   áreas dos Trilhos, e as cores das etiquetas de público saem dos tokens de
   categoria que o Abrigo já usa nos avatares e nas fichas dos elementos.
   ========================================================================== */

.ajuda-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-4);
}

/* ---------------- Cabeçalho ---------------- */

.ajuda-cabecalho {
  margin-bottom: var(--space-5);
}

.ajuda-titulo {
  font-family: var(--font-title);
  font-size: 1.75rem;
  color: var(--color-primary);
  margin: 0;
}

.ajuda-sub {
  color: var(--color-text-soft);
  margin: var(--space-1) 0 0;
}

.ajuda-aviso {
  background: var(--color-accent-amber-light);
  color: var(--color-accent-amber-ink);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

/* ---------------- Pesquisa ---------------- */

.ajuda-pesquisa {
  margin-bottom: var(--space-4);
}

.ajuda-pesquisa__label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  margin-bottom: var(--space-1);
}

.ajuda-pesquisa__campo {
  display: flex;
  gap: var(--space-2);
}

.ajuda-pesquisa__campo input {
  flex: 1 1 auto;
  min-width: 0;                       /* sem isto o input não encolhe em 360px */
  padding: var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.ajuda-pesquisa__campo input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.ajuda-pesquisa__botao {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}

.ajuda-pesquisa__botao:hover {
  background: var(--color-primary-dark);
}

/* ---------------- Fichas de filtro ---------------- */

.ajuda-filtros {
  margin-bottom: var(--space-6);
}

.ajuda-filtros__label {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  margin: var(--space-3) 0 var(--space-2);
}

.ajuda-fichas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ajuda-ficha {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.ajuda-ficha:hover {
  border-color: var(--color-primary);
}

.ajuda-ficha--ativa {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* FR05.3 — a ficha a zero fica, desativada. Ver que um assunto existe e está
   vazio é informação; vê-lo desaparecer é confusão. */
.ajuda-ficha--vazia {
  opacity: 0.45;
  cursor: default;
}

.ajuda-ficha__num {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  opacity: 0.75;
}

.ajuda-limpar {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-primary);
}

/* ---------------- Categoria e tema ---------------- */

.ajuda-categoria {
  margin-bottom: var(--space-5);
  border-top: 2px solid var(--color-border);
}

/* FR13 — o cabeçalho é o <summary>: o título, a descrição (que fica visível
   com a categoria fechada) e a seta de estado. */
.ajuda-categoria__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
}

.ajuda-categoria__cabecalho::-webkit-details-marker {
  display: none;
}

.ajuda-categoria__cabecalho:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ajuda-categoria__texto {
  flex: 1 1 auto;
}

.ajuda-categoria__titulo {
  display: block;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.ajuda-categoria__sub {
  display: block;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  margin-top: var(--space-1);
}

.ajuda-categoria__num {
  flex: 0 0 auto;
  padding: 2px var(--space-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-soft);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

/* FR13.3 — para baixo quando há mais por ver, para cima quando está aberta.
   CSS puro sobre details[open]: o navegador já sabe em que estado está. */
.ajuda-categoria__cabecalho::after {
  content: "▾";
  flex: 0 0 auto;
  font-size: 1.1rem;
  color: var(--color-primary);
}

.ajuda-categoria[open] > .ajuda-categoria__cabecalho::after {
  content: "▴";
}

.ajuda-tema {
  font-family: var(--font-title);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin: var(--space-5) 0 var(--space-2);
}

.ajuda-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------------- Artigo ---------------- */

.ajuda-item {
  border-bottom: 1px solid var(--color-border);
}

.ajuda-artigo__pergunta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;                   /* esconde o triângulo nativo */
  font-weight: 600;
}

.ajuda-artigo__pergunta::-webkit-details-marker {
  display: none;
}

.ajuda-artigo__texto {
  flex: 1 1 auto;
}

.ajuda-artigo__pergunta::after {
  content: "＋";
  flex: 0 0 auto;
  color: var(--color-text-faint);
}

.ajuda-artigo[open] .ajuda-artigo__pergunta::after {
  content: "−";
}

.ajuda-artigo__pergunta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ajuda-artigo__corpo {
  padding: 0 0 var(--space-4);
  color: var(--color-text);
}

.ajuda-artigo__caminho {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-primary-light);
  border-radius: var(--radius);
  font-size: 0.92rem;
}

.ajuda-artigo__caminho p {
  display: inline;
  margin: 0;
}

.ajuda-artigo__caminho-label {
  font-weight: 700;
  margin-right: var(--space-1);
}

.ajuda-artigo__ligacao {
  margin: var(--space-3) 0 0;
}

.ajuda-artigo__permalink {
  color: var(--color-text-faint);
  text-decoration: none;
  font-weight: 700;
}

.ajuda-artigo__permalink:hover {
  color: var(--color-primary);
}

/* ---------------- Etiqueta de público ---------------- */

.ajuda-etiqueta {
  flex: 0 0 auto;
  padding: 2px var(--space-2);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  color: var(--color-text-soft);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.ajuda-etiqueta--pioneiro {
  color: var(--color-categoria-pioneiro-dark);
  background: var(--color-categoria-pioneiro-light);
  border-color: var(--color-categoria-pioneiro-light);
}

.ajuda-etiqueta--animador {
  color: var(--color-categoria-animador-dark);
  background: var(--color-categoria-animador-light);
  border-color: var(--color-categoria-animador-light);
}

/* ---------------- Vazios e saída ---------------- */

.ajuda-vazio {
  padding: var(--space-5) 0;
  color: var(--color-text-soft);
}

.ajuda-saida {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-soft);
  font-size: 0.92rem;
}

/* FR14.1 — quem chega aqui já está a meio de desistir; o passo seguinte tem
   de se ver. */
.ajuda-saida--pilula {
  text-align: center;
}

.ajuda-saida__pergunta {
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  font-weight: 600;
}

.ajuda-saida__nota {
  margin: var(--space-3) 0 0;
  font-size: 0.88rem;
}

.ajuda-pilula {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.ajuda-pilula:hover {
  background: var(--color-primary-dark);
}

.ajuda-pilula:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ---------------- Formulário da dúvida ---------------- */

.ajuda-wrapper--estreito {
  max-width: 620px;
}

.duvida-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.duvida-campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.duvida-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-soft);
}

.duvida-opcional {
  font-weight: 400;
  color: var(--color-text-faint);
}

/* A categoria não é campo: apresenta-se como valor, e o desenho tem de o
   dizer — nada de caixa com bordo, que convida a escrever. */
.duvida-derivado {
  margin: 0;
  padding: var(--space-2) 0;
  font-weight: 600;
  color: var(--color-text);
}

.duvida-form .form-input,
.duvida-form .form-select,
.duvida-form .form-textarea {
  width: 100%;
  padding: var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.duvida-form .form-textarea {
  resize: vertical;
}

.duvida-erro {
  margin: 0;
  color: var(--color-danger-dark);
  font-size: 0.88rem;
}

.duvida-acoes {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-2);
}

@media (max-width: 480px) {
  .duvida-acoes {
    flex-direction: column-reverse;
  }

  .duvida-acoes .btn {
    width: 100%;
    text-align: center;
  }
}

/* ---------------- Telemóvel ---------------- */

@media (max-width: 480px) {
  .ajuda-pesquisa__campo {
    flex-wrap: wrap;
  }

  .ajuda-pesquisa__botao {
    width: 100%;
  }

  /* Em ecrã estreito a etiqueta passa para baixo da pergunta, em vez de
     roubar largura ao texto. */
  .ajuda-artigo__pergunta {
    flex-wrap: wrap;
  }

  .ajuda-artigo__texto {
    flex: 1 1 100%;
    order: 2;
  }

  .ajuda-etiqueta {
    order: 1;
  }

  .ajuda-artigo__pergunta::after {
    order: 3;
  }
}