/**
 * Shared accordion styles.
 */

.lh-accordion {
	display: grid;
	gap: var(--spacing-sm);
}

.lh-accordion__item {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-block);
	overflow: hidden;
}

.lh-accordion__item[open] {
	background-color: var(--color-accent-soft);
	border-color: var(--color-border-strong);
}

.lh-accordion__question {
	cursor: pointer;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	list-style: none;
	padding: var(--spacing-md) calc(var(--spacing-md) + 1.75rem) var(--spacing-md) var(--spacing-md);
	position: relative;
}

.lh-accordion__question::-webkit-details-marker {
	display: none;
}

.lh-accordion__question::marker {
	content: "";
}

.lh-accordion__question::after {
	color: var(--color-accent);
	content: "+";
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	position: absolute;
	right: var(--spacing-md);
	top: 50%;
	transform: translateY(-50%);
}

.lh-accordion__item[open] .lh-accordion__question::after {
	content: "−";
}

.lh-accordion__question:focus {
	outline: none;
}

.lh-accordion__question:focus-visible {
	box-shadow: inset 0 0 0 2px var(--color-text);
}

.lh-accordion__answer {
	border-top: 1px solid var(--color-border);
	padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

.lh-accordion__answer p {
	margin: 0;
}

@media (min-width: 768px) {
	.lh-accordion__question {
		padding: var(--spacing-md) calc(var(--spacing-lg) + 1.75rem) var(--spacing-md) var(--spacing-lg);
	}

	.lh-accordion__question::after {
		right: var(--spacing-lg);
	}

	.lh-accordion__answer {
		padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
	}
}