/*
 * FAQ accordion — front end. Matches the main (static) site's FAQ design:
 * grey panel, white cards with a green left-border, dark-navy numbered questions,
 * and a green + / − toggle marker.
 *
 * Colours use Elementor's Global Colors where present, with fallbacks to the
 * static site's values, so it stays in sync with the kit and matches the main site.
 */

.wrp-faq {
	--wrp-navy:  var(--e-global-color-text, #07163f);
	--wrp-green: var(--e-global-color-wrpgreen, #54cf94);
	--wrp-grey:  #edeff3;
	--wrp-ink:   #333;

	counter-reset: wrpfaq;
	max-width: 900px;
	margin: 2rem auto;
	padding: 24px;
	background: var(--wrp-grey);
	border-radius: 12px;
}

.wrp-faq__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--wrp-navy);
}

/* ---- card per Q&A ---- */
.wrp-faq__item {
	background: #fff;
	margin: 0 0 10px !important;
	border-left: 4px solid var(--wrp-green);
	border-radius: 0 4px 4px 0;
}
.wrp-faq__item:last-child { margin-bottom: 0 !important; }

/* ---- question (real <button>: keyboard + screen-reader friendly) ----
   The theme styles <button> with a border and a coloured hover background, and
   those :hover/:focus rules out-specify a plain reset — so every state is pinned
   explicitly here. */
.wrp-faq .wrp-faq__q,
.wrp-faq .wrp-faq__q:hover,
.wrp-faq .wrp-faq__q:focus,
.wrp-faq .wrp-faq__q:active,
.wrp-faq .wrp-faq__q:focus-visible {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 16px 20px;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.45;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wrp-navy) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	appearance: none;
	-webkit-appearance: none;
}
.wrp-faq .wrp-faq__q > span { display: inline; }
/* auto-number: 1.  2.  3. … */
.wrp-faq .wrp-faq__q > span::before {
	counter-increment: wrpfaq;
	content: counter(wrpfaq) ". ";
}
/* keep a visible keyboard focus ring without the theme's box */
.wrp-faq .wrp-faq__q:focus-visible {
	outline: 2px solid var(--wrp-green) !important;
	outline-offset: -2px;
}

/* + / −  marker (plain glyph, green, like the main site) */
.wrp-faq__q::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	color: var(--wrp-green);
	transition: transform .25s ease;
}
.wrp-faq__item.open .wrp-faq__q::after { content: "\2013"; }   /* – */

/* ---- answer: smooth open/close via max-height + padding ---- */
.wrp-faq__a {
	max-height: 0;
	overflow: hidden;
	padding: 0 20px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--wrp-ink);
	transition: max-height .32s ease, padding .32s ease;
}
.wrp-faq__item.open .wrp-faq__a {
	max-height: 1200px;
	padding: 0 20px 18px;
}
.wrp-faq__a > :first-child { margin-top: 0; }
.wrp-faq__a > :last-child  { margin-bottom: 0; }
.wrp-faq__a a {
	color: var(--wrp-green);
	text-decoration: underline;
}
/* Fallback only when JS never runs: keep closed answers hidden (no animation). */
.no-js .wrp-faq__a[hidden] { display: none; }

@media (max-width: 600px) {
	.wrp-faq { padding: 16px; }
	.wrp-faq__q { font-size: 15.5px; padding: 14px 16px; }
	.wrp-faq__a { padding: 0 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.wrp-faq__q::after { transition: none; }
}