/**
 * Armeria 3S — FAQ: styled lists, accordion (<details>), filter box, [a3s_faq] shortcode,
 * and a matching skin for the free Elementor Accordion, Toggle and Nested Accordion widgets.
 *
 * Scope: .a3s-faq (auto-applied on FAQ pages, or add the class in Elementor > Advanced > CSS Classes / any HTML)
 * and the Elementor widgets. Selectors are one step above Elementor's defaults, so every value set in the
 * widget panel still wins. Dark sections (.a3s-wbg-dark, .a3s-dark, .a3s-faq--dark) switch the tokens.
 * Motion: transform / opacity / colour, 200 ms ease-out, removed under prefers-reduced-motion. Print: all answers open.
 */

:is(.a3s-faq, .elementor-widget-accordion, .elementor-widget-toggle, .elementor-widget-n-accordion) {
	--faq-bg: var(--a3s-color-bg, #fff);
	--faq-surface: var(--a3s-color-surface-2, #f7f6f4);
	--faq-border: var(--a3s-color-border, #dcd9d5);
	--faq-text: var(--a3s-color-text, #231f20);
	--faq-muted: var(--a3s-color-muted, #5f5859);
	--faq-accent: var(--a3s-color-primary, #e95e1b);
	--faq-accent-text: var(--a3s-color-link-hover, #b84a0e); /* AA on white */
	--faq-radius: var(--a3s-radius-lg, 4px);
	--faq-ease: cubic-bezier(.23, 1, .32, 1);
}

:is(.a3s-faq--dark, .a3s-wbg-dark, .a3s-dark) :is(.a3s-faq, .elementor-widget-accordion, .elementor-widget-toggle, .elementor-widget-n-accordion),
.a3s-faq--dark {
	--faq-bg: #2f2a2b;
	--faq-surface: #383233;
	--faq-border: rgba(255, 255, 255, .2);
	--faq-text: #ece9e5;
	--faq-muted: #bdb8b3;
	--faq-accent-text: #ff9a63;
}

.a3s-faq {
	color: var(--faq-text);
	interpolate-size: allow-keywords;
}

/* ==========================================================================
   Accordion items: our <details>, the core "Details" block, and the markup built by faq.js
   ========================================================================== */
.a3s-faq details {
	margin: 0 0 12px;
	border: 1px solid var(--faq-border);
	border-radius: var(--faq-radius);
	background: var(--faq-bg);
	color: var(--faq-text);
	transition: border-color .2s var(--faq-ease), background-color .2s var(--faq-ease), box-shadow .2s var(--faq-ease);
}

.a3s-faq details[open] {
	border-color: var(--faq-accent);
	box-shadow: inset 4px 0 0 var(--faq-accent);
}

@media (hover: hover) {
	.a3s-faq details:not([open]):hover {
		border-color: var(--faq-text);
		background: var(--faq-surface);
	}
}

.a3s-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding: 16px 22px;
	cursor: pointer;
	list-style: none;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.35;
}

.a3s-faq summary::-webkit-details-marker {
	display: none;
}

/* Plus that turns into a cross (two bars, rotate): works without JS. */
.a3s-faq summary::after {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
	color: var(--faq-accent-text);
	transition: transform .2s var(--faq-ease);
}

.a3s-faq details[open] > summary::after {
	transform: rotate(45deg);
}

.a3s-faq summary:focus-visible {
	outline: 2px solid var(--faq-accent);
	outline-offset: 2px;
	border-radius: var(--faq-radius);
}

.a3s-faq details > :not(summary) {
	margin-right: 22px;
	margin-left: 22px;
	color: var(--faq-text);
}

.a3s-faq details > :nth-child(2) {
	margin-top: 0;
}

.a3s-faq details > :last-child {
	margin-bottom: 22px;
}

.a3s-faq details > .a3s-faq__a > :first-child {
	margin-top: 0;
}

.a3s-faq details > .a3s-faq__a > :last-child {
	margin-bottom: 0;
}

.a3s-faq details a {
	color: var(--faq-accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Smooth open / close where ::details-content exists (Chromium); instant elsewhere. */
@supports (selector(::details-content)) {
	.a3s-faq details::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size .22s var(--faq-ease), content-visibility .22s var(--faq-ease) allow-discrete;
	}

	.a3s-faq details[open]::details-content {
		block-size: auto;
	}
}

/* ==========================================================================
   Group titles, toolbar, status
   ========================================================================== */
.a3s-faq__group + .a3s-faq__group {
	margin-top: 36px;
}

.a3s-faq__group-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	color: var(--faq-text);
	font-size: 1.25rem;
	line-height: 1.25;
}

.a3s-faq__group-title::before {
	content: "";
	flex: none;
	width: 4px;
	height: 1.1em;
	background: var(--faq-accent);
}

.a3s-faq__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0 0 20px;
}

.a3s-faq__tools[hidden] {
	display: none;
}

.a3s-faq__search {
	flex: 1 1 260px;
	min-width: 0;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid var(--faq-border);
	border-radius: var(--faq-radius);
	background: var(--faq-bg);
	color: var(--faq-text);
	font: inherit;
}

.a3s-faq__search::placeholder {
	color: var(--faq-muted);
	opacity: 1;
}

.a3s-faq__search:focus-visible {
	border-color: var(--faq-accent);
	outline: 2px solid var(--faq-accent);
	outline-offset: 1px;
}

.a3s-faq__btn {
	min-height: 48px;
	padding: 10px 18px;
	border: 1px solid var(--faq-border);
	border-radius: var(--faq-radius);
	background: transparent;
	color: var(--faq-text);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .16s var(--faq-ease);
}

.a3s-faq__btn:active {
	transform: scale(.97);
}

.a3s-faq__btn:focus-visible {
	outline: 2px solid var(--faq-accent);
	outline-offset: 2px;
}

@media (hover: hover) {
	.a3s-faq__btn:hover {
		border-color: var(--faq-text);
		background: var(--faq-surface);
	}
}

.a3s-faq__status {
	flex: 1 0 100%;
	margin: 0;
	color: var(--faq-muted);
	font-size: .9375rem;
}

.a3s-faq__status:empty {
	display: none;
}

.a3s-faq [hidden] {
	display: none !important;
}

/* ==========================================================================
   Styled lists (top-level lists only: answers keep plain lists)
   ========================================================================== */
.a3s-faq :is(ul, ol):not(:is(details, li, .a3s-faq__a, .a3s-faq__tools) *) {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: a3sfaq;
}

.a3s-faq :is(ul, ol):not(:is(details, li, .a3s-faq__a, .a3s-faq__tools) *) > li {
	position: relative;
	display: block;
	margin: 0 0 10px;
	padding: 16px 20px 16px 68px;
	border: 1px solid var(--faq-border);
	border-radius: var(--faq-radius);
	background: var(--faq-bg);
	line-height: 1.55;
	counter-increment: a3sfaq;
	transition: border-color .2s var(--faq-ease), background-color .2s var(--faq-ease);
}

.a3s-faq :is(ul, ol):not(:is(details, li, .a3s-faq__a, .a3s-faq__tools) *) > li::before {
	position: absolute;
	top: 14px;
	left: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--faq-accent);
	color: var(--a3s-color-primary-contrast, #231f20);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1;
	content: "";
}

/* ol: numbers */
.a3s-faq ol:not(:is(details, li, .a3s-faq__a, .a3s-faq__tools) *) > li::before {
	content: counter(a3sfaq);
}

/* ul: check mark */
.a3s-faq ul:not(:is(details, li, .a3s-faq__a, .a3s-faq__tools) *) > li::before {
	background:
		var(--faq-accent)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
		center / 18px 18px no-repeat;
}

@media (hover: hover) {
	.a3s-faq :is(ul, ol):not(:is(details, li, .a3s-faq__a, .a3s-faq__tools) *) > li:hover {
		border-color: var(--faq-text);
		background: var(--faq-surface);
	}
}

.a3s-faq :is(ul, ol):not(:is(details, li, .a3s-faq__a, .a3s-faq__tools) *) > li:focus-within {
	border-color: var(--faq-accent);
}

.a3s-faq li > strong:first-child,
.a3s-faq li > b:first-child {
	display: block;
	margin-bottom: 4px;
	font-size: 1.0625rem;
}

.a3s-faq li a {
	color: var(--faq-accent-text);
	text-underline-offset: 3px;
}

.a3s-faq li a:focus-visible {
	outline: 2px solid var(--faq-accent);
	outline-offset: 2px;
}

/* Lists inside answers: refined plain lists. */
.a3s-faq :is(details, .a3s-faq__a) :is(ul, ol) {
	padding-left: 1.25em;
}

.a3s-faq :is(details, .a3s-faq__a) li::marker {
	color: var(--faq-accent-text);
	font-weight: 700;
}

/* ==========================================================================
   Free Elementor widgets: Accordion, Toggle
   ========================================================================== */
body .elementor-widget-accordion .elementor-accordion .elementor-accordion-item,
body .elementor-widget-toggle .elementor-toggle .elementor-toggle-item {
	margin: 0 0 12px;
	border: 1px solid var(--faq-border);
	border-radius: var(--faq-radius);
	background: var(--faq-bg);
	overflow: hidden;
	transition: border-color .2s var(--faq-ease), box-shadow .2s var(--faq-ease);
}

body .elementor-widget-accordion .elementor-accordion .elementor-accordion-item + .elementor-accordion-item {
	border-block-start: 1px solid var(--faq-border);
}

body .elementor-widget-accordion .elementor-accordion .elementor-accordion-item,
body .elementor-widget-toggle .elementor-toggle .elementor-toggle-item {
	position: relative;
}

/* Accent bar of the open item (a pseudo-element: the title background would hide an inset shadow). */
body .elementor-widget-accordion .elementor-accordion .elementor-accordion-item::before,
body .elementor-widget-toggle .elementor-toggle .elementor-toggle-item::before {
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 1;
	width: 4px;
	background: var(--faq-accent);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s var(--faq-ease);
}

body .elementor-widget-accordion .elementor-accordion .elementor-accordion-item:has(> .elementor-tab-title.elementor-active),
body .elementor-widget-toggle .elementor-toggle .elementor-toggle-item:has(> .elementor-tab-title.elementor-active) {
	border-color: var(--faq-accent);
}

body .elementor-widget-accordion .elementor-accordion .elementor-accordion-item:has(> .elementor-tab-title.elementor-active)::before,
body .elementor-widget-toggle .elementor-toggle .elementor-toggle-item:has(> .elementor-tab-title.elementor-active)::before {
	opacity: 1;
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-title,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-title {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	margin: 0;
	padding: 16px 22px;
	border: 0;
	background: transparent;
	color: var(--faq-text);
	font-weight: 500;
	line-height: 1.35;
	transition: background-color .2s var(--faq-ease);
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-title .elementor-toggle-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	float: none;
	width: 1.5em;
	color: var(--faq-accent-text);
	text-align: center;
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon-right,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-title .elementor-toggle-icon-right {
	order: 2;
	margin-inline-start: auto;
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-title .elementor-toggle-icon svg {
	fill: currentColor; /* also beats the kit-Accent fill of the open state */
}

body .elementor-widget-accordion .elementor-accordion .elementor-accordion-title,
body .elementor-widget-toggle .elementor-toggle .elementor-toggle-title {
	color: var(--faq-text);
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-title.elementor-active {
	background: var(--faq-surface);
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-title {
	color: var(--faq-text);
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon {
	color: var(--faq-accent-text);
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-title:focus-visible,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-title:focus-visible,
body .elementor-widget-accordion .elementor-accordion .elementor-accordion-title:focus-visible,
body .elementor-widget-toggle .elementor-toggle .elementor-toggle-title:focus-visible {
	outline: 2px solid var(--faq-accent);
	outline-offset: -2px;
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-content,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-content {
	padding: 4px 22px 22px;
	border: 0;
	color: var(--faq-text);
	line-height: 1.6;
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-content > :first-child,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-content > :first-child {
	margin-top: 0;
}

body .elementor-widget-accordion .elementor-accordion .elementor-tab-content > :last-child,
body .elementor-widget-toggle .elementor-toggle .elementor-tab-content > :last-child {
	margin-bottom: 0;
}

@media (hover: hover) {
	body .elementor-widget-accordion .elementor-accordion .elementor-accordion-item:not(:has(> .elementor-active)):hover,
	body .elementor-widget-toggle .elementor-toggle .elementor-toggle-item:not(:has(> .elementor-active)):hover {
		border-color: var(--faq-text);
	}
}

/* Nested Accordion (free): variables only, the widget panel still overrides them. */
body .elementor-widget-n-accordion {
	--n-accordion-border-color: var(--faq-border);
	--n-accordion-border-radius: var(--faq-radius);
	--n-accordion-padding: 16px 22px;
	--n-accordion-title-font-size: 1.0625rem;
	--n-accordion-title-normal-color: var(--faq-text);
	--n-accordion-title-hover-color: var(--faq-text);
	--n-accordion-title-active-color: var(--faq-text);
	--n-accordion-icon-normal-color: var(--faq-accent-text);
	--n-accordion-icon-hover-color: var(--faq-accent-text);
	--n-accordion-icon-active-color: var(--faq-accent-text);
	--n-accordion-item-title-space-between: 12px;
	--n-accordion-title-justify-content: space-between;
	--n-accordion-title-icon-order: 2;
}

body .elementor-widget-n-accordion .e-n-accordion-item-title {
	min-height: 56px;
	background: var(--faq-bg);
	transition: background-color .2s var(--faq-ease), border-color .2s var(--faq-ease);
}

body .elementor-widget-n-accordion .e-n-accordion-item-title-text {
	font-weight: 500;
	line-height: 1.35;
}

body .elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
	border-color: var(--faq-accent);
	background: var(--faq-surface);
}

body .elementor-widget-n-accordion .e-n-accordion-item-title:focus-visible {
	outline: 2px solid var(--faq-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width: 767.98px) {
	.a3s-faq summary {
		padding: 14px 16px;
		font-size: 1rem;
	}

	.a3s-faq details > :not(summary) {
		margin-right: 16px;
		margin-left: 16px;
	}

	.a3s-faq :is(ul, ol):not(:is(details, li, .a3s-faq__a, .a3s-faq__tools) *) > li {
		padding: 14px 14px 14px 58px;
	}

	.a3s-faq :is(ul, ol):not(:is(details, li, .a3s-faq__a, .a3s-faq__tools) *) > li::before {
		top: 12px;
		left: 14px;
		width: 30px;
		height: 30px;
	}

	body .elementor-widget-accordion .elementor-accordion .elementor-tab-title,
	body .elementor-widget-toggle .elementor-toggle .elementor-tab-title {
		padding: 14px 16px;
	}

	body .elementor-widget-accordion .elementor-accordion .elementor-tab-content,
	body .elementor-widget-toggle .elementor-toggle .elementor-tab-content {
		padding: 2px 16px 18px;
	}

	.a3s-faq__btn {
		flex: 1 1 calc(50% - 6px);
	}
}

/* ==========================================================================
   Reduced motion, print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.a3s-faq details,
	.a3s-faq summary::after,
	.a3s-faq__btn,
	.a3s-faq li,
	body .elementor-widget-accordion .elementor-accordion .elementor-accordion-item,
	body .elementor-widget-toggle .elementor-toggle .elementor-toggle-item,
	body .elementor-widget-accordion .elementor-accordion .elementor-accordion-item::before,
	body .elementor-widget-toggle .elementor-toggle .elementor-toggle-item::before,
	body .elementor-widget-accordion .elementor-accordion .elementor-tab-title,
	body .elementor-widget-toggle .elementor-toggle .elementor-tab-title,
	body .elementor-widget-n-accordion .e-n-accordion-item-title {
		transition: none;
	}

	.a3s-faq details::details-content {
		transition: none;
	}

	.a3s-faq__btn:active {
		transform: none;
	}
}

@media print {
	.a3s-faq__tools,
	.a3s-faq summary::after {
		display: none !important;
	}

	.a3s-faq details,
	.a3s-faq :is(ul, ol) > li {
		break-inside: avoid;
		border-color: #999;
		box-shadow: none;
	}

	.a3s-faq details::details-content {
		block-size: auto;
		content-visibility: visible;
	}

	body .elementor-widget-accordion .elementor-tab-content,
	body .elementor-widget-toggle .elementor-tab-content {
		display: block !important;
	}
}