/*
 * Domande: righe separate da un filetto, il segno che si apre a destra.
 * Il prototipo non ha questa fascia: le misure vengono dai componenti condivisi
 * del tema, non da una grafica nuova.
 */

.cn-faq {
	max-width: 52rem;
	border-top: var(--cn-filetto) solid var(--cn-bordo);
}

.cn-faq__voce {
	border-bottom: var(--cn-filetto) solid var(--cn-bordo);
}

.cn-faq__domanda {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.3rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--cn-font-display);
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
	line-height: 1.3;
	transition: color var(--cn-transizione);
}

/* Il triangolino di serie sta a sinistra e non si sposta: via quello, il segno
   lo disegniamo noi in fondo alla riga. */
.cn-faq__domanda::-webkit-details-marker {
	display: none;
}

.cn-faq__domanda::after {
	content: '+';
	flex: 0 0 auto;
	font-family: var(--cn-font-testo);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--cn-rovere-miele);
	transition: transform var(--cn-transizione);
}

.cn-faq__voce[open] .cn-faq__domanda::after {
	content: '-';
}

.cn-faq__domanda:hover {
	color: var(--cn-accento);
}

.cn-faq__risposta {
	padding-bottom: 1.4rem;
	color: var(--cn-inchiostro-tenue);
	max-width: 62ch;
}

.cn-faq__risposta p {
	margin: 0;
}