/* De offentlige sidene (forsiden og sidene i bunnteksten). Skrift og knapper kommer fra style.css. */

/* Sidene veksler mellom svarte og hvite bånd. Hvert bånd setter fargene selv, så kontrasten er den samme uansett tema på enheten. */
:root:has(body.site), :root:has(body.site-document) { color-scheme: dark; }
body.site, body.site-document {
  color-scheme: dark;
  --bg: #000000; --card: #000000; --raised: #000000;
  --line: #FFFFFF; --line-2: #FFFFFF;
  --text: #FFFFFF; --text-2: #FFFFFF; --muted: #FFFFFF;
  --accent: #FFFFFF; --accent-ink: #FFFFFF; --on-accent: #000000;
  --btn: #FFFFFF; --btn-hover: #FFFFFF; --btn-text: #000000;
  --pos: #FFFFFF; --warn: #FFFFFF; --neg: #FFFFFF; --ring: #FFFFFF;
  --brand: #FFFFFF; --paper: #FFFFFF; --ink: #000000;
}
.light {
  color-scheme: light;
  --bg: #FFFFFF; --card: #FFFFFF; --raised: #000000;
  --line: #000000; --line-2: #000000;
  --text: #000000; --text-2: #000000; --muted: #000000;
  --accent: #000000; --accent-ink: #000000; --on-accent: #FFFFFF;
  --btn: #000000; --btn-hover: #000000; --btn-text: #FFFFFF;
  --pos: #000000; --warn: #000000; --neg: #000000; --ring: #000000;
  --paper: #000000; --ink: #FFFFFF;
  background: var(--bg); color: var(--text);
}
body.site, body.site-document, .light {
  --accent-soft: var(--text);
  --pos-ink: var(--text);
  --warn-ink: var(--text);
}

