/* GENERERAD FIL — REDIGERA INTE.
   Byggd av php artisan css:bygg från resources/css/.
   Ändringar här skrivs över nästa gång kommandot körs.

   Källfiler i byggordning:
     00-lager.css
     10-tokens.css
     20-base.css
     30-layout.css
     35-monster.css
     40-header.css
     43-guidekort.css
     45-produktkort.css
     46-produktrader.css
     47-prosa.css
     50-footer.css
     55-formular.css
     60-klippkarta.css
     65-sitemap.css
     90-utilities.css
 */

/* ==== 00-lager.css ==== */

/* Klätterskon: design system.
   Ljus bas, en accentfärg. Alegreya Sans för allt (rubriker i 800, brödtext i 400).

   Senare lager vinner oavsett specificitet. All CSS måste ligga i ett
   @layer-block: oskiktade regler vinner över allt lagrat.

   Brytpunkter: 480 · 720 · 900. */

@layer tokens, base, layout, components, utilities;

/* ==== 10-tokens.css ==== */

/* Designtokens. Enda stället där råa färg-, radie- och tidsvärden får stå.
   Paletten bygger på loggans blå (#0774bb). Utöver blåskalan finns bara
   neutraler, en gul för "Bäst i test" och en röd för rea. */

@layer tokens {

:root {
    color-scheme: light;

    /* ---------- Varumärke ---------- */
    --bla: #0774bb;           /* loggans blå: länkar, knappar, markeringar */
    --bla-djup: #05578c;      /* hover */
    --marin: #0b2a44;         /* mörk bas: hero, sidfot, rankmärken */
    --marin-djup: #071c2e;
    --bla-ljus: #e6f1fa;      /* ljus ton: bildytor, chips, sektioner */
    --bla-ton: rgb(7 116 187 / 0.12);
    --hero-glans: rgb(7 116 187 / 0.55);   /* ljusare blått sken i heron */
    --glas: rgb(255 255 255 / 0.06);       /* genomskinlig panel på mörk botten */

    /* ---------- Ytor ---------- */
    --bg: #f4f7fa;
    --surface: #ffffff;
    --surface-2: #eaf0f5;
    --surface-hover: #dfe8f0;

    /* ---------- Text ---------- */
    --text: #13263a;
    --text-muted: #4d6071;
    --text-faint: #7f8f9d;
    --on-dark: #ffffff;
    --on-dark-muted: rgb(255 255 255 / 0.74);
    --on-dark-faint: rgb(255 255 255 / 0.4);

    /* ---------- Linjer ---------- */
    --border: #d9e3ec;
    --border-strong: #b7c7d5;
    --border-dark: rgb(255 255 255 / 0.14);

    /* ---------- Roller ---------- */
    --accent: var(--bla);
    --accent-hover: var(--bla-djup);
    --gul: #f2b632;
    --on-gul: #1c1400;
    --rea: #d64545;

    /* ---------- Radier ---------- */
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* ---------- Skuggor ---------- */
    --shadow-card: 0 1px 2px rgb(11 42 68 / 0.05), 0 10px 30px rgb(11 42 68 / 0.08);
    --shadow-cta: 0 6px 16px rgb(7 116 187 / 0.28);
    --shadow-meny: 0 12px 32px rgb(11 42 68 / 0.16);

    /* ---------- Rörelse ---------- */
    --overgang: 0.15s ease-out;

    /* ---------- Djup ---------- */
    --z-badge: 1;
    --z-meny: 60;
    --z-header: 100;
    --z-nav-mobil: 300;
    --z-tips: 400;            /* kartans popup, över megamenyn och sidhuvudet */

    /* ---------- Rytm: 4px-grid ---------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;

    /* Indrag för undersidor i listor och menyer (Markus: 18 px). */
    --indrag-barn: 18px;

    /* ---------- Typografi ---------- */
    --font-head: "Alegreya Sans", "Gill Sans", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Alegreya Sans", "Gill Sans", "Helvetica Neue", Arial, sans-serif;
    --h1: clamp(2.5rem, 1.6rem + 3.2vw, 3.8rem);
    --h2: clamp(1.75rem, 1.3rem + 1.4vw, 2.3rem);
    --h3: 1.4rem;
    --h4: 1.2rem;
    --text-xl: 1.3rem;
    --text-l: 1.18rem;
    --text-m: 1.125rem;
    --text-s: 1rem;
    --text-xs: 0.9rem;
    --text-2xs: 0.8rem;
    --radhojd: 1.55;

    /* ---------- Mått ---------- */
    --container: 1280px;
    --prosa-bredd: 760px;
    --header-hojd: 72px;
}

}

/* ==== 20-base.css ==== */

/* Bas: reset, typografi, element. */

@layer base {

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-hojd) + var(--sp-4));
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-m);
    line-height: var(--radhojd);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-head);
    font-weight: 800;
    line-height: 1.12;
    color: var(--text);
    margin: 0 0 var(--sp-3);
    text-wrap: balance;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-weight: 700; }
h4 { font-size: var(--h4); font-weight: 700; }
h5 { font-size: var(--text-l); font-weight: 700; }

p {
    margin: 0 0 var(--sp-4);
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
    text-underline-offset: 0.15em;
    transition: var(--overgang);
}

a:hover {
    color: var(--accent-hover);
    text-decoration-color: var(--accent-hover);
}

/* Element som JS gömmer med hidden-attributet. Behövs eftersom komponenter
   sätter display: grid eller flex, vilket annars vinner över webbläsarens
   standardregel för [hidden]. */
[hidden] {
    display: none !important;
}

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

img {
    height: auto;
}

ul, ol {
    padding-left: 1.3em;
    margin: 0 0 var(--sp-4);
}

li {
    margin-bottom: var(--sp-1);
}

strong, b {
    font-weight: 700;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-s);
}

th, td {
    text-align: left;
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

th {
    background: var(--surface-2);
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--sp-8) 0;
}

figure {
    margin: 0;
}

figcaption {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--sp-2);
}

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

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

}

/* ==== 30-layout.css ==== */

/* Layout: container, sektioner, hero, sidhuvud, brödsmulor, dekor. */

@layer layout {

.container {
    width: min(100% - var(--sp-8), var(--container));
    margin-inline: auto;
}

main {
    padding-bottom: var(--sp-20);
}

.section {
    padding-top: var(--sp-12);
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
}

.section-head h2,
.section-title {
    margin-bottom: 0;
}

.section-title {
    margin-bottom: var(--sp-6);
}

.more {
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* Hover: triangeln roterar uppåt och texten stryks under. Färgen ändras inte. */
.more:hover,
.guidekort:hover .guidekort-pil,
.utvalda-box-mer:hover {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.more:hover::after,
.guidekort:hover .guidekort-pil::after,
.utvalda-box-mer:hover::after {
    transform: rotate(-90deg);
}


/* Dekor: bergskam (hero, sidfot) och höjdkurvor (undersidornas sidhuvud). Placeras absolut i en relativ förälder och får färg av den. */
.dekor-berg,
.dekor-konturer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Hero på startsidan: mörkblått band med bergskam, snett avskuret nedtill. */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--marin);
    color: var(--on-dark);
    padding: var(--sp-20) 0 calc(var(--sp-20) + var(--sp-12));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sp-16)), 0 100%);
}

.hero .dekor-berg {
    color: var(--on-dark);
}

.hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-16);
    align-items: center;
}

.hero h1 {
    color: var(--on-dark);
    font-size: clamp(3rem, 2rem + 4.5vw, 5.2rem);
    line-height: 1.02;
    margin: 0;
}

.hero-krok {
    font-family: var(--font-head);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--on-dark);
    margin-bottom: var(--sp-3);
}

.hero .intro {
    font-size: var(--text-m);
    color: var(--on-dark-muted);
    max-width: 50ch;
    margin-bottom: var(--sp-6);
}

.hero-knappar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

@media (max-width: 900px) {
    .hero {
        padding: var(--sp-12) 0 calc(var(--sp-12) + var(--sp-10));
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sp-8)), 0 100%);
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
}

/* Topo: startsidans guidelista som två leder med bultar längs en streckad linje. */
.topo {
    padding-top: var(--sp-10);
}

.topo-kolumner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-16);
}

.topo-huvud {
    margin-bottom: var(--sp-5);
}

.topo-huvud h2 {
    margin-bottom: 0;
}

.topo-lista {
    list-style: none;
    margin: 0 0 var(--sp-5);
    padding: 0 0 0 var(--sp-8);
    position: relative;
}

.topo-lista::before {
    content: "";
    position: absolute;
    top: var(--sp-4);
    bottom: var(--sp-4);
    left: 7px;
    border-left: 2px dashed var(--border-strong);
}

.topo-post {
    margin: 0;
}

.topo-lank {
    position: relative;
    display: block;
    padding: var(--sp-4) 0 var(--sp-4) var(--sp-2);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    transition: var(--overgang);
}

.topo-post:last-child .topo-lank {
    border-bottom: 0;
}

.topo-bult {
    position: absolute;
    left: calc(-1 * var(--sp-8) + 1px);
    top: calc(var(--sp-4) + 0.35em);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid var(--accent);
    background: var(--surface);
    box-sizing: border-box;
    transition: var(--overgang);
}

.topo-lank:hover .topo-bult {
    background: var(--accent);
}

.topo-titel {
    display: block;
    font-family: var(--font-head);
    font-size: var(--h4);
    font-weight: 700;
}

.topo-lank:hover .topo-titel {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.topo-ingress {
    display: block;
    color: var(--text-muted);
    font-size: var(--text-s);
    margin-top: var(--sp-1);
}

/* Undersidor i topo-listan: ligger inne i förälderns post, indragna 20 px.
   Skiljelinjen flyttas från föräldern till under undersidorna. */
.topo-post:has(.topo-underlista) .topo-lank {
    border-bottom: 0;
    padding-bottom: var(--sp-1);
}

.topo-underlista {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--sp-4) var(--indrag-barn);
    border-bottom: 1px solid var(--border);
}

