/**
 * Solar FAQ Manager – front-end accordion.
 *
 * Mirrors the existing /solar-faq/ accordion: dark gradient question bars with
 * white centred text and a +/- icon on the left; the open question turns light
 * grey with a dark title and reveals a light panel with justified, muted text.
 *
 * Every visual value is a custom property on .sfaqm-accordion, so it can be
 * fine-tuned from Appearance → Customize → Additional CSS or Elementor custom CSS
 * without editing this file. Example:
 *   .sfaqm-accordion { --sfaqm-title-size: 28px; }
 *
 * Typography is inherited from the theme / Elementor kit (the question inherits
 * the heading font, the answer inherits the body font). To force a family set
 * --sfaqm-title-font and/or --sfaqm-answer-font.
 */

.sfaqm-accordion {
	--sfaqm-header-bg: linear-gradient(180deg, #4b4b4b 0%, #333333 55%, #262626 100%);
	--sfaqm-header-color: #ffffff;
	--sfaqm-header-active-bg: #f7f7f7;
	--sfaqm-header-active-color: #555555;
	--sfaqm-panel-bg: #fafafa;
	--sfaqm-answer-color: #8d9bab;
	--sfaqm-link-color: #5f7d99;
	--sfaqm-border-color: #1e1e1e;
	--sfaqm-divider-color: #ebebeb;

	--sfaqm-title-size: 30px;
	--sfaqm-title-weight: 400;
	--sfaqm-title-line-height: 1;
	--sfaqm-title-letter-spacing: -0.01em;
	--sfaqm-answer-size: 18px;
	--sfaqm-answer-line-height: 1.6;

	--sfaqm-header-padding-y: 15px;
	--sfaqm-header-padding-x: 20px;
	--sfaqm-icon-size: 12px;
	--sfaqm-icon-stroke: 2px;
	--sfaqm-icon-gap: 16px;
	--sfaqm-panel-padding: 15px 20px;
	--sfaqm-duration: 400ms;

	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
}

.sfaqm-accordion *,
.sfaqm-accordion *::before,
.sfaqm-accordion *::after {
	box-sizing: border-box;
}

/* Item ------------------------------------------------------------------ */

.sfaqm-accordion .sfaqm-item {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 1px solid var(--sfaqm-border-color);
	border-top-width: 0;
}

.sfaqm-accordion .sfaqm-item:first-child {
	border-top-width: 1px;
}

/* Heading wrapper: neutralise theme/Elementor heading margins. */
.sfaqm-accordion .sfaqm-heading {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 1;
}

/* Question button -------------------------------------------------------
 * Resets are repeated on :hover/:focus/:active because many themes (Hello
 * Elementor, Astra, Elementor kits) style every <button> on those states.
 */
.sfaqm-accordion .sfaqm-trigger,
.sfaqm-accordion .sfaqm-trigger:hover,
.sfaqm-accordion .sfaqm-trigger:focus,
.sfaqm-accordion .sfaqm-trigger:active {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: var(--sfaqm-header-padding-y) calc(var(--sfaqm-header-padding-x) + var(--sfaqm-icon-size) + var(--sfaqm-icon-gap));
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--sfaqm-header-bg);
	color: var(--sfaqm-header-color);
	font-family: var(--sfaqm-title-font, inherit);
	font-size: var(--sfaqm-title-size);
	font-style: normal;
	font-weight: var(--sfaqm-title-weight);
	line-height: var(--sfaqm-title-line-height);
	letter-spacing: var(--sfaqm-title-letter-spacing);
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	white-space: normal;
	overflow-wrap: break-word;
	cursor: pointer;
	transition: none;
}

.sfaqm-accordion .sfaqm-trigger[aria-expanded="true"],
.sfaqm-accordion .sfaqm-trigger[aria-expanded="true"]:hover,
.sfaqm-accordion .sfaqm-trigger[aria-expanded="true"]:focus,
.sfaqm-accordion .sfaqm-trigger[aria-expanded="true"]:active {
	background: var(--sfaqm-header-active-bg);
	color: var(--sfaqm-header-active-color);
	box-shadow: inset 0 -1px 0 var(--sfaqm-divider-color);
}

