/* =====================================================================
   KJØPSBETINGELSER (kjopsbetingelser.html) · utkast 3 (lyst og midtstilt)
   Et langt juridisk dokument, så lesbarheten går foran alt annet:
   innholdslisten i et hvitt, avrundet kort som står fast til venstre, og
   en rolig spalte på om lag 65 tegn til høyre. Kortet og spalten står
   midt på siden som én enhet. Punktene skilles med hårstreker, og
   nummeret står i grått foran den tynne overskriften. Vedleggene står i
   den samme spalten, så listen følger med helt ned. Angreskjemaet er et
   hvitt kort, som et ark.
   Innholdslisten og lesespalten er de samme som på personvernsiden
   (side-personvern.css). Endres den ene, bør den andre endres likt.
   Teksten i betingelsene skal ikke endres her.
   ===================================================================== */

/* ---------- Spaltene ---------- */
.les-seksjon { padding-top: clamp(.5rem, 1.5vw, 1.5rem); }
.les-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
/* Under 900 px står kortet over teksten. Spalten holdes smal og midt på,
   så linjene ikke blir for lange på nettbrett. */
@media (max-width: 899.98px) {
  .les-grid { max-width: calc(37rem + var(--kantluft) * 2); }
}
@media (min-width: 900px) {
  .les-grid { grid-template-columns: minmax(0, 22rem) minmax(0, 35rem); justify-content: center; column-gap: clamp(2.5rem, 1rem + 4vw, 5.5rem); align-items: start; }
}

/* ---------- Innholdslisten: et hvitt kort ----------
   «Innhold» er <summary> i en klaff. Fra 640 px er klaffen alltid åpen
   (side-kjopsbetingelser.js), og summary er bare en liten versal
   etikett. Punktet man leser får en rolig grå pille. */
.innholdsliste { padding: 1.3rem .75rem .75rem; background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius); }
.innholdsliste:focus { outline: none; }
.innholdsliste-hode {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none;
  padding: 0 .75rem 1rem; border-bottom: 1px solid var(--strek);
  font-size: .6875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; color: var(--svak);
}
.innholdsliste-hode::-webkit-details-marker { display: none; }
.innholdsliste-hodetekst { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; }
.innholdsliste-antall { display: none; font-weight: 400; color: var(--svak); }
.klaff-tegn { display: none; width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.innholdsliste ol, .innholdsliste ul { list-style: none; display: grid; gap: 2px; margin-top: .6rem; }
.innholdsliste-vedlegg { padding-top: .6rem; border-top: 1px solid var(--strek); }
.innholdsliste a {
  display: flex; align-items: baseline; gap: .75rem; padding: .45rem .75rem; border-radius: var(--radius-liten);
  color: var(--svak); text-decoration: none; font-size: var(--t-liten); line-height: 1.4;
  transition: background-color .2s, color .2s;
}
/* Pek gir bare mørkere tekst; den grå pillen er forbeholdt delen man leser */
.innholdsliste a:hover { color: var(--tekst); }
.innholdsliste a[aria-current] { color: var(--tekst); background: var(--flate-2); }
.innholdsliste a:focus-visible { outline-offset: -2px; }
.innholdsliste .nr { flex: none; min-width: 1.35rem; font-variant-numeric: tabular-nums; color: var(--svakere); }
.innholdsliste a[aria-current] .nr { color: var(--svak); }
@media (min-width: 640px) {
  .innholdsliste-hode { pointer-events: none; cursor: default; }
}
/* 640–900 px: kortet står over teksten, med punktene i to spalter */
@media (min-width: 640px) and (max-width: 899.98px) {
  .innholdsliste ol { display: block; columns: 2; column-gap: 1rem; }
  .innholdsliste ol li { break-inside: avoid; }
}
/* Fra 900 px: kortet blir stående mens man blar. Blir vinduet for lavt,
   ruller listen inne i kortet (side-kjopsbetingelser.js holder punktet
   man leser synlig i den). */
@media (min-width: 900px) {
  .innholdsliste {
    position: sticky; top: calc(var(--topp-hoyde) + 1.5rem);
    max-height: calc(100vh - var(--topp-hoyde) - 3rem); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--strek-sterk) transparent;
  }
}
/* Lave bærbare (1366 × 768 o.l.): tettere rader, så hele listen får plass */
@media (min-width: 900px) and (max-height: 839px) {
  .innholdsliste { padding-top: 1rem; }
  .innholdsliste-hode { padding-bottom: .75rem; }
  .innholdsliste a { padding-block: .28rem; }
}
/* Mobil: en rad med pluss som åpner listen, som spørsmålslistene */
@media (max-width: 639.98px) {
  .innholdsliste { padding: 0 1.1rem; scroll-margin-top: 1rem; }
  .innholdsliste-hode {
    min-height: 58px; padding: .5rem 0; border-bottom: 0; cursor: pointer;
    font-size: 1rem; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: var(--tekst);
  }
  .innholdsliste-klaff[open] .innholdsliste-hode { border-bottom: 1px solid var(--strek); }
  .innholdsliste-antall { display: inline; font-size: .875rem; }
  .klaff-tegn { display: block; }
  .innholdsliste-klaff[open] .klaff-loddrett { display: none; }
  .innholdsliste ol, .innholdsliste ul { margin-inline: -.6rem; }
  .innholdsliste ol { margin-top: .5rem; }
  .innholdsliste ul { margin-bottom: .6rem; }
  .innholdsliste a { align-items: center; min-height: 44px; padding: .3rem .6rem; font-size: 1rem; }
}