.topo-post:last-child .topo-underlista {
    border-bottom: 0;
}

.topo-underlista li {
    margin: 0;
}

.topo-underlista a {
    display: inline-block;
    padding: var(--sp-1) 0;
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

/* Undersidor under ingressen i guidens sidhuvud */
.underguider {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.underguider-etikett {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    margin-right: var(--sp-1);
}

.underguider .chip {
    text-decoration: none;
}

@media (max-width: 800px) {
    .topo-kolumner {
        grid-template-columns: 1fr;
        gap: var(--sp-10);
    }
}

/* Sidhuvud på undersidor: brödsmulor, H1, ingress. Ljus tonad bakgrund. */
.sidhuvud {
    position: relative;
    overflow: hidden;
    padding: var(--sp-5) 0 var(--sp-10);
}

/* Sidor med brödsmulor börjar högre upp: smulraden bär luften. */
.sidhuvud:has(.breadcrumb) {
    padding-top: 0.4rem;
    background: linear-gradient(180deg, var(--bla-ljus), var(--bg));
}

.sidhuvud .dekor-konturer {
    color: var(--accent);
    opacity: 0.12;
    left: auto;
    width: min(60%, 800px);
}

.sidhuvud .container {
    position: relative;
}

.sidhuvud h1 {
    max-width: 22ch;
}

.sidhuvud .intro {
    font-size: var(--text-l);
    color: var(--text-muted);
    max-width: 66ch;
    margin-bottom: 0;
}

/* Ordsidan: definitionen är ingressen, så avståndet ner till texten kan vara kortare. */
.sidhuvud--ord {
    padding-bottom: var(--sp-6);
}

/* Rubrik + utvalda-box sida vid sida på guider med produkter */
.intro-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: var(--sp-10);
    align-items: start;
}

.utvalda-box {
    padding: var(--sp-5) var(--sp-6);
    box-shadow: var(--shadow-card);
}

.utvalda-box h2 {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: var(--sp-3);
}

.utvalda-box ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: utvald;
}

.utvalda-box li {
    counter-increment: utvald;
    display: flex;
    gap: var(--sp-3);
    align-items: baseline;
    margin: 0;
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--border);
}

.utvalda-box li:first-child {
    border-top: 0;
    padding-top: 0;
}

.utvalda-box li::before {
    content: counter(utvald);
    flex: 0 0 auto;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.utvalda-box a {
    text-decoration: none;
    font-weight: 500;
    color: var(--text);
}

.utvalda-box a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.utvalda-box-mer {
    display: block;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--accent);
}

@media (max-width: 900px) {
    .intro-split {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
}

/* Brödsmulor: lista med chevron mellan stegen. */
.breadcrumb ol {
    list-style: none;
    margin: 0 0 var(--sp-6);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    font-size: var(--text-xs);
    color: var(--text-faint);
}

.breadcrumb li {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.breadcrumb li + li::before {
    content: "›";
    color: var(--border-strong);
    font-size: var(--text-s);
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--accent);
}

/* Artikel: brödtext till vänster, innehållsförteckning sticky till höger. */
.artikel {
    display: grid;
    grid-template-columns: minmax(0, var(--prosa-bredd)) minmax(280px, 1fr);
    gap: var(--sp-12);
    align-items: start;
    padding-top: var(--sp-12);
}

.artikel .toc {
    order: 2;
    position: sticky;
    top: calc(var(--header-hojd) + var(--sp-4));
    margin-bottom: 0;
}

.artikel .prosa {
    order: 1;
    grid-column: 1;
}

/* Relaterade ord ligger sist i vänsterkolumnen, under brödtexten. */
.artikel .relaterade-ord {
    order: 3;
    grid-column: 1;
    max-width: var(--prosa-bredd);
}

@media (max-width: 900px) {
    .artikel {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }

    .artikel .toc {
        order: 0;
        position: static;
    }
}

.hopp-lank {
    position: absolute;
    left: -999px;
    top: var(--sp-2);
    background: var(--surface);
    padding: var(--sp-2) var(--sp-4);
    z-index: var(--z-nav-mobil);
}

.hopp-lank:focus {
    left: var(--sp-2);
}

}

/* ==== 35-monster.css ==== */

/* Återkommande mönster. Ligger före komponentfilerna i components-lagret.
   Varje mönster listar klassen först och sedan komponentselektorer som
   delar deklarationerna. Skriv aldrig av deklarationerna i en komponentfil:
   lägg till selektorn här i stället. */

@layer components {

/* Etikett: liten versal rubrik i blått ovanför ett block. */
.etikett,
.toc h3,
.site-footer h4 {
    display: block;
    font-family: var(--font-head);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}

/* Metaetikett: versal metatext i brödsnittet, inline. */
.metaetikett,
.product-brand,
.sitemap-tabell th,
.sitemap-fakta dt {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

/* Markering: statisk etikett med bakgrund. Komponenten sätter färg och padding. */
.markering,
.vinnare-badge,
.product-sale {
    font-family: var(--font-head);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* Chip: klickbar kontroll med ram, t.ex. filterknappar. */
.chip {
    font-family: var(--font-head);
    font-size: var(--text-s);
    font-weight: 700;
    padding: var(--sp-1) var(--sp-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: var(--overgang);
}

.chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.chip.aktiv {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-dark);
}

/* Undermarkör: liten högerriktad triangel före länkar till undersidor (samma form som
   toppen före H2, men liggande och dämpad). Komponenten byter färg på mörk botten. */
.undermarkor::before,
.nav-meny-under::before,
.footer-nav-under::before,
.topo-underlista a::before,
.guidekort-under a::before {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.5em;
    margin-right: 0.45em;
    vertical-align: 0.05em;
    background: var(--border-strong);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.footer-nav-under::before {
    background: var(--on-dark);
}

.undermarkor::before,
.nav-meny-under::before,
.footer-nav-under::before,
.topo-underlista a::before,
.guidekort-under a::before {
    transition: var(--overgang);
}

/* Hover: triangeln roterar uppåt och blir blå, texten får understrykning. */
.undermarkor:hover::before,
.nav-meny-under:hover::before,
.topo-underlista a:hover::before,
.guidekort-under a:hover::before {
    background: var(--accent);
    transform: rotate(-90deg);
}

/* I sidfoten är bakgrunden mörk, så triangeln roterar men behåller färgen. */
.footer-nav-under:hover::before {
    transform: rotate(-90deg);
}

.undermarkor:hover,
.footer-nav-under:hover,
.topo-underlista a:hover,
.guidekort-under a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Pil: liten högerriktad triangel EFTER texten på "mer"-länkar. .pil--ner pekar nedåt. */
.pil::after,
.more::after,
.guidekort-pil::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.5em;
    margin-left: 0.4em;
    vertical-align: 0.05em;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: var(--overgang);
}

.pil--ner::after {
    transform: rotate(90deg);
}

/* Kortyta: vit panel med ram och radie. */
.kortyta,
.guidekort,
.product-card,
.product-row,
.utvalda-box,
.toc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Rankmärke: rund siffra i mörkblått. */
.rankmarke,
.product-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 42px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--marin);
    color: var(--on-dark);
    font-family: var(--font-head);
    font-size: var(--text-l);
    font-weight: 800;
    line-height: 1;
}

}

/* ==== 40-header.css ==== */

/* Sidhuvud med logga och huvudmeny. Sektionslänkarna är klickbara och visar
   sina guider i en rullgardin vid hover/fokus. Mobilmenyn öppnas med en checkbox, ingen JS. */

@layer components {

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-hojd);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.site-header .container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
}

.logo img {
    height: 40px;
    width: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.nav > a,
.nav-grupp > a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-head);
    font-size: var(--text-l);
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    transition: var(--overgang);
}

.nav > a:hover,
.nav-grupp > a:hover,
.nav > a.aktiv,
.nav-grupp > a.aktiv {
    color: var(--accent);
    background: var(--bla-ljus);
}

.nav-grupp {
    position: static;
}

.nav-grupp > a::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    margin-left: var(--sp-1);
    opacity: 0.6;
}

.nav-meny {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: var(--sp-2);
    z-index: var(--z-meny);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-meny);
}

.nav-grupp:hover .nav-meny,
.nav-grupp:focus-within .nav-meny {
    display: grid;
}

.nav-meny a {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: var(--text-s);
    font-weight: 500;
    transition: var(--overgang);
}

.nav-meny a:hover,
.nav-meny a.aktiv {
    background: var(--bla-ljus);
    color: var(--accent);
}

/* Tredje nivån (t.ex. barnguiderna): indragen, mindre och dämpad. */
.nav-meny a.nav-meny-under {
    padding-left: var(--indrag-barn);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
}

.nav-meny a.nav-meny-under::before {
    margin-right: var(--sp-2);
}

/* Megameny: bred panel under sektionen, guider till vänster och ordbok till höger. */
.megameny {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--sp-6);
    z-index: var(--z-meny);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-meny);
}

/* Bara desktop. På mobil fälls menyn med knappen, och där står :hover och
   :focus-within kvar efter ett tryck: menyn gick då inte att fälla ihop. */
@media (min-width: 901px) {
    .nav-grupp:hover .megameny,
    .nav-grupp:focus-within .megameny {
        display: block;
    }
}

/* Osynlig brygga över glappet mellan menyknappen och panelen, annars
   bryts hovern när musen lämnar länken på väg ner. */
.megameny::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--sp-5);
}

.megameny {
    position: absolute;
}

.megameny-grid {
    display: grid;
    gap: var(--sp-6);
}

/* Guidemenyn: en kolumn, bredden efter innehållet. */
.megameny--guider {
    left: auto;
    width: min(520px, calc(100vw - var(--sp-8)));
}

