/**
 * Sitewide accordion / FAQ — single source of truth
 * Google SERP–style: question left, round chevron right, expand below.
 *
 * Supported markup:
 *  1) Classic toggle:
 *     .faq / .resumo.faq / .ctx-faq
 *       .pergresp-wrapper.toggle-div
 *         .pergunta.toggle-button  (+ optional .g-acc-q / .g-acc-icon)
 *         .resposta
 *
 *  2) Native details (tool FAQs):
 *     .itool-faq / .calc-faq / .*-faq
 *       details > summary + body
 *
 * Does NOT restyle footer .linkbox toggles or .fonte-site.
 */

/* ---- Scope helpers ---- */
.faq,
.ctx-faq,
.resumo.faq,
.faq.resumo,
[class*="-faq"] {
  --acc-border: var(--dica-border, #e8eaed);
  --acc-ink: var(--dica-ink, #202124);
  --acc-body: var(--dica-body, #3c4043);
  --acc-surface: var(--dica-surface, #fff);
  --acc-soft: var(--dica-surface-soft, #f8f9fa);
  --acc-icon-border: #dadce0;
  --acc-icon-fill: #5f6368;
  --acc-icon-fill-open: var(--dica-action, #1a73e8);
}

html[data-theme="dark"] .faq,
html[data-theme="dark"] .ctx-faq,
html[data-theme="dark"] .resumo.faq,
html[data-theme="dark"] [class*="-faq"] {
  --acc-border: var(--dica-border, #3c4043);
  --acc-ink: var(--dica-ink, #e8eaed);
  --acc-body: var(--dica-body, #bdc1c6);
  --acc-surface: var(--dica-surface, #202124);
  --acc-soft: var(--dica-surface-soft, #2a2e35);
  --acc-icon-border: #5f6368;
  --acc-icon-fill: #9aa0a6;
  --acc-icon-fill-open: var(--dica-action, #8ab4f8);
}

/* Container */
.article .faq,
.article .ctx-faq,
.article .resumo.faq,
.article [class*="-faq"],
.faq,
.ctx-faq,
[class*="-faq"] {
  margin: 28px 0 18px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.article .faq > h2,
.article .faq > h3,
.article .ctx-faq > h2,
.article [class*="-faq"] > h2,
.faq > h2,
.ctx-faq > h2,
.g-acc-title {
  margin: 0 0 8px !important;
  padding: 0 0 12px !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  line-height: 1.3 !important;
  color: var(--acc-ink) !important;
  border: 0 !important;
  background: transparent !important;
}

/* Optional list wrapper */
.g-acc {
  display: block;
  border-top: 1px solid var(--acc-border);
}

/* =========================================================
   1) Classic .pergunta / .resposta (JS toggle-div)
   ========================================================= */

/* Only FAQ items — not footer .linkbox, not .fonte-site.
   Also match bare .article > .pergresp-wrapper (older posts without .faq wrap). */
.article .faq .pergresp-wrapper.toggle-div,
.article .ctx-faq .pergresp-wrapper.toggle-div,
.article .resumo.faq .pergresp-wrapper.toggle-div,
.article .post-content > .pergresp-wrapper.toggle-div:not(.fonte-site),
.faq .pergresp-wrapper.toggle-div:not(.fonte-site),
.ctx-faq .pergresp-wrapper.toggle-div {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--acc-border) !important;
}

/* First item border-top when no .g-acc wrapper */
.article .faq > .pergresp-wrapper.toggle-div:first-of-type,
.faq > .pergresp-wrapper.toggle-div:first-of-type {
  border-top: 1px solid var(--acc-border) !important;
}

/* Trigger row: flex so chevron sits on the right (same line as question) */
.article .faq .toggle-div > .pergunta,
.article .ctx-faq .toggle-div > .pergunta,
.article .post-content > .pergresp-wrapper.toggle-div > .pergunta,
.faq .toggle-div > .pergunta,
.ctx-faq .toggle-div > .pergunta,
.article .faq .pergunta.toggle-button,
.article .ctx-faq .pergunta.toggle-button,
.faq .pergunta.toggle-button,
.ctx-faq .pergunta.toggle-button,
.g-acc-trigger {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 16px 4px 16px 0 !important;
  color: var(--acc-ink) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  cursor: pointer;
  user-select: none;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
  position: relative;
}

.g-acc-q {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}

/* Round chevron via ::after — only inside accordion toggles (not bare .pergunta) */
.article .faq .toggle-div > .pergunta::after,
.article .ctx-faq .toggle-div > .pergunta::after,
.article .post-content > .pergresp-wrapper.toggle-div > .pergunta::after,
.faq .toggle-div > .pergunta::after,
.ctx-faq .toggle-div > .pergunta::after,
.article .faq .pergunta.toggle-button::after,
.faq .pergunta.toggle-button::after,
.ctx-faq .pergunta.toggle-button::after,
.g-acc-trigger:not(:has(.g-acc-icon))::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid var(--acc-icon-border) !important;
  background-color: var(--acc-surface) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  transform: none !important;
  transition: transform 0.2s ease, background-color 0.15s ease, border-color 0.15s ease !important;
  opacity: 1 !important;
  right: auto !important;
  top: auto !important;
  left: auto !important;
  float: none !important;
}

/* When explicit .g-acc-icon is present, hide ::after */
.article .faq .pergunta:has(.g-acc-icon)::after,
.faq .pergunta:has(.g-acc-icon)::after,
.ctx-faq .pergunta:has(.g-acc-icon)::after,
.g-acc-trigger:has(.g-acc-icon)::after {
  display: none !important;
  content: none !important;
}

.g-acc-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--acc-icon-border);
  background-color: var(--acc-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  transition: transform 0.2s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.article .faq .pergunta.toggle-button:hover::after,
.faq .pergunta.toggle-button:hover::after,
.g-acc-trigger:hover .g-acc-icon {
  background-color: var(--acc-soft) !important;
}

.article .faq .toggle-div.toggle-on > .pergunta::after,
.article .ctx-faq .toggle-div.toggle-on > .pergunta::after,
.faq .toggle-div.toggle-on > .pergunta::after,
.ctx-faq .toggle-div.toggle-on > .pergunta::after,
.article .faq .toggle-on > .pergunta.toggle-button::after,
.faq .toggle-on > .pergunta.toggle-button::after,
.toggle-on > .g-acc-trigger .g-acc-icon,
.toggle-on > .pergunta .g-acc-icon {
  transform: rotate(180deg) !important;
  background-color: var(--dica-action-soft, rgba(26, 115, 232, 0.08)) !important;
  border-color: var(--dica-action-border, rgba(26, 115, 232, 0.35)) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a73e8'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>") !important;
}

html[data-theme="dark"] .article .faq .toggle-on > .pergunta::after,
html[data-theme="dark"] .faq .toggle-on > .pergunta::after,
html[data-theme="dark"] .toggle-on > .g-acc-trigger .g-acc-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238ab4f8'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>") !important;
}

/* Answer panel — only collapse when inside a toggle-div (real accordion) */
.article .faq .toggle-div > .resposta,
.article .ctx-faq .toggle-div > .resposta,
.article .post-content > .pergresp-wrapper.toggle-div > .resposta,
.faq .toggle-div > .resposta,
.ctx-faq .toggle-div > .resposta,
.toggle-div > .g-acc-panel {
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  transition: max-height 0.35s ease !important;
  background: transparent !important;
}

.article .faq .toggle-div.toggle-on > .resposta,
.article .ctx-faq .toggle-div.toggle-on > .resposta,
.article .post-content > .pergresp-wrapper.toggle-div.toggle-on > .resposta,
.faq .toggle-div.toggle-on > .resposta,
.ctx-faq .toggle-div.toggle-on > .resposta,
.toggle-div.toggle-on > .g-acc-panel {
  max-height: 80vh !important;
  padding: 0 44px 18px 0 !important;
  transition: max-height 0.45s ease !important;
}

.article .faq .toggle-div > .resposta p,
.faq .toggle-div > .resposta p,
.ctx-faq .toggle-div > .resposta p,
.g-acc-panel p {
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: var(--acc-body) !important;
  text-align: left !important;
}

.article .faq .toggle-div > .resposta p:last-child,
.faq .toggle-div > .resposta p:last-child {
  margin-bottom: 0 !important;
}

.article .faq .toggle-div > .resposta a,
.faq .toggle-div > .resposta a {
  color: var(--dica-action, #1a73e8);
}

/* =========================================================
   2) Native <details>/<summary> (tool FAQs)
   ========================================================= */

.article [class*="-faq"] details,
.article .faq details,
[class*="-faq"] details,
.faq details,
.itool-faq details,
.calc-faq details,
.pct-faq details {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--acc-border) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.article [class*="-faq"] details:first-of-type,
[class*="-faq"] details:first-of-type,
.itool-faq details:first-of-type {
  border-top: 1px solid var(--acc-border) !important;
}

.article [class*="-faq"] summary,
.article .faq details > summary,
[class*="-faq"] summary,
.faq details > summary,
.itool-faq summary,
.calc-faq summary,
.pct-faq summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none !important;
  cursor: pointer;
  user-select: none;
  margin: 0 !important;
  padding: 16px 4px 16px 0 !important;
  color: var(--acc-ink) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  background: transparent !important;
  border: 0 !important;
}

.article [class*="-faq"] summary::-webkit-details-marker,
[class*="-faq"] summary::-webkit-details-marker,
.faq details summary::-webkit-details-marker {
  display: none !important;
}

.article [class*="-faq"] summary::marker,
[class*="-faq"] summary::marker {
  content: "" !important;
  display: none !important;
}

.article [class*="-faq"] summary::after,
[class*="-faq"] summary::after,
.faq details > summary::after,
.itool-faq summary::after,
.calc-faq summary::after,
.pct-faq summary::after {
  content: "" !important;
  display: block !important;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--acc-icon-border);
  background-color: var(--acc-surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  transition: transform 0.2s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.article [class*="-faq"] details[open] > summary::after,
[class*="-faq"] details[open] > summary::after,
.faq details[open] > summary::after {
  transform: rotate(180deg);
  background-color: var(--dica-action-soft, rgba(26, 115, 232, 0.08));
  border-color: var(--dica-action-border, rgba(26, 115, 232, 0.35));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a73e8'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>");
}

html[data-theme="dark"] .article [class*="-faq"] details[open] > summary::after,
html[data-theme="dark"] [class*="-faq"] details[open] > summary::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238ab4f8'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>");
}

.article [class*="-faq"] details > :not(summary),
[class*="-faq"] details > :not(summary),
.faq details > :not(summary) {
  margin: 0 !important;
  padding: 0 44px 16px 0 !important;
  color: var(--acc-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

.article [class*="-faq"] details p,
[class*="-faq"] details p,
.faq details p {
  margin: 0 0 10px !important;
  color: var(--acc-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

.article [class*="-faq"] details p:last-child,
[class*="-faq"] details p:last-child {
  margin-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 600px) {
  .article .faq .pergunta.toggle-button,
  .faq .pergunta.toggle-button,
  .article [class*="-faq"] summary,
  [class*="-faq"] summary {
    padding: 14px 2px 14px 0 !important;
    font-size: 0.98rem !important;
    gap: 12px;
  }

  .article .faq .pergunta::after,
  .faq .pergunta::after,
  .g-acc-icon,
  .article [class*="-faq"] summary::after,
  [class*="-faq"] summary::after {
    width: 32px !important;
    height: 32px !important;
    background-size: 18px 18px !important;
  }

  .article .faq .toggle-on > .resposta,
  .faq .toggle-on > .resposta,
  .article [class*="-faq"] details > :not(summary) {
    padding-right: 36px !important;
  }
}