.faq-item {
	counter-increment: faq-counter;
	border-bottom: 1px solid var(--secondary-light);
	margin-bottom: 2rem;
}

/* Sista frågan behåller sin border men tappar marginalen,
   oavsett om ACF lindar innerblocken i en wrapper eller inte */
.faq-item:last-child,
:last-child > .faq-item {
	margin-bottom: 0;
}

.faq-item__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.faq-item__trigger {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 2.4rem 0;
	margin: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* Counter till vänster */
.faq-item__counter {
	flex: 0 0 auto;
	min-width: var(--faq-counter-width);
	color: var(--base) !important;
}

.faq-item__counter::before {
	content: counter(faq-counter, decimal-leading-zero);
}

.faq-item__title {
	flex: 1 1 auto;
	margin-left: var(--faq-gap);
	padding-right: 2rem;
	font-size: 20px;
	font-weight: 500;
	color: var(--base) !important;
	text-decoration: none !important;
}

.faq-item__trigger:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
}

/* Plus/minus-ikon: 29px cirkel, 17px tecken */
.faq-item__icon {
	position: relative;
	flex: 0 0 auto;
	width: 29px;
	height: 29px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--secondary-light);
	color: var(--base);
	transition: background-color 0.35s ease, color 0.35s ease;
}

.faq-item__icon::before,
.faq-item__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

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

/* Öppet läge: röd cirkel med vitt minustecken */
.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
	background: var(--primary);
	color: white;
}

/* Hover: ikonen får samma färg som i öppet läge */
@media screen and (min-width:1026px) {
.faq-item__trigger:hover .faq-item__icon {
	background: var(--primary);
	color: white;
}}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

/* Panelen: smooth max-height */
.faq-item__panel {
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition:
		max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 0.45s;
}

.faq-item__panel.is-open {
	visibility: visible;
	transition:
		max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 0s;
}

/* Innehållet linjerar med rubriken: counterbredd + gap */
.faq-item__content {
	padding: 0 0 2.4rem;
	margin-left: calc(var(--faq-counter-width) + var(--faq-gap));
	max-width: 75ch;
}

.faq-item__content > *:first-child {
	margin-top: 0;
}

.faq-item__content > *:last-child {
	margin-bottom: 0;
}

/* Utan JS: visa allt hellre än att dölja innehåll */
html:not(.faq-js) .faq-item__panel {
	max-height: none;
	visibility: visible;
}

@media screen and (max-width: 1025px) {
	.faq-item {
		--faq-gap: 2rem;
		--faq-counter-width: 1.8rem;
	}

	.faq-item__counter {
		align-self: flex-start;
		/* Optisk justering: countern är mindre än rubriken, så den
		   linjeras mot textens överkant i stället för radens */
		margin-top: 0.6rem;
		font-size: 1.2rem !important;
	}

	.faq-item__title {
		font-size: 1.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq-item__panel,
	.faq-item__icon,
	.faq-item__icon::before,
	.faq-item__icon::after {
		transition-duration: 0.01ms;
	}
}

/* Editor: visa innehållet öppet så det går att redigera */
.block-editor-block-list__layout .faq-item__panel {
	max-height: none;
	visibility: visible;
}