/* =========================================================
   Renovera AS: sider.css
   Kontakt, personvern og 404. Lastes ETTER style.css.
   Ingen nye farger, ingen nye skrifter: kun tokens fra style.css
   og de etablerte signaturene (eik-strek, kort, knappehierarki,
   fokusringer).
   ========================================================= */

/* =========================================================
   1. LYS HERO
   Motstykket til .side-hero. Samme rolle i sidehodet, men lys
   flate. Brukes der sidens egen tyngde ligger i noe lyst
   (skjemaet, tekstkolonnen); en mørk bremse over ville stjålet
   blikket fra selve handlingen.
   ========================================================= */
.hero-lys {
  background: var(--flate-alt);
  border-bottom: 1px solid var(--hairline);
  padding-block: 0 clamp(3rem, 5vw, 4.5rem);
}
.hero-lys .brodsmuler { padding-block: var(--luft-m) 0; }
.hero-lys-innhold {
  max-width: 44rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.hero-lys h1 { margin-bottom: var(--luft-xs); }
.hero-lys .sek-ingress { max-width: 52ch; }

/* Sentrert variant: brukes der innholdet under er én smal
   tekstkolonne, slik at hodet står rett over kolonnen. */
.hero-lys-senter .hero-lys-innhold { margin-inline: auto; max-width: 680px; }

/* Ekstra bunnluft der ett element under skal skyte opp i båndet */
.hero-lys-lomme { padding-bottom: clamp(4rem, 9vw, 9.5rem); }


/* =========================================================
   2. KONTAKTSIDEN
   ========================================================= */

/* --- Oppsett: informasjon til venstre, skjemaet som tyngdepunkt --- */
.kontakt-oppsett {
  display: grid;
  gap: var(--luft-l);
  align-items: start;
}
@media (min-width: 900px) {
  .kontakt-oppsett { grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 4vw, 4rem); }
}

/* Skjemakortet løftes opp i det lyse båndet, slik at det krysser
   kanten og blir sidens tyngdepunkt. Kun kortet, ikke hele raden:
   da beholder venstre kolonne en ren startlinje under båndet.
   Kun på brede skjermer, på mobil stables alt. */
.kontakt-seksjon { padding-block: var(--luft-xl) var(--luft-sek); position: relative; z-index: 1; }

/* --- Liten seksjonsetikett i kolonnene ---
   Kan brukes på både p og h2: overstyrer h-typografien bevisst,
   slik at en overskrift kan være semantisk uten å rope. */
.etikett {
  display: flex;
  align-items: center;
  gap: var(--luft-2xs);
  font-family: var(--font-sans);
  font-size: var(--tekst-xs);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tekst-sek);
  margin: 0 0 var(--luft-s);
}
.etikett::before { content: ""; width: var(--strek-s); height: var(--strek); background: var(--eik); flex: none; }

/* --- Kontaktkanaler: ikonrad i stedet for punktliste ---
   Én kanal per rad. Da får e-postadressen plass uten å brekke,
   og kolonnen får høyde nok til å bære skjemaet ved siden av. */
.kontakt-kanaler {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--luft-xs);
}
.kontakt-kanal {
  display: flex;
  gap: var(--luft-s);
  align-items: center;
  background: var(--flate);
  border: 1px solid var(--hairline);
  border-radius: var(--r-kort);
  padding: var(--luft-xs) var(--luft-s);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.kontakt-kanal:has(a):hover,
.kontakt-kanal:has(a):focus-within {
  border-color: #D5DCE4;
  box-shadow: 0 10px 28px rgba(1, 42, 102, .08);
  transform: translateY(-2px);
}
.kontakt-kanal-ikon {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--flate-alt);
  color: var(--blaa);
}
.kontakt-kanal-ikon .ikon { width: 20px; height: 20px; }
.kontakt-kanal-tekst { min-width: 0; }
.kontakt-kanal .kontakt-label { margin-bottom: 1px; letter-spacing: .1em; }
.kontakt-kanal-verdi {
  display: block;
  margin: 0;
  font-weight: 600;
  font-size: var(--tekst-m);
  line-height: 1.35;
  color: var(--tekst);
  overflow-wrap: anywhere;
}
a.kontakt-kanal-verdi { color: var(--blaa-tekst); text-decoration: none; }
a.kontakt-kanal-verdi:hover,
a.kontakt-kanal-verdi:focus-visible { color: var(--marine); text-decoration: underline; }

