/*
 * Köp-FAQ:n (page-faq.php) och varumärkesarkivens frågeblock.
 * Samma <details>-mönster som kontaktsidan, i egna klasser så att
 * filen kan laddas ensam på arkiven.
 */

@layer components {

	.faq-page {
		max-inline-size: 46rem;
		margin-inline: auto;
		padding-block: var(--space-xl) var(--space-2xl);
		padding-inline: var(--space-m);
	}

	.faq-page__title {
		font-size: var(--step-3);
		letter-spacing: -0.01em;
	}

	.faq-page__lead {
		margin-block: var(--space-s) var(--space-l);
		color: var(--color-body);
		line-height: 1.6;
	}

	.faq-page__more {
		margin-block-start: var(--space-l);
		color: var(--color-body);
	}

	.faq__title {
		margin-block: var(--space-xl) var(--space-m);
		font-size: var(--step-2);
	}

	.faq__list {
		border-block-start: 1px solid var(--color-line);
	}

	.faq__item {
		border-block-end: 1px solid var(--color-line);
	}

	.faq__question {
		display: flex;
		gap: var(--space-s);
		align-items: center;
		justify-content: space-between;
		padding-block: var(--space-s);
		font-weight: 500;
		color: var(--color-ink);
		cursor: pointer;
		list-style: none;
	}

	/* Safari ritar en egen triangel utan den här. */
	.faq__question::-webkit-details-marker {
		display: none;
	}

	.faq__question:hover {
		color: var(--color-accent);
	}

	.faq__icon svg {
		width: 1.15rem;
		height: 1.15rem;
		color: var(--color-body);
	}

	.faq__bar {
		transform-origin: center;
		transition: opacity 0.2s ease, rotate 0.2s ease;
	}

	.faq__item[open] .faq__bar {
		rotate: 90deg;
		opacity: 0;
	}

	.faq__answer {
		padding-block-end: var(--space-m);
		line-height: 1.65;
		color: var(--color-body);
	}

	/* På arkiven ligger blocket sist, under arkivtexten, i samma bredd. */
	.woocommerce .faq {
		max-inline-size: 46rem;
		margin-inline: auto;
		padding-inline: var(--space-m);
	}
}

@layer utilities {

	@media (prefers-reduced-motion: reduce) {
		.faq__bar {
			transition: none;
		}
	}
}