.megameny--guider .megameny-grid {
    grid-template-columns: 1fr;
}

/* Ordboksmenyn: kategorier plus den reserverade ordpanelen. */
.megameny--ordbok {
    left: auto;
    width: min(600px, calc(100vw - var(--sp-8)));
}

.megameny--ordbok .megameny-grid {
    grid-template-columns: minmax(0, 1fr) 198px;
}

.megameny--ordbok .megameny-kol--ordbok {
    padding-left: 0;
    border-left: 0;
}

.megameny-kol--ordbok {
    padding-left: var(--sp-6);
    border-left: 1px solid var(--border);
}

.megameny-kol .etikett {
    margin-bottom: var(--sp-3);
}

/* Guidelistan: rak lista, två spalter när det finns plats. */
.megameny-guider {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    columns: 2;
    column-gap: var(--sp-5);
}

.megameny-guider > li {
    margin: 0 0 var(--sp-1);
    break-inside: avoid;
}

.megameny-guider > li > a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: var(--overgang);
}

.megameny-guider > li > a:hover {
    background: var(--bla-ljus);
}

.megameny--guider .megameny-guider {
    columns: 1;
}

.megameny-titel {
    display: block;
    font-family: var(--font-head);
    font-size: var(--text-l);
    font-weight: 700;
}

.megameny-guider > li > a:hover .megameny-titel {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.megameny-ingress {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.megameny-under {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--sp-2) 0;
}

.megameny-under a {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--indrag-barn);
    border-radius: var(--radius-sm);
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: var(--overgang);
}

/* Undersidorna i menyn ska läsas lika lätt som föräldrarna: hierarkin
   bärs av indraget och markören, inte av svagare färg. */
.megameny-under a::before {
    background: var(--accent);
}

.megameny-under a:hover {
    background: var(--bla-ljus);
}

.megameny-alla {
    font-size: var(--text-s);
}

/* Ordbokskategorier: hovra en kategori och orden visas bredvid. */
.megameny-kategorier {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
}

.megameny-kategori {
    margin: 0;
}

.megameny-kategori-lank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: var(--overgang);
}

/* Markeringen följer den kategori som pekas ut. JS sätter .aktiv, vilket gör
   att panelen står kvar medan musen rör sig mot den. Utan JS faller vi tillbaka
   på hover och på att första kategorin är förvald. */
.megameny-kategori:first-child .megameny-kategori-lank,
.megameny-kategori:hover .megameny-kategori-lank,
.megameny-kategori:focus-within .megameny-kategori-lank,
.megameny-kategori.aktiv .megameny-kategori-lank {
    background: var(--bla-ljus);
    color: var(--accent);
}

.har-js .megameny-kategori .megameny-kategori-lank,
.har-js .megameny-kategori:hover .megameny-kategori-lank {
    background: transparent;
    color: var(--text);
}

.har-js .megameny-kategori.aktiv .megameny-kategori-lank {
    background: var(--bla-ljus);
    color: var(--accent);
}

.megameny-kategori-antal {
    font-size: var(--text-2xs);
    font-weight: 700;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* Orden visas i en egen, alltid reserverad yta till höger om kategorierna.
   Ytan finns även när inget hovras, så listan flyttar sig aldrig. */
.megameny-ord {
    display: none;
    position: absolute;
    top: calc(var(--sp-6) + var(--sp-8));
    right: var(--sp-6);
    width: 198px;
    padding-left: var(--sp-5);
    border-left: 1px solid var(--border);
}

.megameny-kategori:first-child .megameny-ord,
.megameny-kategori:hover .megameny-ord,
.megameny-kategori:focus-within .megameny-ord,
.megameny-kategori.aktiv .megameny-ord {
    display: block;
}

.har-js .megameny-kategori .megameny-ord,
.har-js .megameny-kategori:hover .megameny-ord {
    display: none;
}

.har-js .megameny-kategori.aktiv .megameny-ord {
    display: block;
}

.megameny-ord ul {
    list-style: none;
    margin: 0 0 var(--sp-3);
    padding: 0;
}

.megameny-ord li {
    margin: 0;
}

.megameny-ord li {
    break-inside: avoid;
}

.megameny-ord a {
    display: block;
    padding: var(--sp-1) 0;
    font-size: var(--text-s);
    color: var(--text);
    text-decoration: none;
}

.megameny-ord a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.megameny-visa-alla {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

.megameny-visa-alla:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.megameny-visa-alla::after {
    content: "";
    display: inline-block;
    width: 0.35em;
    height: 0.45em;
    margin-left: 0.35em;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.nav-expand {
    display: none;
}

/* Mobil */
.nav-toggle {
    display: none;
}

.nav-knapp {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    position: relative;
}

.nav-knapp span,
.nav-knapp span::before,
.nav-knapp span::after {
    position: absolute;
    left: 10px;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: var(--overgang);
}

.nav-knapp span {
    top: 19px;
}

.nav-knapp span::before {
    content: "";
    left: 0;
    top: -6px;
}

.nav-knapp span::after {
    content: "";
    left: 0;
    top: 6px;
}

@media (max-width: 900px) {
    .nav-knapp {
        display: block;
    }

    .nav {
        display: none;
        position: fixed;
        inset: var(--header-hojd) 0 0;
        z-index: var(--z-nav-mobil);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--sp-4) var(--sp-4) var(--sp-12);
        background: var(--bg);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-toggle:checked ~ .nav {
        display: flex;
    }

    .nav-toggle:checked ~ .nav-knapp span {
        background: transparent;
    }

    .nav-toggle:checked ~ .nav-knapp span::before {
        top: 0;
        transform: rotate(45deg);
    }

    .nav-toggle:checked ~ .nav-knapp span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    .nav > a,
    .nav-grupp > a {
        font-size: var(--text-xl);
        padding: var(--sp-3) var(--sp-2);
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    /* Ingen markering av aktuell sektion på mobil: plattan följer bara texten
       och ser trasig ut bredvid utfällningsknappen. */
    .nav > a.aktiv,
    .nav-grupp > a.aktiv,
    .nav > a:hover,
    .nav-grupp > a:hover {
        background: transparent;
        color: var(--text);
    }

    .nav-grupp > a::after {
        display: none;
    }

    /* Mobil: varje sektion fälls ut med knappen. Rubriken är kvar som länk. */
    .nav-grupp {
        position: relative;
        display: block;
        border-bottom: 1px solid var(--border);
    }

    .nav-grupp > a {
        border-bottom: 0;
        padding-right: var(--sp-12);
    }

    .nav-expand {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: var(--sp-12);
        height: 56px;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .nav-expand::before {
        content: "";
        display: block;
        width: 0.5em;
        height: 0.62em;
        margin: 0 auto;
        background: var(--accent);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        transform: rotate(90deg);
        transition: var(--overgang);
    }

    .nav-expand[aria-expanded="true"]::before {
        transform: rotate(-90deg);
    }

    /* Megamenyerna blir vanliga listor i mobilmenyn: ingen panel, ingen hover. */
    .megameny,
    .megameny--guider,
    .megameny--ordbok {
        display: none;
        position: static;
        width: auto;
        padding: var(--sp-2) 0 var(--sp-5);
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    .nav-grupp.oppen .megameny {
        display: block;
    }

    .megameny::before {
        display: none;
    }

    .megameny-grid,
    .megameny--ordbok .megameny-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }

    .megameny-kol .etikett,
    .megameny-ingress,
    .megameny-ordyta {
        display: none;
    }

    .megameny-kol--ordbok {
        padding-left: 0;
        border-left: 0;
    }

    .megameny-guider {
        columns: 1;
        margin-bottom: var(--sp-2);
    }

    .megameny-guider > li > a,
    .megameny-kategori-lank {
        padding: var(--sp-3) var(--sp-2);
        border-radius: var(--radius-sm);
    }

    .megameny-titel {
        font-size: var(--text-l);
    }

    .megameny-under a {
        padding-top: var(--sp-2);
        padding-bottom: var(--sp-2);
        font-size: var(--text-m);
    }

    /* Ordboken på mobil: kategorierna är knappar till den filtrerade listan.
       Ordpanelen bygger på hover och har ingen plats här. */
    .megameny-ord {
        display: none !important;
    }

    /* Ingen markerad kategori på mobil: där finns ingen panel att peka ut. */
    .megameny-kategori:first-child .megameny-kategori-lank,
    .megameny-kategori.aktiv .megameny-kategori-lank,
    .har-js .megameny-kategori.aktiv .megameny-kategori-lank,
    .megameny-kategori:hover .megameny-kategori-lank {
        background: var(--surface);
        color: var(--text);
    }

    .megameny-kategori-lank {
        border: 1px solid var(--border);
        margin-bottom: var(--sp-2);
        background: var(--surface);
    }

    .megameny-kategori-antal {
        font-size: var(--text-xs);
    }

    .megameny-alla {
        display: inline-block;
        padding: var(--sp-2) var(--sp-2) 0;
    }
}

}

/* ==== 43-guidekort.css ==== */

/* Guidekort: namn och ingress i grid, hela kortet klickbart via .u-tacklank.
   Blå kant upptill och pil som glider fram vid hover. */

@layer components {

.guidekort-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-5);
}

.guidekort {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    transition: var(--overgang);
}

/* Avskuret hörn, som en klippkant. */
.guidekort::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    background: var(--bla-ljus);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    transition: var(--overgang);
}

.guidekort:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
}

.guidekort:hover::before {
    background: var(--accent);
}

.guidekort h3 {
    margin-bottom: var(--sp-2);
}

.guidekort h3 a {
    color: var(--text);
    text-decoration: none;
}

.guidekort:hover h3 a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.guidekort p {
    margin: 0 0 var(--sp-5);
    color: var(--text-muted);
    font-size: var(--text-s);
}

.guidekort-under {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    font-size: var(--text-xs);
}

.guidekort-under li {
    margin: 0;
}

.guidekort-under a {
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}


.guidekort-pil {
    margin-top: auto;
    font-weight: 700;
    color: var(--accent);
    font-size: var(--text-s);
}

}

