/**
 * RAVOLLI — DÚVIDAS (componente compartilhado) v1.2.0
 * Camada: Blocksy Child (apresentação). Classificação: CANÔNICO.
 *
 * O padrão de dúvidas da página Materiais, agora disponível em qualquer página:
 * eyebrow + título grande alinhados à esquerda, linhas com filete (details
 * nativo), "+" dourado, remissão ao fim. Extraído de ravolli-folds.css 1.0.0
 * (itens e `.ravolli-faq__more`) e de ravolli-materiais.css 1.2.0
 * (`.ravolli-materiais__faq`) sem mudar o visual do Materiais.
 *
 * Uso no conteúdo: grupo (wp:group, layout constrained) com a classe
 * `ravolli-faq`; dentro, `p.ravolli-eyebrow`, `h2`, os `wp:details` com a classe
 * `ravolli-faq__item` e, se houver, `p.ravolli-faq__more`.
 *
 * Retrocompatibilidade: o escopo também cobre `.ravolli-materiais__faq` e
 * `.ravolli-sobre__faq` (classes reais das páginas 578 e 580) até o conteúdo
 * ganhar a classe `ravolli-faq`. A Sobre mantém o respiro e a largura próprios
 * (ravolli-sobre.css): o bloco de layout abaixo não se aplica a ela.
 *
 * Os tokens são declarados aqui (`--rf-*`, os mesmos --wp--preset--* das
 * dobras), então o componente não depende de `--rm-*`, que só existem dentro
 * de `.ravolli-materiais` / `.ravolli-sobre`.
 *
 * Sem !important. Os títulos usam a variável --ravolli-title-section porque a
 * regra legada de style.css (`.entry-content h2 { font-size: ... !important }`)
 * lê essa variável: redefini-la no escopo é o caminho sem disputa, o mesmo das
 * páginas de dobras.
 *
 * 1.1.0 (01/10/2026): o "+"/"–" saiu; entrou a seta "V serifado" (token
 * `--ravolli-chevron`, abaixo), a mesma de `.ravolli-mito` (ravolli-materiais.css).
 *
 * 1.2.0 (01/10/2026): título menor (clamp 28/2.8vw/40px) e, nos arquivos de
 * Alianças/Noivado, seção em largura total com fundo alternado (`--alt`).
 *
 * Carregado por inc/ravolli-faq.php (conteúdo com `ravolli-faq` ou arquivos de
 * Alianças/Noivado); ravolli-folds declara este arquivo como dependência.
 */

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) {
	--rf-navy: var(--wp--preset--color--brand-primary);
	--rf-gold: var(--wp--preset--color--accent-gold);
	--rf-bg: var(--wp--preset--color--bg-base);
	--rf-line: var(--wp--preset--color--border-divider);
	--rf-text: var(--wp--preset--color--text-body);
	--rf-text-2: var(--wp--preset--color--text-secondary);
	/* Dourado como texto sobre fundo claro: o token puro falha contraste. */
	--rf-gold-text: color-mix(in srgb, var(--rf-gold) 60%, var(--rf-navy));
	--rf-display: var(--wp--preset--font-family--display, Lora, serif);
	--rf-body: var(--wp--preset--font-family--body, 'Source Serif 4', serif);

	--ravolli-title-section: clamp(28px, 2.8vw, 40px);
	--ravolli-title-line-height: 1.12;
}

/* ---------------------------------------------------------------------
 * Seta "V serifado" — desenho único do site para abrir/fechar (dúvidas e mitos).
 *
 * Só linha, sem preenchimento, aberta: duas hastes que se encontram na ponta
 * (à direita, ">") e dois pés serifados do lado aberto, como o Λ da logo RAVOLLI
 * girado. Abertura total de ~45° (hastes de (13,8) a (1.6,3.3) e (1.6,12.7); viewBox 14x16).
 * Haste de cima fina (0.5), a de baixo mais grossa (0.9), serifas de 0.4 x 3.2.
 * PROPORÇÕES APROXIMADAS: a logo não está no repositório como SVG; o desenho
 * segue a prévia aprovada pela Ana (01/10/2026).
 *
 * Usada como `mask` (a cor vem do `background-color` de quem aplica); o desenho
 * existe só aqui. Fechada aponta para a direita; aberta gira 90° e vira o V.
 * ------------------------------------------------------------------ */

