/* ============================================================
   GP Digitalbyrå — grund: reset, typografi, tillganglighet
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--brod);
  font-size: var(--t-brod);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lenis tar over scrollen (klass satts fran js/motion.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img, svg, canvas { display: block; max-width: 100%; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 300; letter-spacing: -0.01em; }   /* Outfit Light: lattare, mer lyx an 400 i stora grader */
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 500; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Etikett: liten monotext som markerar varje sektion */
.etikett {
  font-family: var(--etikett);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violett);
}

/* --- Tillganglighet --- */
:focus-visible {
  outline: 2px solid var(--violett);
  outline-offset: 3px;
  border-radius: 4px;
}

.hoppa-till {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 300;
  padding: 0.7rem 1.1rem;
  background: var(--violett);
  color: #14121F;
  border-radius: 8px;
  font-family: var(--etikett);
  font-weight: 600;
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-220%);
  transition: transform 0.25s var(--ease);
}
.hoppa-till:focus-visible { transform: translateY(0); }

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

/* --- Sektionsstomme --- */
.sektion { position: relative; padding-block: var(--sektion); }
.inre { width: min(100% - var(--marginal) * 2, var(--max)); margin-inline: auto; }

.sektionshuvud { margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.sektionshuvud .etikett { display: block; margin-bottom: 1.2rem; }
/* Etikett direkt fore en rubrik (utanfor sektionshuvud): samma luft */
.etikett + h1, .etikett + h2 { margin-top: 1.2rem; }
.sektionshuvud__ingress {
  max-width: 52ch;
  margin-top: 1.4rem;
  font-size: var(--t-lead);
  line-height: 1.58;
  color: var(--text-2);   /* vit ingress, inte gra (Gencp 2026-09-11) */
  text-wrap: pretty;
}

/* Bakgrundscanvas med partikelfaltet */
.stjarnfalt {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
main, footer, .topp { position: relative; z-index: 1; }
/* Det ljusa stjarnfaltet ligger inuti sidfoten, under dess innehall */
.stjarnfalt--ljus { position: absolute; z-index: 0; }
.fot > :not(.stjarnfalt--ljus) { position: relative; z-index: 1; }

/* Tva stora violetta glodfalt som ger sidan djup */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.16;
}
body::before { top: -28vmax; right: -22vmax; background: radial-gradient(circle, var(--violett-2), transparent 65%); }
body::after  { bottom: -32vmax; left: -24vmax; background: radial-gradient(circle, var(--violett-2), transparent 65%); }

/* --- Reducerad rorelse: allt syns direkt, inget ror sig --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rulla-in { opacity: 1 !important; transform: none !important; }
}

/* Grundlage for allt som animeras in — kravs js-rorelse pa <html> */
html.js-rorelse .rulla-in { opacity: 0; }

/* Ord-splittning i rubriker: wrappern maskar, inre delen ror sig */
.ord { display: inline-block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; vertical-align: bottom; }
.ord__i { display: inline-block; will-change: transform; }

/* Latt brodtext (300) behover tydlig fetstil dar den anvands */
p strong, p b { font-weight: 500; }   /* Outfit 600 blir for tung i lopande text */