/* Ordlista: kort per uppslagsord, plus termsidans delar. */

@layer components {

.ordlista {
    display: grid;
    gap: var(--sp-3);
}

/* Ordlistan följer tätt på sidhuvudet: filterraden bär avståndet. */
.ordlista-sektion {
    padding-top: var(--sp-5);
}

/* Ordkortet: uppslagsordet till vänster, förklaringen till höger. */
.ordkort {
    position: relative;
    display: grid;
    grid-template-columns: 30% minmax(0, 70%);
    gap: var(--sp-6);
    align-items: baseline;
    padding: var(--sp-5) var(--sp-6);
    transition: var(--overgang);
}

.ordkort:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
}

.ordkort h2 {
    font-size: var(--h3);
    margin-bottom: var(--sp-1);
}

.ordkort-guide {
    display: inline-block;
    margin-top: var(--sp-2);
    padding: 2px var(--sp-3);
    background: var(--bla-ljus);
    color: var(--accent-hover);
}

.ordkort h2 a {
    color: var(--text);
    text-decoration: none;
}

.ordkort:hover h2 a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.ordkort-synonymer {
    margin-bottom: var(--sp-2);
}

.ordkort-definition {
    margin: 0;
    font-size: var(--text-m);
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .ordkort {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
    }
}

.ord-synonymer {
    font-size: var(--text-s);
    color: var(--text-faint);
    margin-bottom: var(--sp-2);
}

/* Ordsidan har ingen innehållsförteckning, så den behöver inte artikelns
   tvåkolumnsgrid med ordning: block räcker och håller texten först. */
.artikel--ord {
    display: block;
    max-width: var(--prosa-bredd);
    padding-top: var(--sp-6);
}

.relaterade-ord {
    margin-top: var(--sp-8);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.chip-rad {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.chip-rad .chip {
    text-decoration: none;
}

.ord-tillbaka {
    margin-top: var(--sp-8);
}

}

/* Ordboksbandet på startsidan: ljus yta med blå accent, samma familj som korten. */

@layer components {

.ordbokband {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-6) var(--sp-8);
    background: var(--bla-ljus);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: var(--overgang);
}

.ordbokband:hover {
    border-color: var(--border-strong);
    border-left-color: var(--accent);
    box-shadow: var(--shadow-card);
    color: var(--text);
}

.ordbokband-antal {
    font-family: var(--font-head);
    font-size: var(--h1);
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.ordbokband-rubrik {
    display: block;
    font-family: var(--font-head);
    font-size: var(--h3);
    font-weight: 800;
}

.ordbokband:hover .ordbokband-rubrik {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.ordbokband-ingress {
    display: block;
    margin-top: var(--sp-1);
    color: var(--text-muted);
    font-size: var(--text-s);
}

.ordbokband-pil {
    width: 0.5em;
    height: 0.62em;
    background: var(--accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: var(--overgang);
}

.ordbokband:hover .ordbokband-pil {
    transform: translateX(4px);
}

@media (max-width: 720px) {
    .ordbokband {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--sp-4);
        padding: var(--sp-5);
    }

    .ordbokband-pil {
        display: none;
    }
}

}

@layer components {

/* Hovrar man en undersida ska kortets egen "Läs guiden" inte se aktiv ut. */
.guidekort:has(.guidekort-under a:hover) .guidekort-pil {
    text-decoration: none;
}

}

/* ==== 45-produktkort.css ==== */

/* Produktkort, badges och knappar (topplistan). */

@layer components {

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}

/* Ett ensamt utvalt kort läggs liggande: bild till vänster, text till höger. */
.product-grid .product-card:only-child {
    grid-column: 1 / -1;
    max-width: var(--prosa-bredd);
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.product-grid .product-card:only-child .product-image {
    height: 100%;
    min-height: 220px;
}

.product-grid .product-card:only-child .product-body {
    padding: var(--sp-6);
}

.product-grid .product-card:only-child .product-offers {
    margin-top: var(--sp-4);
    align-items: start;
}

.product-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: var(--overgang);
}

.product-card:hover {
    box-shadow: var(--shadow-card);
}

.product-card--vinnare {
    border-color: var(--gul);
}

.vinnare-badge {
    position: absolute;
    top: var(--sp-4);
    left: var(--sp-4);
    z-index: var(--z-badge);
    background: var(--gul);
    color: var(--on-gul);
    padding: 5px 12px;
}

.product-sale {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    z-index: var(--z-badge);
    background: var(--rea);
    color: var(--on-dark);
    padding: 3px 10px;
}

.product-image {
    width: 100%;
    height: 220px;
    object-fit: contain;
    padding: var(--sp-6);
    background: var(--bla-ljus);
}

.product-body {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-brand {
    margin-bottom: var(--sp-1);
}

.product-body h3 {
    font-size: var(--h4);
    margin-bottom: var(--sp-3);
}

/* Profilmärkning (neutral, moderat, aggressiv) */
.spec-chip {
    display: inline-block;
    margin-bottom: var(--sp-3);
    padding: 2px var(--sp-3);
    border-radius: var(--radius-pill);
    background: var(--bla-ljus);
    color: var(--accent-hover);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Etikett ovanför knappgrupp när en rad har flera varianter (dam/herr) */
.variant-etikett {
    display: block;
    width: 100%;
    margin-top: var(--sp-2);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-muted);
}

.variant-etikett:first-child {
    margin-top: 0;
}

/* Filter ovanför produktlistan. Flera rader staplas under en gemensam etikett. */
.filterblock {
    margin-bottom: var(--sp-6);
}

.filterblock .etikett {
    margin-bottom: var(--sp-2);
}

.filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-6);
}

/* I ett filterblock bär blocket avståndet ner till listan. */
.filterblock .filter {
    margin-bottom: var(--sp-2);
}

.filter .etikett {
    width: 100%;
    margin-bottom: var(--sp-1);
}

.filter-grupp {
    min-width: 92px;
    font-size: var(--text-s);
    font-weight: 700;
    color: var(--text-muted);
}

.spec-chip-namn {
    color: var(--text-muted);
    font-weight: 500;
    margin-right: var(--sp-1);
}

.produkt-punkter {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--sp-2);
    column-gap: var(--sp-6);
    margin: 0 0 var(--sp-4);
    padding: 0;
    list-style: none;
    font-size: var(--text-s);
    color: var(--text-muted);
}

.produkt-punkter li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0;
}

.produkt-punkter li::before {
    content: "✓";
    color: var(--accent);
    font-weight: 700;
}

.product-offers {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.btn {
    display: inline-block;
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--text-s);
    text-decoration: none;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--font-body);
    transition: var(--overgang);
}

.btn-cta {
    background: var(--accent);
    color: var(--on-dark);
    box-shadow: var(--shadow-cta);
}

.btn-cta:hover {
    background: var(--accent-hover);
    color: var(--on-dark);
}

.btn-ljus {
    background: var(--surface);
    color: var(--marin);
}

.btn-ljus:hover {
    background: var(--bla-ljus);
    color: var(--marin);
}

.product-offer-btn--alt {
    background: var(--surface);
    color: var(--accent);
    border-color: var(--border-strong);
    box-shadow: none;
}

.product-offer-btn--alt:hover {
    border-color: var(--accent);
    background: var(--bla-ljus);
}

.product-offer-btn s {
    opacity: 0.6;
    font-weight: 400;
}

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .product-grid .product-card:only-child {
        grid-template-columns: 1fr;
    }
}

}

/* ==== 46-produktrader.css ==== */

/* Produktrader: alla rekommenderade produkter med placeringsnummer. */

@layer components {

.product-rows {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.product-row {
    display: grid;
    grid-template-columns: 40px 150px minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: center;
    padding: var(--sp-5) var(--sp-6);
    scroll-margin-top: calc(var(--header-hojd) + var(--sp-4));
    transition: var(--overgang);
}

.product-row:hover {
    box-shadow: var(--shadow-card);
}

.product-rank {
    align-self: start;
}

.product-row-media {
    position: relative;
    align-self: center;
    display: grid;
    gap: var(--sp-2);
    background: var(--bla-ljus);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
}

.product-row-media img {
    width: 100%;
    height: 120px;
    object-fit: contain;
}

/* Två varianter: bilderna sida vid sida */
.product-row-media:has(img + img) {
    grid-template-columns: 1fr 1fr;
}

.product-row-media:has(img + img) img {
    height: 100px;
}

.product-offers--row .variant-etikett + .btn {
    margin-right: 0;
}

.product-row-media .product-sale {
    top: var(--sp-2);
    right: var(--sp-2);
}

.product-row-body h3 {
    font-size: var(--h4);
    margin-bottom: var(--sp-2);
}

.product-offers--row {
    flex-direction: row;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .product-row {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: var(--sp-4);
    }

    .product-row-media {
        grid-column: 2;
    }

    .product-row-body {
        grid-column: 1 / -1;
    }

    .product-row-media img {
        height: 110px;
    }

    .product-offers--row {
        flex-direction: column;
    }

    .product-offers--row .btn {
        width: 100%;
    }
}

}

/* ==== 47-prosa.css ==== */

/* Brödtext från markdownfältet, innehållsförteckning, bilder och video. */

@layer components {

.prosa {
    max-width: var(--prosa-bredd);
}

.prosa h2 {
    margin-top: var(--sp-10);
}

/* Liten topp före H2. */
.prosa h2::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-right: 0.4em;
    background: var(--accent);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.prosa h2:first-child {
    margin-top: 0;
}

.prosa h3 {
    margin-top: var(--sp-8);
}

.prosa h4,
.prosa h5 {
    margin-top: var(--sp-5);
}

.prosa p,
.prosa li {
    color: var(--text-muted);
}

.prosa li::marker {
    color: var(--accent);
}

.prosa strong {
    color: var(--text);
}

.prosa blockquote {
    margin: var(--sp-5) 0;
    padding: var(--sp-3) var(--sp-5);
    border-left: 3px solid var(--accent);
    background: var(--surface);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.prosa table {
    margin: var(--sp-4) 0 var(--sp-6);
    display: block;
    overflow-x: auto;
}

/* Bilder ur WordPress-importen: figure.bild, högerställd variant och bildrad. */
.prosa .bild {
    margin: var(--sp-5) 0 var(--sp-6);
}

.prosa .bild img {
    border-radius: var(--radius);
}

.prosa .bildrad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    margin: var(--sp-5) 0 var(--sp-6);
}

.prosa .bildrad .bild {
    margin: 0;
}

.prosa .bildrad img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

@media (min-width: 720px) {
    .prosa .bild--hoger {
        float: right;
        width: 40%;
        max-width: 300px;
        margin: 0 0 var(--sp-4) var(--sp-6);
    }
}

@media (max-width: 720px) {
    .prosa .bildrad {
        grid-template-columns: 1fr;
    }
}

.prosa .video {
    margin: var(--sp-5) 0 var(--sp-6);
}

.prosa .video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius);
}

