/* side-om-oss.css — de fire om-oss-sidene.
 *
 * Ingen nye farger, ingen nye størrelser. Alt er tokens fra pengeguide.css,
 * og fargeparene er de samme som allerede står i .innhold og .kilder, så
 * skript/kontrast.mjs dekker dem.
 *
 * Sidene har ett problem til felles: de er lange, de leses av folk som er
 * i ferd med å bestemme seg for om de stoler på nettstedet, og fire av dem
 * hører sammen uten at noe binder dem sammen. Derfor er høyrespalten
 * navigasjon her, ikke annonse. Se .om-nav.
 */

/* ---------- høyrespalten: navigasjon mellom de fire sidene ----------
 *
 * .layout gir 300 px høyrespalte uansett. Står den tom, ser siden smal og
 * skjev ut; fylles den med annonse, står en betalt flate ved siden av
 * teksten som forklarer at annonser holdes utenfor redaksjonen. Navigasjon
 * er det tredje svaret, og det eneste som også er nyttig: leseren som er
 * her for å vurdere troverdighet, vil som regel innom mer enn én av dem.
 *
 * Arver sticky fra `.layout > aside`. */
.om-nav {
  padding: 1.125rem 1.25rem;
  background: var(--wash);
  border-radius: 10px;
  min-width: 0;
}

.om-nav h2 {
  margin: 0 0 0.75rem;
  font-size: var(--tekst-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 92, "wght" 520;
  color: var(--muted);
}

.om-nav ul { margin: 0; padding: 0; list-style: none; display: grid; }

.om-nav a {
  display: block;
  padding: 0.5rem 0;
  font-size: var(--tekst-sm);
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
  border-top: 1px solid var(--rule);
}

.om-nav li:first-child a { border-top: 0; }

.om-nav a:hover {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Siden du står på. Markøren er en gyllen strek til venstre for teksten og
   ikke en kantlinje på elementet: en tykk border-left ville vært en annen
   komponent enn resten av nettstedet bruker. */
.om-nav [aria-current="page"] {
  color: var(--ink);
  font-variation-settings: "wdth" 96, "wght" 680;
  position: relative;
  padding-left: 0.75rem;
}

.om-nav [aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: 0.6875rem auto;
  left: 0;
  width: 3px;
  height: 0.875rem;
  background: var(--rust);
  border-radius: 2px;
}

/* Sidene som ikke er skrevet ennå står i lista, men dempet og ulenket.
   Å skjule dem ville skjult at de finnes; å lenke dem ville sendt leseren
   til et skall. */
.om-nav .venter {
  display: block;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
  font-size: var(--tekst-sm);
  color: var(--muted);
}

.om-nav .venter small {
  display: block;
  font-size: var(--tekst-xs);
  opacity: 0.85;
}

/* ---------- personen ----------
 *
 * Bilde, navn, rolle og kontakt er én enhet, ikke fire avsnitt etter
 * hverandre. Grid og ikke float, fordi teksten skal ligge på linje med
 * bildets overkant og ikke flyte rundt det. */
.person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem 1.5rem;
  align-items: start;
  margin-block: var(--luft-blokk);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.person img {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wash);
  display: block;
}

.person .rolle {
  margin: 0 0 0.25rem;
  font-size: var(--tekst-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 90, "wght" 700;
  color: var(--rust);
}

.person h2 {
  margin: 0 0 0.75rem;
  font-size: var(--tekst-2xl);
  font-variation-settings: "wdth" 76, "wght" 780;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.person .kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin: 0.875rem 0 0;
  font-size: var(--tekst-sm);
}

.person .kontakt a {
  color: var(--green);
  font-variation-settings: "wdth" 96, "wght" 600;
}

/* Under ~34rem har ikke teksten plass ved siden av bildet. Container query
   og ikke media query, fordi bredden som betyr noe er artikkelspalten, ikke
   vinduet: `.layout > article` er allerede en container. */
@container artikkel (max-width: 34rem) {
  .person { grid-template-columns: minmax(0, 1fr); }
  .person img { width: 5.5rem; height: 5.5rem; }
}

/* ---------- fakta ----------
 *
 * Eierskapsopplysninger leses som oppslag, ikke som prosa. Den som sjekker
 * org.nummeret vil finne det på ett blikk. */
.fakta {
  margin-block: var(--luft-blokk);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}

.fakta div {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding: 0.8125rem 1.125rem;
  border-top: 1px solid var(--rule);
  font-size: var(--tekst-sm);
}

.fakta div:first-child { border-top: 0; }

.fakta dt {
  color: var(--muted);
  font-variation-settings: "wdth" 92, "wght" 600;
}

.fakta dd {
  margin: 0;
  color: var(--ink);
  font-variation-settings: "wdth" 100, "wght" 500;
  overflow-wrap: anywhere;
}

.fakta dd a { color: var(--green); }

@container artikkel (max-width: 30rem) {
  .fakta div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- kilder med formål ----------
 *
 * Sju navn på rad sier at vi har kilder. Sju navn med hva hver av dem
 * brukes til, sier hva slags nettsted dette er. Forskjellen er hele
 * grunnen til at avsnittet står der. */
.kildekort {
  margin-block: var(--luft-blokk);
  display: grid;
  gap: 0;
}

.kildekort > div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}

.kildekort > div:first-child { border-top: 0; padding-top: 0; }

.kildekort dt {
  font-variation-settings: "wdth" 92, "wght" 680;
  color: var(--ink);
  font-size: var(--tekst-sm);
}

.kildekort dd {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--tekst-sm);
  line-height: 1.45;
}

@container artikkel (max-width: 30rem) {
  .kildekort > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
}

/* ---------- prinsipper ----------
 *
 * Nummererte i stedet for kulepunkter. Rekkefølgen betyr noe her: det
 * første punktet er regelen de tre andre er konsekvenser av. */
.prinsipp {
  margin-block: var(--luft-blokk);
  padding: 0;
  list-style: none;
  counter-reset: prinsipp;
  display: grid;
  gap: 0;
}

.brod .prinsipp { padding-left: 0; }

.prinsipp li {
  counter-increment: prinsipp;
  position: relative;
  padding: 1rem 0 1rem 3rem;
  border-top: 1px solid var(--rule);
  line-height: 1.5;
}

.prinsipp li:first-child { border-top: 0; }

.prinsipp li::before {
  content: counter(prinsipp);
  position: absolute;
  left: 0;
  top: 1rem;
  width: 1.875rem;
  height: 1.875rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--spruce);
  color: var(--on-spruce);
  font-size: var(--tekst-xs);
  font-variation-settings: "wdth" 92, "wght" 700;
}