/* ---------- Sidehodet: selger og versjon i et hvitt kort ---------- */
/* «Kjøpsbetingelser» er ett langt ord: litt mindre på de smaleste
   mobilene, så det får plass på én linje også i 320 px */
.kb-hode .sidehode-tekst .display { font-size: min(var(--t-h1-side), 12.5vw); }
.dokumenthode {
  display: grid; gap: .3rem; width: 100%; max-width: 40rem; margin-top: .9rem; padding: 1.35rem clamp(1.25rem, .8rem + 1.5vw, 2rem);
  background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius);
  font-size: var(--t-liten); line-height: 1.6; color: var(--svak);
}
.dokumenthode strong { font-weight: 600; color: var(--tekst); }
.dokumenthode a { overflow-wrap: anywhere; }
.dokumenthode .versjon { margin-top: .55rem; padding-top: .8rem; border-top: 1px solid var(--strek); }

/* ---------- Lesespalten ---------- */
.lesetekst { min-width: 0; font-size: 1.0625rem; }
.punkt + .punkt { margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); padding-top: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); border-top: 1px solid var(--strek); }
.punkt h2 { margin-bottom: 1.1rem; font-size: clamp(1.5rem, 1.3rem + .75vw, 1.95rem); font-weight: 300; line-height: 1.15; letter-spacing: -.03em; color: var(--tekst); }
/* Nummeret i grått, som det ene grå ordet i titlene ellers */
.punkt h2 .nr { color: var(--svakere); font-variant-numeric: tabular-nums; }
.punkt p { color: var(--svak); line-height: 1.75; }
.punkt p + p { margin-top: 1em; }
.punkt strong { font-weight: 600; color: var(--tekst); }
.punkt a { color: var(--tekst); overflow-wrap: anywhere; }
/* Ord og tall som ikke skal deles på to linjer (paragrafnumre o.l.) */
.hel { white-space: nowrap; }
/* Særvilkårene i punkt 12: navnet på tjenesten først, i mørk tekst */
.saervilkar em { font-style: normal; font-weight: 600; color: var(--tekst); }