/* Ordruta: liten förklaring av ett ord mitt i brödtexten, via [[ord:slug]]. */
.ordruta {
    margin: var(--sp-6) 0;
    padding: var(--sp-4) var(--sp-5);
    background: var(--bla-ljus);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.ordruta-etikett {
    display: block;
    font-family: var(--font-head);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: var(--sp-1);
}

.ordruta-ord {
    margin: 0 0 var(--sp-1);
    font-size: var(--text-l);
}

.prosa .ordruta-definition {
    margin: 0 0 var(--sp-2);
    color: var(--text);
    font-size: var(--text-s);
}

.ordruta-lank {
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
}

.ordruta-lank:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Vanliga frågor: hopfällbara med bergtriangel som markör. */
.faq {
    margin-top: var(--sp-10);
}

.faq-lista {
    display: grid;
    gap: var(--sp-2);
}

.faq details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5);
    transition: var(--overgang);
}

.faq details[open] {
    border-color: var(--border-strong);
}

.faq summary {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0.45em;
    height: 0.55em;
    margin-top: 0.35em;
    background: var(--accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: var(--overgang);
}

.faq details[open] summary::before {
    transform: rotate(-90deg);
}

.faq summary h3 {
    display: inline;
    margin: 0;
    font-size: var(--text-l);
}

.faq summary:hover h3 {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.faq-svar {
    padding-top: var(--sp-3);
}

.faq-svar > :last-child {
    margin-bottom: 0;
}

/* Innehållsförteckning */
.toc {
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-10);
}

.toc h3 {
    margin-bottom: var(--sp-2);
}

.toc ol {
    margin: 0;
    padding-left: 1.3em;
}

.toc li {
    break-inside: avoid;
    font-size: var(--text-s);
    font-weight: 500;
}

.toc li::marker {
    color: var(--accent);
    font-weight: 700;
}

.toc a {
    color: var(--text);
    text-decoration: none;
}

.toc a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

}

/* ==== 50-footer.css ==== */

/* Sidfot: mörkblå med vit text. */

@layer components {

.site-footer {
    position: relative;
    overflow: hidden;
    background: var(--marin-djup);
    color: var(--on-dark-muted);
    padding: var(--sp-16) 0 var(--sp-8);
    font-size: var(--text-s);
}

.site-footer .dekor-berg {
    color: var(--on-dark);
    opacity: 0.35;
}

.site-footer .container {
    position: relative;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 0.8fr;
    gap: var(--sp-8);
}

.footer-ordmarke {
    display: inline-block;
    font-family: var(--font-head);
    font-size: var(--h3);
    font-weight: 800;
    color: var(--on-dark);
    text-decoration: none;
}

.footer-brand p {
    max-width: 44ch;
    margin-top: var(--sp-3);
}

.site-footer h4 {
    margin-bottom: var(--sp-3);
    color: var(--on-dark-muted);
}

.site-footer h4 a {
    color: inherit;
    text-decoration: none;
}

.footer-nav {
    display: grid;
    gap: var(--sp-2);
}

.footer-nav a {
    width: fit-content;
    padding: var(--sp-1) var(--sp-3);
    margin-left: calc(-1 * var(--sp-3));
    border-radius: var(--radius-sm);
    color: var(--on-dark);
    text-decoration: none;
    transition: var(--overgang);
}

/* Undersidor: hela plattan flyttas in 18 px, så hovern visar hierarkin. */
.footer-nav a.footer-nav-under {
    padding-left: var(--indrag-barn);
    font-size: var(--text-xs);
}

.footer-nav a:hover {
    background: var(--glas);
    color: var(--on-dark);
}

.footer-legal {
    margin-top: var(--sp-12);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border-dark);
    font-size: var(--text-xs);
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.footer-legal p {
    margin: 0;
    max-width: 60ch;
}

@media (max-width: 720px) {
    .site-footer .dekor-berg {
    color: var(--on-dark);
    opacity: 0.35;
}

.site-footer .container {
    position: relative;
}

.footer-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }
}

}

/* ==== 55-formular.css ==== */

/* Kontaktformulär */

@layer components {

.kontakt {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: start;
    padding: var(--sp-10) 0 var(--sp-16);
}

.kontakt-info {
    padding: var(--sp-5) var(--sp-6);
    font-size: var(--text-s);
    color: var(--text-muted);
}

.kontakt-info > :last-child {
    margin-bottom: 0;
}

.form-field {
    margin-bottom: var(--sp-5);
}

.form-field label {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    margin-bottom: var(--sp-1);
}

.form-field input,
.form-field textarea {
    width: 100%;
    max-width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-s);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    transition: var(--overgang);
}

/* Bara höjden får dras: horisontell resize spiller över spalten bredvid. */
.form-field textarea {
    resize: vertical;
    min-height: 160px;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--bla-ton);
}

.form-success,
.form-errors {
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.form-errors {
    border-left-color: var(--rea);
    color: var(--rea);
    margin-bottom: var(--sp-5);
}

.form-errors p {
    margin: 0;
}

@media (max-width: 900px) {
    .kontakt {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
}

}

/* ==== 60-klippkarta.css ==== */

/* Sverigeföraren: Sverigekartan, klipplistan, källvarningen och klippsidorna.
   Kartan är egen SVG-geometri, ingen karttjänst, så allt färgas med tokens. */

@layer components {

/* ---------- Heron ----------
   Källvarningen står bredvid rubriken i stället för som ett block ovanför
   innehållet: den ska läsas innan man börjar planera efter uppgifterna. */
.klippa-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
    gap: var(--sp-10);
    align-items: start;
    padding-bottom: var(--sp-6);
}

.klippa-hero-text {
    min-width: 0;
}

@media (max-width: 1040px) {
    .klippa-hero {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
}

/* Baslagret ger varje li en margin-bottom. I listorna här styrs avståndet av
   gap eller ramar, så marginalen blir bara skev luft: den sköt ner namnen i
   snabbnavigeringen fyra pixlar och la tomrum under varje led. */
.kallvarning-risker li,
.klipplista li,
.sektornav li,
.ledlista li {
    margin-bottom: 0;
}

/* ---------- Källvarning ----------
   Fullbrett mörkt band mellan heron och innehållet, samma grepp som
   ordboksbandet på startsidan. Kort och handlingsbar: budskapet och knappen
   på en rad, de tre riskerna skummingsbara under. Bakgrunden om källan
   ligger i .kallfot. */
.kallband {
    background: var(--marin);
    color: var(--on-dark);
}

.kallvarning {
    padding: var(--sp-8) 0;
}

.kallvarning-huvud {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-5);
    align-items: center;
}

.kallvarning-ikon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    background: var(--gul);
    color: var(--on-gul);
}

.kallvarning-ikon svg {
    width: 22px;
    height: 22px;
}

.kallvarning-budskap h2 {
    margin: 0;
    font-size: var(--h3);
    line-height: 1.2;
    color: var(--on-dark);
}

.kallvarning-budskap p {
    margin: var(--sp-2) 0 0;
    font-size: var(--text-s);
    line-height: 1.5;
    color: var(--on-dark-muted);
}

.kallvarning-budskap strong {
    color: var(--on-dark);
}

.kallvarning-knapp {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
}

/* Vad Sverigeföraren är. Står mellan varningen och riskerna: kontext, inte
   krav, därför dämpad och avskild uppåt. */
.kallvarning-vadardet {
    max-width: 90ch;
    margin: var(--sp-5) 0 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border-dark);
    font-size: var(--text-s);
    line-height: 1.55;
    color: var(--on-dark-muted);
}

.kallvarning-vadardet a {
    color: var(--on-dark);
}

.kallvarning-vadardet strong {
    color: var(--on-dark);
}

/* Riskerna: tre korta punkter att skumma, inte ett stycke att läsa. */
.kallvarning-risker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    margin: var(--sp-6) 0 0;
    padding: var(--sp-6) 0 0;
    border-top: 1px solid var(--border-dark);
    list-style: none;
}

.kallvarning-vadardet + .kallvarning-risker {
    border-top: 0;
}

.kallvarning-risker li {
    display: flex;
    gap: var(--sp-3);
    align-items: start;
}

.kallvarning-risker svg {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--gul);
}

.kallvarning-risker div {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--on-dark-muted);
}

.kallvarning-risker strong {
    display: block;
    margin-bottom: var(--sp-1);
    color: var(--on-dark);
    font-size: var(--text-s);
}

/* Licensraden: dämpad fotrad i bandet, avskild från varningen ovanför. */
.kallvarning-licens {
    margin: var(--sp-6) 0 0;
    padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--border-dark);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--on-dark-faint);
}

