/* =====================================================================
   PERSONVERN (personvern.html) · utkast 3 (lyst og midtstilt)
   En rolig lesetekst: innholdslisten i et hvitt, avrundet kort som står
   fast til venstre, og en spalte på om lag 65 tegn til høyre. Kortet og
   spalten står midt på siden som én enhet. Delen man leser får en grå
   pille i listen. Titlene er tynne, som resten av siden.
   Innholdslisten og lesespalten er de samme som på kjøpsbetingelsene
   (side-kjopsbetingelser.css). Endres den ene, bør den andre endres likt.
   ===================================================================== */

/* ---------- 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, 17rem) minmax(0, 35rem); justify-content: center; column-gap: clamp(2.5rem, 1rem + 4vw, 5.5rem); align-items: start; }
}

/* ---------- Innholdslisten: et hvitt kort ----------
   «På denne siden» er <summary> i en klaff. Fra 640 px er klaffen alltid
   åpen (side-personvern.js), og summary er bare en liten versal etikett. */
.innholdsliste { padding: 1.3rem .75rem .75rem; background: var(--flate); border: 1px solid var(--strek); border-radius: var(--radius); }
.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; }
.klaff-tegn { display: none; width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.innholdsliste ol { list-style: none; display: grid; gap: 2px; margin-top: .6rem; }
.innholdsliste a {
  display: flex; align-items: baseline; gap: .75rem; padding: .55rem .75rem; border-radius: var(--radius-liten);
  color: var(--svak); text-decoration: none; font-size: var(--t-liten); line-height: 1.45;
  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); }
/* Delen man leser: en rolig grå pille */
.innholdsliste a[aria-current] { color: var(--tekst); background: var(--flate-2); }
.innholdsliste a:focus-visible { outline-offset: -2px; }
@media (min-width: 640px) {
  .innholdsliste-hode { pointer-events: none; cursor: default; }
}
/* 640–900 px: kortet står over teksten, med listen i to spalter */
@media (min-width: 640px) and (max-width: 899.98px) {
  .innholdsliste ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
}
/* Fra 900 px: kortet blir stående mens man blar */
@media (min-width: 900px) {
  .innholdsliste { position: sticky; top: calc(var(--topp-hoyde) + 1.5rem); }
}
/* Mobil: en rad med pluss som åpner listen, som spørsmålslistene */
@media (max-width: 639.98px) {
  .innholdsliste { padding: 0 1.1rem; }
  .innholdsliste-hode {
    min-height: 58px; padding: 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); }
  .klaff-tegn { display: block; }
  .innholdsliste-klaff[open] .klaff-loddrett { display: none; }
  .innholdsliste ol { margin: .5rem -.6rem 0; padding-bottom: .6rem; }
  .innholdsliste a { align-items: center; min-height: 44px; padding: .3rem .6rem; font-size: 1rem; }
}

/* ---------- Lesespalten ---------- */
.lesetekst { min-width: 0; font-size: 1.0625rem; }
.del + .del { 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); }
.del h2 { margin-bottom: 1.1rem; font-size: clamp(1.625rem, 1.35rem + .9vw, 2.125rem); font-weight: 300; line-height: 1.12; letter-spacing: -.035em; color: var(--tekst); }
.del p { color: var(--svak); line-height: 1.75; }
.del p + p { margin-top: 1em; }
.del a { color: var(--tekst); overflow-wrap: anywhere; }

/* «Sist oppdatert» som en liten merkelapp, som på forsiden. Vanlig
   blokk (ikke flex), så <time> ikke får ekstra luft foran seg. */
.oppdatert {
  display: inline-block; margin-top: clamp(3rem, 2.5rem + 1.5vw, 4rem); padding: .45rem .95rem;
  border: 1px solid var(--strek-sterk); border-radius: var(--pille);
  font-size: var(--t-etikett); font-weight: 500; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--svak);
}
/* På de smaleste mobilene (320 px) får merkelappen ellers ikke plass på én linje */
@media (max-width: 359.98px) {
  .oppdatert { padding-inline: .8rem; letter-spacing: .1em; }
}
.oppdatert::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .6rem; border-radius: 50%; background: currentColor; vertical-align: .1em; }