/* Løftet skal gjelde hele kortet, ikke bare lenketeksten */
.kontakt-kanal a.kontakt-kanal-verdi::after { content: ""; position: absolute; inset: 0; }
.kontakt-kanal { position: relative; }

/* --- Løftet: eik-boksen fra forsiden, litt mer luft --- */
.kontakt-oppsett .kontakt-lofte { margin-top: var(--luft-m); }

.kontakt-omrader {
  margin: var(--luft-m) 0 0;
  font-size: var(--tekst-s);
  color: var(--tekst-sek);
}

/* --- Rating: verifisert fakta rett ved siden av skjemaet --- */
.rating-panel {
  display: flex;
  align-items: center;
  gap: var(--luft-s);
  margin-top: var(--luft-m);
  padding: var(--luft-s) var(--luft-m);
  background: var(--flate);
  border: 1px solid var(--hairline);
  border-radius: var(--r-kort);
}
.rating-panel-tall {
  flex: none;
  font: 800 2.441rem/1 var(--font-hode);
  letter-spacing: -.02em;
  color: var(--marine);
  font-variant-numeric: tabular-nums;
}
.rating-panel-stjerner { display: block; color: #8A6E42;   /* som .nokkeltal-stjerner: --eik maalte 2.27:1 */ font-size: 1rem; letter-spacing: 2px; line-height: 1.2; }
.rating-panel p { margin: 2px 0 0; font-size: var(--tekst-xs); line-height: 1.55; color: var(--tekst-sek); }
.rating-panel strong { color: var(--tekst); font-weight: 600; }

/* --- Skjemaet: sidens sentrum --- */
.kontakt-skjema {
  box-shadow: 0 20px 56px rgba(1, 42, 102, .12);
  border-color: #DDE3EA;
}
.kontakt-skjema .badge { margin-bottom: var(--luft-2xs); }
.kontakt-skjema h3 { font-size: var(--h3-stor); margin-bottom: var(--luft-2xs); }
@media (min-width: 900px) {
  .kontakt-skjema { padding: clamp(2rem, 3vw, 2.75rem); margin-top: -6.5rem; }
}

/* --- Tillitsbånd nederst --- */
.tillit-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--luft-m);
}
@media (min-width: 760px) { .tillit-grid { grid-template-columns: repeat(3, 1fr); } }
.tillit-kort { padding: var(--luft-m); }
.tillit-kort h3 { font-size: var(--h3); margin-bottom: var(--luft-2xs); }
.tillit-kort p { margin: 0; color: var(--tekst-sek); font-size: var(--tekst-s); line-height: 1.65; }
.tillit-ikon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--isblaa);
  color: var(--marine);
  display: grid; place-items: center;
  margin-bottom: var(--luft-s);
}
.tillit-ikon .ikon { width: 20px; height: 20px; stroke-width: 2.5; }


/* =========================================================
   3. PERSONVERN: juridisk tekstside
   Målet er lesero, ikke juridisk vegg. Én smal kolonne,
   dempede overskrifter og en synlig linje mellom seksjonene.
   ========================================================= */
/* Tekstsiden trenger ikke full seksjonspuls på toppen: sidehodet
   over står allerede for pausen. */
.sek-tekst { padding-block: clamp(2.5rem, 4vw, 3.5rem) var(--luft-sek); }

.juridisk { max-width: 680px; margin-inline: auto; }

.juridisk-seksjon {
  padding-top: var(--luft-l);
  margin-top: var(--luft-l);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 96px;
}
.juridisk-seksjon:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }

/* Overskriftene i style.css går opp mot 39px. I en ren tekstside
   roper det. Vi bruker h3-trinnet i stedet og lar eik-streken
   gjøre nivåarbeidet. */