.prinsipp b {
  font-variation-settings: "wdth" 100, "wght" 650;
  color: var(--ink);
}

/* ---------- «det er ikke redaksjonelt» ----------
 *
 * Annonsørinnhold-avsnittet er det eneste stedet på nettstedet der vi sier
 * at noe IKKE er redaksjonelt. Det skal se annerledes ut enn løftene rundt,
 * ellers drukner forbeholdet i dem. Marineblå flate, samme som tallpanelet. */
.merknad {
  margin-block: var(--luft-blokk);
  padding: clamp(1.125rem, 3vw, 1.5rem);
  border-radius: 10px;
  background: var(--spruce);
  color: var(--on-spruce);
}

.merknad h2 {
  margin: 0 0 0.625rem;
  font-size: var(--tekst-lg);
  color: var(--on-spruce);
  font-variation-settings: "wdth" 80, "wght" 760;
}

.brod .merknad p { color: var(--on-spruce-dim); margin-bottom: 0.875rem; }
.brod .merknad p:last-child { margin-bottom: 0; }
.brod .merknad b { color: var(--on-spruce); }

.brod .merknad a {
  color: var(--on-spruce);
  text-decoration-color: var(--on-spruce-dim);
}

/* ---------- lesevei videre ----------
 *
 * `.brod h2` setter max-width:32ch for lesbarhet i brødtekst. Overskriftene
 * i disse komponentene er etiketter og ikke brødtekst, og en 32ch-grense
 * klipper streken over dem midt på siden. Samme grunn i .merknad og .person. */
.videre { margin-top: var(--luft-seksjon); }

.brod .videre h2,
.brod .merknad h2,
.brod .person h2 { max-width: none; }

.videre h2 {
  font-size: var(--tekst-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 92, "wght" 700;
  color: var(--muted);
  margin: 0 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-2);
}

.videre ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

