/**
 * Credensys FAQ component.
 * All selectors are scoped to .cd-faq so multiple shortcode instances can
 * safely appear on the same page.
 */
.cd-faq {
	--cd-faq-blue: #0d8bf2;
	--cd-faq-text: #151515;
	--cd-faq-divider: #d9e8f7;
	max-width: 100%;
	overflow: hidden;
	border: 11px solid var(--cd-faq-blue);
    border-radius: 1.5rem;
	background: #fff;
	color: var(--cd-faq-text);
}

.cd-faq__item + .cd-faq__item {
	border-top: 1px solid var(--cd-faq-divider);
}

.cd-faq__heading {
	margin: 0;
	font: inherit;
}

.cd-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 1.125rem 1.25rem;
	border: 0;
	background: #fff;
	color: inherit;
	font: inherit;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.cd-faq__question:hover,
.cd-faq__question[aria-expanded="true"] {
	background: #f3f9ff;
	color: var(--cd-faq-blue);
}

.cd-faq__question:focus-visible {
	position: relative;
	z-index: 1;
	outline: 3px solid var(--cd-faq-blue);
	outline-offset: -3px;
}

/* The pseudo-elements form the plus icon; the vertical line fades when open. */
.cd-faq__icon {
	position: relative;
	flex: 0 0 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--cd-faq-blue);
}

.cd-faq__icon::before,
.cd-faq__icon::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 2px;
	border-radius: 2px;
	background: currentcolor;
	content: '';
	transform: translate( -50%, -50% );
	transition: opacity .25s ease, transform .25s ease;
}

.cd-faq__icon::after {
	transform: translate( -50%, -50% ) rotate( 90deg );
}

.cd-faq__question[aria-expanded="true"] .cd-faq__icon::after {
	opacity: 0;
	transform: translate( -50%, -50% ) rotate( 90deg ) scaleX( .5 );
}

/* Height is set by faq.js to allow a smooth transition for any answer size. */
.cd-faq__answer {
	overflow: hidden;
	height: 0;
	transition: height .25s ease;
}

.cd-faq__answer[hidden] {
	display: none;
}

.cd-faq__answer-inner {
	padding: 1rem 1.25rem 1rem;
	font-weight: 400;
	line-height: 1.65;
}

.cd-faq__answer-inner > :first-child {
	margin-top: 0;
}

.cd-faq__answer-inner > :last-child {
	margin-bottom: 0;
}

@media (max-width: 544px) {
	.cd-faq { border-radius: .75rem; }
	.cd-faq__question { padding: 1rem; }
	.cd-faq__answer-inner { padding: 0 1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.cd-faq__question,
	.cd-faq__icon::before,
	.cd-faq__icon::after,
	.cd-faq__answer { transition: none; }
}