/* ==========================================================================
   SP Labor · pages/faq.css — enfileirado SÓ em is_page('perguntas-frequentes')
   (dep: splabor-base). Fiel à página /perguntas-frequentes/ original (page 8707).
   Referência: referencia/spec-faq.md + qa/s1-faq-d.png / s1-faq-m.png
   Prefixo próprio "faqp-" (a classe .faq da home tem visual DIFERENTE e vive
   em home.css — não colidir).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Padrões de seção compartilhados — DUPLICADOS de home.css com valores
   idênticos, porque home.css só carrega na front-page. Se o integrador
   concatenar tudo num arquivo único, a duplicata é inócua (valores iguais).
   -------------------------------------------------------------------------- */
.sec { padding: 30px 0; }
.sec--soft { background-color: var(--c-bg-soft); }

.sec-head { text-align: center; margin-bottom: 30px; }
.sec-head .eyebrow { margin-bottom: 8px; }
.sec-head h2 { margin: 0 0 10px; font-size: var(--fs-section); font-weight: 600; }

.sec-cta { text-align: center; margin-top: 30px; }

.btn-lg { padding: 15px 30px; }
.btn-grow { transition: background-color .3s, color .3s, transform .3s; }
.btn-grow:hover,
.btn-grow:focus { transform: scale(1.1); }

/* Eyebrow com linha divisora à esquerda (padrão .about__eyebrow da home) */
.faqp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.faqp-eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--c-primary);
}

/* --------------------------------------------------------------------------
   1 · Seção FAQ (bg soft, cabeçalho à esquerda + accordion 11 itens)
   -------------------------------------------------------------------------- */
.faqp-sec { padding: 40px 0 70px; }

.faqp-head { margin-bottom: 35px; }
.faqp-head h1 {
  margin: 10px 0;
  font-size: var(--fs-section); /* 30px — NÃO o h1 40px do hero */
  font-weight: 600;
  color: var(--c-text);
}
.faqp-head .section-sub { margin: 0; }

/* Accordion nativo <details>/<summary> — zero JS, itens independentes */
.faqp-list {
  display: grid;
  gap: 8px; /* gap medido no original (não os 20px default do plugin) */
}

.faqp-item {
  background-color: var(--c-white);
  overflow: hidden; /* quadrado "+" colado nas bordas do card */
}

.faqp-item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 14px 92px 14px 28px; /* 92 = 64px do quadrado "+" + respiro */
  cursor: pointer;
  list-style: none;
}
.faqp-item summary::-webkit-details-marker { display: none; }
.faqp-item summary:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

.faqp-item summary h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-text);
  text-align: left;
}

/* Quadrado azul com "+" ocupando a altura total do card, colado à direita
   (no original vinha do CSS de página perdido — reproduzido via pseudo) */
.faqp-item summary::after {
  content: "+";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-primary);
  color: var(--c-white);
  font-size: 22px;
  font-weight: 300; /* traço fino */
  line-height: 1;
}
.faqp-item[open] summary::after { content: "\2212"; }

/* Painel da resposta — contínuo ao card (padding 30px, default do plugin) */
.faqp-body {
  padding: 30px;
  font-size: var(--fs-body);
  color: var(--c-text);
}
.faqp-body > :first-child { margin-top: 0; }
.faqp-body > :last-child { margin-bottom: 0; }
.faqp-body a {
  color: var(--c-secondary);
  text-decoration: underline;
}
.faqp-body a:hover { color: var(--c-primary); }
.faqp-body h3,
.faqp-body h4 { color: inherit; }
.faqp-body ul,
.faqp-body ol {
  padding-left: 20px;
  margin: 0 0 .9rem;
}
.faqp-body ul { list-style: disc; }
.faqp-body li p { margin: 0 0 .5rem; }

/* --------------------------------------------------------------------------
   2 · Quem Somos (bg BRANCO — na home é soft; markup próprio faqp-about__*)
   -------------------------------------------------------------------------- */
.faqp-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.faqp-about__media > img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Botão WhatsApp sobreposto à cartela branca do PNG (sem fundo próprio),
   alinhado à direita da coluna; grow no hover */
.faqp-about__phone {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: -130px 64px 0 0;
  color: var(--c-primary);
  fill: var(--c-primary);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  transition: transform .3s;
}
.faqp-about__phone:hover,
.faqp-about__phone:focus {
  color: var(--c-primary);
  transform: scale(1.1);
}
.faqp-about__phone svg {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.faqp-about__title {
  margin: 12px 0 16px;
  font-size: 27px;
  font-weight: 600;
  line-height: 31px;
  color: var(--c-text);
}
.faqp-about__text { line-height: 1.8; }
.faqp-about__lead {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-muted);
}
.faqp-about__btn {
  width: 302px;
  max-width: 100%;
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   3 · Instagram (bg soft, tudo centralizado; grid é do plugin Smash Balloon)
   -------------------------------------------------------------------------- */
.faqp-ig .sec-head .section-sub { margin: 0; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .faqp-sec { padding: 30px 0 50px; }

  /* NÃO reproduzir o overflow horizontal do original (bug do Elementor):
     card 100% do container, pergunta quebra linha, "+" visível à direita */
  .faqp-item summary {
    min-height: 60px;
    padding: 12px 72px 12px 16px;
  }
  .faqp-item summary::after { width: 52px; }
  .faqp-item summary h3 { font-size: 15px; }
  .faqp-body { padding: 20px 16px 24px; }

  .faqp-about__grid { grid-template-columns: 1fr; gap: 20px; }
  .faqp-about__phone {
    margin: 15px 0 0;
    justify-content: center;
    font-size: 20px;
  }
}