/* Skriftene ligger på vår egen server, så besøkende ikke sendes videre til Google. SIL Open Font License. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("skrift/Nunito_400Regular.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("skrift/Nunito_600SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("skrift/Nunito_700Bold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("skrift/Nunito_800ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Andika"; font-style: normal; font-weight: 400; font-display: swap; src: url("skrift/Andika_400Regular.woff2") format("woff2"); }
@font-face { font-family: "Andika"; font-style: normal; font-weight: 700; font-display: swap; src: url("skrift/Andika_700Bold.woff2") format("woff2"); }

/* Leksevenn – felles stil for leksevenn.no.
   Fargene er de samme som i packages/shared/src/design.ts.
   Alle tekstpar har kontrast på minst 4,5:1 i både lys og mørk modus. */

:root {
  color-scheme: light dark;
  --flate: #FFF8EE;
  --flate-hevet: #FFFFFF;
  --flate-senket: #F6EBDC;
  --linje: #E6D9C6;
  --linje-sterk: #9C8E7A;
  --blekk: #1F2A44;
  --blekk-dempet: #5B6478;
  --fjord: #13707A;
  --paa-fjord: #FFFFFF;
  --fjord-myk: #D7EEEF;
  --kantarell: #F4A93C;
  --paa-kantarell: #1F2A44;
  --kantarell-myk: #FDEBCB;
  --riktig: #237A47;
  --paa-riktig: #FFFFFF;
  --riktig-myk: #DDF2E4;
  --nesten: #8A5200;
  --nesten-myk: #FCEBD0;
  --systemfeil: #B3392A;
  /* Mørk seksjon («Trygt for barnet») og telefonrammen */
  --natt: #1F2A44;
  --paa-natt: #F5EFE4;
  --paa-natt-dempet: #B9C0CC;
  --telefonramme: #1F2A44;

  --skrift-visning: "Nunito", ui-rounded, system-ui, sans-serif;
  --skrift-lese: "Andika", "Nunito", system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pille: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --flate: #161D2E;
    --flate-hevet: #212B42;
    --flate-senket: #10162A;
    --linje: #2E3A57;
    --linje-sterk: #7B86A0;
    --blekk: #F5EFE4;
    --blekk-dempet: #B9C0CC;
    --fjord: #4FB8C2;
    --paa-fjord: #0D1B22;
    --fjord-myk: #173C45;
    --kantarell: #F4A93C;
    --paa-kantarell: #1F2A44;
    --kantarell-myk: #3D2F1A;
    --riktig: #6CCB95;
    --paa-riktig: #10162A;
    --riktig-myk: #183A28;
    --nesten: #F2B866;
    --nesten-myk: #3D2D14;
    --systemfeil: #F08A7C;
    --natt: #10162A;
    --paa-natt: #F5EFE4;
    --paa-natt-dempet: #B9C0CC;
    --telefonramme: #3A4766;
  }
}

/* Grunnlag */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--flate);
  color: var(--blekk);
  font-family: var(--skrift-visning);
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
a { color: var(--fjord); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--fjord);
  outline-offset: 3px;
  border-radius: 4px;
}
.mork-seksjon a:focus-visible { outline-color: var(--paa-natt); }

.skjult {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.hopp-til-innhold {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--fjord); color: var(--paa-fjord);
  padding: 12px 16px; border-radius: var(--radius-md); font-weight: 700;
}
.hopp-til-innhold:focus { top: 16px; }

.indre {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 600px) {
  .indre { padding-left: 24px; padding-right: 24px; }
}

/* Knapper */
.knapp {
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-md);
  border: 2px solid var(--linje-sterk);
  background: var(--flate-hevet);
  color: var(--blekk);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  text-align: center;
}
.knapp-primar { background: var(--fjord); border-color: var(--fjord); color: var(--paa-fjord); }
.knapp:disabled { opacity: .7; cursor: progress; }