.kallvarning-licens a,
.kallvarning-budskap a {
    color: var(--on-dark-muted);
}

.kallvarning-licens a:hover,
.kallvarning-budskap a:hover {
    color: var(--on-dark);
}

@media (max-width: 860px) {
    .kallvarning-huvud {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: var(--sp-4);
    }

    .kallvarning-knapp {
        grid-column: 2;
        justify-self: start;
    }

    .kallvarning-risker {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
}

/* ---------- Källfot: bakgrunden om Sverigeföraren ---------- */
.kallfot {
    margin-bottom: var(--sp-6);
}

.kallfot h2 {
    margin: 0 0 var(--sp-3);
    font-size: var(--h4);
}

.kallfot p {
    margin: 0 0 var(--sp-3);
    font-size: var(--text-s);
    line-height: var(--radhojd);
    color: var(--text-muted);
}

/* ---------- Megamenyn ----------
   Kartan är sektionens hela poäng, så den ligger i menyn i stället för en
   ren länklista. Den är liten här, alltså utan nålnummer att läsa.

   Menyn är innehållsbred, alltså exakt containerns bredd. Den behöver ingen
   egen breddregel: panelen positioneras mot sidhuvudets .container, så basens
   left/right: 0 ger just den bredden. Guide- och ordboksmenyerna sätter
   left: auto och en egen bredd, och det är det som gör dem smala. Räkna inte
   fram bredden ur 100vw: det måttet räknar med scrollisten och ger femton
   pixlar för mycket. */

.megameny-grid--forare {
    display: grid;
    /* Kartkolumnen tar den bredd kartan faktiskt får, texten hålls smal:
       Sverige är nästan dubbelt så högt som brett, så kartans storlek styrs
       av höjden. Griden centreras i den breda panelen i stället för att
       sträckas ut, annars simmar kartan i tomrum. */
    grid-template-columns: auto minmax(0, 340px);
    gap: var(--sp-12);
    justify-content: center;
    align-items: center;
}

.megameny-forklaring {
    margin: 0 0 var(--sp-5);
    color: var(--text-muted);
    font-size: var(--text-s);
    line-height: 1.6;
}

/* Kartans popup (site.js): visas direkt, till skillnad från webbläsarens title */
.karta-tips {
    position: fixed;
    z-index: var(--z-tips);
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    background: var(--marin);
    color: var(--on-dark);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: var(--shadow-meny);
}

.karta-tips--under {
    transform: translate(-50%, 18px);
}

.karta-tips[hidden] {
    display: none;
}

/* Rutan som öppnas när man trycker på kartan på touch (site.js): klippan med
   länk dit, eller landskapet med länk överst och sina klippor under. */
.karta-ruta {
    position: fixed;
    z-index: var(--z-tips);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: min(340px, calc(100vw - var(--sp-6)));
    max-height: min(70vh, 520px);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-meny);
}

.karta-ruta[hidden] {
    display: none;
}

.karta-ruta-topp {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
}

.karta-ruta-rubrik {
    font-family: var(--font-head);
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.15;
}

.karta-ruta-stang {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    transition: var(--overgang);
}

.karta-ruta-stang::before {
    content: "×";
}

.karta-ruta-stang:hover {
    background: var(--surface-hover);
}

.karta-ruta-knapp {
    display: block;
}

.karta-ruta-knapp::after {
    content: " →";
}

.karta-ruta-fakta {
    margin: 0;
    font-size: var(--text-s);
    color: var(--text-muted);
}

.karta-ruta-lista {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.karta-ruta-lista a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}

.karta-ruta-lista li:last-child a {
    border-bottom: 0;
}

.karta-ruta-nr {
    flex: none;
    width: 30px;
    height: 32px;
    font-size: var(--text-s);
}

.karta-ruta-text {
    display: grid;
}

.karta-ruta-namn {
    font-weight: 700;
    color: var(--accent);
}

.karta-ruta-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.megameny-karta {
    display: block;
}

.megameny-karta .klippkarta-svg {
    display: block;
    width: auto;
    /* Kartan tar all höjd som får plats under sidhuvudet. Sverige är nästan
       dubbelt så högt som brett, så höjden är det enda som avgör hur stor
       den blir: ett lågt tak här gör kartan liten hur bred panelen än är. */
    /* Panelen har egen luft och en bildtext utöver kartan, därav avdraget:
       utan det hamnar underkanten nedanför skärmen. */
    height: calc(100vh - var(--header-hojd) - var(--sp-20) - var(--sp-12));
    max-height: 860px;
    min-height: 380px;
    margin-inline: auto;
}

/* Nålarna blir prickar i den här skalan: numret går ändå inte att läsa. */
.megameny-karta .karta-nal-text {
    display: none;
}

.megameny-karta .karta-nal-kropp {
    stroke-width: 2.5;
}

@media (max-width: 900px) {
    .megameny-grid--forare {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }

    /* Kartan tar för mycket plats i den utfällda mobilmenyn. */
    .megameny-karta {
        display: none;
    }
}

/* ---------- Översikt: karta och lista ---------- */
.klippkarta {
    display: grid;
    grid-template-columns: minmax(360px, 560px) minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: start;
}

.klippkarta-karta {
    position: sticky;
    top: calc(var(--header-hojd) + var(--sp-4));
}

.klippkarta-kalla {
    margin-top: var(--sp-3);
    text-align: center;
    line-height: 1.4;
}

.klippkarta-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Landskap utan klippa ligger kvar som svag kontur: de visar att urvalet
   är just ett urval, och att kartan kan fyllas på. */
.karta-landskap {
    fill: var(--bg);
    stroke: var(--border-strong);
    stroke-width: 0.7;
    transition: var(--overgang);
}

.karta-landskap--aktiv {
    fill: var(--bla-ljus);
    stroke: var(--bla);
    stroke-width: 1;
}

/* Landskap med klippor är vägar in till sin egen sida. */
.karta-landskaplank {
    cursor: pointer;
}

.karta-landskaplank:hover .karta-landskap--aktiv,
.karta-landskaplank:focus-visible .karta-landskap--aktiv {
    fill: var(--bla-ton);
    stroke-width: 2;
}

.karta-landskaplank:focus-visible {
    outline: none;
}

/* Landskapet man tittar på. Måste stå efter --aktiv: samma specificitet. */
.karta-landskap--valt {
    fill: var(--bla-ton);
    stroke: var(--bla-djup);
    stroke-width: 2;
}

/* Zoomad karta blir bredare än hög: låt den fylla spalten. */
.klippkarta-svg--zoom {
    max-height: 70vh;
}

/* Vägen tillbaka till hela Sverige, ovanför det inzoomade landskapet. */
.klippkarta-upp {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-head);
    font-size: var(--text-m);
    font-weight: 700;
    text-decoration: none;
    transition: var(--overgang);
}

.klippkarta-upp:hover {
    border-color: var(--accent);
    background: var(--bla-ljus);
    color: var(--accent);
}

.klippkarta-upp-pil {
    flex: none;
    width: 0.5em;
    height: 0.65em;
    background: var(--accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: rotate(180deg);
    transition: var(--overgang);
}

.karta-nal {
    cursor: pointer;
    /* Nålen är en länk, och baslagrets a-regel lägger annars en understrykning
       under siffran inuti SVG:n. */
    text-decoration: none;
}

.karta-nal-ring {
    fill: transparent;
}

/* Sexkanten är samma form som rankmärket på produktkorten. */
.karta-nal-kropp {
    fill: var(--marin);
    stroke: var(--surface);
    stroke-width: 1.5;
    transition: var(--overgang);
}

.karta-nal-text {
    fill: var(--on-dark);
    font-family: var(--font-head);
    font-size: 11px;
    font-weight: 800;
    text-anchor: middle;
    pointer-events: none;
}

/* Nålen skalas ner i inzoomad vy, och scale() krymper även texten. Kompensera
   så siffran håller läsbar storlek på skärmen, men inte mer än att tre
   siffror ryms innanför sexkanten. */
.klippkarta-svg--zoom .karta-nal-text {
    font-size: 13px;
}

.karta-nal:hover .karta-nal-kropp,
.karta-nal:focus-visible .karta-nal-kropp,
.karta-nal.markerad .karta-nal-kropp {
    fill: var(--accent);
    stroke-width: 2.5;
}

.karta-nal:focus-visible {
    outline: none;
}

.karta-nal:focus-visible .karta-nal-ring {
    fill: var(--bla-ton);
}

/* Tätt läge: med hundratals klippor får siffran varken plats eller mening,
   och stora nålar klumpar ihop sig till en enda fläck. Nålen krymper till en
   dryg tredjedel och siffran försvinner. */
.klippkarta-svg--tat .karta-nal-kropp {
    transform: scale(0.38);
    stroke-width: 3;
}

.klippkarta-svg--tat .karta-nal-text {
    display: none;
}

.klippkarta-svg--tat .karta-nal-ring {
    r: 9;
}

.klippkarta-svg--tat .karta-nal:hover .karta-nal-kropp,
.klippkarta-svg--tat .karta-nal:focus-visible .karta-nal-kropp,
.klippkarta-svg--tat .karta-nal.markerad .karta-nal-kropp {
    transform: scale(0.6);
}

.klippkarta-tillbaka {
    margin-top: var(--sp-5);
}

/* Landskapen som lista i brödtexten, för den som vill vidare. */
.landskapslista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sp-2) var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.landskapslista li {
    margin-bottom: 0;
}

.landskapslista-antal {
    color: var(--text-faint);
    font-size: var(--text-xs);
}

/* Sortering av klipplistan. */
.klippfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-3) 0 var(--sp-4);
}

.klippfilter .etikett {
    margin-right: var(--sp-1);
}

.klippfilter .chip {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-xxs);
    font-size: var(--text-xs);
}

