/* ============================================================
   static-pages.css (rx-core) — páginas de conteúdo público
   (FAQ, Termos, Privacidade), montadas por RXStaticPage
   (js/rx-core/static-page.js) nos dois produtos.

   Só estrutura; cores e fontes pelas variáveis do tema de cada produto.
   Antes vivia só no static.css do ImóvelRX (Out 2026): o CommunityRX tinha
   as mesmas páginas, com as mesmas classes, mas nunca carregou este CSS —
   ficaram sem estilos desde que foram criadas.
   ============================================================ */

/* Largura igual à das outras páginas (dashboard, relatório…) — pedido do
   utilizador, Out 2026: a maior largura é a base (antes 720px). */
.static-page { max-width: var(--page-max-width); margin: 0 auto; padding: 1.5rem 1.5rem 5rem; } /* topo igual ao .rx-page */

.static-page h1:not(.rx-page-title) {
  font-family: var(--rx-font-display);
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--text);
  margin: 0 0 0.5rem;
}
.static-page .static-updated { font-size: 0.8125rem; color: var(--text-3); margin-bottom: 2.5rem; }
.static-page .static-subtitle { font-size: 0.9375rem; color: var(--text-3); margin-bottom: 2.5rem; }
/* Título centrado no cabeçalho (RXPageShell, Out 2026) — a linha logo por
   baixo centra também, como o .rx-page-subtitle nas outras páginas. */
.static-page .rx-page-header + .static-subtitle,
.static-page .rx-page-header + .static-updated { text-align: center; }

.static-page h2 {
  font-family: var(--rx-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text);
  margin: 2.25rem 0 0.75rem;
}
.static-page p { margin: 0 0 1rem; font-size: 0.9375rem; line-height: 1.7; color: var(--text-2); }
.static-page ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.static-page li { margin-bottom: 0.5rem; font-size: 0.9375rem; line-height: 1.7; color: var(--text-2); }
.static-page strong { color: var(--text); }
.static-page a:not(.rx-back) { color: var(--rx-accent-text); }
.static-page table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.875rem; }
.static-page th, .static-page td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--wire); }
.static-page th { color: var(--text); font-weight: 600; }

.static-highlight {
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}
.static-highlight p { margin: 0; }
.static-highlight p:not(:last-child) { margin-bottom: 0.75rem; }

/* FAQ — categorias em destaque âmbar (estilo "facet" já usado no resto do site) */
.static-page h2.faq-cat {
  font-size: 0.8125rem;
  color: var(--rx-text-3); /* rótulo, não acção: sem a cor de destaque */
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.static-page h2.faq-cat:first-of-type { margin-top: 0; }

.faq-item {
  border: 1px solid var(--wire);
  border-radius: 10px;
  margin-bottom: 0.625rem;
  background: var(--ink-2);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9375rem 1.125rem;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--rx-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.faq-q:hover { background: var(--ghost-2); }
.faq-icon { flex-shrink: 0; transition: transform 0.2s ease; color: var(--text-3); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a-inner { padding: 1.125rem; font-size: 0.9375rem; line-height: 1.7; color: var(--text-2); }
.faq-item.open .faq-a { max-height: 600px; }

/* ── "Como analisamos" — peças gráficas (Out 2026, os dois produtos) ──
   Cartões (fontes de dados, recomendação), escala com faixas de cor e
   barras de pesos. Cores de dados do contrato (--rx-good/warn/bad), nunca
   a cor de destaque; neutros para o que não é bom nem mau. */
.how-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}
.how-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.125rem;
  background: var(--rx-surface-1);
  border: 1px solid var(--rx-border);
  border-radius: 12px;
}
.how-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--rx-font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--rx-text-1);
}
.static-page .how-card p { margin: 0; font-size: 0.875rem; line-height: 1.6; }
.how-card--good { border-top: 3px solid var(--rx-good); }
.how-card--okay { border-top: 3px solid var(--rx-warn); }
.how-card--bad  { border-top: 3px solid var(--rx-bad); }
.how-dot { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--rx-text-3); }
.how-card--good .how-dot { background: var(--rx-good); }
.how-card--okay .how-dot { background: var(--rx-warn); }
.how-card--bad  .how-dot { background: var(--rx-bad); }

/* Escala: cada faixa ocupa a largura proporcional ao intervalo (--w). */
.how-scale { margin: 1rem 0 1.5rem; }
.how-scale-bar, .how-scale-labels { display: flex; gap: 3px; }
.how-scale-seg { flex: var(--w) 0 0; height: 0.625rem; border-radius: 999px; }
.how-scale-seg.is-bad  { background: var(--rx-bad); }
.how-scale-seg.is-okay { background: var(--rx-warn); }
.how-scale-seg.is-good { background: var(--rx-good); }
.how-scale-labels { margin-top: 0.5rem; }
.how-scale-label { flex: var(--w) 0 0; min-width: 0; display: flex; flex-direction: column; font-size: 0.8125rem; line-height: 1.4; color: var(--rx-text-2); }
.how-scale-label strong { font-weight: 650; color: var(--rx-text-1); font-variant-numeric: tabular-nums; }

/* Barras de pesos: todas na mesma escala (--v em % do maior). */
.static-page .how-bars { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; }
.static-page .how-bars li { margin: 0; }
.how-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.9375rem; }
.how-bar-name { font-weight: 600; color: var(--rx-text-1); }
.how-bar-val { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--rx-text-1); }
.how-bar-track { height: 0.5rem; margin: 0.375rem 0 0.25rem; background: var(--rx-surface-2); border-radius: 999px; overflow: hidden; }
.how-bar-fill { width: var(--v); height: 100%; border-radius: inherit; background: var(--rx-text-3); }
.how-bar-why { font-size: 0.875rem; line-height: 1.55; color: var(--rx-text-2); }
/* Variante em lista (texto longo): uma coluna, ícone à esquerda. */
.how-cards--list { grid-template-columns: 1fr; gap: 0.625rem; }
.how-cards--list .how-card { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0.25rem; align-items: start; }
.how-cards--list .how-card > .dim-icon--line { grid-row: span 2; }
/* Variante em 2 colunas (4 cartões curtos, ex. "Quem somos"); 1 no telemóvel. */
.how-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .how-cards--2 { grid-template-columns: 1fr; } }