/* umbi.no — det alle de offentlige sidene deler.
 *
 * Sida var én fil, og personvern og vilkår hadde hver sin kopi av de samme
 * tokenene og den samme typografien. Tre kopier er tre steder å endre en farge
 * og to steder å glemme den. Dette er det ene stedet: tokens, typografi, meny,
 * seksjoner, bunn og dialogene.
 *
 * Helten på forsiden bor fortsatt i index.html. Den er én side sin egen
 * oppsetning med en animasjon, ikke noe to sider deler.
 *
 * Panelet har dash.css og de samme tokenene; de to filene er søsken, ikke
 * kopier: panelet er et verktøy, dette er en nettside.
 */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/SchibstedGrotesk-Variable.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* sida er bare lys: uten dette maler en nettleser i mørk modus sin egen
     bakgrunn bak oss, i overrullingsfeltet og i skjemafelt */
  color-scheme: light;

  --blue: #2B45E0;
  --b50: #EEF1FD; --b100: #DCE2FB; --b200: #BCC7F6;
  --b300: #94A5EF; --b400: #6B80E8; --b500: #2B45E0;
  --b600: #2338BF; --b700: #1B2C99; --b800: #142073;
  --b900: #0D154D;

  --n50: #FAF9F6;
  --n100: #F2F1ED;
  --n200: #EBEAE5;
  --n300: #E1E0DB;
  --n400: #D7D2C7;
  --n500: #B5AFA2;
  --n600: #8B857A;
  --n700: #625D54;
  --n800: #3B3730;
  --n900: #16130E;

  --danger: #A6453B;
  --ok: #4E8F62;
  /* høstevinduet i appen (hostSterk, hostSvak): bare i appbildet på forsiden */
  --host-sterk: #D2965A;
  --host-svak: #EBD0B5;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: var(--n50);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  color: var(--n800);
  -webkit-font-smoothing: antialiased;
}

