/* Easy360Scan — designsystem
   Fra designhandoff 15.08.2026. Farger følger PropNordics profilhåndbok.

   Alt er tokenisert her. Hardkod aldri en hex-verdi i en side — mobilhandoffen
   skal kunne legges oppå uten å måtte lete gjennom inline styles. */

:root {
  /* Profilhåndbokens farger */
  --fjell:   #153d47;   /* primær: knapper, mørke seksjoner, aksenter */
  --natt:    #151e2d;   /* tekst på lys bunn, footer-bakgrunn */
  --nysno:   #f5fbfd;   /* sidebakgrunn, tekst på mørk bunn. Aldri ren hvit */
  --havbla:  #154651;   /* hover, kickers, ikoner, lenker */
  --iscyan:  #9adcec;   /* KUN på mørk bunn */
  --panel:   #e4eef2;   /* bildeplassholdere, «Behandles»-badge */
  --hvit:    #ffffff;   /* kun kort og inputs mot Nysnø-bunn */

  /* Dempet tekst — lys bunn */
  --tekst-65: rgba(21,30,45,.65);
  --tekst-55: rgba(21,30,45,.55);
  --tekst-50: rgba(21,30,45,.5);
  --tekst-45: rgba(21,30,45,.45);
  --tekst-70: rgba(21,30,45,.7);
  --tekst-75: rgba(21,30,45,.75);

  /* Dempet tekst — mørk bunn */
  --lys-75: rgba(245,251,253,.75);
  --lys-70: rgba(245,251,253,.7);
  --lys-55: rgba(245,251,253,.55);

  /* Linjer og flater */
  --linje:      rgba(21,61,71,.12);
  --linje-sterk:rgba(21,61,71,.25);
  --linje-mork: rgba(245,251,253,.12);
  --tint:       rgba(21,61,71,.045);
  --tint-sterk: rgba(21,61,71,.06);
  --hover-tint: rgba(21,70,81,.06);
  --hover-cyan: rgba(154,220,236,.1);

  --radius-sm: 8px;    /* knapper, inputs */
  --radius:    12px;   /* kort */
  --radius-lg: 14px;   /* store paneler, bilder */

  --bredde: 1280px;
  --side:   64px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nysno);
  font-family: Archivo, system-ui, sans-serif;
  color: var(--natt);
}

a { color: var(--havbla); text-decoration: none; }
a:hover { color: var(--fjell); }
::selection { background: rgba(21,70,81,.18); }

/* Aldri browser-default fokusring — profilhåndbokens regel. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--havbla);
  outline-offset: 2px;
}
input:focus-visible { outline-offset: 1px; }

h1, h2, h3 { font-family: Jost, sans-serif; font-weight: 600; letter-spacing: -.01em; margin: 0; }

/* ── Typografi ─────────────────────────────────────────────── */
.kicker {
  font: 500 11px Archivo, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--havbla);
}
.kicker-dark { color: var(--iscyan); }

.h1-hero    { font: 600 66px/1.06 Jost, sans-serif; letter-spacing: -.015em; text-wrap: pretty; }
.h1-app     { font: 600 40px/1.1 Jost, sans-serif; }
.h2         { font: 600 42px/1.1 Jost, sans-serif; }
.ingress    { font: 400 18px/1.6 Archivo, sans-serif; color: var(--tekst-70); }
.brodtekst  { font: 400 14px/1.6 Archivo, sans-serif; color: var(--tekst-65); }

/* ── Layout ────────────────────────────────────────────────── */
.wrap {
  max-width: var(--bredde);
  margin: 0 auto;
  padding-left: var(--side);
  padding-right: var(--side);
  width: 100%;
}
.seksjon { padding-top: 96px; }

/* Delelinje som fader ut — brukes der en linje står alene */
.fade-linje {
  height: 1px;
  background: linear-gradient(90deg, rgba(21,61,71,.25), transparent);
  border: 0;
  margin: 0;
}

