/* Solkart — felles stil for innholdssidene (solceller-*.html).
 * Samme palett og typografi som om.html/produkter.html, men samlet i én
 * fil så sidene deler cache i stedet for å bære hver sin <style>. */

* { box-sizing: border-box; }

body {
  font-family: "DM Sans", system-ui, sans-serif;
  margin: 0;
  color: oklch(0.22 0.04 60);
  line-height: 1.65;
  background:
    radial-gradient(ellipse at 80% -10%, oklch(0.92 0.13 80) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 110%, oklch(0.88 0.10 50) 0%, transparent 55%),
    linear-gradient(180deg, oklch(0.97 0.04 85) 0%, oklch(0.95 0.05 75) 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

.container { max-width: 820px; margin: 0 auto; padding: 40px 24px 72px; }

.crumbs { font-size: 13px; color: oklch(0.5 0.03 60); margin-bottom: 18px; }
.crumbs a { color: oklch(0.5 0.14 45); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.kicker {
  display: inline-block; font-size: 11px; letter-spacing: 0.18em; font-weight: 600;
  color: oklch(0.5 0.05 55); text-transform: uppercase;
  padding: 6px 12px; border: 1px solid oklch(0.85 0.04 75); border-radius: 999px;
  background: oklch(0.99 0.01 80 / 0.7);
}

h1 {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(34px, 4.5vw, 48px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.05;
  color: oklch(0.22 0.05 55); margin: 18px 0 14px;
}
h1 em { font-style: italic; color: oklch(0.55 0.18 55); }

h2 {
  font-family: "Newsreader", Georgia, serif;
  font-size: 26px; font-weight: 600; line-height: 1.2;
  color: oklch(0.25 0.05 55); margin: 44px 0 10px;
}
h3 {
  font-family: "Newsreader", Georgia, serif;
  font-size: 19px; font-weight: 600; color: oklch(0.28 0.05 52);
  margin: 26px 0 8px;
}

p { font-size: 16px; color: oklch(0.33 0.03 60); margin: 0 0 14px; }
.lede { font-size: 18px; color: oklch(0.3 0.035 58); }
a { color: oklch(0.5 0.18 45); }
strong { color: oklch(0.22 0.05 50); font-weight: 600; }

ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { font-size: 15.5px; color: oklch(0.33 0.03 60); margin-bottom: 7px; }

.card {
  background: oklch(0.99 0.005 85 / 0.75);
  border: 1px solid oklch(0.86 0.04 75);
  border-radius: 18px; padding: 24px 28px; margin: 24px 0;
}
.card h2, .card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.card--tool {
  background: linear-gradient(135deg, oklch(0.97 0.045 80 / 0.85), oklch(0.96 0.03 62 / 0.9));
  border-color: oklch(0.82 0.08 65);
}

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 22px 0; }
.figure {
  background: oklch(0.99 0.006 82 / 0.8); border: 1px solid oklch(0.88 0.03 76);
  border-radius: 14px; padding: 16px 18px;
}
.figure__num {
  font-family: "Newsreader", Georgia, serif; font-size: 30px; font-weight: 600;
  color: oklch(0.42 0.16 42); line-height: 1.1;
}
.figure__label { font-size: 13px; color: oklch(0.42 0.03 60); margin-top: 4px; }

.source { font-size: 13px; color: oklch(0.52 0.03 60); margin-top: -6px; }

.note {
  border-left: 3px solid oklch(0.78 0.1 70);
  padding: 4px 0 4px 16px; margin: 18px 0;
  font-size: 15px; color: oklch(0.38 0.03 60);
}

.contactrow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.contactrow a {
  display: inline-flex; padding: 11px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.contactrow a.primary { background: oklch(0.55 0.18 45); color: oklch(0.99 0.01 85); }
.contactrow a.primary:hover { background: oklch(0.5 0.18 45); }
.contactrow a.ghost { border: 1px solid oklch(0.8 0.06 60); color: oklch(0.4 0.08 50); }
.contactrow a.ghost:hover { background: oklch(0.97 0.02 80); }

.related { margin-top: 44px; padding-top: 22px; border-top: 1px solid oklch(0.88 0.03 76); }
.related h2 { margin-top: 0; font-size: 20px; }