/* ---------- Klipplistan ---------- */
.klipplista {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.klipprad {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    transition: var(--overgang);
}

.klipprad:hover,
.klipprad.markerad {
    border-color: var(--accent);
    box-shadow: var(--shadow-card);
}

.klipprad-nr {
    flex: none;
}

.klipprad-text h3 {
    margin: 0;
    font-size: var(--h4);
}

.klipprad-text h3 a {
    text-decoration: none;
    color: var(--text);
}

.klipprad:hover h3 a {
    color: var(--accent);
}

.klipprad-plats {
    margin: var(--sp-1) 0 0;
}

.klipprad-fakta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    margin: var(--sp-2) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.klipprad-typ {
    padding: 2px var(--sp-3);
    background: var(--bla-ljus);
    color: var(--bla-djup);
    text-transform: capitalize;
}

/* ---------- Snabbnavigering till sektorerna ----------
   Klistrar under sidhuvudet medan man läser ledlistan. Namnen radbryts över
   flera rader: en sidoscrollande rad göms undan halva listan och är sämre
   att träffa. Aktiv sektor markeras av JS, som också sätter rubrikernas
   scroll-margin efter navets faktiska höjd. */
/* Snabbnavigering och filter klistrar som en panel. Var för sig skulle de
   lägga sig över varandra, eftersom båda vill sitta under sidhuvudet. */
.ledverktyg {
    position: sticky;
    top: calc(var(--header-hojd) + var(--paneltopp-hojd));
    z-index: var(--z-meny);
    margin: 0 0 var(--sp-5);
    padding: var(--sp-4) 0 var(--sp-3);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.sektornav {
    margin: 0 0 var(--sp-3);
}

.sektornav .etikett {
    margin-bottom: var(--sp-2);
}

.sektornav-spar {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    background: var(--surface);
}

.sektornav ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* Scrollisten döljs: pilarna sköter det på desktop, swipe på mobil. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sektornav ul::-webkit-scrollbar {
    display: none;
}

.sektornav li {
    flex: none;
    display: flex;
}

/* Segmenterad rad: delad kant mellan namnen, inga rundade hörn. Namnen fyller
   radens höjd, annars blir pilarna några pixlar högre än dem. */
.sektornav a {
    display: flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-4);
    border-right: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--text-xs);
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--overgang);
}

.sektornav li:last-child a {
    border-right: 0;
}

.sektornav a:hover {
    background: var(--bla-ljus);
    color: var(--accent);
}

.sektornav a.aktiv {
    background: var(--accent);
    color: var(--on-dark);
}

/* Pilarna sitter i radens kanter i stället för ovanpå den, annars försvinner
   de bakom namnen. Döljs när raden är slut åt det hållet. */
.sektornav-pil {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    border: 0;
    background: var(--surface-2);
    cursor: pointer;
    transition: var(--overgang);
}

.sektornav-pil--bak {
    border-right: 1px solid var(--border);
}

.sektornav-pil--fram {
    border-left: 1px solid var(--border);
}

.sektornav-pil:hover:not(:disabled) {
    background: var(--accent);
}

.sektornav-pil:disabled {
    cursor: default;
    opacity: 0.35;
}

.sektornav-pil::before {
    content: "";
    width: 0.45em;
    height: 0.6em;
    background: var(--accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: var(--overgang);
}

.sektornav-pil--bak::before {
    transform: rotate(180deg);
}

.sektornav-pil:hover:not(:disabled)::before {
    background: var(--on-dark);
}

/* Mobil sveper i stället: pilarna tar bara plats. */
@media (hover: none) {
    .sektornav-pil {
        display: none;
    }
}

/* Reserv innan JS mätt navet. */
.sektor-namn {
    scroll-margin-top: 5.5rem;
}

/* Rubrikradens höjd: knappen (34) plus luft över och under. Ledverktyget
   klistrar under den. JS mäter den faktiska höjden och skriver över värdet,
   eftersom ett långt klippnamn kan radbryta i den smala spalten; det här är
   bara utgångsvärdet innan JS hunnit köra. */
:root {
    --paneltopp-hojd: 50px;
}

/* ---------- Panelerna ----------
   Sidan är två paneler: texten om klippan och lederna. På desktop syns båda,
   och plusknappen byter vilken som får huvudutrymmet. På mobil finns ingen
   spaltfördelning att byta, så knappen fäller i stället ut och in panelen,
   och båda börjar infällda för att listan med sektorer inte ska skjuta ner
   allt annat. */
.panel-topp {
    position: sticky;
    top: var(--header-hojd);
    z-index: calc(var(--z-meny) + 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
    padding: var(--sp-3) 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.panel-topp h2 {
    margin: 0;
    font-size: var(--h3);
}

.panel-knapp {
    flex: none;
    position: relative;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xxs);
    background: var(--surface);
    cursor: pointer;
    transition: var(--overgang);
}

.panel-knapp:hover {
    border-color: var(--accent);
    background: var(--bla-ljus);
}

/* Plus av två streck; det lodräta göms när panelen har utrymmet. */
.panel-knapp::before,
.panel-knapp::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--accent);
    transform: translate(-50%, -50%);
    transition: var(--overgang);
}

.panel-knapp::before {
    width: 14px;
    height: 2px;
}

.panel-knapp::after {
    width: 2px;
    height: 14px;
}

.panel-knapp[aria-expanded="true"]::after {
    height: 2px;
}

/* ---------- Klippsidan ----------
   Tvåkolumn som .artikel i övrigt: brödtext till vänster, lederna till höger.
   Vänsterkolumnens delar ligger i en egen wrapper, så .artikel .prosa { order }
   inte kastar om faktaruta, brödtext och fot mot varandra. */
.artikel--klippa {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: var(--sp-20);
}

/* Texten om klippan tar huvudutrymmet, lederna kliver åt sidan. */
.artikel--klippa.om-stor {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
}

.artikel--klippa.om-stor .leder {
    grid-column: 1;
}

.artikel--klippa.om-stor .klippa-huvud {
    grid-column: 2;
}

/* Panelen som fått stiga åt sidan visar bara sin rubrik och knapp. */
.artikel--klippa.om-stor .leder .panel-kropp {
    display: none;
}

@media (max-width: 1100px) {
    .artikel--klippa {
        gap: var(--sp-12);
    }
}

.klippa-huvud {
    min-width: 0;
}

.klippa-huvud .prosa {
    max-width: none;
}

/* ---------- Klippsidan: faktaruta ---------- */
.klippfakta {
    margin: var(--sp-6) 0 0;
    padding: var(--sp-6);
}

/* I heron står kortet mot gradienten och behöver egen skugga för att lyfta. */
.klippa-hero .klippfakta {
    margin: 0;
    box-shadow: var(--shadow-card);
}

.klippfakta dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--sp-5);
    margin: 0;
}

.klippfakta dt {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}

.klippfakta dd {
    margin: var(--sp-1) 0 0;
    font-size: var(--text-m);
    font-weight: 700;
    color: var(--text);
}

