/* ============================================================
   public_html/assets/css/base.css
   ============================================================
   Ingen hexkod har - allt ur tokens.css.

   TRE PRINCIPER STYR ALLT NEDAN

   1. RUTNATET KOMMER UR INNEHALLET. Tolv kolumner; rubrik och ingress
      sitter pa 1-8, metadata pa 9-12. Ingenting centreras, och det
      finns inga tre lika breda kort nagonstans.

   2. SKALKONTRAST I STALLET FOR DEKOR. Avstandet mellan 17px brodtext
      och 112px display-rubrik gor hierarkin. Darfor behovs varken
      skuggor, rundade horn eller ikoner i cirklar.

   3. INGEN RORELSE. Allt byter farg omedelbart - ingen animation och
      ingen hover-lyftning nagonstans.
   ============================================================ */

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

/* 115 %, beslut 2026-09-12: allt pa sajten ar satt i rem, sa det har
   skalar hela sidan med ~15 %. Brytpunkterna i @media paverkas inte -
   rem i en media query raknas alltid mot webblasarens 16px. Respekterar
   dessutom besokarens egen installda textstorlek, till skillnad fran px. */
html { -webkit-text-size-adjust: 100%; font-size: 115%; }

body {
    margin: 0;
    background: var(--papper);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--tx-bas);
    line-height: var(--radavstand);
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Rullningslist ─────────────────────────────────────────── */
/* Ska smalta in i sidan: fyrkantig svart tumme direkt pa papperet,
   ingen kantlinje och ingen hoverfarg (beslut 2026-09-12).
   Chrome/Edge/Safari far ::-webkit-scrollbar (full kontroll). Firefox
   saknar det och far scrollbar-color. De tva far INTE blandas: satts
   scrollbar-color ignorerar Chrome ::-webkit-scrollbar helt. */
::-webkit-scrollbar {
    width: 12px; height: 12px;
    background: var(--rull-topp-farg, var(--papper));
}
::-webkit-scrollbar-track {
    background: var(--papper);
    margin-top: var(--rull-topp, 0);
}
::-webkit-scrollbar-thumb {
    background: var(--black);
    border: 3px solid var(--papper);
    border-radius: var(--radie);
}
::-webkit-scrollbar-corner { background: var(--papper); }

/* Sidans egen list borjar UNDER den svarta toppen: sparet far en
   marginal lika hog som .topp, och listens bakgrund ovanfor ar svart
   sa att toppen ser ut att ga kant i kant. Hojden foljer .topp-rad:
   min-height 3.5rem, pa smal skarm 2.75rem knapp + 2 x --s-2.
   Styrs med variabler pa html: Chrome matchar inte :has() i sjalva
   ::-webkit-scrollbar-selektorn. Nollas forst UNDER body - Chrome
   hamtar sidans egen list fran body, sa en nollning pa body slar ut
   den. Listor inne pa sidan arver alltsa ingen marginal. */
html:has(.topp) { --rull-topp: 3.5rem; --rull-topp-farg: var(--black); }
@media (max-width: 47.99rem) {
    html:has(.topp) { --rull-topp: 3.75rem; }
}
body > * { --rull-topp: 0px; --rull-topp-farg: var(--papper); }

@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-color: var(--black) var(--papper); }
}

main { flex: 1 0 auto; }
main:focus { outline: none; }

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

/* Systemtypsnitt blir luftiga i stora storlekar, darfor dras h1 och h2
   ihop. Vardet bor BARA har: klasserna pa rubrikerna satter ingen egen
   letter-spacing. */
h1, h2 {
    font-weight: var(--vikt-normal);
    color: var(--black);
    line-height: var(--radavstand-tat);
    letter-spacing: -0.02em;
    margin: 0 0 var(--s-5);
    text-wrap: balance;
}
h3, h4 {
    font-weight: var(--vikt-halvfet);
    color: var(--black);
    line-height: 1.3;
    margin: 0 0 var(--s-3);
}

