/**
 * Índice de navegação (TOC) + Box de veredito + FAQ accordion.
 * Usa as variáveis REAIS do tema (base.css) -- --primary é o verde da marca.
 */

/* ---------------- Box de veredito ---------------- */
/* Fica logo abaixo do índice — nota, para quem é ideal, ressalva principal,
   garantia, e CTA de afiliado, tudo num resumo escaneável acima da dobra. */
.review-verdict {
	margin: 0 0 2rem;
	padding: 1.5rem;
	border: 1px solid hsl(var(--border));
	border-radius: 12px;
	background: hsl(var(--card));
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.review-verdict__rating .rating-stars span {
	font-size: 1.125rem;
}

.review-verdict__facts {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: .85rem;
}

@media (min-width: 640px) {
	.review-verdict__facts { grid-template-columns: repeat(3, 1fr); }
}

.review-verdict__fact dt {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: hsl(var(--muted-foreground));
	margin-bottom: .2rem;
}

.review-verdict__fact dd {
	margin: 0;
	font-weight: 600;
	color: hsl(var(--foreground));
	line-height: 1.4;
}

.review-verdict__cta {
	align-self: flex-start;
}

@media (min-width: 640px) {
	.review-verdict__cta { align-self: center; width: 100%; justify-content: center; }
}

/* ---------------- Índice ---------------- */
.review-toc {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid hsl(var(--border));
	border-radius: 12px;
	background: hsl(var(--secondary));
}

.review-toc__title {
	margin: 0 0 .75rem;
	font-family: "Sora", sans-serif;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
}

.review-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.review-toc__list a {
	display: inline-block;
	color: hsl(var(--foreground));
	text-decoration: none;
	font-weight: 500;
	line-height: 1.4;
	border-left: 2px solid transparent;
	padding-left: .75rem;
	margin-left: -.75rem;
	transition: color .15s ease, border-color .15s ease;
}

.review-toc__list a:hover {
	color: hsl(var(--primary));
}

/* Seção atual em destaque (aplicado pelo JS ao rolar a página) */
.review-toc__list a.is-active {
	color: hsl(var(--primary));
	border-left-color: hsl(var(--primary));
	font-weight: 600;
}

/* Compensa o scroll para o heading não colar no topo (header fixo) */
.review-content .review-h3 {
	scroll-margin-top: 90px;
}

/* ---------------- FAQ accordion ---------------- */
.review-faq {
	margin: 1rem 0 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.review-faq__item {
	border: 1px solid hsl(var(--border));
	border-radius: 10px;
	background: hsl(var(--secondary));
	overflow: hidden;
}

.review-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 1rem 1.25rem;
	font-family: "Sora", sans-serif;
	font-weight: 600;
	color: hsl(var(--foreground));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	transition: background .15s ease, color .15s ease;
}

.review-faq__q:hover {
	color: hsl(var(--primary));
	background: hsl(var(--secondary) / 0.6);
}

/* Remove o triângulo nativo e usa o nosso */
.review-faq__q::-webkit-details-marker { display: none; }
.review-faq__q::after {
	content: "+";
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	color: hsl(var(--primary));
	transition: transform .2s ease;
	flex-shrink: 0;
}
.review-faq__item[open] .review-faq__q::after {
	transform: rotate(45deg);
}

.review-faq__a {
	padding: 0 1.25rem 1.15rem;
	color: hsl(var(--foreground) / 0.85);
	line-height: 1.65;
}
.review-faq__a p { margin: 0; }

/* Em telas largas, o índice pode ficar mais compacto */
@media (min-width: 900px) {
	.review-toc__list {
		gap: .3rem;
	}
}