/* ===========================================================================
 * cbdhelp — stili condivisi dei blocchi dinamici (front-end + editor).
 * Fonte UNICA di stile: modifica qui -> si propaga a tutte le istanze.
 *
 * Aspetto allineato ai box editoriali del sito (st.cbd.help): callout colorati
 * a bassa saturazione con codice-colore semantico. I valori (colori, padding,
 * margini) riproducono gli stili inline usati negli articoli, così il blocco
 * dinamico rende identico ai box scritti a mano finora.
 * ========================================================================== */

/* --- Sources & Further Reading -------------------------------------------- */
.sources-further-reading {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(127, 127, 127, .25);
}

.sources-further-reading > h2 {
	margin: 0 0 .75rem;
	font-size: 1.25rem;
	line-height: 1.25;
}

.sources-further-reading ul {
	margin: 0;
	padding-left: 1.25rem;
}

.sources-further-reading li {
	margin: .45rem 0;
	line-height: 1.5;
}

.sources-further-reading a {
	text-underline-offset: 2px;
	word-break: break-word;
}

/* --- In brief (riquadro riassunto in apertura) ---------------------------- *
 * Come i box "answer-box" del sito: barra verde a sinistra + fondo verde tenue.
 */
.cbdhelp-in-brief {
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 4px solid #2e7d32;
	background: #f1f8e9;
	line-height: 1.55;
}

.cbdhelp-in-brief__label {
	margin: 0 0 .35rem;
	font-weight: 700;
	color: #2e7d32;
}

.cbdhelp-in-brief__body > :first-child { margin-top: 0; }
.cbdhelp-in-brief__body > :last-child  { margin-bottom: 0; }

/* --- What this article covers -------------------------------------------- *
 * NIENTE CSS qui di proposito: il blocco viene renderizzato dal PHP con lo
 * stesso markup del box "tldr-box" scritto a mano (wrapper wp-block-group +
 * stili inline + <ul> senza classe). Così eredita l'indentazione lista del
 * tema ed è identico all'originale, senza doverlo forzare via CSS.
 * (vedi cbdhelp_render_what_covers)
 */

/* --- Disclaimer ----------------------------------------------------------- *
 * Due trattamenti distinti, come nel sito:
 *  - breve  = "disclaimer-inline": solo testo piccolo grigio, senza box;
 *  - esteso = "disclaimer-box": barra arancione a sinistra + fondo ambra.
 */
.cbdhelp-disclaimer > :first-child { margin-top: 0; }
.cbdhelp-disclaimer > :last-child  { margin-bottom: 0; }

.cbdhelp-disclaimer--short {
	margin: 0 0 24px;
	font-size: 13px;
	line-height: 1.5;
	color: #777;
}

.cbdhelp-disclaimer--full {
	margin: 24px 0;
	padding: 16px 20px;
	border-left: 4px solid #ff9800;
	background: #fff8e1;
	line-height: 1.5;
}

/* --- Placeholder in editor (blocco senza fonti) --------------------------- */
.cbdhelp-block-placeholder {
	padding: 1rem 1.15rem;
	border: 1px dashed currentColor;
	border-radius: 8px;
	opacity: .6;
	font-style: italic;
	line-height: 1.4;
}

/* --- FAQ di RankMath, resa come accordion JNews (style-1) ----------------- *
 * Il blocco "FAQ by RankMath" (.rank-math-list) di default mostra tutte le
 * risposte aperte. Il JS (assets/rankmath-faq.js) aggiunge la classe
 * .cbdhelp-rmfaq al contenitore e gestisce l'apri/chiudi: queste regole
 * scattano SOLO da JS attivo -> senza JS il blocco resta leggibile (tutte le
 * risposte visibili) e lo schema FAQ intatto. Valori ripresi 1:1 dallo
 * style-1 di JNews (jnews-essential/faq.css): fondo #f7f7f7, gap 16px,
 * padding 24px, domanda 16px/700, freccia che ruota in apertura.
 * I TESTI e la loro formattazione non vengono toccati.
 */