p { margin: 0 0 var(--s-4); max-width: 62ch; }
p:last-child { margin-bottom: 0; }

/* Lankar ar understrukna med en TUNN linje pa avstand, inte med
   webblasarens default. INGEN hoverfarg nagonstans pa sajten (beslut
   2026-09-12) - lagg inte till :hover-regler. */
a {
    color: var(--black);
    text-decoration-color: var(--kant);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

:focus-visible { outline: var(--fokus); outline-offset: 3px; }

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

/* ── Rutnat ────────────────────────────────────────────────── */
.wrap {
    width: 100%;
    max-width: var(--bredd);
    margin-inline: auto;
    padding-inline: var(--sidmarginal);
}
.wrap.smal { max-width: var(--bredd-smal); margin-inline: 0; }

/* Tolvkolumnersrutnatet. Anvands av hero och sektionshuvuden. */
.rutnat {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--s-5);
}
.kol-huvud { grid-column: 1 / -1; }
.kol-sido   { grid-column: 1 / -1; }

@media (min-width: 56rem) {
    .kol-huvud { grid-column: 1 / 9; }    /* 1-8 */
    .kol-sido   { grid-column: 9 / -1; }  /* 9-12 */
}

/* Sektionsetiketten star fore innehallet i DOM:en (dar den hor hemma
   for en skarmlasare) men ska ritas i hogermarginalen. order och inte
   ett style-attribut: CSP:n blockerar inline-stilar. */
.kol-forst { order: -1; }
@media (min-width: 56rem) { .kol-forst { order: 0; } }

.dim { color: var(--text-dim); }

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

.skip {
    position: absolute;
    left: var(--s-4);
    top: -5rem;
    z-index: 100;
    background: var(--black);
    color: var(--papper);
    padding: var(--s-3) var(--s-5);
    text-decoration: none;
    font-weight: var(--vikt-medium);
}
.skip:focus { top: var(--s-4); color: var(--papper); }

/* ── Etikett ───────────────────────────────────────────────
   Liten versal etikett. Utan dekor framfor - det orange strecket
   togs bort 2026-09-12. */
.etikett {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--tx-xs);
    font-weight: var(--vikt-halvfet);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 var(--s-4);
}

/* ── Sidhuvud ──────────────────────────────────────────────
   HELT SVART remsa, beslut 2026-09-12: namnet vitt och stort langst
   till vanster, menyn vit till hoger. Ingen frostad glaseffekt.
   Kontrast mot --black: papper-ren 18:1, accent 5.0:1, text-svag
   5.1:1 - alla klarar AA som brodtext. (accent-djup klarar det INTE
   pa svart, darfor anvands den inte har.) */
.topp {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--black);
}
/* Raden gar kant i kant i stallet for i sidans 78rem-spalt - annars
   hamnar namnet langt in fran vanster pa en bred skarm.
   align-content centrerar raden i hojdled, align-items haller namnet
   och menyn pa samma baslinje. */
.topp-rad {
    display: flex;
    align-items: baseline;
    align-content: center;
    justify-content: space-between;
    gap: var(--s-5);
    max-width: none;
    min-height: 3.5rem;
    padding-block: var(--s-2);
    flex-wrap: wrap;
}

.marke {
    text-decoration: none;
    color: var(--papper-ren);
}
.marke-accent { color: var(--accent); }
.marke-namn {
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: -0.01em;
}

.meny-knapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; height: 2.75rem;
    background: none;
    border: 1px solid var(--papper-ren);
    cursor: pointer;
    color: var(--papper-ren);
}
.meny-streck,
.meny-streck::before,
.meny-streck::after {
    display: block;
    width: 18px; height: 1px;
    background: currentColor;
    content: "";
    position: relative;
}
.meny-streck::before { top: -6px; }
.meny-streck::after  { top: 5px; }

