/* ==========================================================================
   SunPool – stilark
   Gjenskapt fra erlendkorseth.wixsite.com/sunpool (desktop 1280px som referanse)
   Farger fra Sunpool designmanual + Wix-temaet som nettsiden bruker.
   ========================================================================== */

/* ---------- Fonter ----------
   Alle fonter ligger lokalt i assets/fonts (ingen kall til Google Fonts).
   Overskrifter: Roboto (samme filer som Wix bruker for "roboto-thin").
   Brødtekst: Nunito Sans (variabel font, SIL Open Font License) – erstatter
   Avenir fra Wix, slik at alle nettlesere og enheter viser samme font. */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "SP Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-thin-400.woff2") format("woff2");
}
@font-face {
  font-family: "SP Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-thin-700.woff2") format("woff2");
}

:root {
  /* Designmanual – primærfarger */
  --sp-green: #0A3532;          /* Trust / mørk grønn (hovedfarge) */
  --sp-green-btn: #113633;      /* knappefarge slik Wix rendrer den */
  --sp-green-2: #0E4542;
  --sp-green-3: #1C5B58;
  --sp-cream: #FBF8F3;          /* Neutral – bakgrunn */
  --sp-cream-2: #FDFCFA;
  --sp-text: #272727;           /* Neutral – tekst */
  --sp-grey-1: #464646;
  --sp-grey-2: #6A6A6A;
  --sp-grey-3: #C6C4C0;         /* plassholder bak bilder */
  --sp-line: #5C5B5A;

  /* Designmanual – energi / positive aksentfarger */
  --sp-lime: #D9FF8F;
  --sp-lime-light: #EBFFC4;
  --sp-sky: #C8EBFD;
  --sp-sky-light: #D6F0FD;
  --sp-lavender: #DBD6FF;
  --sp-lavender-light: #EAE7FF;

  /* Blåfargen som brukes på seksjonene på nettsiden */
  --sp-blue: #B3CFE5;

  --font-heading: "SP Roboto", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --body-weight: 300;
  --container: 980px;
}

/* ---------- Grunnstil ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sp-cream);
  color: var(--sp-text);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p, ul { margin: 0; }
h1, h2, h5, h6, .heading { font-family: var(--font-heading); font-weight: 700; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  height: 103px;
  background: var(--sp-cream);
}
.site-header .logo {
  position: absolute;
  left: 19px;
  top: 37px;
  width: 181px;
  height: 28px;
}
.site-header .logo img { width: 181px; height: 28px; }
.site-nav {
  position: absolute;
  top: 27px;
  right: max(19px, calc(50% - 471px));
  display: flex;
}
.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 141px;
  height: 49px;
  font-size: 18px;
  letter-spacing: 0.9px;
  color: var(--sp-text);
  text-decoration: none;
  transition: color .2s;
}
.site-nav a + a { width: 143px; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--sp-green); }

/* ---------- Knapper ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  min-width: 152px;
  padding: 0 20px;
  border: 2px solid var(--sp-green-btn);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn--primary { background: var(--sp-green-btn); color: var(--sp-cream); }
.btn--primary:hover { background: var(--sp-cream); color: var(--sp-green); border-color: var(--sp-green); }
.btn--secondary { background: transparent; color: var(--sp-green-btn); }
.btn--secondary:hover { background: var(--sp-green); color: var(--sp-cream); border-color: var(--sp-green); }
.btn--wide { width: 170px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 500px;
  background: var(--sp-grey-3) center / cover no-repeat;
  color: var(--sp-cream);
}
.hero .container { padding: 114px 0 0 34px; }
.hero h1 {
  max-width: 494px;
  font-size: 56px;
  line-height: normal;
}
.hero p {
  max-width: 488px;
  font-size: 22px;
  line-height: 1.4;
}
.hero h1 + .hero-lead { margin-top: 13px; }
.hero--forside { height: 499px; }
.hero--forside h1 + .hero-lead { margin-top: 6px; }
.hero--forside p { max-width: 402px; }

/* ---------- Mellomrom mellom seksjoner ---------- */
.spacer { background: var(--sp-cream); }
.spacer--40 { height: 40px; }
.spacer--57 { height: 57px; }
.spacer--59 { height: 59px; }

/* ---------- Mørk seksjon med sol-grafikk ---------- */
.statement {
  background: var(--sp-green) center / cover no-repeat;
  color: var(--sp-cream);
}
.statement h5 {
  font-size: 35px;
  line-height: 1.4;
}
.statement--forside { height: 463px; }
.statement--forside .container { padding: 182px 0 0 24px; }
.statement--forside h5 { max-width: 639px; }
.statement--om-oss { height: 436px; }
.statement--om-oss .container { padding: 169px 0 0; display: flex; justify-content: flex-end; }
.statement--om-oss h5 { max-width: 763px; margin-right: 0; text-align: right; }

