/* ============================================================
   MonumentArt — 02 BASE
   Reset, typografi, globale flater, tilgjengelighet
   ============================================================ */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* håndteres av js/core/smooth-scroll.js */
  scrollbar-gutter: stable;
  /* `clip` og ikke `hidden`: hidden gjør elementet til en scroll-beholder,
     og da slutter position:sticky i heroen å virke. */
  overflow-x: clip;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 400;
  color: var(--c-text-2);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
}

body.is-loading { overflow: hidden; }
body.no-scroll  { overflow: hidden; }

/* ---------- Media ---------- */
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
svg { fill: currentColor; }

/* ---------- Typografi ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
  text-wrap: balance;
  /* Med stram linjeavstand er tekstboksen lavere enn bokstavene selv.
     Underlengdene i g, j, p og y stikker da ut under boksen, og en
     forelder med overflow:hidden kutter dem. Polstringen gir dem
     plass inne i boksen; den negative margen tar plassen tilbake, så
     oppsettet står nøyaktig som før. Bare nedover — margin-top er i
     bruk av .mt-*-klassene og skal ikke røres. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* Store tall (statistikk og priser) har samme problem — samme løsning. */
.stat__num, .plan__price, .case__fact-num {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.018em; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: inherit; text-decoration: none; }

strong, b { font-weight: 600; color: var(--c-text); }

::selection { background: var(--c-accent); color: #0a0c0f; }

/* ---------- Skjema-elementer ---------- */
button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
textarea { resize: vertical; }

/* ---------- Fokus (tilgjengelighet) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: fixed; top: -100px; left: var(--sp-4);
  z-index: 2000; padding: 0.85rem 1.4rem;
  background: var(--c-accent); color: #08090b;
  font-weight: 600; border-radius: var(--r-sm);
  transition: top var(--t-fast) var(--e-out);
}
.skip-link:focus-visible { top: var(--sp-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Rullefelt ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--c-void); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.11);
  border-radius: var(--r-pill);
  border: 2px solid var(--c-void);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ============================================================
   GLOBALE ATMOSFÆRE-LAG
   ============================================================ */

/* Filmisk korn — gir dybde og fjerner "flat CSS"-følelsen */
.grain {
  position: fixed; inset: -120%;
  z-index: 400; pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: var(--grain-svg);
  background-size: 220px 220px;
  will-change: transform;
  animation: grain-shift 7s steps(9) infinite;
}
@keyframes grain-shift {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-4%,-4%); }  20% { transform: translate(-8%,3%); }
  30% { transform: translate(4%,-8%); }   40% { transform: translate(-3%,10%); }
  50% { transform: translate(-6%,4%); }   60% { transform: translate(7%,0); }
  70% { transform: translate(0,7%); }     80% { transform: translate(2%,10%); }
  90% { transform: translate(-6%,3%); }
}

/* Vignett — trekker blikket inn mot midten */
.vignette {
  position: fixed; inset: 0;
  z-index: 399; pointer-events: none;
  background:
    radial-gradient(130% 92% at 50% 42%, transparent 42%, rgba(0,0,0,.42) 84%, rgba(0,0,0,.72) 100%);
}

/* Myk atmosfærisk lysgradient i bakgrunnen */
.ambience {
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(58vw 46vh at 78% 8%,  rgba(224,189,136,.075), transparent 62%),
    radial-gradient(52vw 44vh at 12% 62%, rgba(127,176,171,.055), transparent 65%),
    radial-gradient(70vw 60vh at 50% 108%, rgba(224,189,136,.05), transparent 70%);
}

/* ---------- Redusert 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;
  }
  .grain { animation: none; }
}

/* ---------- Utskrift ---------- */
@media print {
  .grain, .vignette, .ambience, .site-nav, .cursor, .loader, .hero__canvas { display: none !important; }
  .hero__driver { height: auto !important; }
  .hero__sticky { position: static; height: auto; }
  body { background: #fff; color: #000; }
}