/* -------------------------------------------------------------------------------------------------
 * The FAQ page: a heading over an accordion of Details blocks, one question open at a time.
 *
 * Written by `wp glp migrate` from the old Elementor page, and laid out as that page was - white question
 * cards on a light ground - in the redesign's type and colours: the blog's heading, a serif question and a
 * chevron that turns as it opens.  The answers are ordinary paragraphs and lists, edited in the editor.
 * ------------------------------------------------------------------------------------------------- */

.glp-faq {
	padding: var(--wp--preset--spacing--x-large) var(--wp--preset--spacing--small) var(--wp--preset--spacing--xx-large);
	background: var(--wp--custom--color--secondary--50);
}

.glp-faq > * {
	max-width: 56rem;
	margin-block: 0;
}

.glp-faq__title {
	margin-block-end: var(--wp--preset--spacing--large);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxx-large);
	font-style: normal;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	text-align: center;
	color: var(--wp--preset--color--primary);
}

/* The questions ------------------------------------------------------------------------------------ */

.glp-faq__item {
	border: 1px solid var(--wp--custom--color--secondary--200);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	transition: border-color 0.2s ease;
}

.glp-faq__item + .glp-faq__item {
	margin-block-start: var(--wp--preset--spacing--x-small);
}

.glp-faq__item[open] {
	border-color: var(--wp--custom--color--primary--300);
}

.glp-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--small);
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--secondary);
	list-style: none;
	cursor: pointer;
}

.glp-faq__item > summary::-webkit-details-marker {
	display: none;
}

.glp-faq__item > summary:hover,
.glp-faq__item[open] > summary {
	color: var(--wp--preset--color--primary);
}

.glp-faq__item > summary:focus-visible {
	border-radius: var(--wp--custom--radius--medium);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* The chevron: a bordered square turned to point down, and up once open. */
.glp-faq__item > summary::after {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	margin-inline-end: 0.25em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s ease;
}

.glp-faq__item[open] > summary::after {
	transform: translateY(25%) rotate(-135deg);
}

/* The answers ------------------------------------------------------------------------------------- */

.glp-faq__item > :not(summary) {
	margin-block: 0;
	padding-inline: var(--wp--preset--spacing--medium);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--custom--color--secondary--800);
}

/* The short green rule the old page drew between a question and its answer. */
.glp-faq__item > summary + * {
	padding-block-start: var(--wp--preset--spacing--small);
	background: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) no-repeat var(--wp--preset--spacing--medium) 0 / 3rem 2px;
}

.glp-faq__item > :not(summary) + :not(summary) {
	padding-block-start: 1em;
}

.glp-faq__item > :last-child:not(summary) {
	padding-block-end: var(--wp--preset--spacing--medium);
}

.glp-faq__item ol,
.glp-faq__item ul {
	padding-inline-start: calc(var(--wp--preset--spacing--medium) + 1.25em);
}

.glp-faq__item a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.glp-faq__item a:hover {
	text-decoration: none;
}

@media (min-width: 782px) {
	.glp-faq__title {
		font-size: var(--wp--preset--font-size--xxxx-large);
	}

	.glp-faq__item > summary {
		padding-block: var(--wp--preset--spacing--medium);
		font-size: var(--wp--preset--font-size--x-large);
	}
}