/* ---------- Delt seksjon: tekst + bilde ---------- */
.split {
  display: grid;
  grid-template-columns: 638px 1fr;
  grid-template-columns: 49.85% 1fr;
  background: var(--sp-cream);
}
.split--h496 { min-height: 496px; }
.split--h483 { min-height: 483px; }
.split--reverse { grid-template-columns: 50.08% 1fr; }
.split__text { padding: 48px 40px 48px 74px; }
.split--reverse .split__text { padding-left: 75px; }
.split__text > * { max-width: 485px; }
.split__media { background: var(--sp-grey-3); position: relative; overflow: hidden; }
.split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.split h2 {
  font-size: 45px;
  line-height: 1.1;
  color: var(--sp-text);
}
.split h2 + .rich { margin-top: 18px; }
.rich p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--sp-green);
}
.rich p + p { margin-top: 28.8px; }
.split .btn { margin-top: 37px; }
.split .btn-row { display: flex; gap: 44px; margin-top: 47px; }
.split .btn-row .btn { margin-top: 0; }

/* ---------- Fordeler (blå) ---------- */
.benefits {
  height: 565px;
  background: var(--sp-blue);
  text-align: center;
}
.benefits .container { padding-top: 66px; }
.benefits h2 { font-size: 45px; line-height: 1.1; color: var(--sp-text); }
.benefits .intro {
  max-width: 780px;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--sp-green);
}
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 341px);
  justify-content: center;
  margin-top: 75px;
}
.benefit img { width: 59px; height: 59px; margin: 0 auto; }
.benefit h3 {
  margin: 28px auto 0;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.benefit p {
  max-width: 226px;
  margin: 16px auto 0;
  font-size: 16px;
  line-height: 1.5;
}
.benefit p.benefit__lg { font-size: 18px; }

/* ---------- Avansert måling (bilde + overlappende tekstboks) ---------- */
.feature {
  height: 624px;
  background: var(--sp-cream);
}
.feature__inner {
  position: relative;
  max-width: 1120px;
  height: 100%;
  margin: 0 auto;
}
.feature__media {
  position: absolute;
  left: 0; top: 64px;
  width: 707px; height: 418px;
  background: var(--sp-grey-3);
  overflow: hidden;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__box {
  position: absolute;
  left: 412px; top: 140px;
  width: 707px; height: 484px;
  padding: 62px 60px 0 64px;
  background: var(--sp-cream);
}
.feature__box .rule { width: 40px; height: 0; border-top: 5px solid var(--sp-green); }
.feature__box h2 { margin-top: 13px; font-size: 45px; line-height: 1.1; color: var(--sp-text); }
.feature__box p,
.feature__box li { font-size: 17px; line-height: 1.4; }
.feature__box p { margin-top: 22px; }
.feature__box ul { margin-top: 23.8px; padding-left: 31px; }

/* ---------- Optimal drift (blå, sentrert) ---------- */
.cta {
  height: 520px;
  background: var(--sp-blue);
  text-align: center;
  color: var(--sp-green-btn);
}
.cta .container { padding-top: 71px; }
.cta h2 { font-size: 45px; line-height: 1.1; }
.cta .rich-cta { max-width: 629px; margin: 53px auto 0; }
.cta .rich-cta p { font-size: 17px; line-height: 1.8; }
.cta .rich-cta p + p { margin-top: 30.6px; }
.cta .btn-row {
  display: flex;
  justify-content: center;
  gap: 44px;
  margin-top: 35px;
  transform: translateX(-10px);
}

/* ---------- Kontaktside ---------- */
.contact-page { padding: 86px 0 111px; }
.contact-page__inner {
  display: grid;
  grid-template-columns: 460px 530px;
  column-gap: 59px;
  max-width: 1049px;
  margin-left: max(16px, calc(50% - 519px));
  margin-right: 16px;
}
.contact-page__head { grid-column: 1 / -1; margin-bottom: 22px; }
.contact-page h1 { font-size: 55px; line-height: 1.4; }
.contact-page__lead { margin-top: 11px; font-size: 22px; line-height: 1.9; }
.contact-page__info { padding-top: 0; }
.contact-page__media { margin-top: 22px; width: 530px; height: 683px; background: var(--sp-grey-3); overflow: hidden; }
.contact-page__media img { width: 100%; height: 100%; object-fit: cover; }
.contact-item + .contact-item { margin-top: 40px; }
.contact-item h2 { font-size: 20px; line-height: 1.4; }
.contact-item p,
.contact-item a { font-size: 18px; line-height: 1.5; }
.contact-item p { margin-top: 11px; }
.contact-item a { text-decoration: none; }
.contact-item a:hover { text-decoration: underline; }

/* ---------- Juridiske sider ---------- */
.legal { padding: 70px 0 170px; }
.legal .container { padding-left: 187px; }
.legal__body { max-width: 680px; }
.legal h1 { font-size: 55px; line-height: 1.4; margin-bottom: 20px; }
.legal h5 { font-size: 35px; line-height: 1.4; }
.legal h6 { font-size: 30px; line-height: 1.4; }
.legal p,
.legal li { font-size: 18px; line-height: 1.4; }
.legal ul { padding-left: 27px; }
.legal ul ul { list-style-type: circle; }
.legal a { color: var(--sp-text); text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--sp-green);
  color: var(--sp-cream);
  padding: 38px 0 66px;
}
.site-footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  max-width: 1060px;
  min-height: 331px;
  margin: 0 auto;
  padding: 21px 0 0;
}
.site-footer__logo { grid-column: 1 / -1; padding-left: 40px; margin-bottom: 25px; }
.site-footer__logo img { width: 181px; height: 28px; }
.site-footer__col { padding-top: 5px; }
.site-footer__col--left { padding-left: 40px; }
.site-footer__col--right { padding-left: 7px; }
.site-footer h6 { font-size: 20px; line-height: 1.4; }
.site-footer address,
.site-footer .contact { margin-top: 11px; font-style: normal; font-size: 18px; line-height: 1.5; }
.site-footer .contact + .contact { margin-top: 16px; }
.site-footer .contact a { text-decoration: none; }
.site-footer .contact a:hover { text-decoration: underline; }
.site-footer .copyright { margin-top: 65px; font-size: 14px; letter-spacing: 0.42px; line-height: 1.4; }
.site-footer .legal-links { margin-top: 37px; list-style: none; padding: 0; }
.site-footer .legal-links li { font-size: 14px; letter-spacing: 0.42px; line-height: 1.4; }
.site-footer .legal-links li + li { margin-top: 8px; }
.site-footer .legal-links a { text-decoration: none; }
.site-footer .legal-links a:hover { text-decoration: underline; }
.site-footer .to-top {
  position: absolute;
  right: 9px;
  top: 237px;
  font-size: 16px;
  letter-spacing: 0.48px;
  text-decoration: underline;
}