body.site { display: flex; flex-direction: column; background: var(--bg); padding-bottom: env(safe-area-inset-bottom); }
body.site-document { background: var(--bg); }
.site main { flex: 1; width: 100%; max-width: none; margin: 0; padding: 0; }
.site main > * + * { margin-top: 0; }
/* Lyse bånd etter hverandre overlapper én piksel, ellers kan den svarte bakgrunnen skinne gjennom ved skalert visning. */
.site main > .light + .light { margin-top: -1px; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.band { padding-inline: max(20px, calc((100% - 1120px) / 2)); }
:where(.site) :is(h1, h2, h3, p, ul, dl, dd, figure) { margin: 0; }
:where(.site) ul { padding: 0; list-style: none; }
:root:has(body.site) { scroll-behavior: smooth; }
body.site :is(section[id], main[id]) { scroll-margin-top: 32px; }
.site :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.site main:focus { outline: none; }
.skip-link { position: fixed; top: 12px; left: 20px; z-index: 30; padding: 12px 20px; color: #000000; background: #FFFFFF; border-radius: 8px; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { :root:has(body.site) { scroll-behavior: auto; } .wall-pg::after { transition: none; } }
.site main a:not(.btn) {
  color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: currentColor; transition: text-decoration-color .15s var(--ease);
}
.site main a:not(.btn):hover { text-decoration-color: currentColor; }
.site a { touch-action: manipulation; }
.site main a:active { text-decoration-thickness: 2px; }
.site .text-link { display: inline-block; width: fit-content; font-size: 15px; font-weight: 500; text-underline-offset: 5px; }

/* toppen */
.site-top { display: flex; align-items: center; gap: 32px; min-height: 80px; padding-block: 12px; }
.site .brand { color: var(--text); text-decoration: none; pointer-events: auto; }
body.site .brand:hover { background: none; }
.site-top .brand { height: auto; gap: 10px; padding: 0; margin-left: 0; font-size: 21px; line-height: 28px; }
.site-top .logo { width: 28px; height: 28px; margin-left: -7px; }
.site-top .logo svg { width: 100%; height: 100%; }
.site-nav { display: flex; gap: 24px; }
.site-nav a, .site-lang { color: var(--text-2); font-size: 15px; text-decoration: none; transition: color .15s var(--ease); }
.site-nav a, .site-lang { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 6px; }
.site-nav a:hover, .site-lang:hover, .site-nav a[aria-current] { color: var(--text); text-decoration: underline; }
.site-actions .btn { height: 40px; }
.site-actions .btn:hover:not(:focus-visible) { outline: none; }
.site-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* hero305 */
.hero { padding-block: clamp(24px, 5vw, 48px) clamp(40px, 6vw, 64px); }
.hero h1 { max-width: 13em; font-size: clamp(40px, 7.6vw, 92px); line-height: 1.02; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.hero-row { display: grid; gap: 20px; margin-top: clamp(20px, 3vw, 28px); }
.hero-row p { max-width: 36rem; font-size: clamp(17px, 1.6vw, 18px); line-height: 1.55; color: var(--text-2); }
.site .hero-more { justify-self: start; min-width: 160px; height: 56px; padding-inline: 32px; font-size: 17px; border-radius: 12px; }

/* Skoleåret som papirsider: én side per uke og én strek per besvarte spørsmål. site.js fyller dem én etter én. */
.wall { margin-top: clamp(32px, 5vw, 56px); }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 24px 6px; padding-top: 20px; }
.wall-term { display: contents; }
.wall-pg {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; aspect-ratio: 5 / 7; padding: 6px; border-radius: 6px;
  font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.wall-pg b { position: absolute; left: 1px; top: -20px; font-weight: 500; color: var(--text-2); }
.wall-pg::after {
  content: ""; flex: 0 1 21px; min-height: 0; background-repeat: no-repeat; background-position: 0 0, 0 6px, 0 12px, 0 18px; background-size: 0 3px, 0 3px, 0 3px, 0 3px;
  background-image: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0);
  transition: background-size .5s var(--ease);
}
.wall-pg.done::after { background-size: 100% 3px, 72% 3px, 92% 3px, 58% 3px; }
.wall-pg.done:nth-child(3n)::after { background-size: 86% 3px, 100% 3px, 64% 3px, 78% 3px; }
.wall-pg.done:nth-child(4n + 1)::after { background-size: 94% 3px, 60% 3px, 100% 3px, 44% 3px; }
.wall-pg.done { background: var(--paper); color: var(--ink); box-shadow: none; }
.wall-pg.part { background: var(--bg); color: var(--ink); box-shadow: none; }
.wall-pg.part::after { background-size: 100% 3px, 72% 3px, 0 3px, 0 3px; }
.wall-pg.now { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--paper); }
.wall-pg.now::after { background-size: 100% 3px, 72% 3px, 92% 3px, 0 3px; }
.wall-pg.missing { color: var(--text); box-shadow: none; border: 1px dashed var(--text-2); }
.wall-pg.off { background: var(--raised); text-decoration: line-through; box-shadow: none; }
.wall figcaption { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* Under innfyllingen er den aktive siden lys. Klassen settes i site.js. */
html.wall-play .wall-pg:not(.shown, .writing) { border: 0; background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); text-decoration: none; }
html.wall-play .wall-pg:not(.shown, .writing)::after { background-size: 0 3px, 0 3px, 0 3px, 0 3px; }
html.wall-play .wall-pg.writing:not(.shown) { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }

@media (max-width: 599px) {
  .site .hero-more { justify-self: stretch; }
  .wall-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 20px 4px; }
  .wall-pg { aspect-ratio: 5 / 8; padding: 4px 3px; font-size: 11px; line-height: 14px; border-radius: 5px; }
  .wall-pg b { top: -18px; font-size: 11px; }
}

