/*
 * Spørsmålene som åpnes og lukkes (FAQ), likt på alle sider (inc/topp.php
 * laster stilarket overalt). Designet og størrelsene er de fra artiklene:
 * hvite rader med tynn kant, spørsmålet i 1,08rem og et pluss i en liten
 * sirkel (27.10.2026). Tre varianter av markeringen ser like ut:
 *
 *   details.group.border.rounded-2xl   sidene fra Astro-bygget (heltesidene m.fl.)
 *   .ns-faq-rad                        det nye designet
 *   .ar-faq-rad                        artiklene
 *
 * Holder man over et lukket spørsmål, blir kanten og spørsmålet lilla og
 * plusset lyst lilla. Et åpent spørsmål får en lys lilla flate og spørsmålet
 * i lilla, og plusset snur seg og blir et minus i en fylt lilla sirkel.
 * Svaret glir åpen og toner inn. Ingen skygger. Tastaturfokus får en ring.
 */

:root {
	--faq-kant: #ecebf3;
	--faq-kant-hover: #c4b5fd;
	--faq-kant-apen: #d5c6fb;
	--faq-flate-apen: #faf8ff;
	--faq-blekk: #0a0f1f;
	--faq-lilla: #6712fb;
	--faq-lilla-tekst: #5b21b6;
	--faq-svar: #4a4a62;
	--faq-myk: cubic-bezier(.22, 1, .36, 1);
}

:root body :is(.ns-faq-liste, .ar-faq-liste) { gap: 10px; }

/* Raden */
:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) {
	overflow: hidden;
	border: 1px solid var(--faq-kant);
	border-radius: 18px;
	background: #fff;
	box-shadow: none;
	transition: border-color .2s ease, background-color .3s ease;
}

/* Spørsmålet */
:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	list-style: none;
	cursor: pointer;
}

:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) > summary::-webkit-details-marker { display: none; }

:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) > summary :is(h3, h4) {
	--hh-fs: 1.08rem;
	--hh-lh: 1.4;
	margin: 0;
	color: var(--faq-blekk);
	font-weight: 800;
	text-wrap: pretty;
	transition: color .2s ease;
}

/* Plusset, tegnet med to streker, så det kan bli et minus. I sidene fra
   Astro-bygget er plusset et ikon, som skjules */
:root body :is(.ns-faq-pluss, .ar-faq-pluss, details.group.border.rounded-2xl > summary > span.rounded-full) {
	position: relative;
	display: block;
	flex: none;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: #f5f3fb;
	color: var(--faq-blekk);
	transition: background-color .3s ease, color .3s ease, transform .45s var(--faq-myk);
}

:root body details.group.border.rounded-2xl > summary > span.rounded-full svg { display: none; }

:root body :is(.ns-faq-pluss, .ar-faq-pluss, details.group.border.rounded-2xl > summary > span.rounded-full)::before,
:root body :is(.ns-faq-pluss, .ar-faq-pluss, details.group.border.rounded-2xl > summary > span.rounded-full)::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	/* Langformen, så lag_mork.py lar den stå (kortformen blir gjennomsiktig) */
	background-color: currentColor;
	transform: translate(-50%, -50%);
	transition: transform .45s var(--faq-myk);
}

:root body :is(.ns-faq-pluss, .ar-faq-pluss, details.group.border.rounded-2xl > summary > span.rounded-full)::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Svaret */
:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) > summary + * {
	padding: 0 22px 20px;
	border: 0;
	color: var(--faq-svar);
	font-size: 16px;
	line-height: 1.65;
}

:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) > summary + * p { padding: 0; }
:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) > summary + * > :last-child { margin-bottom: 0; }
:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) > summary + * a { color: #6d28d9; }

/* Holder over et lukket spørsmål */
:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad):not([open]):hover { border-color: var(--faq-kant-hover); }
:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad):not([open]):hover > summary :is(h3, h4) { color: var(--faq-lilla-tekst); }
:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad):not([open]):hover > summary > :is(.ns-faq-pluss, .ar-faq-pluss, span.rounded-full) { background: #ede5ff; color: #6d28d9; }

/* Åpent spørsmål */
:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad)[open] {
	border-color: var(--faq-kant-apen);
	background: var(--faq-flate-apen);
}

:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad)[open] > summary :is(h3, h4) { color: var(--faq-lilla-tekst); }

:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad)[open] > summary > :is(.ns-faq-pluss, .ar-faq-pluss, span.rounded-full) {
	background: var(--faq-lilla);
	color: #fff;
	transform: rotate(180deg);
}

:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad)[open] > summary > :is(.ns-faq-pluss, .ar-faq-pluss, span.rounded-full)::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Tastaturfokus */
:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) > summary:focus-visible {
	outline: 2px solid #7c3aed;
	outline-offset: -2px;
	border-radius: inherit;
}

@media (max-width: 599px) {
	:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) > summary { padding: 18px; }
	:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) > summary + * { padding: 0 18px 18px; }
}

@media (prefers-reduced-motion: no-preference) {
	/* Svaret glir åpen (Chrome og Edge, andre åpner det rett) og toner inn */
	:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad) { interpolate-size: allow-keywords; }

	:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad)::details-content {
		block-size: 0;
		overflow-y: clip;
		transition: block-size .45s var(--faq-myk), content-visibility .45s allow-discrete;
	}

	:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad)[open]::details-content { block-size: auto; }
	:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad)[open] > summary + * { animation: faq-inn .5s var(--faq-myk) both; }
}

@keyframes faq-inn { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
	:root body :is(details.group.border.rounded-2xl, .ns-faq-rad, .ar-faq-rad),
	:root body :is(.ns-faq-pluss, .ar-faq-pluss, details.group.border.rounded-2xl > summary > span.rounded-full),
	:root body :is(.ns-faq-pluss, .ar-faq-pluss, details.group.border.rounded-2xl > summary > span.rounded-full)::before,
	:root body :is(.ns-faq-pluss, .ar-faq-pluss, details.group.border.rounded-2xl > summary > span.rounded-full)::after { transition: none; }
}