/**
 * EZbrew — acordeão de perguntas
 * =============================================================================
 * Folha compartilhada: a central de suporte e a página de produtos fazem a
 * mesma pergunta ao visitante, e antes disso cada uma teria a sua cópia do
 * acordeão.
 *
 * Os tokens ficam em `.ez-faq`, e NÃO no embrulho do template. É essa escolha
 * que deixa o bloco entrar em qualquer página: `suporte.css` e `produtos.css`
 * escopam tudo em `.ez-pagina--suporte` / `--produtos`, e uma regra escopada
 * assim não valeria na outra.
 */

.ez-faq {
	--faq-azul:  #1A2B3B;
	--faq-cobre: #CA7441;
	--faq-cobre-texto: #A65628;
	--faq-texto: #55616F;
	--faq-borda: #E3E1DA;

	padding-block: clamp(34px, 5vw, 62px);
	font-family: "Exo 2", sans-serif;
	color: var(--faq-texto);
}

.ez-faq *,
.ez-faq *::before,
.ez-faq *::after {
	box-sizing: border-box;
}

.ez-faq :where(p, h2, ul, ol, li) {
	margin: 0;
}

.ez-faq__wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 20px;
}

.ez-faq__titulo {
	font-family: "Space Grotesk", sans-serif;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 600;
	line-height: 1.22;
	color: var(--faq-azul);
	text-align: center;
}

.ez-faq__lead {
	max-width: 780px;
	margin: 12px auto 0;
	font-size: 15px;
	line-height: 1.65;
	text-align: center;
}

.ez-faq__lista {
	max-width: 900px;
	margin: clamp(24px, 3vw, 34px) auto 0;
}

.ez-faq__item {
	border-bottom: 1px solid var(--faq-borda);
}

.ez-faq__item > summary {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--faq-azul);
	cursor: pointer;
	list-style: none;
}

/* O triângulo padrão do Safari aparece mesmo com list-style:none. */
.ez-faq__item > summary::-webkit-details-marker {
	display: none;
}

.ez-faq__item > summary::before {
	content: "+";
	flex: none;
	width: 16px;
	font-size: 17px;
	line-height: 1.35;
	color: var(--faq-cobre-texto);
}

.ez-faq__item[open] > summary::before {
	content: "–";
}

.ez-faq__corpo {
	padding: 0 4px 22px 32px;
	font-size: 14px;
	line-height: 1.7;

	/* Uma resposta do suporte usa a URL inteira do YouTube como texto do
	   link — 78 caracteres sem espaço, que estouram a tela do celular. O
	   texto é do cliente e vai continuar vindo assim; quem cede é o layout. */
	overflow-wrap: anywhere;
}

.ez-faq__corpo :where(p, ul, ol) + :where(p, ul, ol) {
	margin-top: 10px;
}

.ez-faq__corpo ul,
.ez-faq__corpo ol {
	padding-left: 20px;
	list-style: revert;
}

.ez-faq__corpo a {
	color: var(--faq-cobre-texto);
}