/* ---------- Vedleggene ---------- */
/* Mer luft og en tydeligere strek over: her begynner et nytt dokument */
.punkt.vedlegg { margin-top: clamp(4.5rem, 3.5rem + 3vw, 6.5rem); border-top-color: var(--strek-sterk); }
.vedlegg h2 { font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem); line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; }
.vedlegg-merknad { font-size: var(--t-liten); }
.punkt .vedlegg-merknad + p { margin-top: 1.4em; }

/* Angreskjemaet: et hvitt kort, som et ark. Utskriftsknappen står under. */
.vedlegg-skjema { display: grid; gap: 1.25rem; justify-items: start; margin-top: 2rem; }
.angreskjema {
  display: grid; gap: 1rem; width: 100%; padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem);
  background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius);
  box-shadow: 0 30px 60px -48px color-mix(in srgb, var(--tekst) 50%, transparent);
  font-size: 1rem;
}
.punkt .angreskjema p { margin: 0; color: var(--tekst); line-height: 1.6; }
.angreskjema em { color: var(--svak); }
.angreskjema-tittel { display: grid; gap: .45rem; margin-bottom: .5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--strek); font-size: clamp(1.5rem, 1.3rem + .6vw, 1.85rem); font-weight: 300; line-height: 1.1; letter-spacing: -.03em; color: var(--tekst); }
.angreskjema-undertittel { font-size: var(--t-liten); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--svak); }
.skjema-mellomtittel { font-weight: 600; }
/* Avkrysningsboksen: tegnet ☐ står i HTML-en (kan kopieres og leses
   opp), men vises som en ren, litt avrundet firkant med tynn kant */
.boks {
  display: inline-block; flex: none; width: 1rem; height: 1rem; margin-right: .45rem;
  border: 1px solid var(--feltkant); border-radius: 3px; color: transparent; overflow: hidden; font-size: .8rem; line-height: 1; vertical-align: -.15em;
}
.kryss-rad { display: flex; flex-wrap: wrap; gap: .6rem 2.5rem; }
/* Boksen i én spalte, ordene i den andre. Brytes «(spesifiser nedenfor)»
   til en ny linje, havner det under ordet, ikke under boksen. */
.kryss-rad > span { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .3rem; align-items: start; }
.kryss-rad .boks { margin-top: .3rem; }
/* Skrivestrekene. Minst 7rem brede, så det er plass til å skrive. Blir
   det for trangt ved siden av ledeteksten, får streken en hel linje. */
.angreskjema .strek { flex: 1 1 7rem; min-width: 7rem; height: 1.7em; border-bottom: 1px solid var(--feltkant); }
.angreskjema .strek-hel { height: 1.6rem; }
.skjemalinje { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem .6rem; }
.skjemalinje .boks { align-self: center; margin-right: 0; }
.skjemalinje-felt { padding-top: .35rem; }
.skjemalinje-felt > span:first-child { flex: none; min-width: 5.6rem; font-weight: 600; }
/* Ledetekstene like brede, så skrivestrekene starter på samme sted */
@media (min-width: 561px) {
  .skjemalinje-dato .ledetekst { min-width: 12.6rem; }
  .skjemalinje-dato em { min-width: 10.6rem; }
  .skjemalinje-felt > span:first-child { min-width: 14.05rem; }
}
/* På smal skjerm får begge datostrekene en hel linje hver */
@media (max-width: 560px) {
  .skjemalinje-dato .strek, .skjemalinje-dato em { flex-basis: 100%; }
}
/* Utskriftsknappen vises bare når JavaScript er på (felles.js setter
   klassen «js» på <html>) */
.skriv-ut { display: none; }
.js .skriv-ut { display: inline-flex; }
.skriv-ut-ikon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }

/* Vedlegg 2: de sju delene som avsnitt, navnet først */
.dba-deler { display: grid; gap: 1em; margin-top: 1.4em; }
.punkt .dba-deler p + p { margin-top: 0; }

/* ---------- Tilbake til innholdslisten ---------- */
.til-innholdslisten { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }

/* ============================ UTSKRIFT ============================
   Betingelsene skrives ut svart på hvitt, uten toppen, innholdslisten,
   kontaktfeltet og bunnteksten. Fargene byttes ved å gi de samme
   navnene lyse verdier, og kortene blir vanlig tekst. Knappen «Skriv ut
   angreskjemaet» setter klassen «skriv-skjema» på <body>, og da skrives
   bare skjemaet ut. */
@media print {
  @page { margin: 16mm 14mm; }
  :root {
    color-scheme: light;
    --natt: #FFFFFF; --flate: #FFFFFF; --flate-2: #FFFFFF; --morkt: #FFFFFF; --tekst: #000000; --hvit: #000000; --svak: #222222; --svakere: #444444;
    --strek: #BBBBBB; --strek-sterk: #888888; --feltkant: #555555;
  }
  .hopp, .topp, .mobilmeny, .kontakt-seksjon, .bunn, .sok-dialog,
  .innholdsliste, .til-innholdslisten, .brodsmuler, .skriv-ut { display: none !important; }
  /* Linjehøyden i pt, så den følger skriftstørrelsen i pt */
  body { font-size: 10.5pt; line-height: 16pt; }
  a { text-decoration: none; }
  .seksjon, .les-seksjon { padding-block: 0; border-top: 0; }
  .sidehode { padding: 0 0 1.5rem; }
  .sidehode-grid { justify-items: stretch; }
  .sidehode-tekst { justify-items: start; text-align: left; max-width: none; }
  .sidehode-tekst .display { font-size: 28pt; }
  .sidehode .ingress { margin-inline: 0; font-size: 13pt; line-height: 19pt; }
  .dokumenthode { max-width: none; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--strek); border-radius: 0; }
  /* max-width: smal-spalten fra skjermreglene (under 900 px) skal ikke
     gjelde på papiret, ellers står teksten innrykket under sidehodet */
  .les-grid { display: block; max-width: none; }
  .lesetekst { font-size: inherit; }
  .punkt + .punkt { margin-top: 1.2rem; padding-top: 1.2rem; }
  .punkt h2 { font-size: 14pt; font-weight: 400; break-after: avoid; }
  .punkt p, .dba-deler p { font-size: 10.5pt; line-height: 16pt; orphans: 3; widows: 3; }
  .dba-deler p, .saervilkar { break-inside: avoid; }
  .vedlegg-merknad, .dokumenthode { font-size: 9.5pt; line-height: 14pt; }
  /* Vedleggene begynner på ny side */
  .punkt.vedlegg { break-before: page; margin-top: 0; padding-top: 0; border-top: 0; }
  .vedlegg h2 { font-size: 20pt; }
  .angreskjema { break-inside: avoid; padding: 1.2rem 0 0; border: 0; border-top: 1px solid var(--strek-sterk); border-radius: 0; box-shadow: none; font-size: inherit; }
  .angreskjema-tittel { font-weight: 400; }
  .punkt .angreskjema p { line-height: 16pt; }

  /* Bare angreskjemaet */
  body.skriv-skjema main > :not(.vilkar),
  body.skriv-skjema .lesetekst > :not(#vedlegg-1),
  body.skriv-skjema #vedlegg-1 > :not(.vedlegg-skjema) { display: none !important; }
  body.skriv-skjema #vedlegg-1 { break-before: auto; }
  body.skriv-skjema .vedlegg-skjema { margin-top: 0; }
  body.skriv-skjema .angreskjema { padding: 0; border: 0; font-size: 12pt; gap: 1.4rem; }
  body.skriv-skjema .punkt .angreskjema p { line-height: 19pt; }
  body.skriv-skjema .angreskjema .strek { height: 2.2em; }
  /* Med de høyere strekene står boksen nede på linjen, midt på ledeteksten */
  body.skriv-skjema .skjemalinje .boks { align-self: flex-end; margin-bottom: calc((19pt - 1rem) / 2); }
}