/* SX-Plugin — Accordion / FAQ */

.sx-ac {
	--sx-ac-gap: 8px;
	--sx-ac-duration: 200ms;
	--sx-ac-icon-size: 16px;
	--sx-ac-icon-stroke: 2;
	--sx-ac-icon-gap: 12px;
	--sx-ac-icon-opacity: 0.6;
	--sx-ac-icon-opacity-open: 1;
	--sx-ac-content-divider: rgba(128, 128, 128, 0.25);

	display: flex;
	flex-direction: column;
	gap: var(--sx-ac-gap);
	width: 100%;
}

.sx-ac__item {
	padding: 4px 16px;
	border-radius: 8px;
}

.sx-ac__header {
	display: flex;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
}

/* Every rule below is scoped through .sx-ac to reach specificity 0,2,0.
   Themes skin bare <button> elements — Royal Elementor Kit paints them with
   `button { border: 1px solid #605be5 }` (0,0,1) and, crucially,
   `button:hover, button:focus { background-color: #605be5 }` (0,1,1), which
   outranks a plain `.sx-ac__trigger` (0,1,0) and floods the header purple.

   The same rule also carries `white-space: nowrap` — meant for short labels on
   a submit button — and the title inherits it, so a question set as one line
   stayed one line however narrow the phone. On a 390px screen that put 200px of
   text past the right edge and made the whole page scroll sideways. */
.sx-ac .sx-ac__trigger {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sx-ac-icon-gap);
	width: 100%;
	padding: 8px 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	white-space: normal;
	cursor: pointer;
	transition: color var(--sx-ac-duration) ease;
}

.sx-ac--icon-start .sx-ac__trigger {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.sx-ac--icon-start .sx-ac__title {
	flex: 1;
}

/* 0,2,1 — outranks the theme's `button:hover, button:focus` (0,1,1) while
   still losing to Elementor's own `{{WRAPPER}} .sx-ac__trigger:hover` (0,3,1),
   so the Title > Hover colour control keeps working. */
.sx-ac .sx-ac__trigger:hover,
.sx-ac .sx-ac__trigger:focus {
	background: none;
	border: 0;
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.sx-ac .sx-ac__trigger:focus {
	outline: none;
}

.sx-ac .sx-ac__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

.sx-ac__title {
	display: block;
	/* A flex item's min-width defaults to its content, so without this a long
	   unbroken word would hold the row open the way nowrap used to. */
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------- Icon */

.sx-ac__icon {
	flex-shrink: 0;
	width: var(--sx-ac-icon-size);
	height: var(--sx-ac-icon-size);
	stroke-width: var(--sx-ac-icon-stroke);
	opacity: var(--sx-ac-icon-opacity);
	transition: transform var(--sx-ac-duration) ease, opacity var(--sx-ac-duration) ease, color var(--sx-ac-duration) ease;
}

.sx-ac__item.is-open .sx-ac__icon {
	transform: rotate(180deg);
	opacity: var(--sx-ac-icon-opacity-open);
}

/* The plus glyph's second stroke is the vertical one. Rotating it a quarter turn
   and fading it out — while the whole icon turns 180 — reads as a minus.
   Scoped to the plus variant so the chevron's single path is left alone. */
.sx-ac--icon-plus .sx-ac__icon path:last-child {
	transform-origin: center;
	transition: transform var(--sx-ac-duration) ease, opacity var(--sx-ac-duration) ease;
}

.sx-ac--icon-plus .sx-ac__item.is-open .sx-ac__icon path:last-child {
	transform: rotate(90deg);
	opacity: 0;
}

/* ------------------------------------------------------------------ Panel */

/* 0fr -> 1fr animates to the content's real height without measuring it in JS. */
.sx-ac__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--sx-ac-duration) ease;
}

.sx-ac__item.is-open .sx-ac__panel {
	grid-template-rows: 1fr;
}

/* `hidden`/display:none cannot be transitioned, so a collapsed panel is hidden
   with visibility instead — that still takes its content out of the tab order
   and out of screen readers, and the delay keeps it visible while it closes. */
.sx-ac__panel-inner {
	overflow: hidden;
	min-height: 0;
	visibility: hidden;
	transition: visibility 0s linear var(--sx-ac-duration);
}

.sx-ac__item.is-open .sx-ac__panel-inner {
	visibility: visible;
	transition-delay: 0s;
}

.sx-ac__content {
	padding: 0 0 8px;
}

.sx-ac--divided .sx-ac__content {
	border-top: 1px solid var(--sx-ac-content-divider);
	padding-top: 8px;
}

.sx-ac__content > :first-child {
	margin-top: 0;
}

.sx-ac__content > :last-child {
	margin-bottom: 0;
}

.sx-ac__notice {
	padding: 16px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	opacity: 0.6;
	text-align: center;
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.sx-ac__panel,
	.sx-ac__icon,
	.sx-ac--icon-plus .sx-ac__icon path:last-child {
		transition: none;
	}
}