.rank-math-list.cbdhelp-rmfaq {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0;
	margin: 0 0 30px;
	list-style: none;
}

.cbdhelp-rmfaq .rank-math-list-item {
	margin: 0;
	background: #f7f7f7;
	transition: background-color .4s ease;
}

/* La domanda diventa l'header cliccabile (ex <a class="list-toogle">). Il
 * padding-bottom si riduce in apertura, in transizione sincrona con la
 * risposta che scorre -> nessuno scatto dell'header. */
.cbdhelp-rmfaq .rank-math-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: padding-bottom .4s ease;
}
.cbdhelp-rmfaq .rank-math-list-item.is-open .rank-math-question {
	padding-bottom: 0;
}

/* Freccia a destra (stessa forma della svg JNews, via mask -> segue il colore
 * del testo, quindi funziona anche in dark mode). */
.cbdhelp-rmfaq .rank-math-question::after {
	content: "";
	flex: none;
	width: 14px;
	height: 8px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M13.6152 0.369517C13.3685 0.132903 13.0341 0 12.6855 0C12.3368 0 12.0024 0.132903 11.7557 0.369517L6.98417 4.95184L2.21262 0.369517C1.96321 0.146331 1.63333 0.024827 1.29248 0.0306025C0.951625 0.0363779 0.626413 0.168982 0.385357 0.400478C0.1443 0.631975 0.00621891 0.94429 0.00020504 1.27162C-0.00580883 1.59896 0.120714 1.91576 0.353117 2.15528L6.05442 7.63048C6.30111 7.8671 6.63551 8 6.98417 8C7.33283 8 7.66723 7.8671 7.91392 7.63048L13.6152 2.15528C13.8616 1.91837 14 1.59723 14 1.2624C14 0.927566 13.8616 0.606426 13.6152 0.369517Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M13.6152 0.369517C13.3685 0.132903 13.0341 0 12.6855 0C12.3368 0 12.0024 0.132903 11.7557 0.369517L6.98417 4.95184L2.21262 0.369517C1.96321 0.146331 1.63333 0.024827 1.29248 0.0306025C0.951625 0.0363779 0.626413 0.168982 0.385357 0.400478C0.1443 0.631975 0.00621891 0.94429 0.00020504 1.27162C-0.00580883 1.59896 0.120714 1.91576 0.353117 2.15528L6.05442 7.63048C6.30111 7.8671 6.63551 8 6.98417 8C7.33283 8 7.66723 7.8671 7.91392 7.63048L13.6152 2.15528C13.8616 1.91837 14 1.59723 14 1.2624C14 0.927566 13.8616 0.606426 13.6152 0.369517Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .5s ease;
}
.cbdhelp-rmfaq .rank-math-list-item.is-open .rank-math-question::after {
	transform: rotateX(180deg);
}

/* Risposta a tendina (ex .card-expand). Il contenitore esterno NON ha padding
 * e si anima da height:0 -> puo' collassare davvero a 0, quindi da chiusa non
 * si vede nulla (nemmeno la prima riga). Il padding vive sul wrapper interno
 * (.cbdhelp-faq-inner, creato dal JS): essendo costante, l'altezza-target
 * misurata lo include gia' -> a fine apertura nessuno scatto. */
.cbdhelp-rmfaq .rank-math-answer {
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	transition: height .4s ease;
}
.cbdhelp-rmfaq .rank-math-answer > .cbdhelp-faq-inner {
	padding: 16px 24px 24px;
	line-height: 1.6;
}

/* Dark mode: segue JNews (stessa variabile del tema). */
.jnews-dark-mode .rank-math-list.cbdhelp-rmfaq .rank-math-list-item {
	background: var(--j-darkgrey-bg-color);
}

@media (prefers-reduced-motion: reduce) {
	.cbdhelp-rmfaq .rank-math-answer,
	.cbdhelp-rmfaq .rank-math-question::after,
	.cbdhelp-rmfaq .rank-math-list-item {
		transition: none;
	}
}