/* Selektoren må SLÅ `.brod a:not(.knapp):not(.cta)`, som er (0,3,1). Med
   bare `.brod .videre a` (0,2,1) understrekes hele kortet, beskrivelsen
   inkludert. Understrekingen hører til tittelen ved hover, ikke til flaten. */
.brod .videre a:not(.knapp):not(.cta),
.videre a {
  display: block;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}

.videre li:first-child a { border-top: 0; }

.videre .tittel {
  display: block;
  font-size: var(--tekst-base);
  font-variation-settings: "wdth" 84, "wght" 680;
  margin-bottom: 0.1875rem;
}

.videre .om {
  display: block;
  font-size: var(--tekst-sm);
  color: var(--muted);
  line-height: 1.4;
}

.videre a:hover .tittel { color: var(--green); text-decoration: underline; }

/* =====================================================================
   /personvern
   =====================================================================
   Siden er 1 440 ord og leses av folk som leter etter ETT svar: hva
   lagrer dere om meg, og hvordan slår jeg det av. Ingen leser den fra
   toppen. Alt under er bygget for å la henne hoppe rett dit.

   Kravene er ikke bare gode råd. Ny ekomlov fra 1. januar 2025 krever
   samtykke etter personvernforordningens standard, og Datatilsynets
   veiledning (oppdatert 3. april 2025) sier uttrykkelig at
   samtykkeboksen skal lenke videre til utfyllende informasjon. Det er
   denne siden. Er den uleselig, er lenken verdiløs. */

/* ---------- innholdsfortegnelse i høyrespalta ----------
   Samme idiom som .innhold på forbrukslånsiden, men uten nummerering:
   dette er oppslag, ikke en rekkefølge man leser i. */
.pv-innhold { padding: 1.125rem 1.25rem; background: var(--wash);
  border-radius: 10px; min-width: 0 }

.pv-innhold h2 { margin: 0 0 0.75rem; font-size: var(--tekst-xs);
  letter-spacing: 0.07em; text-transform: uppercase;
  font-variation-settings: "wdth" 92, "wght" 520; color: var(--muted) }

.pv-innhold ol { margin: 0; padding: 0; list-style: none; display: grid }

.pv-innhold a { display: block; padding: 0.4375rem 0; font-size: var(--tekst-sm);
  line-height: 1.35; color: var(--ink-2); text-decoration: none;
  border-top: 1px solid var(--rule); overflow-wrap: anywhere }

.pv-innhold li:first-child a { border-top: 0 }

.pv-innhold a:hover { color: var(--green); text-decoration: underline;
  text-underline-offset: 0.15em }

/* ---------- en behandling ----------
   «Hva / Hvorfor / Grunnlag / Hvor lenge / Mottaker» er strukturerte
   data, ikke prosa. Som fem avsnitt etter hverandre må leseren lese alt
   for å finne ett felt. Som definisjonsliste ser hun etiketten og
   hopper. Åtte behandlinger ganger fem felt er 40 opplysninger; det er
   forskjellen på en side man bruker og en man scroller forbi. */
.pv-behandling { margin-block: var(--luft-blokk); display: grid; gap: 0;
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden }

.pv-behandling > div { display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.25rem 1.25rem; padding: 0.8125rem 1.125rem;
  border-top: 1px solid var(--rule) }

.pv-behandling > div:first-child { border-top: 0 }

.pv-behandling dt { color: var(--muted); font-size: var(--tekst-sm);
  font-variation-settings: "wdth" 92, "wght" 640 }

.pv-behandling dd { margin: 0; color: var(--ink-2); font-size: var(--tekst-sm);
  line-height: 1.5 }

.pv-behandling dd a { color: var(--green) }

@container artikkel (max-width: 30rem) {
  .pv-behandling > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem }
}

/* ---------- kapseltabellen ----------
   Fem kolonner får ikke plass på en telefon. Over 34rem er den en
   tabell. Under blir hver rad et kort, med etikettene hentet fra
   data-attributter. Tabellen beholder semantikken hele veien, så
   skjermlesere leser den fortsatt som en tabell. */
.pv-kapsler code { font-size: 0.9em; overflow-wrap: anywhere }

.pv-kapsler .kat { display: inline-block; padding: 0.125rem 0.5rem;
  border-radius: 999px; font-size: var(--tekst-xs); white-space: nowrap;
  font-variation-settings: "wdth" 92, "wght" 640 }