/* ==========================================================================
   Responsivt (Wix har egen mobilvisning – dette er en tilsvarende tilpasning)
   ========================================================================== */
@media (max-width: 1160px) {
  .feature { height: auto; padding: 64px 24px; }
  .feature__inner { height: auto; display: grid; grid-template-columns: 1fr; }
  .feature__media,
  .feature__box { position: static; width: auto; height: auto; }
  .feature__media { aspect-ratio: 707 / 418; }
  .feature__box { margin: -76px 0 0 auto; width: min(707px, 92%); padding: 62px 40px 48px; }
}

@media (max-width: 1080px) {
  .contact-page__inner { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .contact-page__media { width: 100%; height: auto; aspect-ratio: 530 / 683; }
  .site-footer__inner { margin: 0 24px; }
}

@media (max-width: 1000px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .hero .container,
  .statement--forside .container { padding-left: 24px; }
  .legal .container { padding-left: 24px; }
  .benefits { height: auto; padding-bottom: 72px; }
  .benefits__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .cta { height: auto; padding-bottom: 80px; }
}

@media (max-width: 760px) {
  .site-header { height: 72px; }
  .site-header .logo { top: 24px; left: 16px; width: 140px; }
  .site-header .logo img { width: 140px; height: auto; }
  .site-nav { top: 12px; right: 8px; }
  .site-nav a, .site-nav a + a { width: auto; padding: 0 10px; font-size: 16px; }

  .container { padding-left: 16px; padding-right: 16px; }
  .hero, .hero--forside { height: 420px; }
  .hero .container { padding: 96px 16px 0; }
  .hero h1 { font-size: 40px; }
  .hero p { font-size: 18px; }

  .statement--forside, .statement--om-oss { height: auto; }
  .statement--forside .container,
  .statement--om-oss .container { padding: 96px 16px; }
  .statement h5 { font-size: 26px; }
  .statement--om-oss h5 { text-align: left; }

  .split, .split--reverse { grid-template-columns: 1fr; min-height: 0; }
  .split__text, .split--reverse .split__text { padding: 40px 16px 48px; }
  .split__media { min-height: 0; aspect-ratio: 641 / 496; }
  .split--reverse .split__media { order: 2; }
  .split--reverse .split__text { order: 1; }
  .split h2, .benefits h2, .feature__box h2, .cta h2 { font-size: 34px; }
  .split .btn-row { flex-wrap: wrap; gap: 16px; }

  .benefits .container { padding-top: 56px; }
  .benefits__grid { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }

  .feature { padding: 40px 16px; }
  .feature__box { margin: 0; width: 100%; padding: 32px 0 0; }

  .cta .container { padding-top: 56px; }
  .cta .rich-cta { margin-top: 32px; }
  .cta .btn-row { flex-wrap: wrap; gap: 16px; transform: none; }

  .contact-page { padding: 48px 0 64px; }
  .contact-page__inner { grid-template-columns: 1fr; margin: 0 16px; }
  .contact-page h1 { font-size: 40px; }
  .contact-page__lead { font-size: 18px; line-height: 1.5; }
  .contact-page__media { margin-top: 40px; }

  .legal { padding: 56px 0 80px; }
  .legal h1 { font-size: 40px; }
  .legal h5 { font-size: 28px; }
  .legal h6 { font-size: 24px; }

  .site-footer { padding: 40px 0 48px; }
  .site-footer__inner { grid-template-columns: 1fr; margin: 0 16px; min-height: 0; }
  .site-footer__logo, .site-footer__col--left, .site-footer__col--right { padding-left: 0; }
  .site-footer .copyright { margin-top: 24px; }
  .site-footer__col--right { order: 2; }
  .site-footer .to-top { position: static; display: inline-block; margin-top: 24px; order: 3; }
}

/* Om oss – "Hvem er SunPool?" har litt større luft enn forsiden */
.split--om-oss h2 + .rich { margin-top: 48px; }
.split--om-oss .btn-row { margin-top: 59px; }
@media (max-width: 760px) {
  .split--om-oss h2 + .rich { margin-top: 18px; }
  .split--om-oss .btn-row { margin-top: 32px; }
}

/* ==========================================================================
   Cookie-knapp (nede til venstre) og samtykkepanel – se assets/js/cookies.js
   ========================================================================== */
.cookie-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--sp-cream);
  border-radius: 50%;
  background: var(--sp-green);
  color: var(--sp-cream);
  box-shadow: 0 4px 14px rgba(10, 53, 50, .25);
  cursor: pointer;
  transition: transform .2s, background-color .2s;
}
.cookie-fab:hover { background: var(--sp-green-3); transform: scale(1.06); }
.cookie-fab:focus-visible,
.cookie-panel :focus-visible { outline: 3px solid var(--sp-lime); outline-offset: 2px; }

