/* Tjenestesidene (Tjenesteside.hash, ca. 40 sider) – felles utseende fra sak 27025, 2026-10-25.
 * Mørk hero som på de skreddersydde sidene, med effekten valgt i feltet «Hero-effekt» (Automatisk viser ikonet eller
 * fotoet, Live 3D bruker 3d-hero.js, Partikler bruker dops-fx-energy). Stilene som før lå i innskutte <style>-blokker
 * i malen (seksjoner, andre portaler, skjemaet), ligger nå her. */

/* ---- Hero ---------------------------------------------------------------------------------------------- */
.tjs-hero { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: 9rem 0 4.5rem; }
@media (max-width: 991.98px) { .tjs-hero { padding: 7.5rem 0 3rem; } }
.tjs-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(45% 60% at 76% 50%, rgba(255,106,61,.14), transparent 70%), radial-gradient(35% 45% at 92% 10%, rgba(122,60,255,.16), transparent 70%), radial-gradient(30% 40% at 8% 90%, rgba(82,140,255,.12), transparent 70%); }
.tjs-hero .tjs-stov { filter: blur(.7px); }
.tjs-hero > .container { position: relative; z-index: 1; }
.tjs-hero nav.tjs-sti { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.1rem; font-size: .85rem; color: rgba(255,255,255,.6); }
.tjs-hero nav.tjs-sti a { color: rgba(255,255,255,.75); text-decoration: none; }
.tjs-hero nav.tjs-sti a:hover { color: rgb(255,255,255); }
.tjs-hero nav.tjs-sti span[aria-current] { color: rgb(255,181,71); font-weight: 700; }
.tjs-h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; hyphens: manual; }
.tjs-lead { font-size: 1.2rem; line-height: 1.55; color: rgb(255,255,255); margin: 0 0 1rem; max-width: 36rem; }
.tjs-innledning { font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.75); margin: 0 0 2rem; max-width: 36rem; }

/* Visuelt element til høyre */
.tjs-visuell { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 991.98px) { .tjs-visuell { height: 260px; margin-top: 2rem; } }
.tjs-visuell::before { content: ""; position: absolute; inset: 18% 20%; border-radius: 50%; filter: blur(60px); opacity: .5; z-index: -1;
    background: radial-gradient(circle, rgba(255,106,61,.55), rgba(122,60,255,.35) 60%, transparent 75%); }
.tjs-visuell .dops-fx-plass { position: absolute; inset: 0; z-index: -1; }
/* Ikon: svever rolig, med glød og et lite lysskinn */
.tjs-ikon { width: min(300px, 70%); aspect-ratio: 1; border-radius: 22%; animation: tjs-sveve 7s ease-in-out infinite;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)) drop-shadow(0 0 40px rgba(255,140,60,.25)); }
.tjs-ikon img { display: block; width: 100%; height: 100%; }
@keyframes tjs-sveve { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
/* Foto: rammet inn med runde hjørner */
.tjs-foto { margin: 0; width: 100%; max-width: 560px; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -36px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1); }
.tjs-foto img { display: block; width: 100%; height: 100%; max-height: 400px; object-fit: cover; }
/* Live 3D */
.tjs-3d { width: 100%; height: 100%; }
.tjs-3d .d3-lerret { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .tjs-ikon { animation: none; } }

/* ---- Seksjoner med bilde og tekst (flyttet fra malen) ------------------------------------------------------ */
@media (max-width: 991.98px) {
    .ns2-rad .ns2-bilde { margin-bottom: 2rem; }
    .ns2-rad + .ns2-rad { margin-top: 4rem; }
}
@media (min-width: 1200px) {
    .ns2-rad .ns2-bilde, .ns2-rad .ns2-tekst { flex: 0 0 50%; max-width: 50%; }
}
.ns2-tekst p { font-size: 1.125rem; }

/* ---- «Andre portaler»-kortene (flyttet fra malen) ---------------------------------------------------------- */
.dops-portalkort { display: flex; align-items: center; width: 100%; height: 100%; padding: .875rem 1rem; background: rgb(255,255,255); border-radius: .5rem; box-shadow: 0 .125rem .5rem rgba(35,35,35,.08); color: rgb(35,35,35); text-decoration: none; }
.dops-portalkort:hover { color: rgb(35,35,35); text-decoration: none; }
.dops-portalkort img { flex: 0 0 44px; margin-right: .875rem; }
.dops-portalkort span { font-weight: 700; line-height: 1.25; font-size: 1rem; color: rgb(35,35,35); }

/* ---- Oransje kort i beskrivelsen (flyttet fra malen) ------------------------------------------------------- */
main .card.bg-secondary.text-white { background-color: rgb(196,67,15) !important; }

/* ---- Skjemaet nederst (flyttet fra malen) ------------------------------------------------------------------ */
@media (max-width: 991.98px) { .sf-kontainer { max-width: none; } }
@media (min-width: 1200px) { .sf-kontainer { max-width: 960px; } }
#Tjenesteside .sf-blokk { border-top: 1px solid rgb(235,235,235); margin-top: 1.25rem; padding-top: 1rem; }
@media (min-width: 768px) { #Tjenesteside .sf-blokk { border-top: 0; margin-top: 0; padding-top: 0; } #Tjenesteside .sf-hoyre { border-left: 1px solid rgb(235,235,235); } }
#Tjenesteside .sf-tittel { display: block; font-weight: 600; color: rgb(35,35,35); margin-bottom: .125rem; }
#Tjenesteside .sf-sporsmal { display: block; font-size: .875rem; color: rgb(73,80,87); margin-bottom: .375rem; }
#Tjenesteside .sf-valg { display: flex; flex-wrap: wrap; gap: .375rem; }
#Tjenesteside .sf-valg input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
#Tjenesteside .sf-valg label { margin: 0; padding: .4375rem .875rem; border: 1px solid rgb(196,196,196); border-radius: .15625rem; background: rgb(255,255,255); color: rgb(73,80,87); font-size: .9375rem; line-height: 1.4; cursor: pointer; }
#Tjenesteside .sf-valg label:hover { border-color: rgb(99,99,99); }
#Tjenesteside .sf-valg input:checked + label { background: rgb(242,101,52); border-color: rgb(242,101,52); color: rgb(255,255,255); }
#Tjenesteside .sf-valg input:focus-visible + label { box-shadow: 0 0 0 .2rem rgba(35,35,35,.25); }
#Tjenesteside .sf-hjelp { display: block; margin-top: .25rem; font-size: .8125rem; color: rgb(95,103,110); }