/*!
 * faq.css — Rediseny dels acordions de la pàgina FAQ.
 *
 * Targeta Kadence Accordion Block (.kt-accordion-*). Funciona tant a la
 * pàgina de FAQs (/faqs, post 22097) com en qualsevol altre lloc on
 * s'usi el block (per exemple, el bloc reduit de FAQ a la home).
 *
 * Disseny:
 *   - Tancat: fons gris molt clar, text verd fosc, icona '+' verda
 *   - Obert: border-left verd intens, fons gris una mica diferent,
 *     text fosc llegible
 *   - Els titols de categoria (kadence/advancedheading sobre els
 *     acordions) NO es toquen — segueixen sent verd intens
 *
 * Si vols ajustar els colors exactes, modifica les CSS variables al
 * principi: --er-faq-green-intense, --er-faq-green-dark, --er-faq-bg
 */

:root {
	--er-faq-green-intense: #3ea534;
	--er-faq-green-dark:    #1f5d1f;
	--er-faq-bg-closed:     #f5f5f5;
	--er-faq-bg-open:       #ffffff;   /* pure white for clearer contrast vs closed gray */
	--er-faq-text-open:     #1a1a1a;
	--er-faq-border-thick:  4px;
}

/* === Cada panell de l'acordio (estat tancat per defecte) === */
.kt-accordion-wrap .kt-accordion-pane {
	background: var(--er-faq-bg-closed) !important;
	border: 0 !important;
	border-left: var(--er-faq-border-thick) solid transparent !important;
	border-radius: 4px;
	margin-bottom: 8px;
	overflow: hidden;
	transition: border-color .2s ease, background-color .2s ease;
}

/* === Header (zona clicable amb el titol de la pregunta) === */
.kt-accordion-wrap .kt-accordion-header-wrap button,
.kt-accordion-wrap button.kt-accordion-header {
	background: transparent !important;
	color: var(--er-faq-green-dark) !important;
	font-weight: 600;
	padding: 14px 20px !important;
}

/* L'spam del titol dins del button */
.kt-accordion-wrap .kt-accordion-header-wrap button .kt-accordion-title-wrap,
.kt-accordion-wrap .kt-accordion-header-wrap button > span {
	color: inherit !important;
}

/* === Icona +/− ===
   Kadence dibuixa el "+" amb 2 pseudo-elements (:before i :after) que tenen
   background-color. Si el block te iconColor especific al admin, sobreescriu
   var(--global-palette5). Per imposar el nostre verd, targetem els pseudos
   directament amb background-color !important. */
.kt-accordion-wrap .kt-blocks-accordion-icon-trigger::before,
.kt-accordion-wrap .kt-blocks-accordion-icon-trigger::after {
	background-color: var(--er-faq-green-intense) !important;
}
/* Per icones SVG (estils diferents al "basic"): tambe forcem color/fill/stroke */
.kt-accordion-wrap .kt-blocks-accordion-icon-trigger,
.kt-accordion-wrap .kt-btn-svg-icon,
.kt-accordion-wrap .kt-accordion-header-wrap button svg {
	color: var(--er-faq-green-intense) !important;
	fill: var(--er-faq-green-intense) !important;
	stroke: var(--er-faq-green-intense) !important;
}

/* === Estat OBERT (active) ===
   Kadence Accordion (vegeu kt-accordion.min.js):
     - Afegeix la classe `kt-accordion-panel-active` al BUTTON i al PANEL
       quan estan oberts.
     - Posa aria-expanded="true" al BUTTON.
     - NO modifica la classe del .kt-accordion-pane wrapper.

   Per estilar el wrapper segons l'estat del seu descendent, usem :has()
   (Chrome 105+, Safari 15.4+, Firefox 121+). Cobrim els 3 marcadors
   possibles per robustesa: button.active, panel.active, aria-expanded. */
.kt-accordion-wrap .kt-accordion-pane:has(button.kt-accordion-panel-active),
.kt-accordion-wrap .kt-accordion-pane:has(.kt-accordion-panel.kt-accordion-panel-active),
.kt-accordion-wrap .kt-accordion-pane:has(button[aria-expanded="true"]) {
	border-left-color: var(--er-faq-green-intense) !important;
	background: var(--er-faq-bg-open) !important;
}

/* Text de l'header quan està obert: mes fosc per contrast */
.kt-accordion-wrap .kt-accordion-pane:has(button.kt-accordion-panel-active) button,
.kt-accordion-wrap .kt-accordion-pane:has(button[aria-expanded="true"]) button {
	color: var(--er-faq-text-open) !important;
}

/* Icona en estat actiu: rotem 45° per que el "+" sembli una "×" — pista
   visual clara de "tancar" sense haver de canviar la icona */
.kt-accordion-wrap .kt-accordion-pane:has(button.kt-accordion-panel-active) .kt-blocks-accordion-icon-trigger,
.kt-accordion-wrap .kt-accordion-pane:has(button[aria-expanded="true"]) .kt-blocks-accordion-icon-trigger {
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.kt-accordion-wrap .kt-blocks-accordion-icon-trigger {
	transition: transform .2s ease;
}

/* === Contingut del panel (respostes) === */
.kt-accordion-wrap .kt-accordion-panel,
.kt-accordion-wrap .kt-accordion-panel-inner {
	background: transparent !important;
}

.kt-accordion-wrap .kt-accordion-panel-inner {
	padding: 6px 24px 18px !important;
	color: var(--er-faq-text-open) !important;
}

.kt-accordion-wrap .kt-accordion-panel-inner * {
	color: inherit;
}