/* ==========================================================================
   Merke — bas
   Laddas EFTER main.css (som @import:ar Bosses typography.css/components.css),
   så samma specificitet vinner på ordning. Inga !important.
   ========================================================================== */

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

/* Layouten är ritad för 1440px och allt är satt i rem. Över den bredden
   växer rotens teckenstorlek med skärmen (16px vid 1440, ~21px vid 1920,
   ~28px vid 2560), så hela sidan skalar proportionerligt i stället för att
   bli en smal spalt med tomma kanter. Under 1440 gäller 100 %, och max()
   gör att en förstorad teckenstorlek i webbläsaren aldrig krymps. */
html { -webkit-text-size-adjust: 100%; font-size: max(100%, 1.1111vw); }

body {
  margin: 0;
  background: var(--mk-bg);
  color: var(--mk-fg);
  font-family: var(--mk-font-body);
  font-size: var(--mk-fs-body);
  line-height: var(--mk-lh-body);
  letter-spacing: var(--mk-ls-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;              /* skyddar mot att ordmärket eller grain-lagret
                                    ger horisontell scroll */
  text-rendering: optimizeLegibility;
}

/* Bosses typography.css sätter margin-bottom + egna storlekar på rubrikerna.
   Vi nollar och låter .mk-h*-klasserna bestämma. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--mk-font-display);
  font-weight: 700;
  line-height: var(--mk-lh-head);
  letter-spacing: var(--mk-ls-head);
  color: inherit;
}

/* Svenska sammansättningar blir långa ("Redovisningbyrå", "Integritetspolicy")
   och kan spilla ut ur skärmen. break-word bryter dem — men bara när ordet
   faktiskt är bredare än raden.

   INGEN hyphens på rubriker. Avstavning är frivillig: webbläsaren delar ord
   för att jämna ut radlängden även när det inte behövs, och "INGET UPPDRAG"
   blev "INGET UPP-DRAG" mitt i en rubrik där ordet hade fått plats på nästa
   rad. I versal display-typografi läser ett bindestreck som ett fel.
   Brödtext får avstavning, där den är väntad och hjälper marginalen. */
h1, h2, h3, h4, h5, h6, p, li, dd, dt, figcaption, legend, label, a, span {
  overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 { hyphens: none; text-wrap: balance; }
p, li { hyphens: auto; }

p, ul, ol, dl, figure, blockquote { margin: 0; }

/* Bosses typography.css:64 sätter a { color: var(--color-primary) }.
   Vi ärver som default och gör länkfärg till en opt-in via .mk-link/.mk-prose. */
a { color: inherit; text-decoration: none; }

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

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

::selection { background: var(--mk-accent); color: var(--mk-accent-ink); }

/* Fokus. Accenten ger 5.59:1 mörkt och 5.53:1 ljust — långt över 3:1-kravet
   för icke-textkomponenter. Offset så ringen syns även mot mörka bilder. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 3px;
  border-radius: var(--mk-r-1);
}

/* Skip-link — måste finnas före allt annat i <body>. */
.mk-skip {
  position: absolute;
  left: var(--mk-gut);
  top: 0;
  z-index: 9990;
  transform: translateY(-120%);
  padding: var(--mk-s-3) var(--mk-s-5);
  background: var(--mk-accent);
  color: var(--mk-accent-ink);
  font-family: var(--mk-font-mono);
  font-size: var(--mk-fs-label);
  letter-spacing: var(--mk-ls-label);
  text-transform: uppercase;
  transition: transform var(--mk-d-2) var(--mk-ease-quart);
}
.mk-skip:focus { transform: translateY(0); }

/* <main> tar tabindex="-1" så skip-linken faktiskt flyttar fokus dit. */
main:focus { outline: none; }

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

/* Brödtext med riktiga länkar — används i inläggs-/villkorstext. */
.mk-prose a {
  color: var(--mk-accent-hi);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color var(--mk-d-1) var(--mk-ease-quad);
}
.mk-prose a:hover { color: var(--mk-accent); }
.mk-prose p + p { margin-top: var(--mk-s-5); }