/* SRMedia GEO — FAQ accordion. Native <details>, zero-JS, theme-neutral.
   Variable-driven so the global FAQ-design panel restyles every FAQ at once,
   and the Elementor widget's Style tab overrides per-widget via {{WRAPPER}}.
   The toggle icon is a real element (.srm-faq__icon) so it can be recoloured,
   resized and replaced — not a CSS pseudo-element. */
.srm-faq {
	--srm-faq-accent: #c8a45e;
	--srm-faq-border: rgba(127, 127, 127, .25);
	--srm-faq-q-color: inherit;
	--srm-faq-q-size: 1rem;
	--srm-faq-q-weight: 600;
	--srm-faq-a-color: inherit;
	--srm-faq-a-size: 1rem;
	--srm-faq-item-pad: 1rem;
	--srm-faq-max-width: 100%;
	--srm-faq-icon-size: 1.1rem;
	max-width: var(--srm-faq-max-width);
	margin: 1.25rem 0;
}
/* Auto-injected FAQ on an Elementor page is wrapped in a bare .e-con (see
   maybe_inject) so it inherits the active kit's RESPONSIVE values instead of any
   hard-coded size: --content-width = min(100%, --container-max-width) and the
   per-breakpoint --container-default-padding-*. We just centre the FAQ inside
   that width. Admins can still force a width via --srm-faq-content-width. No
   effect on a FAQ placed inside a section via the shortcode/widget. */
.srm-faq-econ { display: block; }
.srm-faq-econ > .srm-faq {
	max-width: var(--srm-faq-content-width, var(--content-width, 100%));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-default-padding-left, 1rem);
	padding-right: var(--container-default-padding-right, 1rem);
	box-sizing: border-box;
}
.srm-faq__title { margin: 0 0 .75rem; font-size: 1.25rem; line-height: 1.3; }
.srm-faq__item { border-bottom: 1px solid var(--srm-faq-border); }
.srm-faq__item:first-of-type { border-top: 1px solid var(--srm-faq-border); }
.srm-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	list-style: none;
	cursor: pointer;
	padding: var(--srm-faq-item-pad) 0;
	font-weight: var(--srm-faq-q-weight);
	font-size: var(--srm-faq-q-size);
	line-height: 1.4;
	color: var(--srm-faq-q-color);
}
.srm-faq__q::-webkit-details-marker { display: none; }
.srm-faq__q-text { flex: 1 1 auto; }
.srm-faq__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	color: var(--srm-faq-icon-color, var(--srm-faq-accent));
	font-size: var(--srm-faq-icon-size);
	line-height: 1;
	transition: transform .2s ease;
}
.srm-faq__icon svg { width: 1em; height: 1em; display: block; fill: currentColor; }
.srm-faq__icon i { font-size: 1em; line-height: 1; }
.srm-faq__icon-closed, .srm-faq__icon-open { display: inline-flex; align-items: center; }
/* No separate active icon → rotate the icon when open. */
.srm-faq__item[open] .srm-faq__icon:not(.srm-faq__icon--swap) { transform: rotate(180deg); }
/* Separate active icon → swap closed ↔ open instead of rotating. */
.srm-faq__icon--swap .srm-faq__icon-open { display: none; }
.srm-faq__item[open] .srm-faq__icon--swap .srm-faq__icon-closed { display: none; }
.srm-faq__item[open] .srm-faq__icon--swap .srm-faq__icon-open { display: inline-flex; }
.srm-faq__q:focus-visible { outline: 2px solid var(--srm-faq-accent); outline-offset: 2px; }
.srm-faq__a {
	padding: 0 0 var(--srm-faq-item-pad);
	font-size: var(--srm-faq-a-size);
	line-height: 1.6;
	color: var(--srm-faq-a-color);
}
.srm-faq__a > :first-child { margin-top: 0; }
.srm-faq__a > :last-child { margin-bottom: 0; }
.srm-faq--empty { padding: 1rem; border: 1px dashed var(--srm-faq-border); opacity: .7; }