/*
 * Mørk modus: håndjusteringene (inc/mork.php).
 *
 * De fleste fargene kommer fra tvillingene navn.mork.css, som
 * scripts/mork/lag_mork.py lager. Her står det skriptet ikke kan vite:
 * grunnfargen, logoene, bilder som må snus og steder der den beregnede
 * fargen ikke ble god nok. Filen lastes sist.
 */

html[data-tema="mork"] {
	color-scheme: dark;
	background: #101117;
}

html[data-tema="mork"] body {
	background: #101117;
	color: #ebf0fe;
}

/* Fargene glir over når bryteren trykkes (assets/topp/topp.js) */
html.tema-bytter,
html.tema-bytter *,
html.tema-bytter *::before,
html.tema-bytter *::after {
	transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, box-shadow .35s ease, transform .3s ease, opacity .25s ease !important;
}

@media (prefers-reduced-motion: reduce) {
	html.tema-bytter,
	html.tema-bytter *,
	html.tema-bytter *::before,
	html.tema-bytter *::after { transition: none !important; }
}

/* ---------- Logoene ---------- */

/* Ikonet med hvitt smil, og navnet i lys tekst */
html[data-tema="mork"] .tp-logo .tp-logo-ikon:not(.tp-logo-hvit),
html[data-tema="mork"] .bn-logo img:not(.bn-logo-hvit) { display: none; }
html[data-tema="mork"] .tp-logo .tp-logo-hvit,
html[data-tema="mork"] .bn-logo .bn-logo-hvit { display: block; }
/* Logoen i de andre toppene og bunnene (kampanjesidene og de gamle malene) */
:root:not([data-tema="mork"]) img.hh-logo-hvit,
html[data-tema="mork"] img.hh-logo-sort { display: none !important; }
html[data-tema="mork"] :is(.tp-logo-navn, .bn-logo-navn) { color: #fff; }

/* Kundelogoene er mørke på lys bunn, så de blir hvite */
html[data-tema="mork"] .cl-marquee-section .logo-cell img[src] {
	filter: brightness(0) invert(1);
	opacity: .6;
}

/* ---------- Bilder ---------- */

/* Videoen av heltene på forsiden har lys bakgrunn, så i mørk modus står
   den som et lyst kort med runde hjørner */
html[data-tema="mork"] .pf-hero-video video { border-radius: 28px; -webkit-mask-image: none; mask-image: none; }

/* Det samme for heltene ved bordet i avslutningen med en samtale (/priser/)
   heltene i stolen nederst på heltesidene og illustrasjonene på /heltene/.
   Bildet har hvit bakgrunn, og de hvite stolene gjør at den ikke kan tas bort */
html[data-tema="mork"] .pf-samtale--samtale .pf-samtale-bilde img,
html[data-tema="mork"] .pf-avslutt-side-bilde img,
html[data-tema="mork"] .hr-bilde--tegning img { border-radius: 28px; }

/* Illustrasjonen med lyse skyer blir kveld, så den lyse teksten kan leses */
html[data-tema="mork"] .pf-avslutt-bilde { filter: brightness(.5) saturate(.92); }

/* ---------- Det du alltid får med (/priser/, nettside.css) ---------- */

/* Flatene bak scenene har fargen i --scene, som lag_mork.py ikke kjenner,
   så de mørke tonene står her: samme fargetone som i lys modus, mørk nok
   til at kortene i scenene (#101117) skiller seg ut */
html[data-tema="mork"] .pa-scene { --scene: #251f31; }
html[data-tema="mork"] .pa-flis--plan .pa-scene,
html[data-tema="mork"] .pa-flis--sikkerhet .pa-scene { --scene: #11281e; }
html[data-tema="mork"] .pa-flis--resultater .pa-scene { --scene: #182334; }
html[data-tema="mork"] .pa-flis--godkjenning .pa-scene { --scene: #301e11; }
html[data-tema="mork"] .pa-flis--rytme .pa-scene { --scene: #28230e; }
html[data-tema="mork"] .pa-plan-kvartal { --kvartal: #151c19; --kvartal-tekst: #9fa5b2; }

/* ---------- Toppen på tjenestesidene (.pf-sh, heltside.css) ---------- */

/* Lysflekkene har fargene i --sh-a og --sh-b, som lag_mork.py ikke kjenner.
   Uten disse står det to hvite flekker på den mørke bakgrunnen */
html[data-tema="mork"] .pf-sh { --sh-a: #221d33; --sh-b: #2a1a25; }
html[data-tema="mork"] .pf-sh--gronn { --sh-a: #11281e; --sh-b: #13222e; }
html[data-tema="mork"] .pf-sh--blaa { --sh-a: #1b2040; --sh-b: #13222e; }
html[data-tema="mork"] .pf-sh--rosa { --sh-a: #2a1a25; --sh-b: #2a1d14; }
html[data-tema="mork"] .pf-sh--gul { --sh-a: #28230e; --sh-b: #221d33; }

/* Filmen der Viktor bygger og flisene i Alt som er med (bygging.css):
   fargene står i variabler, som lag_mork.py ikke kjenner */
html[data-tema="mork"] .bf {
	--bf-merke: #2f8f8a;
	--bf-merke-lys: #16302f;
	--bf-kant: #2c2a3a;
	--bf-strek: #2a2836;
	--bf-blekk: #ebe9f5;
	--bf-gra: #a19eb5;
}
html[data-tema="mork"] .bf--nettbutikk { --bf-merke: #5b8199; --bf-merke-lys: #26231c; }
html[data-tema="mork"] .lev {
	--lev-gronn-lys: #12301f;
	--lev-kant: #2c2a3a;
	--lev-strek: #2a2836;
	--lev-gra: #a19eb5;
}

/* Logoene til regnskapssystemene er laget for lys bunn, så radene forblir lyse */
html[data-tema="mork"] .lev-system { background: #f4f3f8; }

/* Logoene til WordPress og WooCommerce i toppen, lysere så de synes */
html[data-tema="mork"] .pf-sh-plattform--wordpress { --merke: #5fb0e0; }
html[data-tema="mork"] .pf-sh-plattform--woocommerce { --merke: #b48ee4; }

/* ---------- Farger satt rett i HTML-en ---------- */

/* Papirfargene brukes bare som bakgrunn i style-attributter. Reglene i
   stilarkene har fått egne verdier, så det er bare disse som følger med. */
html[data-tema="mork"] {
	--color-paper: #13151b;
	--color-paper-warm: #1d1a14;
}

/* Seksjoner med hvit bakgrunn i feltene (kundeomtalene o.l.) */
html[data-tema="mork"] section[style*="background: #ffffff" i],
html[data-tema="mork"] section[style*="background:#ffffff" i],
html[data-tema="mork"] section[style*="background: #fff;" i],
html[data-tema="mork"] section[style*="background:#fff;" i] { background: #101117 !important; }

html[data-tema="mork"] [style*="background:#F5F1FE" i] { background: #221b36 !important; color: #b296ff !important; }
html[data-tema="mork"] [style*="background:#FBFAFE" i] { background: #151319 !important; border-color: rgba(255, 255, 255, .1) !important; }
html[data-tema="mork"] [style*="background:#f3f2ec" i] { background: #1c1b14 !important; }
html[data-tema="mork"] [style*="background:#f6f8f5" i],
html[data-tema="mork"] [style*="background:#f7f9f6" i] { background: #141813 !important; }
html[data-tema="mork"] [style*="linear-gradient(160deg, #F4F0FF" i] { background: linear-gradient(160deg, #1b191f 0%, #19161c 60%, #17141a 100%) !important; }
html[data-tema="mork"] [style*="linear-gradient(to right, #ffffff 0%" i] { background: linear-gradient(to right, #101117 0%, rgba(16, 17, 23, .55) 14%, rgba(16, 17, 23, 0) 36%) !important; }

/* ---------- Detaljer ---------- */

/* Strekene i menyknappen er bakgrunnsfarge, men skal oppføre seg som tekst */
html[data-tema="mork"] .tp-burger span { background: #ebf0fe; }

/* Den svarte logoen inne i illustrasjonene av appen */
html[data-tema="mork"] img[src*="logo-black-version"] { filter: invert(1) hue-rotate(180deg); }

/* Toppen er et kort, og skal skille seg litt fra den mørke bakgrunnen */
html[data-tema="mork"] .tp-rad::before {
	background-color: rgba(24, 25, 34, .88);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -12px rgba(0, 0, 0, .55);
}
html[data-tema="mork"] .tp.er-apen .tp-rad::before,
html[data-tema="mork"] .tp.er-mobil .tp-rad::before { background-color: #181922; }
html[data-tema="mork"] .tp-mobil,
html[data-tema="mork"] .tp-mobil-bunn { background: #181922; }

/* Kundeomtalene: logoene er mørke på lys bunn, så de blir hvite her */
html[data-tema="mork"] .ko-logo { filter: brightness(0) invert(1); opacity: .85; }

/* ---------- Forside v3 (assets/forside-v3/) ---------- */

/* Knappene er nesten svarte i lys modus, så her blir de lyse med mørk tekst.
   Toppen og de andre fylte knappene får tilbake lilla */
html[data-tema="mork"] body.v3 { --knapp: #7c3aed; --knapp-hover: #6d28d9; }
html[data-tema="mork"] body.v3 :is(.v3-knapp, .v3-app-godkjenn, .v3-godkjenn-knapper b, .v3-pakke-merke) { border-color: #f4f3f8; background: #f4f3f8; color: #0c0b14 !important; }
html[data-tema="mork"] body.v3 .v3-knapp:hover { border-color: #ddd6fe; background: #ddd6fe; }
html[data-tema="mork"] body.v3 .v3-knapp.v3-knapp--rolig { border-color: rgba(255, 255, 255, .16); background: transparent; color: #f4f3f8 !important; }
html[data-tema="mork"] body.v3 .v3-knapp.v3-knapp--rolig:hover { border-color: #f4f3f8; background: transparent; }
html[data-tema="mork"] body.v3 .v3-pakker > li.v3-pakke--anbefalt { border-color: #f4f3f8; }

/* Rammen rundt appen og logoene, som er sorte i lys modus */
html[data-tema="mork"] body.v3 .v3-app { outline-color: rgba(255, 255, 255, .05); }
html[data-tema="mork"] body.v3 .v3-logoer img { filter: brightness(0) invert(1); opacity: .5; }
html[data-tema="mork"] body.v3 .v3-sporsmal li { border-top-color: rgba(255, 255, 255, .7); }

/* Den varme flaten blir en nøytral, litt lysere mørk flate, ikke brun */
html[data-tema="mork"] body.v3 .v3-flate { background: #14141c; }

/* Plusstegnet i spørsmålene er tegnet med bakgrunnsfarge */
html[data-tema="mork"] body.v3 .v3-faq summary span::before,
html[data-tema="mork"] body.v3 .v3-faq summary span::after { background: #f4f3f8; }

/* ---------- Premiumlaget (assets/premium/) ---------- */

/* Den varme flaten blir en nøytral, litt lysere mørk flate, ikke brun */
html[data-tema="mork"] body.premium :is(.pf-natt, .pf-avslutt) { background: #14141c !important; }
html[data-tema="mork"] body.premium .pf-spm { background: linear-gradient(180deg, #101117 0%, #14141c 14%, #14141c 86%, #101117 100%); }

/* Markedsføring på autopilot (assets/plattform/autopilot.css): pillen står
   hvit med mørk tekst også når siden har blitt mørk, så setningen lyser mot
   flommen. Knotten med Felix beholder den lyse grønne flaten */
html[data-tema="mork"] .ap-spiller.er-flom .ap-pille,
html[data-tema="mork"] .ap:not(.ap-spiller) .ap-pille { background-color: #fff; color: #1b1733; }
html[data-tema="mork"] .ap-knott { background-color: #ecf4de; }
/* Når siden blir mørk eller lys bak flommen, glir bare toppen over, som ligger
   over flommen. Resten av siden bytter på en gang bak den (autopilot.js) */
html.tema-topp .tp,
html.tema-topp .tp *,
html.tema-topp .tp *::before,
html.tema-topp .tp *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease !important; }
@media (prefers-reduced-motion: reduce) {
	html.tema-topp .tp,
	html.tema-topp .tp *,
	html.tema-topp .tp *::before,
	html.tema-topp .tp *::after { transition: none !important; }
}
/* Flommen er nøyaktig fargen til siden, så den går i ett med seksjonene under */
html[data-tema="mork"] .ap-flom { background-color: #101117; }

/* Kundene forteller (assets/plattform/liv.css): logoene står i en farge og
   må være lyse når kortene og merket på bildet blir mørke */
html[data-tema="mork"] .kf-kort .kf-logo,
html[data-tema="mork"] .kf-kort .kf-merkelogo .kf-logo { filter: brightness(0) invert(1); }

/* Månedlig og årlig på pakkesidene (assets/plattform/pakke.css): det valgte
   valget blir en lys knapp, så teksten og sparemerket må være mørke */
html[data-tema="mork"] .pk-periode button[aria-checked="true"] { color: #101117; }
html[data-tema="mork"] .pk-periode button[aria-checked="true"] .pk-spar { background-color: #dcfce7; color: #15803d; }