/* =========================================================
   CELEBRITIES ASSISTANT , DRAGSPEL (FAQ)
   =========================================================
   Bygger på WordPress egna core/details-block, alltså
   <details> och <summary>.

   Varför native i stället för egen JavaScript-lösning:
   - fungerar utan JS
   - tangentbord, Enter och mellanslag hanteras av webbläsaren
   - skärmläsare får korrekt expanderat-läge gratis
   - Lina kan redigera frågorna som vanliga block

   OBS om FAQ-schema: Google begränsade FAQ rich results till
   myndighets- och hälsosajter, så uppmärkningen ger i praktiken
   ingenting för den här kunden. Vi lägger krutet på läsbarheten
   i stället, vilket är det som faktiskt hjälper besökaren.
   ========================================================= */

.wp-block-details {
	/* Samma läsbredd som brödtexten, så att rubrik och frågor
	   ligger i linje. */
	max-width: min(var(--ca-lasbredd), 100% - 2.5rem);
	margin-inline: auto;
	margin-block: 0;
	border: 1px solid var(--ca-kant);
	border-radius: var(--ca-radie);
	background: var(--ca-vit);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Staplade frågor ska sitta ihop som en lista, inte flyta isär. */
.wp-block-details + .wp-block-details {
	margin-block-start: -1px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.wp-block-details:has(+ .wp-block-details) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.wp-block-details:hover {
	border-color: #c3cadb;
}

.wp-block-details[open] {
	border-color: var(--ca-bla);
	box-shadow: 0 2px 10px rgba(36, 54, 110, 0.08);
	border-radius: var(--ca-radie);
	position: relative;
	z-index: 1;
}

/* ---- Frågan ---- */
.wp-block-details > summary {
	display: flex;
	align-items: flex-start;
	gap: var(--ca-rum-4);
	min-height: var(--ca-traffyta);
	padding: var(--ca-rum-4) var(--ca-rum-6);
	list-style: none;
	cursor: pointer;
	color: var(--ca-bla);
	font-size: var(--ca-text-lg);
	font-weight: 600;
	line-height: 1.35;
	transition: background-color 0.15s ease;
}

/* Bort med webbläsarnas egen triangel. */
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::marker { content: ""; }

.wp-block-details > summary:hover {
	background: rgba(36, 54, 110, 0.04);
}

.wp-block-details > summary:focus-visible {
	outline: 3px solid var(--ca-bla);
	outline-offset: -3px;
	border-radius: var(--ca-radie);
}

/* Plustecken som blir minus. Ritat i CSS, inga bilder och ingen JS. */
.wp-block-details > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-left: auto;
	margin-top: 0.15em;
	border-radius: 50%;
	background:
		linear-gradient(var(--ca-bla), var(--ca-bla)) center / 11px 2px no-repeat,
		linear-gradient(var(--ca-bla), var(--ca-bla)) center / 2px 11px no-repeat,
		var(--ca-bla-ljus);
	transition: transform 0.25s ease, background-color 0.2s ease;
}

.wp-block-details[open] > summary::after {
	/* Den lodräta stapeln roteras bort, kvar blir ett minus. */
	background:
		linear-gradient(var(--ca-vit), var(--ca-vit)) center / 11px 2px no-repeat,
		var(--ca-bla);
	transform: rotate(180deg);
}

/* ---- Svaret ---- */
.wp-block-details > :not(summary) {
	padding-inline: var(--ca-rum-6);
	margin-block: 0 var(--ca-rum-4);
	max-width: none;
}

/* Första stycket ska ligga tätt under frågan. Utan denna nollställning
   staplas summarys nedre padding på styckets egen toppmarginal och det
   blir ett stort tomrum mitt i kortet. */
.wp-block-details > :not(summary):first-of-type {
	margin-block-start: 0;
}

.wp-block-details > :not(summary):last-child {
	margin-block-end: var(--ca-rum-6);
}

.wp-block-details > summary {
	padding-bottom: var(--ca-rum-3);
}

.wp-block-details:not([open]) > summary {
	padding-bottom: var(--ca-rum-4);
}

.wp-block-details p,
.wp-block-details li {
	max-width: none;
	color: var(--ca-text);
}

.wp-block-details ul,
.wp-block-details ol {
	margin-block: var(--ca-rum-3);
	padding-inline-start: var(--ca-rum-6);
}

.wp-block-details li + li { margin-top: var(--ca-rum-2); }

.wp-block-details strong { color: var(--ca-bla); }

/* Mjuk öppning i webbläsare som stödjer det. Faller tillbaka på
   direktvisning i övriga, vilket är helt användbart. */
@supports selector(::details-content) {
	.wp-block-details::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
	}

	.wp-block-details[open]::details-content {
		block-size: auto;
	}
}

/* ---- Avslutande hjälprad under en frågesamling ---- */
.ca-faq-hjalp {
	max-width: min(var(--ca-lasbredd), 100% - 2.5rem);
	margin: var(--ca-rum-12) auto 0;
	padding: var(--ca-rum-6);
	border-radius: var(--ca-radie-stor);
	background: var(--ca-varm);
	text-align: center;
}

.ca-faq-hjalp p { max-width: none; margin: 0 0 var(--ca-rum-4); }