/*
 * Question & answer (ADR 0026): native <details>, keyboard and screen-reader friendly, no
 * JavaScript. FAQ questions use these classes too. Without a box, a line under each question;
 * the box, corners, space inside and hover are a column's (sv-card-*, utilities.css, ADR 0031).
 */
.sv-question {
	border-block-end: 1px solid var(--sv-color-border);
}

/* In a box, 50% more room around the text than with lines (Space inside wins), and no line. */
.sv-question:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary):not(.sv-inset-none, .sv-inset-sm, .sv-inset-md, .sv-inset-lg, .sv-inset-xl, .sv-inset-custom) {
	padding-block: 0;
	padding-inline: calc(var(--sv-space-sm) * 1.5);
}

.sv-question:is(.sv-card-soft, .sv-card-dark, .sv-card-primary, .sv-card-secondary) {
	border-block-end: 0;
}

.sv-question:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary) > .sv-question__question {
	padding-block: 1.65rem;
}

.sv-question:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary)[open] > .sv-question__question {
	padding-block-end: 0.75rem;
}

.sv-question:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary) > .sv-question__answer {
	padding-block-end: 1.65rem;
}

/* Without a box, a highlighted question gets room across only, so the list doesn't move; its line stays straight until then. */
.sv-question:is(.sv-cardhover-lift, .sv-cardhover-primary, .sv-cardhover-secondary):not(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary) {
	margin-block: 0;
	padding-block: 0;
}

.sv-question:is(.sv-cardhover-lift, .sv-cardhover-primary, .sv-cardhover-secondary):not(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary, :hover, :focus-within) {
	border-radius: 0;
}

.sv-question__question {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.1rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.sv-question__question::-webkit-details-marker {
	display: none;
}

/* Chevron: points down, up when open (mirrored for right-to-left). */
.sv-question__question::after {
	flex: none;
	inline-size: 0.55em;
	block-size: 0.55em;
	margin-inline-end: 0.3em;
	border-block-end: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	content: "";
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

[dir="rtl"] .sv-question__question::after {
	transform: rotate(-45deg);
}

.sv-question[open] > .sv-question__question::after {
	transform: rotate(-135deg);
}

[dir="rtl"] .sv-question[open] > .sv-question__question::after {
	transform: rotate(135deg);
}

/*
 * Accordion (ADR 0085): numbers before the question (an Accordion counts its items in the site's digits; a
 * single question shows the number typed), the plus icon that turns into a cross when open, and a button
 * under the answer.
 */
@counter-style sv-persian-2 {
	system: extends persian;
	pad: 2 "۰";
}

@counter-style sv-arabic-2 {
	system: extends arabic-indic;
	pad: 2 "٠";
}

.sv-faq {
	counter-reset: sv-faq;
}

.sv-question--numbered {
	counter-increment: sv-faq;
}

.sv-question--numbered > .sv-question__question::before {
	flex: none;
	min-inline-size: 2ch;
	color: var(--sv-color-muted);
	font-weight: 400;
	content: counter(sv-faq, var(--sv-numerals-2, decimal-leading-zero));
}

.sv-question__number {
	flex: none;
	min-inline-size: 2ch;
	color: var(--sv-color-muted);
	font-weight: 400;
}

/* With a number, the question follows it and the icon keeps to the end. */
.sv-question__question:has(> .sv-question__number),
.sv-question--numbered > .sv-question__question {
	justify-content: flex-start;
}

.sv-question__question:has(> .sv-question__number)::after,
.sv-question--numbered > .sv-question__question::after {
	margin-inline-start: auto;
}

.sv-question.sv-question--icon-plus > .sv-question__question::after,
[dir="rtl"] .sv-question.sv-question--icon-plus > .sv-question__question::after {
	inline-size: 0.85em;
	block-size: 0.85em;
	margin-inline-end: 0;
	border: 0;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transform: none;
}

.sv-question.sv-question--icon-plus[open] > .sv-question__question::after,
[dir="rtl"] .sv-question.sv-question--icon-plus[open] > .sv-question__question::after {
	transform: rotate(45deg);
}

.sv-question__action {
	padding-block-end: 1.1rem;
}

.sv-question__answer:has(+ .sv-question__action) {
	padding-block-end: 1rem;
}

.sv-question:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary) > .sv-question__action {
	padding-block-end: 1.65rem;
}

.sv-question:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary) > .sv-question__answer:has(+ .sv-question__action) {
	padding-block-end: 1rem;
}

.sv-question__question:focus-visible {
	outline: 2px solid var(--sv-focus, var(--sv-color-text));
	outline-offset: 2px;
}

.sv-question__answer {
	padding-block-end: 1.1rem;
	color: var(--sv-color-muted);
}

.sv-question__answer > * {
	margin-block: 0;
}

.sv-question__answer > * + * {
	margin-block-start: 0.75em;
}

.sv-question__answer :where(ul, ol) {
	padding-inline-start: 1.4em;
}

.sv-question__answer a {
	color: var(--sv-accent, var(--sv-color-link));
}

@media (prefers-reduced-motion: reduce) {
	.sv-question,
	.sv-question__question::after {
		transition: none;
	}
}

/* Space inside per device (ADR 0120) wins over a box's own room, as a chosen one does. */
@media (max-width: 1024px) {
	.sv-question:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary):is(.sv-t-inset-none, .sv-t-inset-sm, .sv-t-inset-md, .sv-t-inset-lg, .sv-t-inset-xl, .sv-t-inset-custom) {
		padding: var(--sv-inset-d);
	}
}

@media (max-width: 767px) {
	.sv-question:is(.sv-card-soft, .sv-card-light, .sv-card-dark, .sv-card-outlined, .sv-card-primary, .sv-card-secondary):is(.sv-t-inset-none, .sv-t-inset-sm, .sv-t-inset-md, .sv-t-inset-lg, .sv-t-inset-xl, .sv-t-inset-custom, .sv-m-inset-none, .sv-m-inset-sm, .sv-m-inset-md, .sv-m-inset-lg, .sv-m-inset-xl, .sv-m-inset-custom) {
		padding: var(--sv-inset-d);
	}
}