.nav-lista {
    list-style: none;
    margin: 0;
    padding: var(--s-3) 0 var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.nav-lista a {
    display: block;
    padding: var(--s-3) 0;
    color: var(--papper-ren);
    text-decoration: none;
    font-size: var(--tx-sm);
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--text-dim);
}
/* Aktiv sida: vit text med en vit linje under - inte fetstil, inte en
   pillerformad bakgrund, och inte orange (de orange strecken togs bort
   2026-09-12). Linjen behalls, for utan den syns inte var man star. */
.nav-lista a[aria-current="page"] {
    color: var(--papper-ren);
    box-shadow: inset 0 -2px 0 var(--papper-ren);
}
.nav-sprak a {
    color: var(--text-svag);
    font-style: italic;
    font-size: var(--tx-bas);
}

.nav[hidden] { display: none; }

/* Mobil: oppen meny far en EGEN rad under namnet och knappen, over hela
   bredden. Utan flex-basis hamnade listan som en smal kolumn bredvid
   knappen och skot in den mot mitten. */
@media (max-width: 47.99rem) {
    .topp-rad { align-items: center; }
    .nav { flex-basis: 100%; }
    .nav-lista { padding: 0 0 var(--s-3); }
    .nav-lista li:last-child a { border-bottom: 0; }
    .nav-lista a[aria-current="page"] { box-shadow: none; }
    .nav-sprak a { font-size: var(--tx-sm); }
}

@media (min-width: 48rem) {
    .meny-knapp { display: none; }
    .nav, .nav[hidden] { display: block; }
    .nav-lista {
        flex-direction: row;
        align-items: baseline;
        gap: var(--s-6);
        padding: 0;
    }
    .nav-lista a { border-bottom: 0; padding: var(--s-1) 0; }
}

/* ── Hero ──────────────────────────────────────────────────
   Vansterstalld pa atta kolumner, aret och platsen i hogermarginalen.
   Rubriken far ta all plats den vill: det ar den som ar designen. */
.hero {
    padding-block: var(--s-8) var(--s-7);
    border-bottom: var(--linje);
}
.hero-rubrik {
    font-size: var(--tx-3xl);
    max-width: 15ch;
    margin: 0;
}
/* Ett ord i kursiv serif bryter rubriken och ger den en rost. */
.hero-rubrik em {
    font-style: italic;
    color: var(--accent-djup);
}


/* Metadata i hogerkolumnen: liten, versal, pa en linje. Fyller
   hogermarginalen med innehall i stallet for med luft. */
