/* ════════════════════════════════════════════════════════════════════════
   DentGrow — Perguntas frequentes (acordeão <details>)
   Carregado em todas as páginas por mu-plugins/dentgrow-faq.php.

   Onde há acordeões (06/11/2026):
     .dgp-faq → páginas de serviço (Lisboa, Porto, Websites, Redes sociais).
                O HTML e um CSS antigo vivem no conteúdo Divi de cada página
                (<style> inline); estas regras ganham por especificidade
                (prefixo `body`), sem mexer no conteúdo.
     .dgb-faq → landing /chatbot/ (mu-plugins/dentgrow-chatbot-landing/)
     .dgc-faq → landing /crm/     (mu-plugins/dentgrow-crm-landing/)
   A resposta é um <p> nas páginas de serviço e um <div class="a"> nos
   landings: os selectores usam `> :not(summary)` para cobrir os dois.

   Manual de normas: Inter; corpo 16px / 1.7; DentBlue #1558D6 para o ícone
   e o hover; SkyBlue #EBF2FF para o fundo do ícone. Texto da resposta em
   #4A5568 (AA sobre branco).
   ════════════════════════════════════════════════════════════════════════ */

body .dgp-faq,
body .dgb-faq-list,
body .dgc-faq-list {
	max-width: 780px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
body .dgp-faq { margin-left: auto; margin-right: auto; }

/* ── Cartão ───────────────────────────────────────────────────────────── */
body .dgp-faq details,
body .dgb-faq details,
body .dgc-faq details {
	margin: 0;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
	interpolate-size: allow-keywords; /* animação da altura (Chromium 129+) */
}
body .dgp-faq details:hover,
body .dgb-faq details:hover,
body .dgc-faq details:hover { border-color: #C7D4F0; }
body .dgp-faq details[open],
body .dgb-faq details[open],
body .dgc-faq details[open] {
	border-color: #BFD3F7;
	box-shadow: 0 12px 32px rgba(10, 22, 40, .08);
}

/* ── Pergunta ─────────────────────────────────────────────────────────── */
body .dgp-faq summary,
body .dgb-faq summary,
body .dgc-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 44px;
	padding: 22px 28px;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	color: #0A1628;
	transition: color .15s ease;
}
body .dgp-faq summary::-webkit-details-marker,
body .dgb-faq summary::-webkit-details-marker,
body .dgc-faq summary::-webkit-details-marker { display: none; }
body .dgp-faq summary:hover,
body .dgb-faq summary:hover,
body .dgc-faq summary:hover,
body .dgp-faq details[open] > summary,
body .dgb-faq details[open] > summary,
body .dgc-faq details[open] > summary { color: #1558D6; }
body .dgp-faq summary:focus-visible,
body .dgb-faq summary:focus-visible,
body .dgc-faq summary:focus-visible { outline: 3px solid #00C896; outline-offset: -3px; border-radius: 16px; }

/* Ícone: «+» num círculo SkyBlue que roda 45° para «×» quando abre. */
body .dgp-faq summary::after,
body .dgb-faq summary::after,
body .dgc-faq summary::after,
body .dgp-faq details[open] summary::after,
body .dgb-faq details[open] summary::after,
body .dgc-faq details[open] summary::after {
	content: "+";
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #EBF2FF;
	color: #1558D6;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	transition: transform .25s ease, background .2s ease, color .2s ease;
}
body .dgp-faq details[open] summary::after,
body .dgb-faq details[open] summary::after,
body .dgc-faq details[open] summary::after {
	transform: rotate(45deg);
	background: #1558D6;
	color: #FFFFFF;
}

/* ── Resposta ─────────────────────────────────────────────────────────── */
/* `.a` explícito: os CSS dos landings usam `.dgb-faq .a` / `.dgc-faq .a`
   (0,2,0), que venceria `> :not(summary)` (0,1,3).
   padding-bottom com !important: o CSS inline do Divi tem
   `p:not(.has-background):last-of-type { padding-bottom: 0 }` (0,2,1), que
   zerava o espaço por baixo da resposta — medido a 06/11/2026: 0px. */
body .dgp-faq details > :not(summary),
body .dgb-faq details > :not(summary),
body .dgc-faq details > :not(summary),
body .dgb-faq details > .a,
body .dgc-faq details > .a {
	margin: 0 28px;
	padding: 20px 0 26px !important;
	border-top: 1px solid #F1F5F9;
	max-width: none;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: #4A5568;
}

/* Abertura animada onde o browser suporta ::details-content (Chromium 131+);
   nos outros abre de imediato, sem efeitos laterais. */
body .dgp-faq details::details-content,
body .dgb-faq details::details-content,
body .dgc-faq details::details-content {
	height: 0;
	overflow: clip;
	transition: height .3s ease, content-visibility .3s allow-discrete;
}
body .dgp-faq details[open]::details-content,
body .dgb-faq details[open]::details-content,
body .dgc-faq details[open]::details-content { height: auto; }

/* ── Telemóvel ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	body .dgp-faq summary,
	body .dgb-faq summary,
	body .dgc-faq summary { padding: 18px 20px; font-size: 16px; }
	body .dgp-faq details > :not(summary),
	body .dgb-faq details > :not(summary),
	body .dgc-faq details > :not(summary),
	body .dgb-faq details > .a,
	body .dgc-faq details > .a { margin: 0 20px; padding: 16px 0 22px !important; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	body .dgp-faq details::details-content,
	body .dgb-faq details::details-content,
	body .dgc-faq details::details-content { transition: none; }
	body .dgp-faq summary::after,
	body .dgb-faq summary::after,
	body .dgc-faq summary::after { transition: none; }
}