.faq-accordion-preload {
	padding: 20px;
	border: 1px dashed #dfe4ec;
	background: #fafbfd;
	text-align: center;
	font-size: 16px;
	color: #55607a;
}

.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--faq--gap, 8px);

	/* Palette */
	--faq--ink: #282828;
	--faq--accent: #33B1FF;
	--faq--rule: #e6eaf0;
	--faq--rule--open: #d7dfea;
	--faq--surface: #ffffff;
	--faq--hover: #33B1FF;
	--faq--muted: #55607a;
	--faq--icon--idle: #9aa7bd;

	/* Metrics */
	--faq--icon--size: 14px;
	--faq--gutter: 12px;
	--faq--item--padding: 16px;
	--faq--indent: calc(var(--faq--item--padding) + var(--faq--icon--size) + var(--faq--gutter));

	@media screen and (min-width: 768px) {
		--faq--item--padding: 20px;
	}

	.faq-accordion-item {
		background: var(--faq--surface);
		border: 1px solid var(--faq--rule);
		transition: border-color 0.2s ease;

		&:has(button[aria-expanded="true"]) {
			--faq--icon--rotation: 180deg;
			--faq--icon--opened: 1;
			--faq--icon--closed: 0;
			--faq--icon--color: var(--faq--accent);
			border-color: var(--faq--rule--open);
		}

		h3 {
			margin: 0;
			padding: 0;

			button.accordion-trigger {
				background: transparent;
				border: none;
				padding: var(--faq--item--padding);
				width: 100%;
				display: flex;
				align-items: center;
				cursor: pointer;
				text-align: left;
				gap: var(--faq--gutter);
				&:hover {
					--faq--title--color: var(--faq--hover);
					--faq--icon--color: var(--faq--hover);
				}

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

			.faq-accordion-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 16px;
				font-weight: 500;
				color: var(--faq--title--color, var(--faq--ink));
				text-decoration: none;
				order: 2;
				line-height: 1.4;
				transition: color 0.2s ease;
			}

			.faq-accordion-icon {
				width: var(--faq--icon--size);
				height: var(--faq--icon--size);
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				order: 1;
				flex-shrink: 0;
				color: var(--faq--icon--color, var(--faq--icon--idle));
				transition: color 0.2s ease;

				.faq-accordion-icon__closed {
					opacity: var(--faq--icon--closed, 1);
				}

				.faq-accordion-icon__opened {
					opacity: var(--faq--icon--opened, 0);
				}

				svg {
					position: absolute;
					top: 0;
					left: 0;
					width: var(--faq--icon--size);
					height: var(--faq--icon--size);
					object-fit: contain;
					fill: currentColor;
					transition: transform 0.3s ease;
					transform: rotate(var(--faq--icon--rotation, 0deg));
				}
			}
		}

		.faq-accordion-content {
			padding: 0 var(--faq--item--padding) var(--faq--item--padding) var(--faq--indent);
			font-size: 16px;
			line-height: 1.6;
			color: var(--faq--content-color, var(--faq--muted));

			&:is([hidden]) {
				display: none;
			}

			.faq-accordion-content-inner {

				> * {
					margin-bottom: 15px;
				}

				> :first-child {
					padding-top: 0;
					margin-top: 0;
				}

				> :last-child {
					padding-bottom: 0;
					margin-bottom: 0;
				}
			}
		}
	}
}