/* Solkart felles topbar + footer (omstrukturert 15. sept 2026).
 * Samme regler som nav.js bygger. Sider som lenker denne fila (og markerer
 * lenken med data-sk-nav-css) får stilen med én gang, uten å vente på
 * nav.js — nødvendig når footeren står statisk i HTML-en for crawlere.
 * Her ligger også brødsmuler, svar-klar innledning og «relaterte verktøy»
 * som verktøysidene bruker. */

.sk-nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px 24px;
  background: oklch(0.99 0.005 85 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(0.86 0.04 75 / 0.7);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.sk-nav__brand {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px; font-weight: 600; letter-spacing: 0.16em;
  color: oklch(0.25 0.05 55); text-decoration: none; white-space: nowrap;
}
.sk-nav__links { display: flex; align-items: center; gap: 22px; }
.sk-nav__item { position: relative; display: flex; align-items: center; gap: 2px; }
.sk-nav__item > a {
  font-size: 13.5px; font-weight: 500; color: oklch(0.38 0.04 60);
  text-decoration: none; white-space: nowrap; padding: 4px 0;
}
.sk-nav__item > a:hover { color: oklch(0.25 0.06 50); }
.sk-nav__item > a.on {
  color: oklch(0.3 0.1 45); font-weight: 600;
  border-bottom: 2px solid oklch(0.55 0.18 45); padding-bottom: 2px;
}
.sk-nav__caret {
  border: 0; background: none; font: inherit; font-size: 12px; color: oklch(0.45 0.04 60);
  cursor: pointer; padding: 4px 2px; line-height: 1;
}
.sk-nav__caret:hover { color: oklch(0.25 0.06 50); }
.sk-cta {
  font-size: 12.5px; font-weight: 600; color: oklch(0.45 0.14 35); text-decoration: none;
  border: 1px solid oklch(0.8 0.06 50); border-radius: 999px; padding: 6px 12px; white-space: nowrap;
  margin-left: 6px;
}
.sk-cta:hover { background: oklch(0.96 0.03 60); color: oklch(0.38 0.14 35); }
.sk-cta::after { content: " \2192"; }

/* Nedtrekket under Verktøy: vises ved hover, tastaturfokus eller klikk på pilen. */
.sk-menu {
  position: absolute; top: calc(100% + 10px); left: -12px; z-index: 300;
  width: 560px; max-width: calc(100vw - 32px);
  background: oklch(0.99 0.005 85); border: 1px solid oklch(0.86 0.04 75); border-radius: 14px;
  box-shadow: 0 18px 44px oklch(0.35 0.05 55 / 0.18); padding: 14px 16px 10px;
  display: none; text-align: left;
}
.sk-nav__item--menu:hover .sk-menu, .sk-nav__item--menu:focus-within .sk-menu, .sk-nav__item--menu.open .sk-menu { display: block; }
.sk-nav__item--menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.sk-menu__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.sk-menu__title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: oklch(0.5 0.05 55); margin: 4px 0 6px;
}
.sk-menu__item { display: block; text-decoration: none; padding: 6px 8px; border-radius: 8px; }
.sk-menu__item:hover { background: oklch(0.95 0.03 80); }
.sk-menu__label { display: block; font-size: 13.5px; font-weight: 600; color: oklch(0.25 0.05 55); }
.sk-menu__hint { display: block; font-size: 12px; color: oklch(0.5 0.04 58); }
.sk-menu__foot {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid oklch(0.9 0.03 75); font-size: 12.5px;
}
.sk-menu__foot a { color: oklch(0.45 0.12 40); text-decoration: none; font-weight: 600; }
.sk-menu__foot a:hover { text-decoration: underline; }

/* Mobil: hamburger og fullbreddeliste */
.sk-burger { display: none; border: 0; background: none; cursor: pointer; padding: 8px; }
.sk-burger span { display: block; width: 22px; height: 2px; background: oklch(0.3 0.05 55); margin: 4px 0; border-radius: 2px; }
@media (max-width: 860px) {
  .sk-nav { padding: 10px 16px; flex-wrap: wrap; }
  .sk-burger { display: block; }
  .sk-nav__links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 4px; }
  .sk-nav--open .sk-nav__links { display: flex; max-height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sk-nav__item--menu::after { display: none; }
  .sk-nav__item { justify-content: space-between; border-top: 1px solid oklch(0.9 0.03 75); padding: 10px 4px; flex-wrap: wrap; }
  .sk-nav__item > a { font-size: 15px; }
  .sk-nav__item > a.on { border-bottom: 0; }
  .sk-nav__caret { font-size: 16px; padding: 4px 10px; }
  .sk-nav__item--menu:hover .sk-menu, .sk-nav__item--menu:focus-within .sk-menu { display: none; }
  .sk-nav__item--menu.open .sk-menu { display: block; }
  .sk-menu { position: static; width: 100%; max-width: none; box-shadow: none; border: 0; padding: 6px 0 0; background: none; flex-basis: 100%; }
  .sk-menu__cols { grid-template-columns: 1fr; }
  .sk-cta { margin: 12px 4px 6px; text-align: center; }
}

