/* =========================================================================
   legal.css — the three documents: avtalevilkår, personvern, bruksvilkår.
   Loaded on those pages only, after site.css, so the front page carries
   none of it.

   Everything here is one column of reading text. The display sizes in
   site.css are built for a shop window and are far too loud for a page
   somebody reads to the end, so h1 and h2 are scaled down rather than
   reused as they are.

   The section numbers come from a CSS counter, not from the text: the same
   document is read in three languages out of one HTML file, and a number
   typed into a heading would have to be typed three times and kept in step.
   ========================================================================= */

/* the page opens under the fixed header — no hero to hold the space here */
.lglhead{
  padding-top:calc(var(--hdr-h,64px) + clamp(2.6rem,6vw,5.2rem));
  padding-bottom:clamp(2.2rem,4vw,3.4rem);
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.lglhead h1{
  font-size:clamp(2.1rem,5.2vw,3.5rem); line-height:1.02; letter-spacing:-.022em;
  max-width:16ch;
}
.lglhead .lead{ margin-top:1.4rem }

/* the stamp line: when it was last changed, and what it is */
.lglmeta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; align-items:baseline;
  margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:.83rem; color:var(--muted);
}
.lglmeta b{ font-weight:500; color:var(--ink-2) }

/* the other two documents, always one click away */
.lglnav{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.9rem }
.lglnav a{
  text-decoration:none; font-size:.86rem; padding:.5em 1em;
  border:1px solid var(--line); border-radius:var(--r); color:var(--ink-2);
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease),
             color var(--fast) var(--ease);
}
.lglnav a:hover{ border-color:var(--ink); color:var(--ink); background:rgba(34,42,44,.04) }
.lglnav a[aria-current="page"]{ background:var(--night); border-color:var(--night); color:var(--on-night) }

/* ---------------------------------------------------------------- body */
.lgl{ padding-block:clamp(3rem,7vw,5.5rem) }
.lgl__in{ display:grid; gap:clamp(2.4rem,5vw,4rem); align-items:start }
@media (min-width:1000px){
  /* the table of contents stays beside the text and follows it down */
  .lgl__in{ grid-template-columns:15.5rem minmax(0,1fr); gap:clamp(2.5rem,4vw,4.5rem) }
  .toc{ position:sticky; top:calc(var(--hdr-h,64px) + 1.6rem) }
}

.toc h2{
  font-family:var(--text); font-size:.735rem; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted); margin:0 0 1rem;
}
.toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc }
.toc li{ counter-increment:toc }
.toc a{
  display:flex; gap:.6em; text-decoration:none; font-size:.88rem; line-height:1.4;
  color:var(--ink-2); padding:.42em 0; border-bottom:1px solid var(--line);
  transition:color var(--fast) var(--ease);
}
.toc li:last-child a{ border-bottom:0 }
.toc a::before{ content:counter(toc) "."; color:var(--muted); flex:none; min-width:1.3em }
.toc a:hover{ color:var(--falu) }

/* ------------------------------------------------------------ the text */
.doc{ counter-reset:sec; max-width:70ch }
.doc > section{
  counter-increment:sec;
  /* the header is fixed; an anchored section needs room above it whether it
     was reached by a click (site.js) or by a hash typed into the address bar */
  scroll-margin-top:calc(var(--hdr-h,64px) + 1.4rem);
  padding-top:clamp(2.2rem,4vw,3.2rem);
}
.doc > section:first-of-type{ padding-top:0 }
.doc h2{
  font-size:clamp(1.28rem,2.2vw,1.62rem); line-height:1.18; letter-spacing:-.014em;
  margin-bottom:1.1rem; display:flex; gap:.55em;
}
.doc h2::before{
  content:counter(sec) "."; color:var(--falu); font-variant-numeric:tabular-nums;
  flex:none; font-weight:600;
}
.doc h3{
  font-family:var(--text); font-size:.97rem; font-weight:600; letter-spacing:0;
  margin:1.9rem 0 .6rem;
}
.doc p{ color:var(--ink-2) }
.doc a{ color:inherit; text-decoration:underline; text-underline-offset:.18em;
        text-decoration-color:var(--line) }
.doc a:hover{ text-decoration-color:currentColor; color:var(--falu) }

.doc ul,.doc ol{ margin:0 0 1.05em; padding-left:1.25em; color:var(--ink-2) }
.doc li{ margin-bottom:.44em }
.doc li::marker{ color:var(--falu) }
.doc ul{ list-style:none; padding-left:1.15em }
.doc ul > li{ position:relative }
.doc ul > li::before{
  content:""; position:absolute; left:-1.15em; top:.72em; width:5px; height:1px;
  background:var(--falu);
}

/* a definition run: term, then the answer — used for contact blocks */
.doc dl{ margin:0 0 1.05em; display:grid; gap:.75rem }
@media (min-width:620px){
  .doc dl{ grid-template-columns:11rem minmax(0,1fr); gap:.75rem 1.4rem }
  .doc dt{ text-align:left }
}
.doc dt{ font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
         padding-top:.18em }
.doc dd{ margin:0; color:var(--ink-2) }

/* the processing overview: purpose, basis, how long. A table, because that
   is what it is — three columns that have to be read across. */
.doc table{ width:100%; border-collapse:collapse; margin:0 0 1.2rem; font-size:.92rem }
.doc th,.doc td{ text-align:left; vertical-align:top; padding:.8rem .9rem .8rem 0;
                 border-bottom:1px solid var(--line); color:var(--ink-2) }
.doc th{ font-weight:500; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
         color:var(--muted); padding-top:0 }
.doc tbody tr:last-child td{ border-bottom:0 }
@media (max-width:640px){
  /* three columns do not fit a phone; each row becomes a small stack with
     the column name in front of the cell */
  .doc thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
  .doc tr{ display:block; padding:1rem 0; border-bottom:1px solid var(--line) }
  .doc tbody tr:last-child{ border-bottom:0 }
  .doc td{ display:block; border:0; padding:.15rem 0 }
  .doc td::before{
    content:attr(data-th); display:block; font-size:.7rem; letter-spacing:.09em;
    text-transform:uppercase; color:var(--muted); margin-bottom:.1rem;
  }
  .doc td:first-child{ font-weight:500; color:var(--ink) }
}

/* the short answer, before the long one */
.box{
  background:var(--paper-2); border-left:2px solid var(--falu); border-radius:0 var(--r) var(--r) 0;
  padding:clamp(1.2rem,2.4vw,1.7rem) clamp(1.1rem,2.4vw,1.8rem);
  margin:0 0 1.4rem;
}
.tone .box{ background:var(--paper) }
.box > :last-child{ margin-bottom:0 }
.box p{ color:var(--ink) }

.doc .small{ margin-top:2.6rem; padding-top:1.2rem; border-top:1px solid var(--line) }

/* a legal page is printed more often than any other page on the site */
@media print{
  .lglnav,.toc,.skip,.hdr{ display:none }
  .lglhead{ padding-top:0; background:none; border:0 }
  .lgl{ padding-block:0 }
  .doc{ max-width:none }
  .doc > section{ padding-top:1.4rem; break-inside:avoid }
  .ftr{ background:none; color:#000; border-top:1px solid #999 }
  .box{ background:none; border-left:2px solid #999 }
  a{ text-decoration:none }
}