/* Diamant-motiv fra logoen. Alltid svært lav kontrast, ofte delvis utenfor kanten. */
.diamant {
  position: absolute;
  transform: rotate(45deg);
  background: rgba(21,61,71,.05);
  pointer-events: none;
}
.diamant-2  { background: rgba(21,70,81,.08); }
.pa-mork .diamant   { background: rgba(245,251,253,.05); }
.pa-mork .diamant-2 { background: var(--hover-cyan); }

/* ── Knapper ───────────────────────────────────────────────── */
.btn,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 500 15px Archivo, sans-serif;
  border-radius: var(--radius-sm);
  padding: 14px 28px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn { background: var(--fjell); color: var(--nysno); }
.btn:hover:not(:disabled) { background: var(--havbla); color: var(--nysno); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-outline { background: transparent; color: var(--fjell); border-color: rgba(21,61,71,.4); }
.btn-outline:hover:not(:disabled) { background: var(--hover-tint); color: var(--fjell); }
.btn-outline:disabled { opacity: .5; cursor: not-allowed; }

/* På mørk bunn er den eneste tillatte outline-varianten is-cyan. */
.btn-cyan {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 13.5px Archivo, sans-serif;
  color: var(--iscyan);
  border: 1px solid rgba(154,220,236,.5);
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  white-space: nowrap;
  transition: background .15s ease;
}
.btn-cyan:hover { background: var(--hover-cyan); color: var(--iscyan); }

.btn-sm { font-size: 13px; padding: 11px 20px; }
.btn-blokk { display: flex; width: 100%; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--side);
  border-bottom: 1px solid var(--linje);
  background: rgba(245,251,253,.92);
}
.nav-sticky { position: sticky; top: 0; backdrop-filter: blur(8px); z-index: 10; }

.wordmark {
  font: 600 20px Jost, sans-serif;
  color: var(--fjell);
}
.wordmark span { border-bottom: 3px solid var(--fjell); }

.by-pn {
  display: flex; align-items: center; gap: 6px;
  font: 400 11px Archivo, sans-serif;
  color: var(--tekst-55);
}
.by-pn img { height: 14px; }

.merke { display: flex; align-items: baseline; gap: 14px; }
.nav-lenker { display: flex; align-items: center; gap: 26px; }
/* :not(.btn) er nødvendig, ikke pynt: `.nav-lenker a` har høyere spesifisitet enn `.btn`
   og malte ellers knappeteksten mørk grå på mørkegrønn bunn — praktisk talt usynlig. */
.nav-lenker a:not(.btn):not(.btn-outline) { font: 500 13px Archivo, sans-serif; color: var(--tekst-70); }
.nav-lenker a:not(.btn):not(.btn-outline):hover { color: var(--fjell); }
.nav-lenker a.btn, .nav-lenker a.btn-outline { font-size: 13px; }
.nav-aktiv {
  font: 500 13px Archivo, sans-serif;
  color: var(--fjell);
  border-bottom: 2px solid var(--fjell);
  padding-bottom: 2px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(21,61,71,.1);
  display: flex; align-items: center; justify-content: center;
  font: 600 13px Jost, sans-serif; color: var(--fjell);
}

/* ── Kort ──────────────────────────────────────────────────── */
.kort {
  background: var(--hvit);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  overflow: hidden;
}
.kort-tint {
  background: var(--tint);
  border-radius: var(--radius);
  padding: 26px;
}
.kort-topplinje { border-top: 2px solid var(--fjell); padding-top: 18px; }

/* ── Skjema ────────────────────────────────────────────────── */
.felt-label { font: 500 12.5px Archivo, sans-serif; color: var(--tekst-75); }
.felt {
  width: 100%;
  font: 400 15px Archivo, sans-serif;
  color: var(--natt);
  background: var(--hvit);
  border: 1px solid var(--linje-sterk);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
}
.felt::placeholder { color: var(--tekst-45); }