/* Brødsmuler (verktøysider og dokumentasjon) */
.sk-crumbs { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12.5px; color: oklch(0.5 0.04 58); margin: 0 0 14px; }
.sk-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.sk-crumbs li + li::before { content: "\203A"; margin: 0 6px 0 2px; color: oklch(0.65 0.03 60); }
.sk-crumbs a { color: oklch(0.45 0.1 40); text-decoration: none; }
.sk-crumbs a:hover { text-decoration: underline; }

/* Svar-klar innledning, under verktøyet i «Slik regnes det»:
   definisjon, grunnlag, resultat, tilgang, dato. */
.sk-lead {
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 15.5px; line-height: 1.55; color: oklch(0.3 0.04 55);
  max-width: 86ch; margin: 6px 0 22px; padding: 12px 16px; border-left: 3px solid oklch(0.55 0.18 45);
  background: oklch(0.98 0.015 80 / 0.7); border-radius: 0 10px 10px 0;
}
.sk-lead b { color: oklch(0.22 0.05 55); }
.sk-lead small { display: block; margin-top: 6px; font-size: 12.5px; color: oklch(0.5 0.04 58); }

/* Metode, FAQ, relaterte verktøy og CTA-kortet nederst på verktøysidene. */
.sk-related { font-family: 'DM Sans', system-ui, sans-serif; max-width: 1100px; margin: 36px auto 40px; padding: 0 24px; color: oklch(0.3 0.04 55); }
.sk-related h2 { font-family: 'Newsreader', Georgia, serif; font-size: 22px; font-weight: 600; margin: 26px 0 10px; color: oklch(0.22 0.05 55); }
.sk-related .sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sk-related .sk-tile { display: block; text-decoration: none; color: inherit; background: oklch(0.99 0.005 85 / 0.8); border: 1px solid oklch(0.88 0.03 75); border-radius: 12px; padding: 14px 16px; }
.sk-related .sk-tile:hover { border-color: oklch(0.75 0.08 50); }
.sk-related .sk-tile b { display: block; font-size: 15px; color: oklch(0.25 0.06 50); margin-bottom: 3px; }
.sk-related .sk-tile span { font-size: 13px; color: oklch(0.45 0.04 58); }
/* Spoersmaalene i to spalter naar det er plass. Hvert spoersmaal og svar
   ligger i samme .sk-qa, saa et svar aldri havner i en annen spalte enn
   spoersmaalet sitt. */
.sk-related dl { margin: 0; font-size: 14px; line-height: 1.5; }
/* :has() gjør at bare lister med ruter blir rutenett. En liste med bare
   dt/dd (eldre sider, og nettlesere uten :has()) blir staaende som en
   vanlig enkeltspalte i stedet for aa sprette fra hverandre. */
.sk-related dl:has(.sk-qa) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 2px 44px; align-items: start;
}
.sk-related .sk-qa { break-inside: avoid; }
.sk-related .sk-qa:first-child dt, .sk-related .sk-qa:nth-child(2) dt { margin-top: 2px; }
.sk-related dt { font-weight: 600; margin-top: 10px; color: oklch(0.25 0.05 55); }
.sk-related dd { margin: 2px 0 0; color: oklch(0.38 0.04 58); }
.sk-related .sk-method { font-size: 14px; line-height: 1.55; color: oklch(0.38 0.04 58); max-width: 88ch; }
.sk-related .sk-method b { color: oklch(0.25 0.05 55); }
.sk-related .sk-method a, .sk-related dd a { color: oklch(0.45 0.12 40); }
.sk-cta-card {
  font-family: 'DM Sans', system-ui, sans-serif; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  background: oklch(0.96 0.03 70); border: 1px solid oklch(0.85 0.05 65); border-radius: 14px; padding: 16px 20px; margin: 26px 0 0;
}
.sk-cta-card p { margin: 0; font-size: 14.5px; color: oklch(0.3 0.05 55); max-width: 62ch; }
.sk-cta-card p b { color: oklch(0.22 0.06 50); }
.sk-cta-card a { font-size: 14px; font-weight: 600; color: #fff; background: oklch(0.55 0.18 35); text-decoration: none; padding: 10px 16px; border-radius: 10px; white-space: nowrap; }
.sk-cta-card a:hover { background: oklch(0.48 0.18 35); }

.sk-footer {
  background: oklch(0.28 0.04 55);
  color: oklch(0.85 0.03 75);
  font-family: 'DM Sans', system-ui, sans-serif;
  padding: 36px 24px 28px;
  position: relative; z-index: 1;
}
.sk-footer__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px;
}
.sk-footer h4 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 15px; font-weight: 600; color: oklch(0.95 0.03 80); margin: 0 0 10px;
}
.sk-footer ul { list-style: none; margin: 0; padding: 0; }
.sk-footer li { margin-bottom: 7px; }
.sk-footer a { font-size: 13px; color: oklch(0.78 0.04 75); text-decoration: none; }
.sk-footer a:hover { color: oklch(0.92 0.06 80); text-decoration: underline; }
.sk-footer__org {
  max-width: 1100px; margin: 26px auto 0; padding-top: 16px;
  border-top: 1px solid oklch(0.4 0.04 60);
  font-size: 12px; color: oklch(0.68 0.03 70); line-height: 1.6;
}
.sk-footer__org a { font-size: 12px; color: oklch(0.78 0.05 75); }