/* Nødvendig er den eneste kategorien leseren ikke kan slå av. Den skal
   se annerledes ut enn de hun styrer selv. */
.pv-kapsler .kat--nodvendig { background: var(--spruce); color: var(--on-spruce) }
.pv-kapsler .kat--valgfri { background: var(--wash); color: var(--ink-2);
  border: 1px solid var(--rule-2) }

@container artikkel (max-width: 34rem) {
  .pv-kapsler thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap }
  .pv-kapsler tr { display: grid; gap: 0.25rem;
    padding: 0.875rem 1rem; border-top: 1px solid var(--rule) }
  .pv-kapsler tbody tr:first-child { border-top: 0 }
  .pv-kapsler td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.75rem; padding: 0; border: 0 }
  .pv-kapsler td::before { content: attr(data-etikett); color: var(--muted);
    font-size: var(--tekst-xs); font-variation-settings: "wdth" 92, "wght" 640 }
}

/* ---------- rettighetene ----------
   Åtte rettigheter som kulepunkter blir en vegg. Navnet først, i egen
   vekt, gjør at leseren finner den ene hun er ute etter. */
.brod .pv-rett { margin-block: var(--luft-blokk); padding: 0; list-style: none;
  display: grid; gap: 0 }

.pv-rett li { padding: 0.875rem 0; border-top: 1px solid var(--rule);
  line-height: 1.5; font-size: var(--tekst-sm); color: var(--ink-2) }

.pv-rett li:first-child { border-top: 0 }

/* Bare den FØRSTE <b> er navnet på rettigheten. «Å trekke tilbake samtykke»
   har en <b>Informasjonskapsler</b> inne i teksten, og en naken `.pv-rett b`
   gjorde den til en ny overskrift midt i avsnittet. */
.pv-rett > li > b:first-child { display: block; color: var(--ink);
  font-size: var(--tekst-base); font-variation-settings: "wdth" 92, "wght" 660;
  margin-bottom: 0.125rem }

/* ---------- handling ----------
   Det leseren faktisk kom for å gjøre, samlet ett sted og tidlig. */
.pv-handling { margin-block: var(--luft-blokk); padding: clamp(1.125rem, 3vw, 1.5rem);
  border: 1px solid var(--rule-2); border-radius: 10px; background: var(--wash) }

.pv-handling h2 { margin: 0 0 0.75rem !important; font-size: var(--tekst-lg) }

.brod .pv-handling ul { margin: 0; padding: 0; list-style: none; gap: 0.625rem }

.pv-handling li { font-size: var(--tekst-sm); color: var(--ink-2); line-height: 1.45 }

.pv-handling b { color: var(--ink) }

/* ---------- sammenleggbare behandlinger ----------
   Arver flate, kant og +-markør fra `.brod details` i pengeguide.css, så
   de ser ut som FAQ-en på forbrukslånsiden. Her justeres bare det som
   skiller dem: innholdet er en oppslagsliste og ikke ett avsnitt. */
.brod .pv-seksjon { margin-bottom: 0.5rem }

.pv-seksjon-innhold { padding: 0 1.25rem 1.125rem }

/* .pv-behandling har egen ramme. Inne i en details ville det blitt ramme
   i ramme, altså to kanter med 20 px mellom. Her er raden nok. */
.pv-seksjon-innhold .pv-behandling { margin: 0; border: 0; border-radius: 0 }
.pv-seksjon-innhold .pv-behandling > div { padding-inline: 0 }
.brod .pv-seksjon-innhold p { font-size: var(--tekst-sm); color: var(--ink-2);
  margin: 0 0 0.875rem }

/* Utskrift: en personvernerklæring er noe folk lagrer som PDF eller
   skriver ut, og et sammenlagt punkt blir borte i papiret. Nettleseren
   skjuler innholdet via UA-stil når details ikke er åpen, så det må
   overstyres eksplisitt. */
@media print {
  .brod .pv-seksjon { border: 0; background: none }
  .brod .pv-seksjon summary::after { content: none }
  .pv-seksjon > .pv-seksjon-innhold { display: block !important;
    content-visibility: visible !important; padding-inline: 0 }
  .pv-innhold, .om-nav { display: none }
}