.melding {
  display: none;
  font: 400 13.5px/1.5 Archivo, sans-serif;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.melding-feil { background: rgba(190,50,50,.08); color: #9c2b2b; border: 1px solid rgba(190,50,50,.25); }
.melding-ok   { background: rgba(21,70,81,.07); color: var(--havbla); border: 1px solid rgba(21,70,81,.2); }

.eller {
  display: flex; align-items: center; gap: 14px;
  font: 400 12px Archivo, sans-serif; color: var(--tekst-50);
}
.eller::before, .eller::after {
  content: ""; flex: 1; height: 1px;
}
.eller::before { background: linear-gradient(90deg, transparent, var(--linje-sterk)); }
.eller::after  { background: linear-gradient(90deg, var(--linje-sterk), transparent); }

/* ── Footer ────────────────────────────────────────────────── */
.footer { background: var(--natt); color: var(--nysno); }
.footer-inner {
  max-width: var(--bredde);
  margin: 0 auto;
  padding: 48px var(--side);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}
.footer-kompakt .footer-inner { padding: 28px var(--side); }
.footer a { color: var(--lys-70); font: 400 13px Archivo, sans-serif; }
.footer a:hover { color: var(--iscyan); }
.footer-wordmark { font: 600 17px Jost, sans-serif; }
.footer-wordmark span { color: var(--iscyan); }
.footer .by-pn { color: var(--lys-55); }
.footer .by-pn img { height: 13px; }
.footer-lenker { display: flex; align-items: center; gap: 26px; }

/* ── Språkvelger ───────────────────────────────────────────── */
/* Globus-knapp med nedtrekk. Ingen flagg — språk er ikke land. */
.sprakvelger { position: relative; display: flex; align-items: center; }

.sprak-knapp {
  display: flex; align-items: center; gap: 6px;
  font: 500 12.5px Archivo, sans-serif; color: var(--tekst-70);
  background: transparent;
  border: 1px solid var(--linje-sterk); border-radius: var(--radius-sm);
  padding: 8px 12px; cursor: pointer;
  transition: background .15s ease;
}
.sprak-knapp:hover { background: rgba(21,70,81,.05); }
.sprak-knapp .ph-globe-simple { font-size: 15px; color: var(--havbla); }
.sprak-knapp .ph-caret-down { font-size: 11px; color: var(--tekst-50); transition: transform .15s ease; }
.sprak-knapp[aria-expanded="true"] .ph-caret-down { transform: rotate(180deg); }

.sprak-meny {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 170px; padding: 6px;
  background: var(--hvit);
  border: 1px solid rgba(21,61,71,.15); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(21,30,45,.14);
  z-index: 60;
}
.sprak-meny[hidden] { display: none; }
.sprak-meny a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 7px;
  font: 500 13px Archivo, sans-serif; color: var(--natt);
}
.sprak-meny a:hover { background: rgba(21,70,81,.05); color: var(--natt); }
.sprak-meny a[aria-current="true"] { background: var(--tint-sterk); }
.sprak-meny a[aria-current="true"] .ph-check { font-size: 14px; color: var(--havbla); }
.sprak-meny .ph-check { visibility: hidden; }
.sprak-meny a[aria-current="true"] .ph-check { visibility: visible; }

/* På mørk bunn — footer og login-banner */
.footer .sprak-knapp, .mork-panel .sprak-knapp {
  color: var(--lys-70); border-color: rgba(245,251,253,.25);
}
.footer .sprak-knapp:hover, .mork-panel .sprak-knapp:hover { background: rgba(245,251,253,.06); }
.footer .sprak-knapp .ph-globe-simple, .mork-panel .sprak-knapp .ph-globe-simple { color: var(--iscyan); }
.footer .sprak-knapp .ph-caret-down, .mork-panel .sprak-knapp .ph-caret-down { color: var(--lys-55); }
/* Menyen ligger over footeren, så den åpner oppover der */
.footer .sprak-meny { top: auto; bottom: calc(100% + 8px); }

/* Mobil: kompakt knapp uten caret, og menyen som sentrert popover */
@media (max-width: 767px) {
  .sprak-knapp { padding: 7px 10px; gap: 5px; font-size: 12px; }
  .sprak-knapp .ph-caret-down { display: none; }
  /* IKKE position:fixed her. Det sticky navet har backdrop-filter, og det lager en
     ny containing block — da blir «fixed» relativ til navet i stedet for skjermen,
     og menyen havner delvis utenfor. Absolutt posisjonering mot knappen er trygt. */
  .sprak-meny {
    min-width: 180px; padding: 8px;
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(21,30,45,.22);
  }
  .sprak-meny a { padding: 14px; font-size: 14px; }
}

/* Juridiske dokumenter finnes kun på norsk. Varselet vises derfor bare når
   brukeren har valgt et annet språk — i18n.js setter <html lang>. */
.sprakvarsel {
  background: rgba(21,70,81,.07);
  border-left: 3px solid var(--havbla);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 16px; margin-bottom: 28px;
  font: 400 13.5px/1.6 Archivo, sans-serif; color: var(--tekst-75);
}
html[lang="no"] .sprakvarsel { display: none; }

/* ── Diverse ───────────────────────────────────────────────── */
.badge {
  font: 600 11px Archivo, sans-serif;
  border-radius: 5px;
  padding: 4px 9px;
}
.badge-klar      { background: var(--fjell); color: var(--nysno); }
.badge-behandles { background: var(--panel); color: var(--natt); }

.mork-panel {
  background: var(--fjell);
  color: var(--nysno);
  position: relative;
  overflow: hidden;
}
.mork-panel .kicker { color: var(--iscyan); }

/* Skjules under selve 360-opptaket — widgeten tar hele viewporten */
.chrome-hidden { display: none !important; }

/* ══ Mellomsjikt: 768–1100 px ══════════════════════════════════
   Nedskalert desktop. Grids går til to kolonner, sidepadding 40. */
@media (max-width: 1100px) {
  :root { --side: 40px; }
  .h1-hero { font-size: 48px; }
  .h2      { font-size: 34px; }
  .h1-app  { font-size: 32px; }
  .seksjon { padding-top: 72px; }
}

/* ══ Mobil: under 768 px ═══════════════════════════════════════
   Designbredde 390 px. Mobil er primærflaten — kundene scanner fra
   telefonen, så hele kjøps- og delingsflyten må virke her. */
@media (max-width: 767px) {
  :root { --side: 20px; }

  .h1-hero { font: 600 34px/1.12 Jost, sans-serif; }
  .h2      { font: 600 27px/1.15 Jost, sans-serif; }
  .h1-app  { font: 600 28px/1.15 Jost, sans-serif; }
  .ingress { font-size: 15px; }
  .brodtekst { font-size: 13.5px; }
  .kicker  { font-size: 10px; }
  .seksjon { padding-top: 46px; }

  /* Nav: lockupen stables, «360» mister understreken (for trangt) */
  .nav { padding: 14px var(--side); }
  .merke { flex-direction: column; align-items: flex-start; gap: 3px; }
  .wordmark { font-size: 17px; }
  .wordmark span { border-bottom: none; }
  .by-pn { font-size: 9.5px; gap: 5px; }
  .by-pn img { height: 11px; }
  .nav-lenker { gap: 14px; }
  /* Utvidet trykkflate uten å flytte teksten visuelt */
  .nav-lenker a:not(.btn) { padding: 10px 2px; }

  /* Touch: ingenting under 44 px høyt */
  .btn, .btn-outline { min-height: 44px; padding: 14px 22px; }
  .btn-cyan { min-height: 44px; }
  .btn-sm { padding: 11px 16px; }
  .felt { padding: 14px 16px; }

  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px var(--side); }
  .footer-lenker { flex-wrap: wrap; gap: 16px 20px; }

  /* Diamantene er dekor. I desktop-størrelse dominerer de en 390px-skjerm, så vi
     kapper dem — max-* slår de inline satte width/height uten å røre hver side. */
  .diamant { max-width: 140px; max-height: 140px; }
}

/* Touch-enheter har ingen hover. Uten dette henger hover-fargen igjen
   etter et trykk, som ser ut som en aktiv tilstand. */
@media (hover: none) {
  .btn:hover:not(:disabled) { background: var(--fjell); }
  .btn-outline:hover { background: transparent; }
  .btn-cyan:hover { background: transparent; }
  .btn:active:not(:disabled) { background: var(--havbla); }
  .btn-outline:active { background: var(--hover-tint); }
  .btn-cyan:active { background: var(--hover-cyan); }
}