/**
 * assets/css/faq_publico.css
 * Central de Ajuda (público)
 * - Tema claro, tipografia ajustada (busca grande / conteúdo menor)
 * - Estilo do accordion de resultados
 * - Responsividade de imagens, tabelas e embeds
 */

:root{
  --bg: #f2f4f7;
  --card: #fff;
  --border: #e6e8ee;
  --text: #2b2f36;
  --muted: #6b7280;
  --primary: #3b6ec8;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);

  --search-size: 1.15rem;
  --content-size: clamp(.9rem, .9vw, .98rem);
  --h1: clamp(1.15rem, 1.2vw, 1.35rem);
  --h2: clamp(1.05rem, 1.1vw, 1.22rem);
  --h3: clamp(1rem, 1vw, 1.12rem);
  --lh: 1.7;
  --radius: 14px;
  --maxw: 1200px;
}

body{ background: var(--bg); color: var(--text); }

body.container{ max-width: var(--maxw); }

/* Placeholder */
.placeholder-area {
  padding: 64px 20px;
  text-align: center;
  color: var(--muted);
}
.placeholder-area i {
  font-size: 56px;
  color: #8b9bb8;
  opacity: .85;
}

/* Busca */
.input-destaque{
  border: 1.6px solid var(--border);
  border-radius: .9rem;
  background-color: var(--card);
  padding: 1rem 1.1rem;
  font-size: var(--search-size);
  box-shadow: var(--shadow);
  transition: border-color .2s, box-shadow .2s;
}
.input-destaque::placeholder{ color: var(--muted); opacity:.9; }
.input-destaque:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .18rem rgba(59,110,200,.18);
  background: var(--card);
}

/* Resultados */
#resultados .accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  margin-bottom: .9rem;
  overflow: hidden;
}

#resultados .accordion-button{
  background: #eef2f8;
  color: var(--text);
  padding: .75rem 1rem;
  gap: .5rem;
  font-size: .98rem;
}
#resultados .accordion-button:not(.collapsed){
  background: #e6eefc;
  box-shadow: inset 0 -1px 0 var(--border);
}
#resultados .accordion-button:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .18rem rgba(59,110,200,.18);
}
.accordion-button::after{ filter: grayscale(.4) opacity(.85); }

#resultados .accordion-body{
  padding: 1rem 1rem .85rem;
  font-size: var(--content-size);
  line-height: var(--lh);
  color: var(--text);
  overflow-wrap: anywhere;
  background: var(--card);
}

#resultados .accordion-body h1,
#resultados .accordion-body h2,
#resultados .accordion-body h3{
  color: var(--text);
  margin: .85rem 0 .4rem;
  letter-spacing:.2px;
  line-height: 1.35;
}
#resultados .accordion-body h1{ font-size: var(--h1); }
#resultados .accordion-body h2{ font-size: var(--h2); }
#resultados .accordion-body h3{ font-size: var(--h3); }

#resultados .accordion-body p{ margin:.5rem 0; }
#resultados .accordion-body ul,
#resultados .accordion-body ol{
  padding-left: 1.1rem; margin: .35rem 0 .6rem;
}
#resultados .accordion-body li{ margin:.22rem 0; }
#resultados .accordion-body .small,
#resultados .accordion-body .text-muted{ color: var(--muted)!important; }

#resultados .accordion-body a{
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px dashed rgba(59,110,200,.35);
}
#resultados .accordion-body a:hover{ text-decoration: underline; }

#resultados .accordion-body img{
  max-width:100%!important; height:auto!important; display:block;
  margin:.7rem auto; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.06);
  object-fit: contain;
}
#resultados .accordion-body iframe,
#resultados .accordion-body video{
  max-width:100%!important; width:100%!important; height:auto!important;
  aspect-ratio:16/9; border:1px solid var(--border); border-radius:10px; background:#000;
}

#resultados .accordion-body table{
  width:100%; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-collapse:collapse; border:1px solid var(--border); border-radius:10px;
}
#resultados .accordion-body th, #resultados .accordion-body td{
  padding:.5rem .65rem; border-bottom:1px solid var(--border); vertical-align:top;
}
#resultados .accordion-body thead th{ background:#f6f7f9; font-weight:600; }

#resultados .accordion-body pre, #resultados .accordion-body code{
  background:#f3f5f8; border:1px solid var(--border); border-radius:10px;
  padding:.55rem .7rem; white-space:pre-wrap; word-break:break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem;
}
#resultados .accordion-body pre{ overflow:auto; }

#resultados .accordion-body .d-flex.gap-2 .btn{
  border-radius:999px; padding:.34rem .8rem; font-size:.9rem;
}