/* Spørsmål og svar, /faq/ (sak 27025, 2026-10-25). Mørk hero med søk og kategorier, spørsmålene som rolige
 * nedtrekk (details/summary, virker uten skript), og personvern og AI tydelig lenket i egen boks.
 * Søket ligger i /assets/js/faq-side.js. Boksen .faq-pv brukes også på hver enkelt svarside (FAQ.hash). */

.faq-hero { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: 9.5rem 0 4.5rem; }
@media (max-width: 991.98px) { .faq-hero { padding: 8rem 0 3rem; } }
.faq-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(50% 70% at 50% 0%, rgba(122,60,255,.2), transparent 70%), radial-gradient(35% 50% at 85% 90%, rgba(255,106,61,.14), transparent 70%), radial-gradient(30% 45% at 10% 80%, rgba(82,140,255,.12), transparent 70%); }
.faq-hero .faq-stov { filter: blur(.7px); }
.faq-hero > .container { position: relative; z-index: 1; }
.faq-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgb(255,181,71); margin: 0 0 1rem; }
.faq-h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.1rem; }
.faq-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 38rem; margin: 0 auto 2rem; }

/* Søkefeltet */
.faq-sok { position: relative; max-width: 560px; margin: 0 auto 1.4rem; }
.faq-sok svg { position: absolute; left: 1.1rem; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: rgba(255,255,255,.6); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.faq-sok input { width: 100%; height: 56px; padding: 0 1.2rem 0 3.1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07);
    color: rgb(255,255,255); font-size: 1.05rem; outline: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.faq-sok input::placeholder { color: rgba(255,255,255,.55); }
.faq-sok input:focus { border-color: rgba(255,181,71,.7); background: rgba(255,255,255,.1); box-shadow: 0 0 0 4px rgba(255,140,60,.18); }
.faq-sok input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }

/* Kategoriene som lenker */
.faq-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.faq-hero .faq-chips a.faq-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 99px; font-size: .88rem; font-weight: 600;
    color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .2s ease, color .2s ease; }

.faq-hero .faq-chips a.faq-chip:hover { color: rgb(255,255,255); background: rgba(255,255,255,.14); text-decoration: none; }
.faq-hero .faq-chips a.faq-chip.pv { color: rgb(255,255,255); background: linear-gradient(90deg, rgba(122,60,255,.55), rgba(82,140,255,.45)); box-shadow: none; }
.faq-hero .faq-chip.pv svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Innholdet */
.faq-innhold { padding: 4.5rem 0 5rem; }
.faq-gruppe { margin-bottom: 2.8rem; scroll-margin-top: 6rem; }
.faq-kat { display: flex; align-items: center; gap: .7rem; font-size: 1.35rem; font-weight: 800; margin: 0 0 1rem; }
.faq-kat::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgb(255,181,71), rgb(255,61,139)); }
.faq-q { border-radius: 14px; background: rgb(255,255,255); box-shadow: 0 0 0 1px rgba(17,24,39,.07), 0 14px 34px -28px rgba(17,24,39,.4); margin-bottom: .7rem; transition: box-shadow .25s ease; }
.faq-q[open] { box-shadow: 0 0 0 1px rgba(204,74,21,.25), 0 20px 44px -28px rgba(17,24,39,.45); }
.faq-q summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: 700; line-height: 1.4; color: rgb(31,41,55); }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary:hover { color: rgb(196,67,15); }
.faq-q summary:focus-visible { outline: 2px solid rgb(196,67,15); outline-offset: 2px; border-radius: 14px; }
.faq-q summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgb(250,243,239); transition: background .25s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.faq-q summary i::before, .faq-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: rgb(196,67,15); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.faq-q summary i::after { transform: rotate(90deg); }
.faq-q[open] summary i { background: rgb(196,67,15); transform: rotate(180deg); }
.faq-q[open] summary i::before, .faq-q[open] summary i::after { background: rgb(255,255,255); }
.faq-q[open] summary i::after { transform: rotate(0deg); }
.faq-svar { padding: 0 1.3rem 1.3rem; }
.faq-svar p { margin: 0 0 .9rem; font-size: 1rem; line-height: 1.65; color: rgb(75,85,99); }
.faq-q[open] .faq-svar { animation: faq-inn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes faq-inn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faq-les { font-size: .92rem; font-weight: 700; color: rgb(196,67,15); }
.faq-q mark { padding: 0 .1em; border-radius: 3px; background: rgba(255,181,71,.35); color: inherit; }
.faq-ingen { padding: 1.4rem 1.3rem; border-radius: 14px; background: rgb(250,243,239); font-weight: 600; }
.faq-skjult { display: none !important; }

/* Sidekolonnen: personvern og AI, og «fant du ikke svaret» */
.faq-side { position: sticky; top: 6.5rem; display: grid; gap: 1.2rem; }
@media (max-width: 991.98px) { .faq-side { position: static; margin-top: 1rem; } }
a.faq-pv { position: relative; display: block; overflow: hidden; padding: 1.6rem 1.5rem 1.5rem; border-radius: 18px; color: rgb(255,255,255);
    background: linear-gradient(140deg, rgb(37,32,74), rgb(24,24,30) 70%); box-shadow: 0 30px 60px -36px rgba(37,32,74,.9); transition: transform .3s ease, box-shadow .3s ease; }
.faq-pv::before { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(122,120,233,.5), transparent 70%); }
a.faq-pv:hover { color: rgb(255,255,255); text-decoration: none; transform: translateY(-3px); box-shadow: 0 36px 70px -36px rgba(79,70,229,.9); }
.faq-pv-ikon { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1rem;
    background: linear-gradient(135deg, rgb(79,70,229), rgb(82,205,255)); box-shadow: 0 10px 24px -8px rgba(82,140,255,.8); }
