/* BLOOM - the questions under a recipe.

   Built from the same pieces the recipe page already uses: the heading is
   the recipe page's own .br-h3, the panel is the sand of .br-tip, the type
   and the colours are the site's variables. Nothing else on the page is
   touched, and removing this file removes the block. */

.br-faq {
	margin: 40px 0 0;
}

.br-faq > .br-h3 {
	margin-bottom: 14px;
}

/* One question. <details> gives the open and shut behaviour with no script. */
.br-faq-q {
	background: var(--sand);
	border-radius: 12px;
	margin-bottom: 10px;
	overflow: hidden;
}

.br-faq-q > summary {
	list-style: none;
	cursor: pointer;
	padding: 16px 22px;
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	position: relative;
	padding-inline-end: 48px;
	transition: color .2s ease;
}

.br-faq-q > summary::-webkit-details-marker,
.br-faq-q > summary::marker { display: none; content: ""; }

.br-faq-q > summary:hover { color: var(--coral-ink, #9C4A28); }

/* The little chevron, at the end of the line - which in RTL is the left. */
.br-faq-q > summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 20px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-inline-end: 2px solid var(--gold, #C4A882);
	border-bottom: 2px solid var(--gold, #C4A882);
	transform: rotate(45deg);
	transition: transform .25s ease;
}

.br-faq-q[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.br-faq-a {
	padding: 0 22px 18px;
	margin: 0;
	font-size: 16px;
	line-height: 1.85;
	color: var(--quiet);
}

@media (max-width: 640px) {
	.br-faq-q > summary { padding: 14px 18px; padding-inline-end: 44px; font-size: 16px; }
	.br-faq-a { padding: 0 18px 16px; font-size: 15px; }
}