@charset "UTF-8";
/*
 * Norea — base.
 *
 * Reset, typografi og grunnflate. Mobil først: alle regler gjelder fra 320 px,
 * og media queries legger bare til. Ingen farger utenom tokens.css.
 */

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

/* :where() holder spesifisiteten på null, så .stabel-* kan gi lister avstand */
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

/* ── Grunnflate ────────────────────────────────────── */
/* Sanden bærer. Mørke flater er brudd, ikke standard (DESIGN.md Layout). */
body {
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-body-weight);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Bunnen står nederst også på korte sider, uten sandstripe under. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.hovedinnhold { flex: 1 0 auto; }

/* ── Typografi ─────────────────────────────────────── */
/* Syne Bold i versaler. Aldri 800. */
h1, h2, h3, .display, .hero-tittel {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word; /* Nødbrudd: lange ord i versaler på 320 px. Bruk ­ for pene brudd */
}

.hero-tittel {
  font-size: var(--text-hero);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--uthev, var(--color-primary));
}

.display {
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--uthev, var(--color-primary));
}

h1 { font-size: var(--text-h1); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.01em; }

p, li, dd { max-width: var(--measure); }

strong, b { font-weight: 600; }

/* Brødtekst alltid venstrestilt */
p { text-align: left; }

.ingress {
  font-size: var(--text-h3);
  font-weight: 300; /* Light uansett brødtekstvekten (byggeplanen § 2.5) */
  line-height: 1.5;
  max-width: var(--measure-lead);
}

.etikett {
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.liten {
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.5;
}

/*
 * Fargekontekst. Lenker, fokusring og uthevet tekst leser tre variabler som
 * hver flate setter (components.css § 5). Uten flate gjelder fallbacken, som er
 * sand-konteksten. Slik arver et hvitt kort på blå flate riktige farger uten
 * spesifisitetskamp.
 *   --lenke  lenkefarge     --fokus  fokusring     --uthev  display, typemerke
 */

/* ── Lenker ────────────────────────────────────────── */
a {
  color: var(--lenke, var(--color-primary));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-thickness: 2px; }

/* ── Fokus ─────────────────────────────────────────── */
/* 3 px sort ring med 2 px avstand. Oransje er aldri fokusring (under 3:1 mot sand). */
:focus-visible {
  outline: var(--fokus-bredde) solid var(--fokus, var(--color-ink));
  outline-offset: var(--fokus-avstand);
}

/* ── Hjelpeklasser ─────────────────────────────────── */
.container {
  width: min(100% - 2 * var(--sidemarg), var(--container));
  margin-inline: auto;
}

.skjult {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Avstand etter nærhet: xs–sm i en gruppe, md–lg mellom grupper, xl+ mellom blokker */
.stabel-xs > * + * { margin-top: var(--space-xs); }
.stabel-sm > * + * { margin-top: var(--space-sm); }
.stabel-md > * + * { margin-top: var(--space-md); }
.stabel-lg > * + * { margin-top: var(--space-lg); }
.stabel-xl > * + * { margin-top: var(--space-xl); }

/* ── Bevegelse ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}