/* FAQ Builder — front-end display */

.power-faq { margin: 1.5em 0; }

.power-faq-heading { margin: 1.5em 0 0.5em; }
.power-faq-heading > :first-child { margin-top: 0; }
.power-faq-heading + .power-faq { margin-top: 0.5em; }

.power-faq-item {
	border: 1px solid #e2e4e7;
	border-radius: 6px;
	margin-bottom: 10px;
	overflow: hidden;
	background: #fff;
}

.power-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 16px 18px;
	background: #f8faf9;
	border: 0;
	font: inherit;
	font-weight: 600;
	font-size: 1.02em;
	text-align: left;
	cursor: pointer;
	color: inherit;
}
.power-faq--open .power-faq-q { cursor: default; }
.power-faq-q:hover { background: #eef6f1; }
.power-faq--open .power-faq-q:hover { background: #f8faf9; }

.power-faq-q-text { flex: 1; }

.power-faq-icon {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-left: 14px;
	position: relative;
	transition: transform .2s ease;
}
.power-faq-icon::before,
.power-faq-icon::after {
	content: "";
	position: absolute;
	background: #5a9e6f;
	left: 50%;
	top: 50%;
}
.power-faq-icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.power-faq-icon::after  { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.power-faq-item.is-open .power-faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.power-faq--open .power-faq-icon { display: none; }

.power-faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s ease;
}
.power-faq-item.is-open .power-faq-a { max-height: none; }
.power-faq--open .power-faq-a { max-height: none; }

.power-faq-a-inner { padding: 4px 18px 18px; }
.power-faq-a-inner > :first-child { margin-top: 0; }
.power-faq-a-inner > :last-child { margin-bottom: 0; }

.power-faq-toggle-all {
	display: inline-block;
	margin-bottom: 12px;
	padding: 6px 14px;
	background: #5a9e6f;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font: inherit;
	font-size: .9em;
	cursor: pointer;
}
.power-faq-toggle-all:hover { background: #4a8a5e; }

/* Offset deep-linked items so they aren't hidden under sticky headers. */
.power-faq-item { scroll-margin-top: 90px; }
.power-faq-item:target .power-faq-q { box-shadow: inset 3px 0 0 #5a9e6f; }