/* seksjoner */
.block { padding-block: clamp(56px, 8vw, 88px); }
.block > h2, .split h2, .section-heading h2, .showcase h2 { font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.block-lead { max-width: 34rem; margin-top: 12px; font-size: 17px; color: var(--text-2); }

/* Hva Ukelogg gjør: tre trinn, hvert med et skjema over det som skjer med loggen. */
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-heading > a { flex: none; margin-bottom: 4px; }
/* Toppen av blokken står i samme rutenett som trinnene under: teksten til venstre, skjermene til høyre. */
.showcase { display: grid; gap: clamp(32px, 4vw, 48px); align-items: center; }
.showcase .text-link { margin-top: 20px; }
/* Ekte skjermbilder av loggen i tynne, svarte enheter med myk skygge. Telefonen står på samme linje som PC-en og dekker bare den tomme margen i skjermbildet. */
.devices { --pc: 86%; --phone: 22%; display: flex; align-items: flex-end; justify-self: center; width: 100%; max-width: 620px; }
.devices img { display: block; width: 100%; height: auto; }
.device-pc { position: relative; flex: 0 0 var(--pc); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .2)); }
.device-pc img { width: 94%; margin-inline: auto; border: clamp(4px, .55vw, 7px) solid #000000; border-radius: clamp(9px, 1.2vw, 15px) clamp(9px, 1.2vw, 15px) 0 0; }
.device-pc::before { content: ""; position: absolute; top: clamp(1px, .2vw, 2px); left: 50%; width: clamp(2px, .25vw, 3px); aspect-ratio: 1; background: #3A3A3C; border-radius: 50%; transform: translateX(-50%); }
.device-pc::after { content: ""; display: block; height: clamp(7px, .95vw, 12px); background: linear-gradient(#2C2C2E 0 0) center top / 13% 38% no-repeat, #000000; border-radius: 1px 1px clamp(5px, .7vw, 9px) clamp(5px, .7vw, 9px); box-shadow: inset 0 1px 0 #3A3A3C; }
.device-phone { position: relative; flex: 0 0 var(--phone); margin-left: calc(100% - var(--pc) - var(--phone)); padding: clamp(2.5px, .38vw, 5px); background: #000000; border-radius: clamp(17px, 2.3vw, 29px); outline: clamp(2px, .28vw, 3px) solid var(--bg); filter: drop-shadow(-6px 14px 16px rgba(0, 0, 0, .28)); }
.device-phone::before { content: ""; position: absolute; top: 2.2%; left: 50%; width: 30%; height: 3.4%; background: radial-gradient(circle at 86% 50%, #303033 0 1.5px, transparent 2px), #000000; border-radius: 99px; transform: translateX(-50%); z-index: 1; }
/* Bildene er fra appens mørke tema, så stripen over bildet har samme bakgrunn som appen. */
.device-screen { aspect-ratio: 390 / 844; padding-top: 14%; overflow: hidden; background: #141415; border-radius: clamp(14px, 2vw, 24px); }
@media (max-width: 599px) { .devices { --pc: 82%; --phone: 26%; } }
.steps { display: grid; gap: clamp(40px, 5vw, 56px); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.step { display: grid; gap: 20px; }
.step-name { display: flex; align-items: center; gap: 20px; }
.step-art { display: block; flex: none; width: clamp(104px, 12.5vw, 160px); height: auto; aspect-ratio: 1; object-fit: contain; }
.step h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.step ul { display: grid; gap: 10px; }
.step ul li { max-width: 42rem; font-size: 17px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* Eksempelet: ekte sider fra loggen, de samme hvite arkene som ukene i toppen. */
.sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin-top: clamp(32px, 4vw, 48px); }
.sheets img { display: block; width: 100%; height: auto; border-radius: 4px; background: #FFFFFF; }
/* På telefon får det første arket plass, og det neste stikker fram ved kanten. */
@media (max-width: 599px) { .sheets { grid-template-columns: repeat(3, 72vw); margin-right: -20px; overflow: hidden; } }

/* feature7 */
.split { display: grid; gap: 32px; align-items: center; }
.checks { display: grid; gap: 12px; margin-top: 24px; }
.checks li { display: flex; gap: 10px; }
.checks svg { flex: none; margin-top: 3px; color: var(--accent-ink); }
/* Vektorillustrasjon uten ytre bakgrunn. Skyggen følger selve appkortet. */
.year-card { width: 100%; max-width: 720px; min-width: 0; margin: 0; justify-self: center; }
.year-card svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 3px 6px rgb(0 0 0 / .08)) drop-shadow(0 18px 24px rgb(0 0 0 / .12)); }

/* faq39 */
.site-rows { margin-top: 32px; }
.site-rows > div { display: grid; gap: 6px; padding-block: 20px; border-top: 1px solid var(--line); }
.site-rows > div:first-child { border-top: 0; }
.site-rows dt { font-size: 17px; font-weight: 500; }
.site-rows dd { max-width: 42rem; color: var(--text-2); }
.faq-more { margin-top: 28px; }

/* undersidene */
.doc-head { padding-block: 32px 56px; }
.doc-head h1 { font-size: clamp(34px, 5vw, 44px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
.doc-head > p { max-width: 42rem; margin-top: 12px; font-size: 18px; color: var(--text-2); }
.doc-head .doc-updated { font-size: 14px; color: var(--muted); }

/* Undersidene: temaer med ikon til venstre og punktene til høyre, og kontakt til slutt. */
.head-action { gap: 8px; margin-top: 24px; }
.site main .hero-mail { display: inline-block; margin-top: 24px; font-size: clamp(20px, 3vw, 28px); text-underline-offset: 7px; }
.topics { padding-block: 8px 24px; }
.topic { display: grid; gap: 20px; padding-block: clamp(32px, 5vw, 48px); }
.topic + .topic { border-top: 1px solid var(--line-2); }
.topic-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.topic-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--text); background: transparent; border: 1px solid currentColor; border-radius: 12px; }
.topic-head .topic-icon { grid-row: span 2; }
.topic-head h2 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.topic-head p { grid-column: 2; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.topic-list { display: grid; gap: 28px; }
.topic-list h3 { font-size: 17px; line-height: 24px; font-weight: 600; }
.topic-list p { max-width: 42rem; margin-top: 4px; line-height: 1.55; color: var(--text-2); }
.topic-list p + p { margin-top: 10px; }
.contact-band { padding-block: clamp(48px, 7vw, 72px); }
.contact-band h2 { font-size: clamp(26px, 3.5vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; }
.contact-lead { max-width: 36rem; margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.contact-list { display: grid; gap: 28px clamp(32px, 4vw, 56px); margin-top: 32px; }
.contact-list li { padding-top: 24px; border-top: 1px solid var(--line-2); }
.contact-list h3 { margin-top: 16px; font-size: 18px; line-height: 26px; font-weight: 600; }
.contact-list p { margin-top: 2px; font-size: 15px; color: var(--text-2); }
.site main .contact-list a { display: inline-block; margin-top: 12px; font-size: 17px; font-weight: 500; }

/* footer2 */
.site-foot { padding-block: 56px 32px; background: #000000; }
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
.foot-brand { grid-column: 1 / -1; }
.foot-brand .brand { width: fit-content; height: auto; gap: 12px; padding: 0; margin-left: 0; font-size: 28px; line-height: 36px; }
.foot-brand .logo { width: 36px; height: 36px; margin-left: -9px; }
.foot-brand .logo svg { width: 100%; height: 100%; }
.foot-brand p { margin-top: 12px; font-size: 15px; color: var(--text-2); }
.foot-grid h2 { font-size: 17px; font-weight: 600; }
.foot-grid ul { display: grid; gap: 4px; margin-top: 12px; }
.foot-grid a:not(.brand) { font-size: 16px; color: var(--text-2); text-decoration: none; transition: color .15s var(--ease); }
.foot-grid a:not(.brand) { display: inline-flex; align-items: center; min-height: 36px; text-underline-offset: 5px; }
.foot-grid a:not(.brand):hover, .foot-grid a[aria-current] { color: var(--text); text-decoration: underline; }
.foot-legal { margin-top: 40px; padding-top: 20px; font-size: 14px; color: var(--text-2); border-top: 1px solid var(--line-2); }

@media (max-width: 859px) {
  .site-top { flex-wrap: wrap; gap: 8px 20px; padding-block: 16px 8px; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); }
  .site-nav a { font-size: 14px; }
  .section-heading { align-items: start; flex-direction: column; gap: 16px; }
}
@media (max-width: 539px) {
  .site-actions { gap: 12px; }
  .site-top .brand { font-size: 20px; gap: 4px; }
}
@media (min-width: 860px) {
  .topic { grid-template-columns: 320px minmax(0, 1fr); gap: 64px; }
  .topic-head { position: sticky; top: 24px; display: block; align-self: start; }
  .topic-head h2 { margin-top: 14px; }
  .topic-head p { margin-top: 4px; }
  .showcase { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 32px; }
  .devices { max-width: none; }
  .step { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 32px; align-items: start; }
}
@media (min-width: 640px) {
  .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-rows > div { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 32px; }
}
@media (min-width: 960px) {
  .hero-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
  .foot-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: auto; }
}
/* På bred skjerm står høsten og våren på hver sin rad. */
@media (min-width: 1000px) {
  .wall-grid { grid-template-columns: repeat(25, minmax(0, 1fr)); }
  .wall-term + .wall-term > :first-child { grid-column-start: 1; }
}

.wall-pg.part { color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.wall-pg.off { background: var(--bg); box-shadow: inset 0 0 0 1px var(--text); }