/**
 * FAQ page refinements layered over the captured Dermix stylesheet.
 */

.faq-page .page-header {
	background-image: url("../images/faq/page-header-bg.jpg");
}

.faq-page {
	display: flex;
	flex-direction: column;
}

.faq-page > .page-header,
.faq-page > .page-faqs {
	order: var(--faq-section-order, initial);
}

.faq-page .page-single-sidebar {
	display: flex;
	flex-direction: column;
}

.faq-page .page-single-faqs {
	scroll-margin-top: 30px;
}

.faq-page .page-category-list ul li a::before {
	background: var(--accent-color);
	-webkit-mask: url("../images/faq/arrow-accent.svg") center / contain no-repeat;
	mask: url("../images/faq/arrow-accent.svg") center / contain no-repeat;
}

.faq-page .accordion-header {
	margin: 0;
}

.faq-page .accordion-button {
	position: relative;
	width: 100%;
	border: 0;
	text-align: left;
}

.faq-page .accordion-collapse[hidden] {
	display: none !important;
}

.faq-page .faq-accordion .accordion-item .accordion-button::after,
.faq-page .faq-accordion .accordion-item .accordion-button.collapsed::after {
	content: "+";
	font-family: inherit;
}

.faq-page .faq-accordion .accordion-button:not(.collapsed)::after {
	content: "−";
}

.faq-page .page-category-list a:focus-visible,
.faq-page .sidebar-cta-btn a:focus-visible,
.faq-page .accordion-button:focus-visible {
	outline: 3px solid var(--accent-color);
	outline-offset: 4px;
}

.faq-page [data-reveal] {
	transition-delay: var(--reveal-delay, 0s);
}

.faq-reveal-ready .faq-page [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 650ms ease var(--reveal-delay, 0s), transform 650ms ease var(--reveal-delay, 0s);
}

.faq-reveal-ready .faq-page [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.faq-reveal-ready .faq-page [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}