.sfaqm-accordion .sfaqm-trigger:focus:not(:focus-visible) {
	outline: none;
}

.sfaqm-accordion .sfaqm-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -6px;
}

.sfaqm-accordion .sfaqm-question {
	display: block;
}

/* +/- icon, drawn in CSS so no icon font is needed. */
.sfaqm-accordion .sfaqm-icon {
	position: absolute;
	top: 50%;
	left: var(--sfaqm-header-padding-x);
	width: var(--sfaqm-icon-size);
	height: var(--sfaqm-icon-size);
	margin-top: calc(var(--sfaqm-icon-size) / -2);
	pointer-events: none;
}

.sfaqm-accordion .sfaqm-icon::before,
.sfaqm-accordion .sfaqm-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: var(--sfaqm-icon-stroke);
	margin-top: calc(var(--sfaqm-icon-stroke) / -2);
	background: currentColor;
}

.sfaqm-accordion .sfaqm-icon::after {
	transform: rotate(90deg);
}

.sfaqm-accordion .sfaqm-trigger[aria-expanded="true"] .sfaqm-icon::after {
	transform: rotate(90deg) scale(0);
}

/* Answer panel ---------------------------------------------------------- */

.sfaqm-accordion .sfaqm-panel {
	margin: 0;
	padding: 0;
	background: var(--sfaqm-panel-bg);
}

.sfaqm-accordion .sfaqm-panel[hidden] {
	display: none;
}

.sfaqm-accordion .sfaqm-answer {
	padding: var(--sfaqm-panel-padding);
	color: var(--sfaqm-answer-color);
	font-family: var(--sfaqm-answer-font, inherit);
	font-size: var(--sfaqm-answer-size);
	font-weight: 400;
	line-height: var(--sfaqm-answer-line-height);
	text-align: justify;
	overflow-wrap: break-word;
}

.sfaqm-accordion .sfaqm-answer > :first-child {
	margin-top: 0;
}

.sfaqm-accordion .sfaqm-answer > :last-child {
	margin-bottom: 0;
}

.sfaqm-accordion .sfaqm-answer p {
	margin: 0 0 1em;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.sfaqm-accordion .sfaqm-answer ul,
.sfaqm-accordion .sfaqm-answer ol {
	margin: 0 0 1em 1.25em;
	padding: 0;
}

.sfaqm-accordion .sfaqm-answer a {
	color: var(--sfaqm-link-color);
	text-decoration: underline;
}

.sfaqm-accordion .sfaqm-answer img,
.sfaqm-accordion .sfaqm-answer video {
	max-width: 100%;
	height: auto;
}

.sfaqm-accordion .sfaqm-answer iframe {
	max-width: 100%;
}

/* Responsive (matches Elementor's default tablet/mobile breakpoints) ----- */

@media (max-width: 1024px) {
	.sfaqm-accordion {
		--sfaqm-title-size: 25px;
		--sfaqm-title-line-height: 1.1;
		--sfaqm-answer-size: 17px;
	}
}

@media (max-width: 767px) {
	.sfaqm-accordion {
		--sfaqm-title-size: 20px;
		--sfaqm-title-line-height: 1.25;
		--sfaqm-answer-size: 16px;
		--sfaqm-header-padding-y: 14px;
		--sfaqm-header-padding-x: 15px;
		--sfaqm-icon-gap: 12px;
		--sfaqm-panel-padding: 15px;
	}

	/* Justified text leaves large gaps on narrow screens. */
	.sfaqm-accordion .sfaqm-answer {
		text-align: left;
	}
}

@media print {
	.sfaqm-accordion .sfaqm-panel[hidden] {
		display: block !important;
	}

	.sfaqm-accordion .sfaqm-icon {
		display: none;
	}
}