/* FAQ title block ("Common Questions")
   Same plaque as the Tip block: linen card with a 1px brass frame inset from the edge, the Fraunces
   Brass Dark H2 sitting on the frame's top edge with the linen breaking the line behind it.
   The Yoast FAQ rows inside are styled in _blocks-plugin.scss (.schema-faq).
--------------------------------------------- */

.block-faq-title {
	--faq-gap: 22px;         /* linen edge to brass frame, sides and bottom */
	--faq-gap-top: 29px;     /* more above, so the top half of the title has linen behind it */
	--faq-pad-x: 16px;       /* frame to text */
	--faq-frame-top: 14px;   /* frame's top edge to the title's bottom half */
	border-radius: var(--wp--custom--border-radius--small);
}
.block-faq-title.has-background,
.editor-styles-wrapper .block-faq-title.has-background {
	padding: var(--faq-gap-top) 12px 12px;
}
.block-faq-title .block-faq-title__inner {
	position: relative;
	border: 1px solid var(--wp--preset--color--quaternary);
	border-radius: var(--wp--custom--border-radius--small);
	padding: var(--faq-frame-top) var(--faq-pad-x) 4px;
}

/* The H2 on the frame's top edge: pulled up by the frame's top padding plus half its own height
   (the same title as the Tip block) */
.block-faq-title .block-faq-title__title {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin: calc(-1 * (var(--faq-frame-top) + 0.575em)) 0 10px -10px; /* 0.575em: half the line height */
	padding: 0 10px;
	border: 0;
	background: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-optical-sizing: auto;
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.15;
	color: var(--wp--preset--color--brass-dark);
}

.block-faq-title .schema-faq,
.editor-styles-wrapper .block-faq-title .schema-faq {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
}

/* Tablet and up: 18px gap around the frame (24px above), roomier text padding */
@media (min-width: 768px) {
	.block-faq-title {
		--faq-gap: 18px;
		--faq-gap-top: 27px;
		--faq-pad-x: 28px;
	}
	.block-faq-title.has-background,
	.editor-styles-wrapper .block-faq-title.has-background {
		padding: var(--faq-gap-top) var(--faq-gap) var(--faq-gap);
	}
	.block-faq-title {
		--faq-frame-top: 18px;
	}
	.block-faq-title .block-faq-title__inner {
		padding: var(--faq-frame-top) var(--faq-pad-x) 6px;
	}
	.block-faq-title .block-faq-title__title {
		margin-left: -14px;
		padding: 0 14px;
		font-size: 1.5rem;
	}
}

/* Open style (FAQ > Styles > Open (sales pages)): no linen card or frame. "Common Questions" is a
   section heading centred between brass rules (like Heading > Center Line), and the questions
   below are separated by single brass lines, with no line above the first or under the last. */
.block-faq-title.is-style-open .block-faq-title__inner {
	border: 0;
	padding: 0;
}

.block-faq-title.is-style-open .block-faq-title__title {
	display: flex;
	align-items: center;
	gap: 24px;
	width: auto;
	margin: 0 0 24px;
	padding: 0;
	background: none;
	font-size: 2.375rem;
	font-weight: 800;
	text-align: center;
	color: var(--wp--preset--color--black);
}

.block-faq-title.is-style-open .block-faq-title__title::before,
.block-faq-title.is-style-open .block-faq-title__title::after {
	content: "";
	flex: 1 1 auto;
	min-width: 24px;
	height: 1px;
	background: var(--wp--preset--color--quaternary);
}

@media (max-width: 767px) {
	.block-faq-title.is-style-open .block-faq-title__title {
		gap: 12px;
		font-size: 1.875rem;
	}
}

/* Phones: the rules either side of "Common Questions" sit closer to the words, which also leaves
   the heading enough width to stay on one line, and the last question ends the block without
   trailing space so the section's own padding is all that follows it. */
@media only screen and (max-width: 767px) {
	.block-faq-title.is-style-open .block-faq-title__title {
		gap: 10px;
		align-items: flex-end;
		/* 2px smaller is imperceptible and keeps "Common Questions" on one line, so the rules
		   stay full-length instead of collapsing to stubs either side of a wrapped heading */
		font-size: 1.75rem;
	}

	.block-faq-title.is-style-open .block-faq-title__title::before,
	.block-faq-title.is-style-open .block-faq-title__title::after {
		flex: 1 0 36px;
		min-width: 0;
		margin-bottom: 0.575em; /* half the 1.15 line height: the middle of the last line */
	}

	.block-faq-title.is-style-open .schema-faq-question:last-of-type,
	.block-faq-title.is-style-open details:last-of-type {
		padding-bottom: 0;
	}
}