/* Topp */
.topp {
  padding-block: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.merkevare {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blekk);
  text-decoration: none;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.merkevare img { width: 40px; height: 40px; }
.meny { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.meny a:not(.knapp) { color: var(--blekk); font-weight: 700; text-decoration: none; }
.meny a:not(.knapp):hover { text-decoration: underline; }
.meny-lenker { display: none; }
@media (max-width: 479px) {
  .topp { flex-wrap: nowrap; gap: 8px; }
  .merkevare { font-size: 24px; gap: 8px; }
  .merkevare img { width: 36px; height: 36px; }
  .topp .knapp { font-size: 15px; padding: 0 12px; white-space: nowrap; }
}
@media (min-width: 860px) {
  .topp { padding-block: 24px; }
  .meny-lenker { display: contents; }
}

/* Felles for seksjoner */
.seksjon { padding-block: 56px; }
@media (min-width: 860px) { .seksjon { padding-block: 80px; } }
.seksjon-hevet { background: var(--flate-hevet); border-block: 1px solid var(--linje); }
.seksjon-hode { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin-bottom: 32px; }
h2 { font-size: 32px; line-height: 1.15; font-weight: 800; }
h3 { font-size: 20px; line-height: 1.25; font-weight: 800; }
@media (min-width: 600px) { h2 { font-size: 40px; } }
.ingress { font-size: 19px; line-height: 1.55; color: var(--blekk-dempet); max-width: 36em; }
@media (min-width: 600px) { .ingress { font-size: 20px; } }
.tekst { color: var(--blekk-dempet); line-height: 1.55; }
.etikett { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-dempet); }
.liten { font-size: 15px; color: var(--blekk-dempet); }
.rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
@media (min-width: 600px) { .rutenett { gap: 24px; } }

/* Hero */
.hero {
  padding-block: 24px 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}
.hero-tekst { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero h1 { font-size: 40px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 600px) { .hero h1 { font-size: 56px; } }
@media (min-width: 860px) { .hero { padding-block: 40px 80px; } }
.merke {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: var(--radius-pille);
  color: var(--fjord);
  background: var(--fjord-myk);
}
.hero-bilde { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; }

/* Venteliste-skjemaet */
.skjema { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.skjema-rad { display: flex; flex-wrap: wrap; gap: 10px; }
.felt-navn { font-size: 15px; font-weight: 700; }
.inndata {
  flex: 1 1 240px;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  font: inherit;
  font-size: 17px;
  border-radius: var(--radius-md);
  border: 2px solid var(--linje-sterk);
  background: var(--flate-hevet);
  color: var(--blekk);
}
.inndata::placeholder { color: var(--blekk-dempet); }
.inndata[aria-invalid="true"] { border-color: var(--systemfeil); }
.skjema .knapp { min-height: 52px; flex: 1 1 auto; }
@media (min-width: 480px) { .skjema .knapp { flex: 0 0 auto; } }
.avkrysning { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 16px; line-height: 1.4; }
.avkrysning input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--fjord); cursor: pointer; }
.feil { color: var(--systemfeil); font-weight: 700; font-size: 15px; }
.feil:empty { display: none; }
.feil ul { margin: 0; padding-left: 20px; }
.takk {
  font-size: 17px;
  font-weight: 700;
  color: var(--riktig);
  background: var(--riktig-myk);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.takk:empty { display: none; }

/* «I dag»-telefonen i hero */
.telefon {
  width: 100%;
  max-width: 360px;
  border-radius: 44px;
  border: 10px solid var(--telefonramme);
  background: var(--flate);
  overflow: hidden;
  font-family: var(--skrift-visning);
  color: var(--blekk);
  display: flex;
  flex-direction: column;
}
.tlf-topp { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 36px 16px 4px; }
.tlf-hei { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; min-width: 0; }
.tlf-hei img { width: 32px; height: 32px; }
.tlf-bytt { font-size: 13px; font-weight: 700; border: 2px solid var(--linje-sterk); border-radius: var(--radius-pille); padding: 6px 12px; white-space: nowrap; background: var(--flate-hevet); }
.tlf-innhold { display: flex; flex-direction: column; gap: 14px; padding: 8px 16px 16px; }
.tlf-tittel { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tlf-tittel b { font-size: 26px; font-weight: 800; line-height: 1.2; }
.tlf-tittel span { font-size: 14px; font-weight: 700; color: var(--blekk-dempet); font-variant-numeric: tabular-nums; }
.tlf-fremdrift { height: 10px; border-radius: var(--radius-pille); background: var(--flate-senket); overflow: hidden; margin-top: -6px; }
.tlf-fremdrift span { display: block; width: 25%; height: 100%; border-radius: var(--radius-pille); background: var(--riktig); }
.tlf-liste { background: var(--flate-hevet); border: 1px solid var(--linje); border-radius: var(--radius-lg); overflow: hidden; }
.tlf-rad { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.tlf-rad + .tlf-rad { border-top: 1px solid var(--linje); }
.tlf-rad.uten-linje { border-top: 0; }
.tlf-les { background: var(--fjord-myk); }
.tlf-trening { background: var(--kantarell-myk); }
.tlf-ikon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tlf-ikon svg { width: 20px; height: 20px; }
.tlf-les .tlf-ikon { background: var(--fjord); color: var(--paa-fjord); }
.tlf-trening .tlf-ikon { background: var(--kantarell); color: var(--paa-kantarell); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tlf-vokser { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tlf-lese { font-family: var(--skrift-lese); font-size: 18px; line-height: 1.3; }
.tlf-lese.fet { font-weight: 700; }
.tlf-lese.gjort { color: var(--blekk-dempet); text-decoration: line-through; }
.tlf-under { font-size: 13px; color: var(--blekk-dempet); }
.tlf-knapp { font-size: 15px; font-weight: 700; background: var(--fjord); color: var(--paa-fjord); border-radius: var(--radius-md); padding: 8px 16px; }
.tlf-boks { width: 28px; height: 28px; margin: 0 5px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tlf-boks.hake { background: var(--riktig); color: var(--paa-riktig); }
.tlf-boks.tom { border: 2px solid var(--linje-sterk); }
.tlf-boks svg { width: 18px; height: 18px; }
.tlf-lyd { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--blekk); }
.tlf-trening .tlf-lyd { background: var(--flate-hevet); }
.tlf-lyd svg { width: 20px; height: 20px; }
.tlf-overskrift { padding: 10px 12px 2px 14px; }
.tlf-uke { display: flex; flex-direction: column; gap: 8px; }
.tlf-uke > b { font-size: 18px; font-weight: 800; }
.tlf-dager { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tlf-dag { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: var(--radius-md); background: var(--flate-senket); font-size: 13px; font-weight: 700; color: var(--blekk-dempet); min-height: 52px; }
.tlf-dag.ferdig { background: var(--riktig-myk); color: var(--riktig); }
.tlf-dag.idag { background: var(--fjord-myk); box-shadow: inset 0 0 0 2px var(--fjord); color: var(--fjord); font-weight: 800; }
.tlf-dag.idag small { color: var(--blekk); font-size: 13px; font-weight: 700; }
.tlf-dag svg { width: 20px; height: 20px; fill: var(--kantarell); }
.tlf-meny { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linje); background: var(--flate-hevet); padding: 8px 4px 18px; }
.tlf-meny span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--blekk-dempet); }
.tlf-meny span.aktiv { color: var(--fjord); font-weight: 800; }
.tlf-meny svg { width: 22px; height: 22px; }

/* Slik virker det */
.steg { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius-lg); background: var(--flate); }
.steg-ikon { width: 48px; height: 48px; border-radius: var(--radius-pille); display: flex; align-items: center; justify-content: center; background: var(--fjord); color: var(--paa-fjord); }
.steg-ikon svg { width: 24px; height: 24px; }
.steg-ikon.kantarell { background: var(--kantarell); color: var(--paa-kantarell); }
.steg-ikon.natt { background: var(--blekk); color: var(--flate); }

/* Det Leksevenn hjelper med */
.kort { padding: 24px; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 10px; }
.kort h3 { font-size: 26px; }
.kort-fjord { background: var(--fjord); color: var(--paa-fjord); }
.kort-kantarell { background: var(--kantarell); color: var(--paa-kantarell); }
.kort-fjord .etikett, .kort-kantarell .etikett { color: inherit; }
.kort-hevet { background: var(--flate-hevet); border: 1px solid var(--linje); }
.kort-senket { background: var(--flate-senket); }

/* Trygt for barnet */
.mork-seksjon { background: var(--natt); color: var(--paa-natt); }
.trygt { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.trygt-hode { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }
.trygt-hode p { font-size: 19px; line-height: 1.55; color: var(--paa-natt-dempet); }
.trygt-hode a { color: var(--paa-natt); font-weight: 700; }
.trygt-liste { flex: 2 1 460px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; }
.trygt-liste li { display: flex; flex-direction: column; gap: 6px; }
.trygt-liste b { font-size: 20px; font-weight: 800; }
.trygt-liste span { line-height: 1.55; color: var(--paa-natt-dempet); }

/* Pris */
.pris { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.pris-kort-rad { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; }
.pris-kort { flex: 1 1 260px; max-width: 360px; padding: 28px; border-radius: var(--radius-lg); background: var(--flate-hevet); border: 1px solid var(--linje); display: flex; flex-direction: column; gap: 6px; }
.pris-kort.anbefalt { background: var(--fjord-myk); border-color: var(--fjord); box-shadow: inset 0 0 0 1px var(--fjord); }
.pris-kort .navn { font-weight: 700; color: var(--blekk-dempet); }
.pris-kort.anbefalt .navn { color: var(--blekk); }
.pris-kort .belop { font-size: 40px; font-weight: 800; line-height: 1.1; }
.pris-tillegg { display: flex; flex-direction: column; gap: 6px; }
.tilbud { font-weight: 800; color: var(--blekk); background: var(--kantarell-myk); border-radius: var(--radius-md); padding: 12px 16px; }

/* Spørsmål og svar */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--linje); }
.faq details:last-child { border-bottom: 1px solid var(--linje); }
.faq summary { font-size: 19px; font-weight: 800; cursor: pointer; padding-block: 16px; min-height: 48px; list-style-position: outside; margin-left: 20px; }
.faq details p { padding-bottom: 18px; max-width: 64ch; }

/* Bunntekst */
.bunn { border-top: 1px solid var(--linje); }
.bunn .indre { padding-block: 32px 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.bunn img { width: 40px; height: 40px; }
.bunn a { font-size: 15px; font-weight: 700; color: var(--blekk); }

/* Personvernsiden */
.dokument { max-width: 760px; padding-block: 24px 64px; }
.dokument h1 { hyphens: auto; -webkit-hyphens: auto; font-size: 30px; line-height: 1.15; font-weight: 800; margin-bottom: 8px; }
@media (min-width: 600px) { .dokument h1 { font-size: 44px; } }
.dokument h2 { font-size: 26px; margin: 40px 0 12px; }
.dokument p, .dokument ul { margin: 0 0 14px; }
.dokument ul { padding-left: 22px; }
.dokument li { margin-bottom: 6px; }
.dokument .dato { color: var(--blekk-dempet); margin-bottom: 24px; }
.plassholder { background: var(--kantarell-myk); color: var(--blekk); border-radius: 4px; padding: 0 4px; font-weight: 700; }
.tabell-ramme { margin: 0 0 16px; border: 1px solid var(--linje); border-radius: var(--radius-md); overflow: hidden; }
.dokument table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.dokument th, .dokument td { text-align: left; vertical-align: top; padding: 10px 12px; }
.dokument th { background: var(--flate-senket); font-weight: 800; }
.dokument td { background: var(--flate-hevet); border-top: 1px solid var(--linje); }
/* Smal skjerm: hver rad blir et kort, så tabellen aldri gir sidelengs rulling. */
@media (max-width: 599px) {
  .dokument thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dokument table, .dokument tbody, .dokument tr, .dokument td { display: block; }
  .dokument tr + tr { border-top: 1px solid var(--linje); }
  .dokument td { border-top: 0; padding: 4px 14px; }
  .dokument td:first-child { padding-top: 12px; font-weight: 800; }
  .dokument td:last-child { padding-bottom: 12px; }
  .dokument td[data-navn]:not(:first-child)::before { content: attr(data-navn) ": "; font-weight: 700; color: var(--blekk-dempet); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .knapp { transition: filter .15s; }
  .knapp:hover:not(:disabled) { filter: brightness(1.08); }
}

/* Skjulte elementer skal alltid være skjult, også når en klasse setter display. */
[hidden] { display: none !important; }