/**
 * Stili per il blocco FAQ generato da faq-generator-ai.
 *
 * Il plugin stampa il proprio CSS in un <style> inline nel body, tarato sul
 * tema di deangelismichele.it: font serif (Newsreader) e palette chiara
 * (#0A0A0A, #E0DDD8, #888). Su dottorcell.it quelle variabili non esistono,
 * quindi valgono i fallback e le FAQ risultavano in serif su un sito
 * interamente sans-serif.
 *
 * Il foglio si muove su due livelli:
 *
 * 1. Le variabili che il plugin CONSUMA (--font-heading, --text, --muted,
 *    --border) vengono definite qui sul contenitore. Il plugin non le
 *    dichiara mai, quindi non c'è conflitto di cascata: le proprietà
 *    personalizzate ereditano e basta definirle a monte.
 *
 * 2. Ciò che il plugin scrive come valore fisso (dimensioni, pesi, colore
 *    del segno +/−) va riscritto. Lì serve una specificità superiore,
 *    perché il <style> inline sta più in basso nel documento: da qui il
 *    prefisso `.breakdance`, la stessa scelta fatta in contenuti.css.
 *
 * La palette è quella di contenuti.css: le FAQ chiudono la pagina subito
 * sotto il contenuto e devono leggersi come parte dello stesso blocco.
 */

/* ---------------------------------------------------------------
 * 1. Mappatura sui token del tema
 * ------------------------------------------------------------- */

.faqgen-section {
	--font-heading: var( --bde-heading-font-family, "Palanquin", sans-serif );
	--text: var( --mda-titolo, #1a1f2b );
	--muted: var( --mda-testo, #333 );
	--border: var( --mda-bordo, #e6e6e6 );
}

/* ---------------------------------------------------------------
 * 2. Titolo della sezione
 *
 * Stessa scala e stesso filetto degli H2 del contenuto, così "Domande
 * frequenti" non stacca dagli altri titoli della pagina.
 * ------------------------------------------------------------- */

.breakdance .faqgen-section {
	margin: 2.6em 0 0;
}

.breakdance .faqgen-section h2 {
	font-size: clamp(1.55rem, 1rem + 1.4vw, 1.95rem);
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 1.4rem;
}

.breakdance .faqgen-section h2::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 0.5rem;
	background: var( --mda-accento, #f14307 );
	border-radius: 2px;
}

/* ---------------------------------------------------------------
 * 3. Domande
 * ------------------------------------------------------------- */

/* le misure partono dal corpo del testo del tema (18px in desktop), non da
 * rem: 1rem qui sarebbe 16px e le FAQ risulterebbero più piccole del
 * paragrafo che le precede */
.breakdance .faqgen-question {
	font-size: calc( var( --bde-body-font-size, 1rem ) * 1.05 );
	font-weight: 600;
	line-height: 1.45;
	padding: 1.15rem 0;
	transition: color 0.15s ease;
}

.breakdance .faqgen-question:hover {
	color: var( --mda-accento, #f14307 );
}

/* il +/− è l'unico segnale che la riga è cliccabile: va sull'accento */
.breakdance .faqgen-question::after {
	color: var( --mda-accento, #f14307 );
	font-weight: 400;
	margin-left: 1rem;
}

/* il plugin costruisce le domande come <div role="button">: senza questa
 * regola chi naviga da tastiera non vede dove si trova */
.breakdance .faqgen-question:focus-visible {
	outline: 2px solid var( --mda-accento, #f14307 );
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------
 * 4. Risposte
 *
 * Allineate al corpo del testo: stesso colore e stessa interlinea di
 * .mda-contenuto p, altrimenti la risposta appare più chiara e più
 * sottile del paragrafo che sta due centimetri sopra.
 * ------------------------------------------------------------- */

.breakdance .faqgen-answer {
	font-size: var( --bde-body-font-size, 1rem );
	font-weight: 400;
	line-height: 1.75;
	max-width: 68ch;
	padding: 0 0 1.3rem;
}

.breakdance .faqgen-answer a {
	color: var( --mda-accento, #f14307 );
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.breakdance .faqgen-answer a:hover {
	text-decoration-thickness: 2px;
}

.breakdance .faqgen-answer strong,
.breakdance .faqgen-answer b {
	color: var( --mda-titolo, #1a1f2b );
	font-weight: 600;
}