/**
 * Widget "Perguntas Frequentes" — assets/css/sections/pagina-faq.css
 *
 * Acordeão acessível para páginas internas. Cores do widget (fundo, título,
 * itens) são aplicadas pelo próprio Elementor via `selectors` nos controles
 * COLOR do painel (ver widgets/pagina-faq.php) — este arquivo só define
 * layout, tipografia de apoio e os estados visuais do acordeão.
 *
 * Mobile-first: classe base = mobile, `min-width` para telas maiores.
 * Zero hex literal — só var(--fjpn-*). Zero !important.
 */

.fjpn-pagina-faq {
  padding-block: var(--fjpn-space-section-py-md);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.fjpn-pagina-faq__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--fjpn-space-section-py-sm);
}

.fjpn-pagina-faq__titulo {
  margin-block: 0;
}

.fjpn-pagina-faq__paragrafo {
  margin-block: var(--fjpn-gap-medium) 0;
}

/* ==========================================================
 * Lista de itens
 * ========================================================== */

.fjpn-pagina-faq__lista {
  display: flex;
  flex-direction: column;
  gap: var(--fjpn-gap-medium);
  max-width: 48rem;
  margin-inline: auto;
}

.fjpn-pagina-faq__item {
  border-bottom: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
  padding-bottom: var(--fjpn-gap-medium);
}

.fjpn-pagina-faq__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fjpn-pagina-faq__pergunta-wrap {
  margin: 0;
  font-weight: normal;
}

/* Botão de disclosure — alvo de toque mínimo 44px, foco visível. */
.fjpn-pagina-faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fjpn-gap-medium);
  width: 100%;
  min-height: 44px;
  padding: var(--fjpn-gap-medium);
  border: none;
  border-radius: var(--fjpn-radius-xl);
  background-color: var(--fjpn-bg-soft);
  cursor: pointer;
  text-align: left;
  transition: background var(--fjpn-duration-background) var(--fjpn-ease-simple);
}

.fjpn-pagina-faq__pergunta:hover {
  background-color: var(--fjpn-blue-light);
}

.fjpn-pagina-faq__pergunta:focus-visible {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-focus);
  outline-offset: 2px;
}

.fjpn-pagina-faq__pergunta-texto {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body);
  font-weight: var(--fjpn-weight-semibold);
  line-height: var(--fjpn-leading-snug);
  color: var(--fjpn-text-primary);
}

/* Ícone +/- construído com pseudo-elementos (sem dependência de ícone
   externo) — dois traços que formam "+" fechado e giram para "×" aberto. */
.fjpn-pagina-faq__icone {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--fjpn-orange-cta);
}

.fjpn-pagina-faq__icone::before,
.fjpn-pagina-faq__icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform var(--fjpn-duration-base) var(--fjpn-ease-default);
}

.fjpn-pagina-faq__icone::before {
  width: 100%;
  height: 2px;
  transform: translate(-50%, -50%);
}

.fjpn-pagina-faq__icone::after {
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%);
}

.fjpn-pagina-faq__pergunta[aria-expanded="true"] .fjpn-pagina-faq__icone::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}

/* ==========================================================
 * Painel de resposta
 * ========================================================== */

.fjpn-pagina-faq__painel {
  padding: var(--fjpn-gap-medium);
}

.fjpn-pagina-faq__resposta {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-text-muted);
}

.fjpn-pagina-faq__resposta > :first-child {
  margin-top: 0;
}

.fjpn-pagina-faq__resposta > :last-child {
  margin-bottom: 0;
}

/* ==========================================================
 * Sangria de seção — largura total dentro do Elementor.
 * Mesmo padrão da seção 5 de base.css (arquivo somente-leitura), replicado
 * aqui porque este widget novo não está na lista fixa daquele arquivo.
 * ========================================================== */

.elementor-widget-fjpn-pagina-faq > .elementor-widget-container {
  width: 100%;
  margin: 0;
  padding: 0;
}