.cookie-panel {
  position: fixed;
  left: 16px;
  bottom: 80px;
  z-index: 1001;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 28px 28px 24px;
  border-radius: 10px;
  background: var(--sp-cream);
  color: var(--sp-text);
  box-shadow: 0 12px 40px rgba(10, 53, 50, .28);
}
.cookie-panel[hidden] { display: none; }
.cookie-panel__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--sp-green);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.cookie-panel__close[hidden] { display: none; }
.cookie-panel__title {
  padding-right: 32px;
  font-size: 24px;
  line-height: 1.25;
  color: var(--sp-green);
}
.cookie-panel__title:focus { outline: none; }
.cookie-panel__intro {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
}
.cookie-panel__intro a { color: var(--sp-green); }
.cookie-cats { margin: 18px 0 0; padding: 0; list-style: none; }
.cookie-cats[hidden] { display: none; }
.cookie-cat { padding: 12px 0; border-top: 1px solid rgba(10, 53, 50, .15); }
.cookie-cat:last-child { border-bottom: 1px solid rgba(10, 53, 50, .15); }
.cookie-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
}
.cookie-cat__title { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--sp-green); }
.cookie-cat__text { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--sp-grey-1); }

.cookie-switch { position: relative; flex: none; width: 44px; height: 24px; }
.cookie-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cookie-switch input:disabled { cursor: not-allowed; }
.cookie-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--sp-grey-3);
  transition: background-color .2s;
  pointer-events: none;
}
.cookie-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.cookie-switch input:checked + .cookie-switch__track { background: var(--sp-green); }
.cookie-switch input:checked + .cookie-switch__track::after { transform: translateX(20px); }
.cookie-switch input:disabled + .cookie-switch__track { opacity: .55; }
.cookie-switch input:focus-visible + .cookie-switch__track { outline: 3px solid var(--sp-lime); outline-offset: 2px; }

.cookie-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.cookie-panel__actions .btn { min-width: 0; flex: 1 1 150px; cursor: pointer; }
.cookie-panel__actions [hidden] { display: none; }
.cookie-panel__link {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--sp-green);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-decoration: underline;
  cursor: pointer;
}

/* Knapp inne i teksten på siden om informasjonskapsler */
.legal .cookie-inline-btn { margin-top: 16px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .cookie-fab, .cookie-switch__track, .cookie-switch__track::after { transition: none; }
}