/* FAQ accordion (Loop Grid)
   Question container: .faq-toggle | Answer container: .faq-answer
   Hidden state only applies on the front end WITH JS available
   (html.faq-js) - answers stay visible in the Elementor editor and
   for no-JS visitors/crawlers. */

html.faq-js body:not(.elementor-editor-active) .faq-item .faq-answer {
	max-height: 0;
	margin-top: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, margin-top 0.3s ease;
}

.faq-item {
	transition: background-color 0.3s ease;
}

.faq-item--open {
	background: #C45D3C;
}

/* Matches the specificity of the collapse rule above so the open-state
   margin actually wins; the second selector covers no-JS/editor contexts. */
html.faq-js body:not(.elementor-editor-active) .faq-item.faq-item--open .faq-answer,
.faq-item--open .faq-answer {
	margin-top: 1rem;
}

.faq-item .faq-answer p:last-child {
	margin-bottom: 0;
}

.faq-item .faq-toggle {
	cursor: pointer;
}

.faq-item .faq-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Plus/minus icon swap - in the loop item template add two Icon
   widgets inside .faq-toggle: a plus icon with class faq-icon-closed
   and a minus icon with class faq-icon-open. */
.faq-item .faq-icon-open {
	display: none;
}

.faq-item.faq-item--open .faq-icon-open {
	display: block;
}

.faq-item.faq-item--open .faq-icon-closed {
	display: none;
}