/**
 * The owner's FAQ plugin ([faq fg_id=""] in a Shortcode block).
 *
 * Restyles the plugin's markup to match the Metropolis FAQ block: a white
 * band, the title on the left, questions as ruled rows on the right.
 * The plugin's class names are fixed, so everything is scoped to
 * .dna_accordion_container.
 */

.page-content > .dna_accordion_container,
.dna_accordion_container {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	column-gap: clamp(32px, 6vw, 96px);
	align-items: start;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-block: var(--section);
	padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
	background: var(--paper);
	border: 0;
	border-block: 1px solid var(--mist);
	border-radius: 0;
	box-shadow: none;
}

/* Title: left column, spanning all the question rows. */
.dna_accordion_container .dna_faq_title {
	grid-column: 1;
	grid-row: 1 / span 60;
	/* Zero height so the title doesn't stretch the rows it spans; its text still shows (overflow). */
	align-self: start;
	height: 0;
	overflow: visible;
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(2rem, 3.2vw, 2.875rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--fascia);
}

.dna_accordion_container .lta-intro-divider-left-dark {
	display: none;
}

/* Questions: right column, ruled rows. */
.dna_accordion_container .accordion_item {
	grid-column: 2;
	margin: 0;
	overflow: visible; /* the plugin clips the row, which cuts off the focus outline */
	border-bottom: 1px solid var(--mist-deep);
	border-radius: 0;
	background: none;
	color: var(--ink);
}

.dna_accordion_container .lta-intro-divider-left-dark + .accordion_item {
	border-top: 1px solid var(--mist-deep);
}

.dna_accordion_container .accordion_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
	padding: 16px 0;
	font-size: inherit;
	line-height: inherit;
	cursor: pointer;
}

.dna_accordion_container .accordion_head_question {
	width: auto;
	font-family: var(--sans);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
}

.dna_accordion_container .plusminus {
	flex: none;
	display: grid;
	place-items: center;
	position: relative;
	top: auto; /* the plugin positions it absolutely at 12px */
	right: auto;
	width: 22px;
	height: 22px;
	font-size: 0; /* the plugin's "+"/"-" text is replaced by two drawn bars */
	color: var(--fascia);
}

.dna_accordion_container .plusminus::before,
.dna_accordion_container .plusminus::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 1.75px;
	background: currentColor;
	border-radius: 1px;
	transform: translate(-50%, -50%);
	transition: transform 200ms var(--ease-out);
}

.dna_accordion_container .plusminus::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.dna_accordion_container .accordion_head[aria-expanded="true"] .plusminus::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.dna_accordion_container .accordion_head:focus-visible {
	outline: 2px solid var(--fascia);
	outline-offset: 4px;
	border-radius: 2px;
}

.dna_accordion_container .accordion_answer {
	font-size: inherit;
	line-height: inherit;
}

.dna_accordion_container .accordion_answer p {
	max-width: 62ch;
	margin: 0;
	padding: 0 0 24px;
	color: var(--ink-soft);
}

.dna_accordion_container .accordion_answer a {
	color: var(--fascia);
	text-decoration-color: var(--mist-deep);
}

@media (hover: hover) and (pointer: fine) {
	.dna_accordion_container .accordion_head:hover .accordion_head_question {
		text-decoration: underline;
		text-decoration-color: var(--mist-deep);
	}

	.dna_accordion_container .accordion_answer a:hover {
		text-decoration-color: currentColor;
	}
}

@media (max-width: 960px) {
	.page-content > .dna_accordion_container,
	.dna_accordion_container {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		margin: 0;
	}

	.dna_accordion_container .dna_faq_title {
		grid-row: auto;
		height: auto;
		position: static;
		margin-bottom: 32px;
	}

	.dna_accordion_container .accordion_item {
		grid-column: 1;
	}
}