:root {
	--ravolli-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M1.6 3.3L13 8' stroke-width='.5'/%3E%3Cpath d='M13 8L1.6 12.7' stroke-width='.9'/%3E%3Cpath d='M1.6 1.7v3.2M1.6 11.1v3.2' stroke-width='.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
 * Seção (grupo): largura de leitura de 820px, fundo da página.
 * Fora da Sobre, que tem o respiro próprio (ravolli-sobre.css).
 * ------------------------------------------------------------------ */

:is(.ravolli-faq, .ravolli-materiais__faq):not(.ravolli-sobre__faq) {
	padding-block: 64px;
	padding-inline: 24px;
	background: var(--rf-bg);
	color: var(--rf-text);
}

@media (min-width: 900px) {
	:is(.ravolli-faq, .ravolli-materiais__faq):not(.ravolli-sobre__faq) {
		padding-block: 104px;
	}
}

:is(.ravolli-faq, .ravolli-materiais__faq):not(.ravolli-sobre__faq).is-layout-constrained > * {
	max-width: 820px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------------
 * Cabeçalho: eyebrow + título
 * ------------------------------------------------------------------ */

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) h2.wp-block-heading {
	font-family: var(--rf-display);
	font-weight: 400;
	line-height: 1.12;
	color: var(--rf-navy);
	text-wrap: balance;
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) h2.wp-block-heading em {
	font-style: italic;
	color: var(--rf-gold-text);
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-eyebrow {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rf-gold-text);
}

/* ---------------------------------------------------------------------
 * Dúvidas: linhas com filete, sem cartão (details nativo).
 * ------------------------------------------------------------------ */

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__item {
	border-top: 1px solid var(--rf-line);
	margin: 0;
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__item:last-of-type {
	border-bottom: 1px solid var(--rf-line);
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__item > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: 44px;
	padding: 16px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--rf-display);
	font-size: 19px;
	font-weight: 400;
	color: var(--rf-navy);
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__item > summary::-webkit-details-marker {
	display: none;
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__item > summary::after {
	content: "";
	flex: 0 0 auto;
	align-self: center;
	width: 13px;
	height: 20px;
	background-color: var(--rf-gold-text);
	-webkit-mask: var(--ravolli-chevron) center / contain no-repeat;
	mask: var(--ravolli-chevron) center / contain no-repeat;
	transition: transform .3s ease;
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__item[open] > summary::after {
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__item > summary::after {
		transition: none;
	}
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__item > summary:focus-visible {
	outline: 2px solid var(--rf-gold);
	outline-offset: 2px;
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__item > :not(summary) {
	color: var(--rf-text-2);
	max-width: 60ch;
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__item > :not(summary):last-child {
	padding-bottom: 18px;
}

/* Remissão ao fim das dúvidas ("as respostas estão na página de…", link de WhatsApp). */
:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__more {
	margin-top: 22px;
	font-size: 15px;
	color: var(--rf-text-2);
}

:is(.ravolli-faq, .ravolli-materiais__faq, .ravolli-sobre__faq) .ravolli-faq__more a {
	color: var(--rf-gold-text);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--rf-gold);
}

/* ---------------------------------------------------------------------
 * Seção fora do conteúdo de página (arquivos de Alianças e Noivado).
 * ravolli_render_faq_pattern() embrulha o padrão em .ravolli-faq-section.
 * Aqui não há `.entry-content`: a regra legada de h2 (tamanho, espaçamento e
 * tracking, todos !important só dentro dele) não chega, então o título recebe
 * as mesmas medidas que ela dá no Materiais (margem de 1,5em em cima, .5em
 * embaixo, tracking -0,012em).
 * ------------------------------------------------------------------ */

.ravolli-faq-section {
	/* Largura total, mesma técnica de .ravolli-alliance-experience. */
	width: 100vw;
	max-width: 100vw;
	margin-block: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--wp--preset--color--bg-base);
}

.ravolli-faq-section--alt {
	background: var(--wp--preset--color--surface-alt);
}

.ravolli-faq-section .ravolli-faq {
	background: transparent;
}

.ravolli-faq-section .ravolli-faq h2.wp-block-heading {
	margin-block: 1.5em .5em;
	font-size: var(--ravolli-title-section);
	letter-spacing: -.012em;
}

.ravolli-faq-section .ravolli-faq > :first-child {
	margin-top: 0;
}