.hero-meta {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding-top: var(--s-2);
    font-size: var(--tx-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.hero-meta span { padding-bottom: var(--s-3); border-bottom: var(--linje); }
.hero-meta span:last-child { border-bottom: 0; }

@media (min-width: 56rem) {
    .hero { padding-block: var(--s-9) var(--s-8); }
}

/* ── Knappar ───────────────────────────────────────────────
   Fyrkantiga. Den primara ar blackfargad med papper pa - hogsta
   mojliga kontrast. Ingen skugga, ingen lyftning vid hover. */
.knapp {
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: var(--s-3) var(--s-6);
    border: var(--linje-black);
    background: transparent;
    color: var(--black);
    font: inherit;
    font-size: var(--tx-sm);
    font-weight: var(--vikt-medium);
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
}

.knapp--fylld {
    background: var(--black);
    border-color: var(--black);
    color: var(--papper);
}

/* ── Sektioner ─────────────────────────────────────────────── */
.sektion { padding-block: var(--s-8); }
.sektion--forsta { padding-block: var(--s-8) var(--s-9); }
/* Kompakt: mindre luft over och ingen under, sa att nasta sektion
   (formularet pa kontakt) ryms utan att man behover skrolla. */
.sektion--intill { padding-block: var(--s-6) 0; }
.sektion--intill + .sektion .form { margin-top: 0; }

.sida-rubrik {
    font-size: var(--tx-2xl);
    margin-bottom: var(--s-5);
}

/* ── Sidfot ────────────────────────────────────────────────
   Samma tunga linje som registret. Adressen ar stor: det
   ar den viktigaste uppgiften pa sidan. */
.fot {
    flex-shrink: 0;
    margin-top: var(--s-9);
    border-top: var(--linje-tung);
    padding-block: var(--s-7) var(--s-5);
}
.fot-rad { display: grid; gap: var(--s-7); }

.fot-rubrik {
    font-size: var(--tx-xs);
    font-weight: var(--vikt-halvfet);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: var(--s-3);
}
.fot-block > p:first-of-type a {
    font-size: var(--tx-2xl);
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--black);
}

.fot-lista { list-style: none; margin: 0; padding: 0; }
.fot-lista a {
    display: inline-block;
    padding: var(--s-2) 0;
    color: var(--text);
    text-decoration: none;
    font-size: var(--tx-sm);
}

.fot-slut {
    margin-top: var(--s-7);
    padding-top: var(--s-4);
    border-top: var(--linje);
    font-size: var(--tx-xs);
    letter-spacing: 0.06em;
    color: var(--text-dim);
}

@media (min-width: 44rem) {
    .fot-rad { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

/* ── Felsidor ──────────────────────────────────────────────
   Felkoden sitter STORT. En 404 far gorna se avsiktlig ut. */
.felsida main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 78vh;
    padding-block: var(--s-8);
}
.fel-kod {
    font-size: var(--tx-3xl);
    line-height: 1;
    color: var(--accent);
    margin: 0 0 var(--s-4);
}

/* ── Centrerad startsida ─────────────────────────────────────
   Startsidan ar centrerad (beslut 2026-09-12). De ovriga sidorna
   behaller det vansterstallda rutnatet.

   Bara RUBRIKER och korta rader centreras. Registrets beskrivningar
   star kvar vansterstallda inne i den centrerade kolumnen: centrerad
   brodtext over flera rader ar svar att lasa, eftersom ogat inte
   hittar tillbaka till radens borjan. */
.hero--centrerad .wrap { text-align: center; }
/* Ingen linje under startsidans hero, och mindre luft ner till
   rubrikerna under (beslut 2026-09-12). */
.hero--centrerad { border-bottom: 0; padding-bottom: var(--s-7); }
.sektion--efter-hero { padding-top: 0; }
/* EN RAD, beslut 2026-09-12. Storleken foljer fonsterbredden i
   stallet for att vara fast, annars ryms inte meningen. Kalibrerat for
   SYSTEMTYPSNITTET 2026-09-12: den engelska versionen, som ar langst,
   ar ca 12.1 em bred med citattecknen. Taket 5.4rem ryms i
   78rem-spalten med marginal, golvet 1.15rem pa en 320px-skarm (med
   html pa 115 %). Byts typsnitt, text eller rotstorlek: mat om.
   nowrap ar sakert just for att storleken skalar - utan det skulle
   raden spranga sidan pa smala skarmar. */
.hero--centrerad .hero-rubrik {
    margin-inline: auto;
    max-width: none;
    white-space: nowrap;
    font-size: clamp(1.15rem, 6.6vw, 5.4rem);
}
/* En rad under titeln, ingen knapp (beslut 2026-09-12). Ryms pa en
   rad fran surfplatta och uppat; pa mobil bryts den jamnt. */
.hero-under {
    margin: var(--s-6) auto 0;
    max-width: none;
    color: var(--text-dim);
    font-size: var(--tx-lg);
    text-wrap: balance;
}

/* Tre rubriker under hero: Snabbt, Sakert, Smidigt. Staplade under
   varandra pa alla skarmar och vansterstallda (beslut 2026-09-12). */
.trio {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-6) var(--gutter);
    text-align: left;
}
/* Samma vikt som hero-rubriken (h1/h2-grunden, 400) men mindre. */
.trio-titel { font-size: var(--tx-2xl); margin: 0 0 var(--s-2); }
.trio p { margin: 0; color: var(--text-dim); }