/* Korte sider: bunnen står nederst i vinduet selv om innholdet er lite */
body.kort-side { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.kort-side > main { flex: 1 0 auto; }

/* ---------- språk ----------
   Begge språkene står i HTML-en, og det som ikke gjelder er skjult. Da kan en
   søkemotor lese begge, og teksten finnes selv om skriptet aldri kjører. */
html[lang="nb"] [data-en], html[lang="en"] [data-nb] { display: none; }

/* lenker til en seksjon (Venteliste, Kontakt oss) ruller dit, ikke hopper */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- menyen ----------
   Fester seg i toppen. Over et heltebilde (.over-helten, satt av nettside.js
   så lenge bildet er under den) er den gjennomsiktig; forbi bildet får den
   sidefargen og en kant, som ellers. */
.nav-topp {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px max(24px, env(safe-area-inset-left)) 14px max(24px, env(safe-area-inset-right));
  background: var(--n50);
  border-bottom: 1px solid var(--n200);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.nav-topp.over-helten { background: transparent; border-bottom-color: transparent; }
/* Korte undersider (kontakt, venteliste): menyen flyter fritt, uten kant */
.nav-topp.nav-fri { border-bottom-color: transparent; }
/* I menyen står bare merket. Hele logoen, med ordet under, står bare over
   helten på forsiden; aldri merket og ordet satt med skrift ved siden av
   hverandre. */
.nav-merke { display: block; flex: none; }
.nav-merke img, .nav-merke svg { display: block; height: 40px; width: auto; }
.nav-merke svg { color: var(--n900); }
.nav-merke .ord { transition: opacity 0.4s ease; }
/* dotten i det tegnede merket vokser og krymper om sitt eget midtpunkt
   (logo-loop.js): i menyen og i introen */
svg .prikk { transform-box: fill-box; transform-origin: center; }
.nav-lenker { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-lenker > a {
  padding: 8px 12px; border-radius: var(--radius-pill);
  font-size: 15px; color: var(--n700); text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-lenker > a:hover { background: var(--n200); color: var(--n900); }
.nav-lenker > a[aria-current="page"] { color: var(--n900); }
.nav-knapp {
  border: 0; background: var(--n200); color: var(--n800);
  border-radius: var(--radius-pill); padding: 8px 14px;
  font-family: inherit; font-size: 13px; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-knapp:hover { background: var(--n300); color: var(--n900); }
/* Forsiden: heltens meny (.nav-helt) står fast over bildet med hele logoen
   og språket, og ruller bort med sida (nettside.js). Den faste menyen
   (.nav-fast) ligger skjult bak helten, og glir ned fram bak bildekanten
   (.vis) når bunnen av bildet når toppen av skjermen; opp igjen glir den
   tilbake. Den glir på tid, ikke med scrollen, så den aldri står halvveis.
   Uten strek, i sidefargen, så den går i ett med seksjonen under. Heltens
   knapper blir stående på menyknappenes høyde og glir bak bildekanten. */
.nav-topp.nav-helt { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom-color: transparent; align-items: flex-start; }
.nav-helt .nav-merke img, .nav-helt .nav-merke svg { height: 76px; }
.nav-helt .sprakvalg { margin-top: 5px; }
.nav-topp.nav-fast {
  position: fixed; top: 0; left: 0; right: 0; border-bottom-color: transparent;
  transform: translateY(-100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-topp.nav-fast.vis { transform: none; }
@media (prefers-reduced-motion: reduce) { .nav-topp.nav-fast { transition: none; } }
/* Snappepunktene mens heltens knapper glir bak bildekanten (nettside.js):
   stopper man midt i, glir sida til nærmeste hele tilstand. */
html.snapp-helt { scroll-snap-type: y proximity; }
.snapp { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; }
.nav-handlinger { display: flex; gap: 10px; margin-left: 8px; }
.nav-handlinger .btn { min-width: 160px; }

/* Språkvalget: globusen står ytterst til høyre, sammen med lenkene og
   knappene, og åpner en liten meny under seg, som kebab-menyen i panelet.
   Haken står ved språket som gjelder. */
.sprakvalg { position: relative; }
/* Globusen står som et rent ikon, uten den runde flaten knappene har */
.nav-sprak { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: none; color: var(--n800); }
.nav-sprak:hover, .nav-sprak[aria-expanded="true"] { background: none; color: var(--n900); }
.nav-sprak svg { width: 18px; height: 18px; }
.sprak-meny {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 156px; padding: 4px;
  background: var(--n100); border: 1px solid var(--n200);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(22, 19, 14, 0.12);
}
.sprak-meny[hidden] { display: none; }
.sprak-meny button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 8px 10px; border: 0; background: transparent;
  border-radius: var(--radius-sm); font-family: inherit; font-size: 15px;
  color: var(--n800); text-align: left; cursor: pointer;
}
.sprak-meny button:hover, .sprak-meny button:focus-visible { background: var(--n200); color: var(--n900); outline: none; }
.sprak-meny button svg { width: 18px; height: 18px; color: var(--n900); visibility: hidden; }
.sprak-meny button[aria-checked="true"] { color: var(--n900); }
.sprak-meny button[aria-checked="true"] svg { visibility: visible; }
/* Lys meny over et mørkt heltebilde (Om oss): merket og lenkene i n50 så
   lenge menyen ligger over bildet; forbi det er den som ellers. */
.nav-topp.nav-lys.over-helten .nav-merke img { filter: invert(1); }
.nav-topp.nav-lys.over-helten .nav-merke svg { color: var(--n50); }
.nav-topp.nav-lys.over-helten .nav-lenker > a,
.nav-topp.nav-lys.over-helten .nav-lenker > a[aria-current="page"] { color: var(--n50); }
.nav-topp.nav-lys.over-helten .nav-lenker > a:hover { background: var(--n900); color: var(--n50); }
.nav-topp.nav-lys.over-helten .nav-sprak { color: var(--n50); }

/* to lenker og språket får plass på en telefon: ingen hamburger */
/* (knappene i menyen: på telefon bare Venteliste, se nedenfor) */
@media (max-width: 760px) {
  .nav-topp { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .nav-merke img, .nav-merke svg { height: 36px; }
  .nav-lenker { gap: 0; }
  .nav-lenker > a { padding: 8px 10px; }
}

/* ---------- seksjoner ---------- */
.seksjon { padding: 72px 24px; }
/* en lenke til #enheten skal lande under menyen, ikke bak den */
.seksjon { scroll-margin-top: 88px; }
.seksjon.tett { padding-top: 0; }
.seksjon.fylt { background: var(--n100); }
.innhold { width: 100%; max-width: 980px; margin: 0 auto; }
/* Smal betyr kort linje, ikke smal spalte: alle seksjoner starter på samme
   venstre kant (den brede spalten), og bare tekstens bredde er kortere. Før
   sto de smale midtstilt, og innholdet hoppet inn og ut nedover siden. */
.innhold.smal > * { max-width: 680px; }

.etikett {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--n600); margin-bottom: 14px;
}
.seksjon h1, .seksjon h2 {
  font-size: 38px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--n900); margin-bottom: 16px; text-wrap: balance;
}
.seksjon h3 {
  font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--n900);
  margin-bottom: 8px;
}
.seksjon p { font-size: 16px; line-height: 1.7; color: var(--n800); }
.seksjon p + p { margin-top: 14px; }
.seksjon .ingress { font-size: 18px; line-height: 1.6; color: var(--n800); max-width: 620px; }
.seksjon .liten { font-size: 13px; line-height: 1.6; color: var(--n700); }

/* ---------- rutenett og kort ---------- */
.rutenett { display: grid; gap: 24px; margin-top: 40px; }
.rutenett.to { grid-template-columns: repeat(2, 1fr); }
.rutenett.tre { grid-template-columns: repeat(3, 1fr); }
.rutenett.fire { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1099px) {
  .rutenett.fire { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .rutenett.to, .rutenett.tre, .rutenett.fire { grid-template-columns: 1fr; gap: 20px; }
  .seksjon { padding: 48px 20px; }
  .seksjon h1, .seksjon h2 { font-size: 26px; }
}

.kort {
  background: var(--n100);
  border: 1px solid var(--n200);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.kort p { font-size: 15px; color: var(--n800); }

/* stegene: nummeret er informasjon, ikke pynt — rekkefølgen er hele poenget */
.steg { counter-reset: steg; }
.steg .kort { position: relative; counter-increment: steg; }
.steg .kort h3 { margin-bottom: 0; }
.steg .kort::before {
  content: counter(steg);
  display: block; font-size: 26px; font-weight: 500; color: var(--n500);
  margin-bottom: 12px; letter-spacing: -0.01em;
}

/* ---------- spørsmål og svar ---------- */
.sporsmal { border-top: 1px solid var(--n200); }
.sporsmal summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  font-size: 18px; font-weight: 450; color: var(--n900);
  display: flex; align-items: center; gap: 12px;
}
.sporsmal summary::-webkit-details-marker { display: none; }
.sporsmal summary::after {
  content: '+'; margin-left: auto; color: var(--n500); font-size: 19px;
}
.sporsmal[open] summary::after { content: '–'; }
.sporsmal p { padding-bottom: 18px; max-width: 680px; }
/* Svaret glir opp og ned (nettside.js). Lista har fast høyde, den den får
   når det lengste svaret er åpent, så det som står under ikke flytter seg. */
.sporsmal .svar { overflow: hidden; }
.sporsmal summary::after { transition: transform 0.24s ease; }
.sporsmal.lukker summary::after { content: '+'; }

/* ---------- knapper ----------
   Samme to knappene som i panelet: én svart hovedvei, én stille ved siden av. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-family: inherit; font-size: 15px; font-weight: 450; line-height: 1.4;
  text-decoration: none; cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-primary { background: var(--n900); color: var(--n50); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--n800); }
.btn-quiet { background: var(--n200); color: var(--n900); }
.btn-quiet:hover, .btn-quiet:focus-visible { background: var(--n300); }
.knapperad { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- bunnen (sidebunn: personvern og vilkår har sin egen .bunn) ---------- */
.sidebunn {
  background: var(--n100);
  border-top: 1px solid var(--n200);
  padding: 48px 24px calc(40px + env(safe-area-inset-bottom));
}
.sidebunn .innhold { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; }
.sidebunn-kolonne { display: flex; flex-direction: column; gap: 8px; }
.sidebunn-kolonne .etikett { margin-bottom: 4px; }
.sidebunn a { font-size: 15px; color: var(--n700); text-decoration: none; }
.sidebunn a:hover { color: var(--n900); }
.sidebunn .liten { color: var(--n600); }
.sidebunn .siste { margin-left: auto; text-align: right; }
/* Støttespillerne: en egen, lav rad nederst, merkene små */
.sidebunn .sidebunn-stotte { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--n200); align-items: center; gap: 24px; }
.sidebunn-stotte img { display: block; height: 56px; width: auto; }
@media (max-width: 760px) {
  .sidebunn .siste { margin-left: 0; text-align: left; }
}

/* ---------- tekstsider (personvern, vilkår) ---------- */
.tekstside { padding: 56px 24px 96px; }
.tekstside .innhold { max-width: 680px; }
.tekstside h1 {
  font-size: 38px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--n900); margin-bottom: 8px;
}
.tekstside h2 {
  font-size: 19px; font-weight: 500; color: var(--n900); margin: 36px 0 10px;
}
.tekstside p, .tekstside li { font-size: 16px; line-height: 1.7; color: var(--n800); }
.tekstside p + p, .tekstside ul { margin-top: 12px; }
.tekstside ul { padding-left: 20px; }
.tekstside li + li { margin-top: 6px; }
.tekstside a { color: var(--blue); }
.tekstside .liten { font-size: 13px; color: var(--n700); }

/* ---------- nyhetsbrevet i bunnen ----------
   Ett felt med en pil i, ikke en knapp ved siden av: på forsiden er det bare
   ventelista som får en knapp. Feltet er søket fra panelet (n200, pill). */
.nyhetsbrev { display: flex; flex-direction: column; gap: 8px; width: min(320px, 100%); }
.sidebunn .nyhetsbrev.siste { text-align: left; }
.nyhetsbrev label { font-size: 15px; font-weight: 500; color: var(--n900); }
.nyhetsbrev-felt {
  display: flex; align-items: center; gap: 6px;
  background: var(--n200); border: 1px solid var(--n300); border-radius: var(--radius-pill);
  padding: 3px 3px 3px 16px;
  transition: border-color 0.15s ease;
}
.nyhetsbrev-felt:focus-within { border-color: var(--n500); }
.nyhetsbrev input {
  flex: 1; min-width: 0; height: 38px; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; color: var(--n900);
}
.nyhetsbrev input::placeholder { color: var(--n600); }
.nyhetsbrev button {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--n900); color: var(--n50); cursor: pointer;
  transition: background-color 0.15s ease;
}
.nyhetsbrev button:hover, .nyhetsbrev button:focus-visible { background: var(--n800); }
.nyhetsbrev button:disabled { background: var(--n300); cursor: default; }
.nyhetsbrev button svg { width: 18px; height: 18px; }
.nyhetsbrev-svar { color: var(--n700); }

/* Et bilde som ruller litt i utakt med siden: heltebildet og telefonen med
   appen (nettside.js setter --parallakse). Rammen rundt klipper, så kanten
   står stille. */
.parallakse { transform: translate3d(0, var(--parallakse, 0px), 0); will-change: transform; }

/* ---------- skjemaene (ventelista og kontaktsiden) ----------
   Står i siden, ikke i en dialog. Feltene er panelets: n200, kant n300 som
   blir n500 ved fokus. */
.skjema {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skjema input,
.skjema textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--n300);
  border-radius: var(--radius-md);
  background-color: var(--n200);
  color: var(--n900);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.skjema-feil {
  font-size: 13px;
  color: var(--n700);
  margin: -2px 2px 0;
}

/* skjemaene står i siden, ikke i en dialog */
.kontakt-skjema, .venteliste-skjema { margin-top: 28px; max-width: 520px; }
/* skjult etter sending: display: flex under ville ellers vunnet over hidden */
.skjema[hidden] { display: none; }
.skjema .btn { align-self: flex-start; margin-top: 4px; }
.kontakt-takk, .venteliste-takk { margin-top: 20px; }
.venteliste-takk h3 { margin-bottom: 4px; }
.skjema textarea { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
/* et felt mennesker ikke ser: en robot fyller det ut og røper seg */
.skjema .skjema-felle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.skjema input::placeholder,
.skjema textarea::placeholder {
  color: var(--n600);
}

.skjema input:focus,
.skjema textarea:focus {
  outline: none;
  border-color: var(--n500);
}

@media (max-width: 760px) {
  .nav-helt .nav-merke img, .nav-helt .nav-merke svg { height: 64px; }
}
@media (max-width: 560px) {
  /* på telefon får bare Venteliste plass i den faste menyen */
  .nav-handlinger .nav-handling-kontakt { display: none; }
  .nav-handlinger { margin-left: 4px; }
  .nav-handlinger .btn { min-width: 0; }
}
}