.faq-pv-ikon svg { width: 24px; height: 24px; fill: none; stroke: rgb(255,255,255); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faq-pv-tag { position: relative; display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(165,180,252); margin-bottom: .3rem; }
.faq-pv b { position: relative; display: block; color: rgb(255,255,255); font-size: 1.3rem; font-weight: 800; line-height: 1.25; margin-bottom: .5rem; }
.faq-pv-tekst { position: relative; display: block; font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,.75); margin-bottom: 1.1rem; }
.faq-pv-knapp { position: relative; display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; font-weight: 700; color: rgb(255,181,71); }
.faq-spor { padding: 1.4rem 1.5rem; border-radius: 18px; background: rgb(250,243,239); }
.faq-spor b { display: block; font-size: 1.1rem; margin-bottom: .3rem; }
.faq-spor p { margin: 0 0 1rem; color: rgb(75,85,99); }

/* Svarsidene (FAQ.hash): mørk hero med sti, tittel og «Kort svar», svaret med tydelig typografi */
.faq-art-hero { padding-bottom: 3.5rem; }
.faq-art-sti { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.2rem; font-size: .85rem; color: rgba(255,255,255,.6); }
.faq-hero nav.faq-art-sti a { color: rgba(255,255,255,.75); }
.faq-hero nav.faq-art-sti a:hover { color: rgb(255,255,255); }
.faq-art-sti span:last-child { color: rgb(255,181,71); font-weight: 700; }
.faq-art-h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.6rem; }
.faq-art-kort { position: relative; padding: 1.3rem 1.5rem 1.4rem; border-radius: 16px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.faq-art-kort::before { content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 3px; border-radius: 2px; background: linear-gradient(rgb(255,181,71), rgb(255,61,139)); }
.faq-art-kort-tag { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(255,181,71); margin-bottom: .4rem; }
.faq-art-kort p { margin: 0; font-size: 1.12rem; line-height: 1.6; color: rgba(255,255,255,.88); }
.faq-art { font-size: 1.05rem; line-height: 1.7; color: rgb(55,65,81); }
.faq-art h2 { display: flex; align-items: center; gap: .7rem; margin: 2.2rem 0 .8rem; font-size: 1.4rem; font-weight: 800; color: rgb(31,41,55); }
.faq-art h2::before { content: ""; flex: none; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgb(255,181,71), rgb(255,61,139)); }
.faq-art > h2:first-child { margin-top: 0; }
.faq-art h3 { margin: 1.6rem 0 .5rem; font-size: 1.12rem; font-weight: 800; color: rgb(31,41,55); }
.faq-art ul { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .6rem; }
.faq-art ul li { position: relative; padding: .8rem 1rem .8rem 2.6rem; border-radius: 12px; background: rgb(255,255,255); box-shadow: 0 0 0 1px rgba(17,24,39,.07); }
.faq-art ul li::before { content: ""; position: absolute; left: 1rem; top: 1.25rem; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, rgb(255,181,71), rgb(255,61,139)); box-shadow: 0 0 0 4px rgba(255,106,61,.12); }
.faq-art strong { color: rgb(31,41,55); }
.faq-art-tilbake { display: inline-block; margin-top: 1.5rem; font-weight: 700; }
.faq-andre { padding: 1.3rem 1.4rem; border-radius: 18px; background: rgb(255,255,255); box-shadow: 0 0 0 1px rgba(17,24,39,.07), 0 18px 40px -32px rgba(17,24,39,.45); }
.faq-andre b { display: block; font-size: 1.05rem; margin-bottom: .7rem; }
.faq-andre ul { list-style: none; margin: 0; padding: 0; }
.faq-andre li + li { border-top: 1px solid rgba(17,24,39,.07); }
.faq-andre a { display: block; padding: .55rem 0; font-size: .92rem; line-height: 1.4; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .faq-q[open] .faq-svar { animation: none; } .faq-pv, .faq-pv:hover { transition: none; transform: none; } }