/*
 * FAQ page (page 13) in core blocks. See theme/import/BLOCKS-GUIDE.md.
 *
 * Each question is a Group .faq-item holding a Group .faq-item__head and a Group
 * .faq-item__content, as in the template, so custom.js still opens and closes it.
 */

/* Question row. The template prints the number as <span class="faq-item__head-num">
 * and the question as bare text. Here both are Paragraphs, so they take the row's
 * size, line height and colour (pink when open) instead of the template's p rules. */
.faq-item__head > p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Round +/- button. The template has an empty <span class="faq-item__head-btn">
 * with its lines drawn by :before and :after; no block prints an empty span, so
 * the same button is drawn on the row. Open: pink, and the vertical line goes. */
.wp-block-group.faq-item__head::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: -20px;
	z-index: 1;
	width: 40px;
	height: 40px;
	border: 1px solid #eeeeee;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: linear-gradient(#222222, #222222) center / 2px 8px no-repeat,
		linear-gradient(#222222, #222222) center / 8px 2px no-repeat,
		#faf9ff;
}
.faq-item.active > .wp-block-group.faq-item__head::before {
	border-color: #fcedea;
	background: linear-gradient(#222222, #222222) center / 8px 2px no-repeat,
		#fcedea;
}

/* Answers with more than one paragraph: the template sets no space between them. */
.faq-item__content > p + p {
	margin-top: 20px;
}

/* "Email us a question" link: a Paragraph with the class faq-more. The template's
 * arrow icon (<i class="icon-arrow-md">) is drawn after the link. */
p.faq-more a::after {
	content: "\e919";
	margin-left: 10px;
	font-family: "icomoon" !important;
	font-size: 8px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	text-transform: none;
	color: #d05278;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
p.faq-more a:hover::after {
	margin-left: 15px;
}

/* Block editor: the site hides each answer until its question is clicked. The
 * editor shows them all so they can be edited. */
.faq-item__content.block-editor-block-list__block {
	display: block;
}