.klippfakta-skala {
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.klippfakta-koord {
    font-size: var(--text-s);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.klippfakta-lankar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: var(--sp-5) 0 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

/* ---------- Kopieringsknapp ---------- */
.kopiera {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    margin-left: calc(var(--sp-2) * -1);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: var(--overgang);
}

.kopiera:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.kopiera:hover .kopiera-ikon {
    opacity: 1;
}

.kopiera-ikon,
.kopiera-klar {
    width: 15px;
    height: 15px;
    flex: none;
    transition: var(--overgang);
}

.kopiera-ikon {
    opacity: 0.5;
}

.kopiera-klar {
    display: none;
    color: var(--accent);
}

.kopiera.kopierad {
    border-color: var(--accent);
    background: var(--bla-ljus);
}

.kopiera.kopierad .kopiera-ikon {
    display: none;
}

.kopiera.kopierad .kopiera-klar {
    display: block;
}

/* Kopieringsknappen i knappraden ser ut som de andra knapparna, till
   skillnad från den inline i koordinaten. Måste stå efter .kopiera. */
.kopiera--knapp {
    margin-left: 0;
    border-color: var(--border-strong);
    font-size: var(--text-xs);
}

.kopiera--knapp:hover {
    border-color: var(--accent);
    background: var(--bla-ljus);
}

.kopiera--knapp .kopiera-ikon {
    opacity: 0.65;
}

.kopiera--knapp.kopierad {
    border-color: var(--accent);
    background: var(--bla-ljus);
    color: var(--accent);
}

/* Ikon för länkar som lämnar sajten. Knapparna blir flex för att få
   texten och ikonen på samma baslinje. */
.extern-ikon {
    width: 0.85em;
    height: 0.85em;
    flex: none;
    opacity: 0.65;
    transition: var(--overgang);
}

.klippfakta-lankar .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.klippfakta-lankar .btn:hover .extern-ikon {
    opacity: 1;
}

/* Ljus knapp på vit faktaruta behöver ram för att synas. Kortet står i en
   smal spalt, så knapparna är nättare än sajtens standardknapp. */
.klippfakta-lankar .btn {
    padding: var(--sp-2) var(--sp-4);
    border-color: var(--border-strong);
    font-size: var(--text-xs);
}

.klippfakta-lankar .btn:hover {
    border-color: var(--accent);
}

/* ---------- Klippbilder och topo-skisser ----------
   Skisserna är sidans viktigaste innehåll: ledernas nummer pekar på dem.
   De ligger därför på ljus botten i full bredd, inte som små miniatyrer. */
.klippbilder {
    display: grid;
    gap: var(--sp-4);
    margin: var(--sp-6) 0;
}

.klippbilder--sektor {
    margin: 0 0 var(--sp-4);
}

.klippbild {
    margin: 0;
}

.klippbild a {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
    transition: var(--overgang);
}

.klippbild a:hover {
    border-color: var(--accent);
}

.klippbild img {
    display: block;
    width: 100%;
    height: auto;
}

.klippbild figcaption {
    margin-top: var(--sp-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

/* Skissen är klickbar, och det ska synas utan att man först pekar på den. */
.klippbild a {
    position: relative;
}

.klippbild-forstora {
    position: absolute;
    right: var(--sp-2);
    bottom: var(--sp-2);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    background: var(--marin);
    color: var(--on-dark);
    font-family: var(--font-head);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: var(--overgang);
}

.klippbild-forstora svg {
    width: 14px;
    height: 14px;
}

.klippbild a:hover .klippbild-forstora,
.klippbild a:focus-visible .klippbild-forstora {
    background: var(--accent);
}

/* ---------- Skissvisare ---------- */
.skissvisare {
    position: fixed;
    inset: 0;
    z-index: var(--z-nav-mobil);
    display: grid;
    place-items: center;
    padding: var(--sp-6);
    background: rgb(7 28 46 / 0.88);
    overflow: auto;
}

.har-skissvisare {
    overflow: hidden;
}

.skissvisare figure {
    margin: 0;
    /* Figuren måste fylla sin cell. Med bara max-width krymper den till
       innehållet, och då blir skissen mindre i visaren än på sidan. */
    width: 100%;
    max-width: 1600px;
}

.skissvisare img {
    display: block;
    /* Skisserna är breda och ofta lågupplösta. Låt dem fylla bredden även när
       de är mindre än den: en uppförstorad topo är fortfarande läsbarare än en
       liten, och det är hela poängen med att förstora. */
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
    margin: 0 auto;
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.skissvisare figcaption {
    margin-top: var(--sp-3);
    text-align: center;
    color: var(--on-dark-muted);
    font-size: var(--text-xs);
}

.skissvisare-stang {
    position: fixed;
    top: var(--sp-4);
    right: var(--sp-5);
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-pill);
    background: var(--glas);
    color: var(--on-dark);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    transition: var(--overgang);
}

.skissvisare-stang:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* ---------- Ledfilter ---------- */
.ledfilter {
    margin: 0;
}

.ledfilter-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.ledfilter-rad + .ledfilter-rad {
    margin-top: var(--sp-2);
}

.ledfilter-rad .etikett {
    flex: none;
    width: 4.5rem;
}

.ledfilter .chip {
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-xxs);
    font-size: var(--text-xs);
}

.ledfilter-status:empty {
    display: none;
}

.ledfilter-status {
    margin: var(--sp-3) 0 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ---------- Klippsidan: varningar och luckor ---------- */
.access-varning {
    padding: var(--sp-4);
    border-left: 3px solid var(--gul);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    font-size: var(--text-s);
}

.saknas {
    color: var(--text-muted);
    font-style: italic;
}

/* ---------- Klippsidan: leder ---------- */
.leder {
    min-width: 0;
    padding-top: var(--sp-6);
}

.artikel--klippa .leder {
    grid-column: 1;
}

.artikel--klippa .klippa-huvud {
    grid-column: 2;
}

.leder-ingress {
    max-width: var(--prosa-bredd);
    margin: 0 0 var(--sp-8);
    color: var(--text-muted);
}

.sektor + .sektor {
    margin-top: calc(var(--sp-8) * 1.4);
}

/* Sektor som filtret tömt: rubriken står kvar, men dämpad. */
.sektor--tom .sektor-namn {
    color: var(--text-faint);
}

.sektor-tom {
    margin: 0;
    padding: var(--sp-3) 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-style: italic;
}

.sektor-namn {
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
    font-size: var(--h3);
}

.ledlista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.led + .led {
    border-top: 1px solid var(--border);
}

.led-rad {
    display: grid;
    grid-template-columns: 2.5rem 1fr 4rem 9rem;
    gap: var(--sp-1) var(--sp-3);
    align-items: baseline;
    padding: var(--sp-3) var(--sp-2);
    font-size: var(--text-s);
    cursor: pointer;
    transition: var(--overgang);
}

/* I smala spalter får typ och längd egen rad. */
@media (max-width: 760px) {
    .led-rad {
        grid-template-columns: 2.2rem 1fr 3.5rem;
    }

    .led-meta {
        grid-column: 2 / -1;
    }
}

.led-rad--platt {
    cursor: default;
}

.led-detalj .led-rad:hover {
    background: var(--surface-2);
}

.led-detalj .led-rad::-webkit-details-marker {
    display: none;
}

.led-detalj .led-rad {
    list-style: none;
}

.led-nr {
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.led-namn {
    font-weight: 700;
    color: var(--text);
}

/* Leder med beskrivning får triangeln som resten av sajtens utfällbara ytor. */
.led-detalj .led-namn::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.5em;
    margin-left: 0.45em;
    background: var(--accent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: var(--overgang);
}

.led-detalj[open] .led-namn::after {
    transform: rotate(90deg);
}

.led-stjarnor {
    color: var(--gul);
    font-weight: 400;
}

.led-grad {
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.led-meta:not(:empty) {
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-transform: capitalize;
}

.led-text {
    padding: 0 var(--sp-2) var(--sp-4) 2.9rem;
}

.led-text p {
    margin: 0;
    font-size: var(--text-s);
    color: var(--text-muted);
    line-height: var(--radhojd);
}

.led-fa {
    margin-top: var(--sp-2) !important;
}

/* ---------- Klippsidans fot ---------- */
.klippa-fot {
    margin-top: var(--sp-12);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--text-s);
}

.klippa-fot p + p {
    margin-top: var(--sp-3);
}

.klippa-landskap {
    margin-bottom: var(--sp-2);
}

/* ---------- Smalare skärmar ---------- */
@media (max-width: 1100px) {
    .klippkarta {
        grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
        gap: var(--sp-8);
    }
}

@media (max-width: 900px) {
    .artikel--klippa,
    .artikel--klippa.om-stor {
        grid-template-columns: 1fr;
    }

    .artikel--klippa .leder,
    .artikel--klippa .klippa-huvud,
    .artikel--klippa.om-stor .leder,
    .artikel--klippa.om-stor .klippa-huvud {
        grid-column: 1;
    }

    /* På mobil styr knappen utfällningen, inte spaltbredden, så båda
       panelerna behöver sin knapp. */
    .artikel--klippa.om-stor .leder .panel-kropp {
        display: block;
    }

    [data-panel].stangd .panel-kropp {
        display: none;
    }

    /* Hela rubrikraden är träffyta på mobil, inte bara plusset. */
    .panel-topp {
        cursor: pointer;
    }

    /* Infälld panel är bara en rubrikrad. Luften under den kommer från
       griden, så rubrikens egen marginal skulle bara stapla på. */
    [data-panel].stangd .panel-topp {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .artikel--klippa,
    .artikel--klippa.om-stor {
        gap: var(--sp-5);
        padding-top: var(--sp-6);
    }

    .leder {
        padding-top: 0;
    }

    .klippkarta {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
    }

    .klippkarta-karta {
        position: static;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 620px) {
    .led-text {
        padding-left: var(--sp-2);
    }

    .kallvarning {
        padding: var(--sp-5) var(--sp-4);
    }
}

}

/* ==== 65-sitemap.css ==== */

/* Sitemap: /sitemap, XML-kartornas innehåll som läsbar sida (App\Services\Sitemapsida). */

@layer components {

.sitemap-tillbaka {
    display: inline-block;
    margin-bottom: var(--sp-4);
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    transition: var(--overgang);
}

.sitemap-tillbaka:hover {
    color: var(--accent-hover);
}

/* Indexet: ett kort per karta. */
.sitemap-kartor {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sitemap-kartor li {
    position: relative;
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-5) var(--sp-6);
    transition: var(--overgang);
}

.sitemap-kartor li:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-card);
}

.sitemap-kartor a {
    font-family: var(--font-head);
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.2;
    color: var(--text);
    text-decoration: none;
    transition: var(--overgang);
}

.sitemap-kartor li:hover a {
    color: var(--accent);
}

.sitemap-antal {
    color: var(--text-muted);
}

.sitemap-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Faktarad över tabellen: antal, frekvens, prioritet. */
.sitemap-fakta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-8);
    margin: var(--sp-4) 0 0;
}

.sitemap-fakta div {
    display: grid;
    gap: var(--sp-1);
}

.sitemap-fakta dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-head);
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1.1;
}

.sitemap-kartor .sitemap-fil {
    justify-self: start;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--text-faint);
}

.sitemap-kartor .sitemap-fil:hover {
    color: var(--accent);
}

.sitemap-fakta dd a {
    font-size: var(--text-m);
    color: var(--accent);
}

/* En karta: tabell med alla sidor. */
.sitemap-tabell {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.sitemap-tabell th,
.sitemap-tabell td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.sitemap-tabell th {
    background: var(--surface-2);
    white-space: nowrap;
}

.sitemap-tabell tbody tr:last-child td {
    border-bottom: 0;
}

.sitemap-tabell tbody tr {
    transition: var(--overgang);
}

.sitemap-tabell tbody tr:hover {
    background: var(--bla-ljus);
}

.sitemap-tabell a {
    color: var(--accent);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.sitemap-tabell a:hover {
    text-decoration: underline;
}

.sitemap-datum {
    width: 1%;
    white-space: nowrap;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .sitemap-tabell th,
    .sitemap-tabell td {
        padding: var(--sp-2) var(--sp-3);
    }
}

}

/* ==== 90-utilities.css ==== */

/* Utilities. Vinner över components utan !important. */

@layer utilities {

/* Täcklänk: gör hela kortet klickbart via en länk. Föräldern måste vara position: relative. */
.u-tacklank::after {
    content: "";
    position: absolute;
    inset: 0;
}

.u-over-tacklank {
    position: relative;
    z-index: var(--z-badge);
}

/* Dold för synen, kvar för skärmläsare. */
.u-dold {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

}