/**
 * Styles front du bloc FAQ (shortcode [pxn_faq]).
 * Les couleurs / tailles pilotées par les réglages sont exposées en variables
 * sur :root via wp_add_inline_style() (voir library/enqueue.php).
 */

.pxn_faq {
	width: 100%;
	display: inline-block;
	box-sizing: border-box;
	margin: 20px 0;
	padding: 10px;
	border-radius: 20px;
	background-color: #f8f8f8;
}

.pxn_faq .question {
	background-color: var(--pxn-faq-q-bg, #eeeeee);
	color: var(--pxn-faq-q-color, #444444);
	font-size: var(--pxn-faq-q-fs, 1em);
	cursor: pointer;
	padding: 10px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	transition: 0.4s;
	margin-bottom: 8px;
	font-weight: bold;
	padding-right: 30px;
	box-sizing: border-box;
	position: relative;
	border-radius: 6px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pxn_faq .question.active,
.pxn_faq .question:hover {
	background-color: var(--pxn-faq-q-bg-a, #cccccc);
	color: var(--pxn-faq-q-color-a, #444444);
}

.pxn_faq .question.active {
	overflow: visible;
	white-space: normal;
}

.pxn_faq .question:after {
	content: var(--pxn-faq-toggle-closed, \002b);
	font-size: var(--pxn-faq-toggle-fs, 25px);
	color: var(--pxn-faq-toggle-color, #777);
	float: right;
	position: absolute;
	top: var(--pxn-faq-toggle-top, 10px);
	right: 10px;
}

.pxn_faq .question.active:after {
	content: var(--pxn-faq-toggle-open, \2212);
}

.pxn_faq h3.question {
	font-size: var(--pxn-faq-q-fs, 1em);
	margin: 10px 0;
}

.pxn_faq .answer {
	padding: 0 18px 0 18px;
	display: none;
	overflow: hidden;
}

.pxn_faq .pxn_faq_title::before {
	content: var(--pxn-faq-hdr-bf, "💡 ");
	font-size: var(--pxn-faq-hdr-bfs, 24px);
	margin-bottom: var(--pxn-faq-hdr-bmb, 24px);
	padding-top: var(--pxn-faq-hdr-bpt, 10px);
	padding-bottom: var(--pxn-faq-hdr-bpb, 10px);
	font-weight: bold;
	color: var(--pxn-faq-hdr-color, #000000);
}

.pxn_faq_title,
.pxn_faq_title h2,
.pxn_faq_title h3 {
	display: inline-block;
	padding-bottom: 0;
	margin: 0;
	color: var(--pxn-faq-hdr-color, #000000);
	font-size: var(--pxn-faq-hdr-fs, inherit);
}