.juridisk h2 {
  font-size: var(--h3-stor);
  letter-spacing: -.012em;
  margin: 0 0 var(--luft-s);
}
.juridisk h2::before {
  content: "";
  display: block;
  width: var(--strek-s); height: var(--strek);
  background: var(--eik);
  margin-bottom: var(--luft-xs);
}
.juridisk p {
  margin: 0 0 var(--luft-s);
  color: #2A3340;
  line-height: 1.75;
}
.juridisk p:last-child { margin-bottom: 0; }
.juridisk-meta {
  font-size: var(--tekst-xs);
  color: var(--tekst-sek);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  margin: var(--luft-s) 0 0;
}

/* --- Innholdsfortegnelse --- */
.innhold-toc {
  background: var(--flate);
  border: 1px solid var(--hairline);
  border-radius: var(--r-kort);
  padding: var(--luft-m);
  margin-bottom: var(--luft-l);
}
.innhold-toc .etikett { margin-bottom: var(--luft-xs); }
.innhold-toc ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
@media (min-width: 620px) { .innhold-toc ol { grid-template-columns: 1fr 1fr; column-gap: var(--luft-m); } }
.innhold-toc li { counter-increment: toc; }
.innhold-toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 7px;
  font-size: var(--tekst-s);
  font-weight: 500;
  color: var(--tekst);
  text-decoration: none;
}
.innhold-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  color: var(--eik);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.innhold-toc a:hover,
.innhold-toc a:focus-visible { color: var(--blaa-tekst); text-decoration: underline; text-underline-offset: 3px; }

/* --- Avslutning: hjelp videre i stedet for en løs knapp --- */
.juridisk-utgang {
  margin-top: var(--luft-xl);
  padding-top: var(--luft-l);
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: var(--luft-s);
}
.juridisk-utgang h2 { font-size: var(--h3); margin-bottom: var(--luft-2xs); }
.juridisk-utgang h2::before { display: none; }
.juridisk-utgang p { margin: 0; color: var(--tekst-sek); }
.juridisk-knapper { display: flex; flex-wrap: wrap; gap: var(--luft-xs); margin-top: var(--luft-2xs); }


/* =========================================================
   4. 404
   Samme mørke sidehode som resten av nettstedet, men med et
   hult 404-tall bak teksten. Spøkelsestallet finnes allerede
   som signatur (.ghost-nr); her i lys utgave.
   ========================================================= */
.feil-hero { position: relative; overflow: hidden; }
.feil-hero .container { position: relative; z-index: 1; }
.feil-ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 clamp(12rem, 33vw, 27rem)/1 var(--font-hode);
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(128, 214, 255, .13);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
@supports not (-webkit-text-stroke: 2px red) {
  .feil-ghost { color: rgba(128, 214, 255, .1); }
}
.feil-hjelp {
  margin: var(--luft-m) auto 0;
  max-width: 46ch;
  font-size: var(--tekst-s);
  color: #CFE4F7;
}
.feil-hjelp a { color: #fff; font-weight: 600; }
.feil-hjelp a:hover, .feil-hjelp a:focus-visible { color: var(--isblaa); }

/* Kortene sto i en 45rem-bred .sek-intro og ble klemt sammen.
   De hører hjemme i full containerbredde. */
.feil-forslag { margin-top: var(--luft-xl); }


/* =========================================================
   5. FELLES SMÅJUSTERINGER
   ========================================================= */

/* Tommelvennlige mål på mobil, samme prinsipp som style.css */
@media (max-width: 899px) {
  .kontakt-kanal { padding: var(--luft-s); }
  .innhold-toc a { padding-block: 9px; }
}
/* Lange norske sammensetninger sprenger 22px-trinnet på små skjermer */
@media (max-width: 480px) {
  .juridisk h2 { font-size: var(--tekst-xl); }
}

/* Utskrift: flatene forsvinner, rammene må bære strukturen */
@media print {
  .hero-lys { background: none !important; }
  .kontakt-kanal, .rating-panel, .innhold-toc, .tillit-kort {
    border: 1px solid #999 !important;
    background: none !important;
    box-shadow: none !important;
  }
  .kontakt-seksjon { margin-top: 0 !important; }
  .feil-ghost, .tillit-ikon { display: none !important; }
  .kontakt-kanal-ikon { border: 1px solid #999 !important; background: none !important; }
}