/* ========================================================================
   Swedish Paleo – AIP-Skolan (kursöversikt + delar utan Elementor)
   Mallar: includes/aip-skolan/template-archive.php + template-single.php
   Scope: body.sp-as-page (sätts bara när pluginets rendering används)

   Designstandard (landningssidor + post-single): full-bleed band vitt/#f9f9f9,
   Montserrat-rubriker, Proxima Nova Regular-brödtext, kort #ece6db/radius 16,
   grönt komponentspråk #3D5F42, luft 96/56 px, inga accentkanter på kort.
   Eyebrows i Montserrat 600 versaler (sajtens etikettstil sedan v5.489.0).

   Sektioner:
    0. Tokens, FOUC, sida & hero
    1. Layout (delsida)
    2. Sidofält, dellista, progress
    3. Toppfält + drawer (under 1024px)
    4. Meta-rad, chips, eyebrow, knappar
    5. Innehållsförteckning
    6. Brödtext (.sp-as-content): typografi, listor, tabell, figur, details, callout
    7. Klar-block
    8. Föregående/Nästa
    9. Kommentarer
   10. Kursöversikt: band, fortsätt-kort, kursplan, så fungerar, infokort, verktyg, FAQ, slut-CTA
   11. Admin-notis, skärmläsartext
   12. Mobil (≤767px)
   13. Minska rörelse
   ======================================================================== */


/* ========================================================================
   0. TOKENS, FOUC, SIDA & HERO
   ======================================================================== */

body.sp-as-page {
    --sp-as-gron: #3D5F42;
    --sp-as-gron-mork: #2e4a32;
    --sp-as-gron-ljus: #5a8a61;
    --sp-as-gron-platta: rgba(61, 95, 66, 0.08);
    --sp-as-gron-klar-bg: #d4e6d7;
    --sp-as-gron-klar-ram: #c0d8c4;
    --sp-as-gron-pagar: #B9D2BD;
    --sp-as-brun: #49412A;
    --sp-as-varm: #8C7B5E;
    --sp-as-rod: #b05555;
    --sp-as-yta: #ffffff;
    --sp-as-yta-alt: #f9f9f9;
    --sp-as-kort: #FAF9F6;
    --sp-as-kort-ram: #ece6db;
    --sp-as-kort-skugga: 0 3px 14px rgba(70, 58, 44, 0.09);
    --sp-as-kort-skugga-hover: 0 10px 26px rgba(70, 58, 44, 0.16);
    --sp-as-chip: #F4F1EA;
    --sp-as-chip-ram: #e7e1d4;
    --sp-as-chip-text: #6b6558;
    --sp-as-text: #4D524D;
    --sp-as-rubrik: #2c2c2c;
    --sp-as-sekundar: #6b6558;
    --sp-as-linje: #ece6db;
    --sp-as-header-h: 80px;
    --sp-as-font-brod: 'Proxima Nova Regular', proxima_nova_regular, 'Proxima Nova', sans-serif;
    --sp-as-font-semibold: 'Proxima Nova Semibold', proxima_nova_semibold, 'Proxima Nova', sans-serif;
    --sp-as-font-rubrik: 'Montserrat', 'Proxima Nova', sans-serif;

    background: var(--sp-as-yta) !important;
    background-image: none !important;
}

/* Header-gapet (återkommande mönster): nolla temats marginaler under headern. */
body.sp-as-page #sp-dh,
body.sp-as-page .header.clear {
    margin-bottom: 0 !important;
}

.sp-as {
    font-family: var(--sp-as-font-brod);
    color: var(--sp-as-text);
    width: 100%;
    overflow-x: clip;
}

/* hidden-attributet ska alltid vinna över komponenternas display-värden
   (chips/lägen växlas med hidden i JS). */
.sp-as [hidden] {
    display: none !important;
}

/* Hero: [sp_page_hero] är byggd för mallens 48px-padding – nolla negativa
   marginaler här. 100vw-utbrytningen är harmlös (roten är redan full bredd). */
.sp-as-hero .sp-page-hero {
    margin-top: 0;
    margin-bottom: 0;
}

/* Eyebrow i Montserrat. Sidherons eyebrow (.sp-page-hero-eyebrow) går sedan
   v5.489.0 i Montserrat globalt, så heron behöver bara skolans egna mått. */
.sp-as-eyebrow {
    font-family: var(--sp-as-font-rubrik) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
}

.sp-as-hero .sp-page-hero-eyebrow {
    font-size: 13px;
    color: #A9D5BA;
    margin: 0 0 16px;
}

.sp-as-hero .sp-page-hero-title {
    font-size: 44px !important;
    line-height: 1.2 !important;
}

.sp-as-hero .sp-page-hero-subtitle {
    font-size: 19px !important;
    max-width: 640px;
    margin: 0 auto !important;
}

/* Desktop-headerns logotyp hänger 48 px ned över heron (uppmätt 2026-09-09:
   header 111 px, logotyp till 159 px). Ge innehållet luft ovanför så
   eyebrow-raden inte hamnar under symbolen — även på delarnas kompakta hero. */
@media (min-width: 1024px) {
    .sp-as-hero .sp-page-hero-content {
        padding-top: 96px;
    }
}

/* Kompakt hero på delarna: samma bild och overlay som översikten, lägre. */
.sp-as-hero--kompakt .sp-page-hero {
    min-height: 0;
}

.sp-as-hero--kompakt .sp-page-hero-content {
    padding: 56px 24px;
}

@media (min-width: 1024px) {
    .sp-as-hero--kompakt .sp-page-hero-content {
        padding-top: 88px;
    }
}

.sp-as-hero--kompakt .sp-page-hero-title {
    font-size: 36px !important;
    margin: 0 !important;
}

.sp-as-hero--kompakt .sp-page-hero-eyebrow {
    margin-bottom: 12px;
}


/* ========================================================================
   1. LAYOUT (delsida)
   ======================================================================== */

.sp-as-layout {
    max-width: 1140px;
    margin: 0 auto;
    padding: 32px 24px 80px;
}

.sp-as-main {
    min-width: 0;
    max-width: 760px;
    margin: 0 auto;
}

.sp-as-sidebar {
    display: none;
}

/* Brytpunkt 1024px (inte 1100): en laptop med 125 % skalning är bara ~1090
   CSS-pixlar bred och ska ha sidofältet, inte mobil-toppfältet. */
@media (min-width: 1024px) {
    .sp-as-layout {
        display: grid;
        grid-template-columns: 260px minmax(0, 760px);
        column-gap: 40px;
        justify-content: center;
        align-items: start;
        padding-top: 40px;
    }

    .sp-as-layout--enkel {
        display: block;
    }

    .sp-as-main {
        margin: 0;
    }

    .sp-as-sidebar {
        display: block;
        position: sticky;
        top: calc(var(--sp-as-header-h) + 24px);
        max-height: calc(100vh - var(--sp-as-header-h) - 48px);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Diskret rullningslist när listan är högre än fönstret (samma
           mönster som träningsmodulens modaler): tunn, transparent spår,
           5 px synligt handtag i sajtens bruna ton. Listen hamnar i
           kolumnmellanrummet (negativ marginal + padding, som träningen)
           så kortet behåller sin bredd även när listen syns: -16 = 6 luft
           + 10 list (tätt intill kortet, ägaren 2026-09-09), scrollbar-gutter
           reserverar listens plats även när listan är kort så kortet aldrig
           byter bredd. */
        margin-right: -16px;
        padding-right: 6px;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: rgba(73, 65, 42, 0.30) transparent;
    }

    .sp-as-sidebar::-webkit-scrollbar {
        width: 11px;
    }

    .sp-as-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .sp-as-sidebar::-webkit-scrollbar-thumb {
        background: rgba(73, 65, 42, 0.26);
        border-radius: 8px;
        border: 3px solid transparent;
        background-clip: padding-box;
    }

    @media (hover: hover) {
        .sp-as-sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(73, 65, 42, 0.42);
        }
    }

    .sp-as-topbar {
        display: none;
    }
}


/* ========================================================================
   2. SIDOFÄLT, DELLISTA, PROGRESS
   ======================================================================== */

.sp-as-sidebar-inner {
    background: var(--sp-as-kort);
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 16px;
    padding: 20px;
}

.sp-as-tillbaka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 14px;
    color: var(--sp-as-gron);
    text-decoration: none;
}

.sp-as-tillbaka:hover {
    color: var(--sp-as-gron-mork);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-as-sidebar-kurs {
    font-family: var(--sp-as-font-rubrik);
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    margin: 4px 0 12px;
}

/* Progress */
.sp-as-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
}

.sp-as-progress-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: #eef0ee;
    border-radius: 3px;
    overflow: hidden;
}

.sp-as-progress-fyll {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--sp-as-gron), var(--sp-as-gron-ljus));
    border-radius: 3px;
    transition: width 0.6s ease;
}

.sp-as-progress-pagar {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--sp-as-gron-pagar);
}

.sp-as-progress-text {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 13px;
    color: var(--sp-as-text);
}

/* Dellistan */
.sp-as-dellista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-as-dellista-item {
    margin: 0;
    padding: 0;
}

.sp-as-del {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px; /* + 2×6 padding = 48 px rad: elva rader + progress får plats utan rullning på 900 px hög skärm */
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--sp-as-text);
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.sp-as-del:hover {
    background: #f5f3ef;
    color: var(--sp-as-gron);
}

.sp-as-del:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: -2px;
}

.sp-as-del-num {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sp-as-font-rubrik);
    font-size: 13px;
    font-weight: 700;
    background: #f0f1f0;
    border: 1.5px solid #dcdede;
    color: #5f625f;
}

.sp-as-del-num-bock {
    display: none;
}

.sp-as-del-num-bock svg,
.sp-as-del-num-bock .sp-as-icon {
    width: 16px;
    height: 16px;
}

.sp-as-del-titel {
    font-family: var(--sp-as-font-brod);
    font-size: 15px;
    line-height: 1.3;
}

/* Pågår (besökt, ej klar) */
.sp-as-del--pagar .sp-as-del-num {
    background: #fff;
    border: 2px solid var(--sp-as-gron);
    color: var(--sp-as-gron);
}

/* Klar */
.sp-as-del--klar .sp-as-del-num {
    background: var(--sp-as-gron-klar-bg);
    border-color: var(--sp-as-gron-klar-ram);
    color: var(--sp-as-gron);
}

.sp-as-del--klar .sp-as-del-num-siffra {
    display: none;
}

.sp-as-del--klar .sp-as-del-num-bock {
    display: inline-flex;
}

/* Aktuell sida */
.sp-as-del--aktuell {
    background: #f0f5f1;
}

.sp-as-del--aktuell .sp-as-del-titel {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    color: #1a1a1a;
}

.sp-as-del--aktuell .sp-as-del-num {
    background: linear-gradient(135deg, var(--sp-as-gron), #4d7a53);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(61, 95, 66, 0.15);
}

.sp-as-del--aktuell.sp-as-del--klar .sp-as-del-num {
    color: #fff;
}

/* Extra-kapitlet (FAQ) sist i dellistan: avskiljare + ikon i stället för nummer */
.sp-as-dellista-item--extra {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--sp-as-linje);
}

.sp-as-del--extra .sp-as-del-num svg {
    width: 17px;
    height: 17px;
}

.sp-as-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-as-icon svg {
    width: 18px;
    height: 18px;
}


/* ========================================================================
   3. TOPPFÄLT + DRAWER (mobil, <1100px)
   ======================================================================== */

.sp-as-topbar {
    background: #fff;
    border: 1.5px solid #d9d4cc;
    border-radius: 12px;
    padding: 14px 16px 6px;
    margin: 0 0 24px;
}

.sp-as-topbar-rad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sp-as-topbar-rad .sp-as-eyebrow {
    color: var(--sp-as-gron);
}

.sp-as-topbar-tillbaka {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 14px;
    color: var(--sp-as-gron);
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}

.sp-as-topbar .sp-as-progress {
    margin-bottom: 4px;
}

.sp-as-drawer {
    border-top: 1px solid var(--sp-as-linje);
    margin: 8px -16px 0;
    padding: 0 8px;
}

.sp-as-drawer-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 8px 8px;
    cursor: pointer;
    list-style: none;
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 15px;
    color: var(--sp-as-rubrik);
    user-select: none;
    -webkit-tap-highlight-color: rgba(61, 95, 66, 0.08);
}

.sp-as-drawer-summary::-webkit-details-marker {
    display: none;
}

.sp-as-drawer-summary .sp-as-icon {
    color: var(--sp-as-gron);
    transition: transform 0.2s ease;
}

.sp-as-drawer[open] .sp-as-drawer-summary .sp-as-icon {
    transform: rotate(180deg);
}

.sp-as-drawer-summary:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: -2px;
    border-radius: 8px;
}

.sp-as-drawer-nav {
    padding: 0 0 8px;
}

.sp-as-drawer .sp-as-del {
    min-height: 48px;
}


/* ========================================================================
   4. META-RAD, CHIPS, EYEBROW, KNAPPAR
   ======================================================================== */

.sp-as-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 0 0 20px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--sp-as-linje);
}

.sp-as-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--sp-as-sekundar);
}

.sp-as-meta-item .sp-as-icon {
    color: #8aaa8e;
}

.sp-as-meta-item .sp-as-icon svg {
    width: 16px;
    height: 16px;
}

.sp-as-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    background: var(--sp-as-chip);
    border: 1px solid var(--sp-as-chip-ram);
    color: var(--sp-as-chip-text);
    white-space: nowrap;
}

.sp-as-chip .sp-as-icon svg {
    width: 13px;
    height: 13px;
}

.sp-as-chip--klar {
    background: #E4EFE6;
    border-color: #cfe0d2;
    color: var(--sp-as-gron-mork);
}

.sp-as-chip--nasta {
    background: var(--sp-as-chip);
    color: var(--sp-as-brun);
}

.sp-as-chip--pagar {
    background: #fff;
    border-color: var(--sp-as-gron-klar-ram);
    color: var(--sp-as-gron-mork);
}

.sp-as-chip--last {
    background: var(--sp-as-chip);
    color: var(--sp-as-chip-text);
}

.sp-as-eyebrow {
    display: inline-block;
    color: var(--sp-as-gron);
}

/* Knappfamilj */
.sp-as-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 24px;
    border-radius: 14px;
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    text-decoration: none !important;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.sp-as-btn:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: 3px;
}

.sp-as-btn .sp-as-icon svg {
    width: 18px;
    height: 18px;
}

.sp-as-btn--primary {
    background: linear-gradient(135deg, var(--sp-as-gron), #4d7a53);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(61, 95, 66, 0.25);
}

.sp-as-btn--primary:hover {
    box-shadow: 0 8px 24px rgba(61, 95, 66, 0.3);
    transform: translateY(-1px);
    color: #fff !important;
}

.sp-as-btn--primary[disabled],
.sp-as-btn--primary[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
    transform: none;
}

.sp-as-btn--outline {
    background: #fff;
    border-color: #d0dcd2;
    color: var(--sp-as-gron) !important;
}

.sp-as-btn--outline:hover {
    background: #f4f9f5;
    border-color: var(--sp-as-gron);
    color: var(--sp-as-gron-mork) !important;
}

.sp-as-btn--text {
    min-height: 44px;
    padding: 8px 4px;
    background: none;
    border: 0;
    color: var(--sp-as-gron) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    font-size: 15px;
}

.sp-as-btn--text:hover {
    color: var(--sp-as-gron-mork) !important;
}


/* ========================================================================
   5. INNEHÅLLSFÖRTECKNING
   ======================================================================== */

/* EXAKT KOPIA av artiklarnas innehållsförteckning (.sp-ps-toc i post-single.css,
   ägaren 2026-09-09: "kopiera så att det är exakt identiskt"). Samma yta, ram,
   grön vänsterkant, radier, luft, typsnittsstack (systemfonten – "Proxima Nova"
   finns inte laddad), vikter och färger. Ändra här = ändra där. */
.sp-as-toc {
    background: #f9f7f3;
    border: 1px solid #e8e4dd;
    border-left: 3px solid #3D5F42;
    border-radius: 0 12px 12px 0;
    padding: 0;
    margin: 0 0 28px;
    overflow: hidden;
}

.sp-as-toc[hidden] {
    display: none;
}

.sp-as-toc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 18px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: proxima_nova_regular, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-align: left;
    transition: background 0.15s ease;
}

.sp-as-toc-header:hover {
    background: #fafaf8;
}

.sp-as-toc-header:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: -2px;
}

.sp-as-toc-title {
    font-family: 'Montserrat', 'Proxima Nova', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #2c2c2c;
    margin: 0;
}

.sp-as-toc-count {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    margin-left: auto;
}

.sp-as-toc-chevron {
    color: #999;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.sp-as-toc.is-collapsed .sp-as-toc-chevron {
    transform: rotate(-90deg);
}

.sp-as-toc-list {
    list-style: none;
    margin: 0;
    padding: 0 24px 20px;
    border-top: 1px solid #f0ede8;
}

.sp-as-toc.is-collapsed .sp-as-toc-list {
    display: none;
}

.sp-as-toc-list li {
    margin: 0;
    padding: 0;
}

.sp-as-toc-list a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 10px;
    margin: 0 -10px;
    font-family: proxima_nova_regular, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #3a3a3a;
    text-decoration: none;
    line-height: 1.4;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.sp-as-toc-list a:hover {
    background: #f5f3ef;
    color: #2c2c2c;
}

.sp-as-toc-list a.is-active {
    background: #f0f5f1;
    color: #3D5F42;
    font-family: 'Proxima Nova Semibold', proxima_nova_semibold, proxima_nova_regular, sans-serif;
    font-weight: 600;
}

.sp-as-toc-num {
    font-family: 'Montserrat', 'Proxima Nova', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #3D5F42;
    min-width: 22px;
    flex-shrink: 0;
    opacity: 0.6;
}

.sp-as-toc-list a.is-active .sp-as-toc-num {
    opacity: 1;
}

.sp-as-toc-text {
    flex: 1;
}

/* Läskolumnens TOC flyttas av JS till efter "I den här delen lär du dig"-rutan
   och visas hopfälld på alla skärmstorlekar. Sidofältet visar bara kursens
   delar (v5.467.4, ägarbeslut efter NN/g:s TOC-guide: förteckningen hör
   hemma i brödtexten när vänsterspalten är lokal navigering). */
.sp-as-content .sp-as-toc {
    margin: 0 0 28px;
}

/* Brödtextens list-typografi (§6: egna punkter/nummer via ::before) får
   inte slå igenom på TOC-listan som JS flyttar in i brödtexten. */
.sp-as-content .sp-as-toc-list {
    margin: 0;
    padding: 0 24px 20px;
}

.sp-as-content .sp-as-toc-list li {
    margin: 0;
    padding: 0;
    counter-increment: none;
}

.sp-as-content .sp-as-toc-list li::before {
    content: none;
}

/* EXAKT som artiklarnas innehållsförteckning (.sp-ps-toc-list a i
   post-single.css): samma typsnittsstack, vikt 500 (aktiv 600). Stacken
   börjar med "Proxima Nova" som inte finns laddad, så systemfonten tar över
   (Segoe UI på Windows, San Francisco på Apple, Roboto på Android). Ägaren
   2026-09-09: den är lättare att läsa än webbfonten – kopiera, ändra inte. */
.sp-as-content .sp-as-toc-list a {
    color: #3a3a3a;
    text-decoration: none;
    font-family: proxima_nova_regular, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
}

.sp-as-content .sp-as-toc-list a:hover {
    color: #2c2c2c;
    text-decoration: none;
}

.sp-as-content .sp-as-toc-list a.is-active {
    font-weight: 600;
    color: #3D5F42;
}


/* ========================================================================
   6. BRÖDTEXT (.sp-as-content)
   Värden från post-single.css §8 (18/1.56 #4D524D, Montserrat 700 h2 22).
   ======================================================================== */

.sp-as-content {
    font-family: var(--sp-as-font-brod);
    font-size: 18px;
    line-height: 1.56;
    color: var(--sp-as-text);
    letter-spacing: 0.01em;
}

.sp-as-content h2,
.sp-as-content h3,
.sp-as-content h4 {
    font-family: var(--sp-as-font-rubrik);
    font-weight: 700;
    color: var(--sp-as-rubrik);
    scroll-margin-top: calc(var(--sp-as-header-h) + 24px);
}

.sp-as-content h2 {
    font-size: 22px;
    line-height: 1.25;
    margin: 44px 0 16px;
}

.sp-as-content h3 {
    font-size: 18px;
    line-height: 1.3;
    margin: 32px 0 12px;
}

.sp-as-content h4,
.sp-as-content h5 {
    font-size: 16px;
    line-height: 1.3;
    margin: 24px 0 8px;
}

.sp-as-content > :first-child {
    margin-top: 0;
}

.sp-as-content p {
    margin: 0 0 18px;
}

.sp-as-content a {
    color: var(--sp-as-gron);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sp-as-content a:hover {
    color: var(--sp-as-rubrik);
}

.sp-as-content strong,
.sp-as-content b {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    color: var(--sp-as-brun);
}

.sp-as-content em {
    font-style: italic;
}

.sp-as-content ul,
.sp-as-content ol {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
}

.sp-as-content ul li,
.sp-as-content ol li {
    position: relative;
    padding-left: 26px;
    margin: 0 0 10px;
}

.sp-as-content ul li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sp-as-gron);
}

.sp-as-content ol {
    counter-reset: sp-as-ol;
}

.sp-as-content ol li {
    counter-increment: sp-as-ol;
    padding-left: 32px;
}

.sp-as-content ol li::before {
    content: counter(sp-as-ol) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--sp-as-font-rubrik);
    font-weight: 700;
    font-size: 15px;
    color: var(--sp-as-gron);
}

.sp-as-content ul ul,
.sp-as-content ol ul,
.sp-as-content ul ol {
    margin: 8px 0 0;
}

.sp-as-content hr {
    border: 0;
    border-top: 1px solid var(--sp-as-linje);
    margin: 36px 0;
}

/* Avdelare före varje kapitel: tunn linje ovanför H2 (ägaren 2026-09-09:
   Elementor-sidorna hade avdelare som mjukade upp flödet). Första H2:an
   direkt efter mål-rutan/TOC:n får ingen linje. */
.sp-as-content > h2 {
    border-top: 1px solid var(--sp-as-linje);
    padding-top: 36px;
    margin-top: 44px;
}

.sp-as-content > h2:first-child,
.sp-as-content > .sp-as-punktruta--mal + h2,
.sp-as-content > .sp-as-toc + h2 {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

/* Underkapitel direkt efter ett kort kapitelintro (t.ex. "1. Vad du äter"
   efter "Två områden …"): ingen linje, bara vanlig rubrikluft. Sätts med
   class="sp-as-h2--utan-avdelare" i innehållsfilen. */
.sp-as-content > h2.sp-as-h2--utan-avdelare {
    border-top: 0;
    padding-top: 0;
    margin-top: 40px;
}

.sp-as-content blockquote {
    margin: 24px 0;
    padding: 20px 28px;
    border-left: 5px solid #299471;
    background: rgba(41, 148, 113, 0.05);
    font-style: italic;
    line-height: 1.6;
    color: var(--sp-as-text);
    border-radius: 0 12px 12px 0;
}

.sp-as-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Bilder + figurer */
.sp-as-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.sp-as-content > img,
.sp-as-content p > img {
    border-radius: 16px;
    margin: 16px auto;
}

.sp-as-figur {
    margin: 32px 0;
}

.sp-as-figur img {
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--sp-as-kort-ram);
    box-shadow: var(--sp-as-kort-skugga);
}

.sp-as-figur--smal {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.sp-as-figur figcaption {
    font-size: 15px;
    color: var(--sp-as-sekundar);
    text-align: center;
    margin-top: 12px;
    line-height: 1.45;
}

/* Tabeller (saknades på sajten): scrollbar wrapper */
.sp-as-table,
.sp-as-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    margin: 0 0 24px;
}

.sp-as-content th,
.sp-as-content td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--sp-as-kort-ram);
}

.sp-as-content th {
    font-family: var(--sp-as-font-rubrik);
    font-weight: 600;
    font-size: 14px;
    background: var(--sp-as-chip);
    color: var(--sp-as-rubrik);
}

.sp-as-content tbody tr:nth-child(even) td {
    background: var(--sp-as-kort);
}

/* Utfällbara block (faq-stilen) */
.sp-as-details {
    background: #fff;
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 12px;
    margin: 0 0 10px;
    transition: border-color 0.15s ease;
}

.sp-as-details[open] {
    border-color: #cfc7b8;
}

.sp-as-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    padding: 14px 20px;
    cursor: pointer;
    list-style: none;
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.35;
    color: var(--sp-as-rubrik);
    user-select: none;
}

.sp-as-details > summary::-webkit-details-marker {
    display: none;
}

.sp-as-details > summary::after {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--sp-as-gron);
    border-bottom: 2px solid var(--sp-as-gron);
    transform: rotate(45deg);
    margin-right: 4px;
    transition: transform 0.2s ease;
}

.sp-as-details[open] > summary::after {
    transform: rotate(-135deg);
    margin-top: 6px;
}

.sp-as-details > summary:hover {
    background: #fcfbf9;
    border-radius: 12px;
}

.sp-as-details > summary:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: -2px;
    border-radius: 12px;
}

.sp-as-details-body {
    padding: 0 20px 18px;
    font-size: 17px;
    line-height: 1.55;
}

.sp-as-details-body > :last-child {
    margin-bottom: 0;
}

.sp-as-details-body p {
    margin: 0 0 14px;
}

/* RUTSYSTEMET (v5.468.0, ägaren 2026-09-09: "lekstuga" → ett system)
   Två ytor i brödtexten, inget annat:
   – RUTA (statisk, att läsa): kräm-yta var(--sp-as-kort), 1 px ram, radie 12.
     Används av callouts ([sp_as_ruta]), "lär du dig" och "viktigast".
     Typen (tips/viktigt/obs) syns bara i etikettraden: liten ikon + färg.
     Aldrig egen tonad bakgrund per typ.
   – KORT (klickbart): vit yta, samma ram och radie, ingen skugga i vila,
     mörkare ram vid hover. Används av länkkort, details och TOC-raden.
   Ikoner: 20 px linjeikon utan platta i rutor; platta bara i länkkort
   (klick-affordans). Etiketter: Montserrat 600 12 px versaler överallt. */
.sp-as-callout {
    background: var(--sp-as-kort);
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 28px 0;
    font-size: 16px;
    line-height: 1.55;
}

/* Rubriken i innehallsrutor (tips/viktigt/obs) = samma rubrikstil som
   informationskorten i content-blocks (.sp-cb-info-titel): Montserrat 700,
   17 px, meningsform. Versal-etiketter reserveras for kursens ramverk
   (hero-eyebrow, "lar du dig", "viktigast") – agaren 2026-09-09. Typen
   syns i ikonplattans farg. */
.sp-as-callout-etikett {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sp-as-font-rubrik);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.1px;
    color: var(--sp-as-rubrik);
    margin: 0 0 10px;
}

/* EN plattstil i hela läskolumnen (ägaren 2026-09-09: plattorna tillbaka):
   rundad kvadrat, tonad bakgrund i ikonens färg. 32 px i etikettrader,
   24 px vid listpunkter, 40 px i länkkort. */
.sp-as-callout-etikett .sp-as-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--sp-as-gron-platta);
    color: var(--sp-as-gron);
}

.sp-as-callout-etikett .sp-as-icon svg {
    width: 18px;
    height: 18px;
}

.sp-as-callout--viktigt .sp-as-callout-etikett .sp-as-icon {
    background: rgba(140, 123, 94, 0.14);
    color: var(--sp-as-varm);
}

.sp-as-callout--obs .sp-as-callout-etikett .sp-as-icon {
    background: rgba(176, 85, 85, 0.12);
    color: var(--sp-as-rod);
}

.sp-as-callout-body {
    min-width: 0;
}

.sp-as-callout-body p {
    margin: 0 0 10px;
}

.sp-as-callout-body > :last-child {
    margin-bottom: 0;
}

/* Råvarulistor i details (Del 2): kompakt spaltlista + grupp-etikett
   ("Feta fiskar"). Många grupper efter varandra ligger tätare. */
.sp-as-content .sp-as-details-grupp {
    margin: 0 0 28px;
}

.sp-as-content .sp-as-details-grupp .sp-as-details {
    margin: 0 0 8px;
}

.sp-as-content .sp-as-details-body .sp-as-lista-kompakt {
    columns: 3;
    column-gap: 24px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.sp-as-content .sp-as-details-body .sp-as-lista-kompakt li {
    break-inside: avoid;
    margin: 0 0 4px;
    padding-left: 18px;
    font-size: 16px;
    line-height: 1.45;
}

.sp-as-content .sp-as-details-body .sp-as-lista-kompakt li::before {
    left: 2px;
    top: 0.55em;
    width: 6px;
    height: 6px;
}

.sp-as-content .sp-as-details-body .sp-as-lista-grupp {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 15px;
    color: var(--sp-as-rubrik);
    margin: 14px 0 4px;
}

.sp-as-content .sp-as-details-body .sp-as-lista-grupp:first-child {
    margin-top: 6px;
}

.sp-as-content .sp-as-details-body .sp-as-lista-grupp + .sp-as-lista-kompakt {
    margin-top: 0;
}

/* [sp_as_sjalvtest] (Del 5): kryssbara påståenden i en ruta, summa + intervall
   (aktivt intervall markeras av JS). Samma RUTA-yta som övriga rutor. */
.sp-as-content .sp-as-sjalvtest {
    background: var(--sp-as-kort);
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 12px;
    padding: 16px 20px 20px;
    margin: 28px 0;
}

.sp-as-content .sp-as-sjalvtest-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 28px;
}

.sp-as-content .sp-as-sjalvtest-lista li {
    break-inside: avoid;
    margin: 0;
    padding: 0;
    counter-increment: none;
}

.sp-as-content .sp-as-sjalvtest-lista li::before {
    content: none;
}

.sp-as-sjalvtest-lista label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 8px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--sp-as-font-brod);
    font-size: 16px;
    line-height: 1.45;
    color: var(--sp-as-text);
    transition: background 0.15s ease;
}

@media (hover: hover) {
    .sp-as-sjalvtest-lista label:hover {
        background: rgba(61, 95, 66, 0.06);
    }
}

.sp-as-sjalvtest-kryss {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    accent-color: var(--sp-as-gron);
    cursor: pointer;
}

.sp-as-sjalvtest-kryss:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: 2px;
}

.sp-as-sjalvtest-nr {
    flex: 0 0 auto;
    min-width: 20px;
    margin-top: 3px;
    font-family: var(--sp-as-font-rubrik);
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-as-gron);
    opacity: 0.6;
}

.sp-as-sjalvtest-lista label:has(:checked) .sp-as-sjalvtest-text {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    color: var(--sp-as-rubrik);
}

.sp-as-sjalvtest-resultat {
    margin-top: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--sp-as-kort-ram);
}

.sp-as-content .sp-as-sjalvtest-summa {
    font-family: var(--sp-as-font-rubrik);
    font-size: 17px !important;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    margin: 0 0 14px !important;
}

.sp-as-content .sp-as-sjalvtest-poang {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 15px !important;
    color: var(--sp-as-rubrik);
    margin: 0 0 8px !important;
}

.sp-as-content .sp-as-sjalvtest-nivaer {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-as-content .sp-as-sjalvtest-nivaer li {
    margin: 0 0 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.5;
    counter-increment: none;
    transition: background 0.2s ease;
}

.sp-as-content .sp-as-sjalvtest-nivaer li::before {
    content: none;
}

.sp-as-content .sp-as-sjalvtest-nivaer li.is-active {
    background: var(--sp-as-gron-klar-bg);
    box-shadow: inset 0 0 0 1px var(--sp-as-gron-klar-ram);
}

/* [sp_as_lyft]: lyft avsnitt – grön kant till vänster (som innehållsförteckningens),
   rubrik med ikonplatta, ingen yta/kort. Ägaren 2026-09-09 (startprogrammen). */
.sp-as-content .sp-as-lyft {
    border-left: 3px solid var(--sp-as-gron);
    padding: 2px 0 2px 22px;
    margin: 28px 0;
}

.sp-as-content .sp-as-lyft + .sp-as-lyft {
    margin-top: 32px;
}

.sp-as-content h3.sp-as-lyft-rubrik {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}

.sp-as-lyft-rubrik .sp-as-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--sp-as-gron-platta);
    color: var(--sp-as-gron);
}

.sp-as-lyft-rubrik .sp-as-icon svg {
    width: 18px;
    height: 18px;
}

/* nummer=: samma platta som ikonen men med siffra (som sidofältets brickor) */
.sp-as-lyft-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--sp-as-gron-platta);
    color: var(--sp-as-gron);
    font-family: var(--sp-as-font-rubrik);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

/* Tabeller med ankare (Del 10: #nivaerna) landar under den fasta headern som rubrikerna. */
.sp-as-content table[id] {
    scroll-margin-top: calc(var(--sp-as-header-h) + 24px);
}

/* Matris (Del 10: råvarugrupp × paleonivå). Radrubriker vänster, bock/streck
   centrerade i smala kolumner – nästningen syns som en trappa av bockar. */
/* Radavstånd 1,5 ger jämna 49 px-rader (24 + 24 + 1) så symbolerna hamnar
   på samma pixelposition i varje rad. */
.sp-as-content .sp-as-table--matris th,
.sp-as-content .sp-as-table--matris td {
    line-height: 1.5;
}

.sp-as-content .sp-as-table--matris th[scope="row"] {
    background: none;
    font-family: var(--sp-as-font-brod);
    font-weight: 400;
    font-size: 16px;
    color: var(--sp-as-text);
}

.sp-as-content .sp-as-table--matris thead th:not(:first-child),
.sp-as-content .sp-as-table--matris .sp-as-matris-cell {
    width: 84px;
    text-align: center;
    white-space: nowrap;
}

.sp-as-content .sp-as-table--matris thead th a {
    color: var(--sp-as-rubrik);
    text-decoration: none;
    border-bottom: 1px solid var(--sp-as-gron);
}

.sp-as-ja,
.sp-as-nej {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    vertical-align: middle;
}

.sp-as-ja {
    background: var(--sp-as-gron-platta);
    color: var(--sp-as-gron);
}

.sp-as-ja::before {
    content: '';
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sp-as-nej {
    color: #b9b3a6;
}

/* Strecket ritas som SVG-mask precis som bocken: raderna är annars 49,95 px
   (radavstånd 1,56) och ett 2 px-streck smetas olika ut rad för rad. */
.sp-as-nej::before {
    content: '';
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3.5 8h9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3.5 8h9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Skärmläsartexten i cellerna använder befintliga .sp-as-sr (längre ned). */

.sp-as-content p.sp-as-tabell-not {
    font-size: 15px !important;
    color: var(--sp-as-sekundar);
    margin: -12px 0 28px !important;
}

/* Översiktstabell (Del 8: Grupp / Exempel / Reaktion): första kolumnen
   bryts inte, gruppnamnet är hopplänk till blocket. */
.sp-as-content .sp-as-table--oversikt {
    margin-bottom: 36px;
}

.sp-as-content .sp-as-table--oversikt th:first-child,
.sp-as-content .sp-as-table--oversikt td:first-child {
    white-space: nowrap;
}

.sp-as-content .sp-as-table--oversikt td:first-child a {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
}

.sp-as-content .sp-as-lyft-body > :last-child {
    margin-bottom: 0;
}

.sp-as-content .sp-as-lyft-body p.sp-as-lankrad {
    margin: -4px 0 0;
}

/* Åtgärdsrad i rutan + [sp_as_lank typ="rad"] i löptexten: textlänk med pil */
.sp-as-content p.sp-as-lankrad {
    margin: -6px 0 24px;
}

.sp-as-content .sp-as-callout-lank,
.sp-as-callout-lank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 6px 0 -8px;
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 16px;
    color: var(--sp-as-gron);
    text-decoration: none;
}

.sp-as-content .sp-as-callout-lank:hover,
.sp-as-callout-lank:hover {
    color: var(--sp-as-gron-mork);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-as-callout-lank:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: 2px;
    border-radius: 4px;
}

.sp-as-callout-lank .sp-as-icon,
.sp-as-callout-lank .sp-as-icon svg {
    width: 18px;
    height: 18px;
}

.sp-as-callout-lank:hover .sp-as-icon {
    transform: translateX(2px);
    transition: transform 0.15s ease;
}


/* Konverterade knappar i löptexten */
.sp-as-content .sp-as-btn {
    margin: 4px 0;
}

/* Punktrutor ([sp_as_lar_dig], [sp_as_viktigast]) = samma RUTA som callouts */
.sp-as-punktruta {
    background: var(--sp-as-kort);
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 0 0 28px;
}

.sp-as-punktruta--viktigast {
    margin: 40px 0 8px;
}

.sp-as-punktruta-etikett {
    display: block;
    font-family: var(--sp-as-font-rubrik);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sp-as-gron);
    margin: 0 0 12px;
}

.sp-as-content .sp-as-punktruta-lista,
.sp-as-punktruta-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-as-content .sp-as-punktruta-lista li,
.sp-as-punktruta-lista li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--sp-as-text);
}

.sp-as-content .sp-as-punktruta-lista li::before {
    display: none;
}

.sp-as-punktruta-lista li:last-child {
    margin-bottom: 0;
}

.sp-as-punktruta-lista .sp-as-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--sp-as-gron-platta);
    color: var(--sp-as-gron);
    margin-top: 1px;
}

.sp-as-punktruta-lista .sp-as-icon svg {
    width: 14px;
    height: 14px;
}

.sp-as-content .sp-as-lankar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch; /* två kort bredvid varandra får samma höjd */
    gap: 12px;
    margin: 28px 0;
}

.sp-as-content .sp-as-lankar > .sp-as-verktyg {
    height: 100%;
    box-sizing: border-box;
}

/* Länkkort i brödtexten = KORT: vitt, samma ram/radie som rutorna, ingen
   skugga i vila (skuggkorten hör hemma på översikten, inte i löpande text). */
.sp-as-content .sp-as-verktyg {
    background: #fff;
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 12px;
    box-shadow: none;
    padding: 16px 18px;
    gap: 14px;
    text-decoration: none !important;
    color: var(--sp-as-text);
    margin: 0;
}

.sp-as-content .sp-as-verktyg:hover {
    transform: none;
    box-shadow: none;
    border-color: #cfc7b8;
    background: #fcfbf9;
}

.sp-as-content .sp-as-verktyg .sp-as-ikonplatta {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.sp-as-content .sp-as-verktyg .sp-as-ikonplatta svg {
    width: 20px;
    height: 20px;
}

.sp-as-content > .sp-as-verktyg {
    margin: 28px 0;
}

/* Länkkortet till extra-kapitlet under kursfrågorna (medlemsöversikten) */
.sp-as-faq-kapitel {
    margin-top: 32px;
}

.sp-as-faq-kapitel-intro {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 17px !important;
    color: var(--sp-as-rubrik);
    margin: 0 0 12px !important;
}

.sp-as-faq-kapitel > .sp-as-verktyg {
    margin: 0;
}

.sp-as-content .sp-as-verktyg-titel {
    color: var(--sp-as-rubrik);
}

/* [sp_check_lista] i brödtexten: samma bocklista som rutorna – inga kort per
   rad (content-blocks egen kortstil är för butiks-/infosidor). */
.sp-as-content .sp-cb-check {
    margin: 0 0 28px;
    max-width: none;
}

.sp-as-content .sp-cb-check-lista {
    gap: 10px;
}

.sp-as-content .sp-cb-check-lista li,
.sp-as-content .sp-cb-check-item {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 12px;
}

.sp-as-content .sp-cb-check-ikon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--sp-as-gron-platta);
    color: var(--sp-as-gron);
    margin-top: 2px;
}

.sp-as-content .sp-cb-check-ikon svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
}

.sp-as-content .sp-cb-check-text {
    font-family: var(--sp-as-font-brod) !important;
    font-size: 18px;
    line-height: 1.56;
    color: var(--sp-as-text);
}

/* content-blocks tvingar "Proxima Nova" (finns inte laddad → systemfonten)
   på ALLT i checklistan med !important – fetstilen blev Segoe UI Semibold
   i stället for sajtens semibold (agaren 2026-09-09: "oerhort fet, annat
   typsnitt"). Samma fetstil som i brodtexten: */
.sp-as-content .sp-cb-check-text strong,
.sp-as-content .sp-cb-check-text b {
    font-family: var(--sp-as-font-semibold) !important;
    font-weight: 600;
    color: var(--sp-as-brun);
}


/* ========================================================================
   7. KLAR-BLOCK
   ======================================================================== */

.sp-as-klar {
    background: var(--sp-as-kort);
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 12px;
    padding: 32px 28px;
    margin: 48px 0 0;
    text-align: center;
    scroll-margin-top: calc(var(--sp-as-header-h) + 24px);
}

.sp-as-klar-lage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: opacity 0.3s ease;
}

.sp-as-klar-lage[hidden] {
    display: none;
}

.sp-as-klar-rubrik {
    font-family: var(--sp-as-font-rubrik);
    font-size: 22px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    margin: 0;
    line-height: 1.3;
}

.sp-as-klar-rubrik:focus {
    outline: none;
}

.sp-as-klar-text {
    font-size: 16px;
    color: var(--sp-as-sekundar);
    margin: 0;
}

.sp-as-klar-form {
    margin: 8px 0 0;
}

.sp-as-klar-form--avmarkera {
    margin-top: 0;
}

.sp-as-klar-bock {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sp-as-gron), var(--sp-as-gron-ljus));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(61, 95, 66, 0.25);
}

.sp-as-klar-bock svg {
    width: 28px;
    height: 28px;
}

.sp-as-klar.is-klar .sp-as-klar-bock {
    animation: sp-as-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

@keyframes sp-as-pop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.sp-as-klar-fel {
    margin: 12px 0 0;
    font-size: 15px;
    color: var(--sp-as-rod);
}

.sp-as-klar-fel[hidden] {
    display: none;
}


/* ========================================================================
   8. FÖREGÅENDE / NÄSTA (start-guide-anatomin)
   ======================================================================== */

.sp-as-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    padding: 32px 0 0;
    margin: 32px 0 0;
    border-top: 1px solid var(--sp-as-linje);
}

.sp-as-nav-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 60px;
    padding: 14px 20px;
    border-radius: 14px;
    text-decoration: none !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}

.sp-as-nav-btn:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: 3px;
}

.sp-as-nav-btn .sp-as-icon svg {
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
}

.sp-as-nav-btn-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sp-as-nav-btn-label {
    font-family: var(--sp-as-font-rubrik);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.sp-as-nav-btn-title {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-as-nav-btn--prev {
    background: #fff;
    border: 1.5px solid #d0dcd2;
    color: var(--sp-as-gron) !important;
}

.sp-as-nav-btn--prev .sp-as-nav-btn-label {
    color: #7a8a7c;
}

.sp-as-nav-btn--prev:hover {
    background: #f4f9f5;
    border-color: var(--sp-as-gron);
}

.sp-as-nav-btn--prev:hover .sp-as-icon svg {
    transform: translateX(-3px);
}

.sp-as-nav-btn--next {
    background: linear-gradient(135deg, var(--sp-as-gron), #4d7a53);
    border: 1.5px solid transparent;
    color: #fff !important;
    text-align: right;
    justify-content: flex-end;
}

.sp-as-nav-btn--next .sp-as-nav-btn-label {
    color: rgba(255, 255, 255, 0.75);
}

.sp-as-nav-btn--next:hover {
    box-shadow: 0 8px 24px rgba(61, 95, 66, 0.25);
}

.sp-as-nav-btn--next:hover .sp-as-icon svg {
    transform: translateX(3px);
}


/* ========================================================================
   9. KOMMENTARER
   ======================================================================== */

.sp-as-kommentarer {
    margin: 48px 0 0;
    padding: 40px 0 0;
    border-top: 1px solid var(--sp-as-linje);
}

.sp-as-kommentarer-rubrik {
    font-family: var(--sp-as-font-rubrik);
    font-size: 22px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    margin: 0 0 8px;
}

.sp-as-kommentarer-intro {
    font-size: 16px;
    color: var(--sp-as-sekundar);
    margin: 0 0 20px;
}


/* ========================================================================
   10. KURSÖVERSIKT
   ======================================================================== */

.sp-as-oversikt {
    scroll-margin-top: var(--sp-as-header-h);
}

.sp-as-band {
    padding: 96px 24px;
    background: var(--sp-as-yta);
}

.sp-as-band--alt {
    background: var(--sp-as-yta-alt);
}

.sp-as-band--fortsatt {
    padding-top: 56px;
    padding-bottom: 56px;
}

.sp-as-band#kursplan,
.sp-as-band#faq {
    scroll-margin-top: var(--sp-as-header-h);
}

.sp-as-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.sp-as-inner--smal {
    max-width: 760px;
}

.sp-as-rubrik {
    font-family: var(--sp-as-font-rubrik);
    font-size: 32px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    line-height: 1.25;
    margin: 0 0 20px;
}

.sp-as-rubrik--center {
    text-align: center;
    margin-bottom: 32px;
}

.sp-as-underrubrik {
    font-family: var(--sp-as-font-rubrik);
    font-size: 20px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    margin: 32px 0 14px;
}

.sp-as-ingress {
    font-size: 18px;
    line-height: 1.56;
    margin: 0 0 18px;
}

.sp-as-ingress--center {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.sp-as-oversikt p {
    font-family: var(--sp-as-font-brod);
    font-size: 17px;
    line-height: 1.56;
    color: var(--sp-as-text);
}

.sp-as-oversikt p a {
    color: var(--sp-as-gron);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sp-as-cta-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 28px;
}

/* Fortsätt-kortet */
.sp-as-fortsatt {
    background: var(--sp-as-kort);
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 16px;
    box-shadow: var(--sp-as-kort-skugga);
    padding: 32px;
}

.sp-as-fortsatt-titel {
    font-family: var(--sp-as-font-rubrik);
    font-size: 26px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    margin: 10px 0 6px;
    line-height: 1.25;
}

.sp-as-fortsatt-sammanfattning {
    margin: 0 0 20px !important;
    color: var(--sp-as-sekundar) !important;
}

.sp-as-fortsatt .sp-as-progress {
    margin-bottom: 24px;
}

.sp-as-fortsatt-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.sp-as-fortsatt-not {
    margin: 20px 0 0 !important;
    font-size: 15px !important;
    color: var(--sp-as-sekundar) !important;
}

.sp-as-fortsatt--klart .sp-as-fortsatt-titel {
    margin-bottom: 20px;
}

/* Nästa-steg-korten ligger i den smala kolumnen (760px) → staplade, inte tre i bredd. */
.sp-as-fortsatt--klart .sp-as-kortgrid--3 {
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Kursplanen */
.sp-as-kursplan {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-as-kursplan > li {
    margin: 0;
    padding: 0;
}

.sp-as-kursplan-rad {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 64px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 16px;
    box-shadow: var(--sp-as-kort-skugga);
    color: var(--sp-as-text);
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sp-as-kursplan-rad:hover {
    transform: translateY(-3px);
    box-shadow: var(--sp-as-kort-skugga-hover);
    border-color: #dcd4c4;
}

.sp-as-kursplan-rad:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: 3px;
}

.sp-as-kursplan-num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sp-as-font-rubrik);
    font-size: 15px;
    font-weight: 700;
    background: var(--sp-as-chip);
    color: var(--sp-as-chip-text);
    border: 1.5px solid transparent;
}

.sp-as-kursplan-num svg {
    width: 18px;
    height: 18px;
}

.sp-as-kursplan-rad--nasta .sp-as-kursplan-num {
    background: #fff;
    border: 2px solid var(--sp-as-gron);
    color: var(--sp-as-gron);
}

.sp-as-kursplan-rad--klar .sp-as-kursplan-num {
    background: var(--sp-as-gron);
    color: #fff;
}

/* Extra-kapitlet (FAQ) efter Del 10: avskiljare + ikonbricka */
.sp-as-kursplan-extra {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--sp-as-linje);
}

.sp-as-kursplan-rad--extra .sp-as-kursplan-num {
    background: var(--sp-as-gron-platta);
    color: var(--sp-as-gron);
}

.sp-as-kursplan-rad--extra .sp-as-kursplan-num svg {
    width: 20px;
    height: 20px;
}

.sp-as-kursplan-rad--last .sp-as-kursplan-num {
    color: var(--sp-as-chip-text);
}

.sp-as-kursplan-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-as-kursplan-titel {
    font-family: var(--sp-as-font-rubrik);
    font-size: 17px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    line-height: 1.3;
}

.sp-as-kursplan-sammanfattning {
    font-size: 15px;
    line-height: 1.45;
    color: var(--sp-as-sekundar);
}

.sp-as-kursplan-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 4px;
}

.sp-as-kursplan-pil {
    flex-shrink: 0;
    color: var(--sp-as-gron);
    display: inline-flex;
}

/* Så fungerar (nummerkort) */
.sp-as-funkar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sp-as-funkar-steg {
    background: var(--sp-as-kort);
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 16px;
    padding: 28px 26px;
    margin: 0;
}

.sp-as-funkar-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--sp-as-gron);
    color: #fff;
    font-family: var(--sp-as-font-rubrik);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.sp-as-funkar-titel {
    font-family: var(--sp-as-font-rubrik);
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    margin: 0 0 8px;
}

.sp-as-funkar-text {
    margin: 0 !important;
    font-size: 16px !important;
}

/* Infokort ("Det här lär du dig") + verktygskort */
.sp-as-kortgrid {
    display: grid;
    gap: 24px;
}

.sp-as-kortgrid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.sp-as-infokort {
    background: #fff;
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 16px;
    padding: 28px 26px;
}

.sp-as-ikonplatta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--sp-as-gron-platta);
    color: var(--sp-as-gron);
    margin-bottom: 14px;
    flex-shrink: 0;
}

.sp-as-ikonplatta svg {
    width: 24px;
    height: 24px;
}

.sp-as-infokort-titel {
    font-family: var(--sp-as-font-rubrik);
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    margin: 0 0 8px;
}

.sp-as-infokort-text {
    margin: 0 !important;
    font-size: 16px !important;
}

.sp-as-verktyg {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 16px;
    box-shadow: var(--sp-as-kort-skugga);
    color: var(--sp-as-text);
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sp-as-verktyg:hover {
    transform: translateY(-3px);
    box-shadow: var(--sp-as-kort-skugga-hover);
    border-color: #dcd4c4;
}

.sp-as-verktyg:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: 3px;
}

.sp-as-verktyg .sp-as-ikonplatta {
    margin-bottom: 0;
}

.sp-as-verktyg-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-as-verktyg-titel {
    font-family: var(--sp-as-font-rubrik);
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
}

.sp-as-verktyg-rad {
    font-size: 14px;
    color: var(--sp-as-sekundar);
    line-height: 1.4;
}

.sp-as-verktyg > .sp-as-icon {
    color: var(--sp-as-gron);
}

/* Checklista (fördelar) */
.sp-as-checklista {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.sp-as-checklista li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 10px;
}

.sp-as-checklista .sp-as-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--sp-as-gron-platta);
    color: var(--sp-as-gron);
    margin-top: 1px;
}

.sp-as-checklista .sp-as-icon svg {
    width: 14px;
    height: 14px;
}

/* Slut-CTA */
.sp-as-band--slutcta {
    background: var(--sp-as-kort);
    border-top: 1px solid var(--sp-as-kort-ram);
    border-bottom: 1px solid var(--sp-as-kort-ram);
}

.sp-as-slutcta .sp-cta-wrap {
    margin-top: 28px;
}

/* FAQ på översikten */
#faq .sp-as-content--faq {
    font-size: 17px;
}

/* --- Besökarversionen (säljsidan) --- */

/* Besökarens hero = den delade landningsheron (global.css §29, .sp-lh).
   Marginalnollningen ovan gäller .sp-page-hero; .sp-lh har inga egna marginaler. */

.sp-as-cta-rad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 28px;
}

.sp-as-cta-rad--center {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    margin-top: 0;
}

/* Sekundär "Redan medlem? Logga in" under kursplan-CTA:n och slut-CTA:n */
.sp-as-login-lank {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: var(--sp-as-gron);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-as-login-lank:hover {
    color: var(--sp-as-gron-mork);
}

.sp-as-login-lank:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: 3px;
    border-radius: 6px;
}

/* "Känner du igen dig?" — tre igenkänningsrader */
.sp-as-igenkanning {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.sp-as-igenkanning li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 18px;
    line-height: 1.5;
    padding: 12px 0;
    border-bottom: 1px solid var(--sp-as-linje);
}

.sp-as-igenkanning li:last-child {
    border-bottom: 0;
}

.sp-as-igenkanning-punkt {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sp-as-gron);
    margin-top: 0.55em;
}

.sp-as-problem-avslut {
    margin-bottom: 0 !important;
    color: var(--sp-as-rubrik) !important;
}

/* CTA-blocket direkt under kursplanen */
.sp-as-kursplan-cta {
    margin-top: 40px;
    padding: 36px 32px;
    background: var(--sp-as-kort);
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 16px;
    text-align: center;
}

.sp-as-kursplan-cta-rubrik {
    font-family: var(--sp-as-font-rubrik);
    font-size: 22px;
    font-weight: 700;
    color: var(--sp-as-rubrik);
    margin: 0 0 10px;
}

.sp-as-kursplan-cta-text {
    max-width: 560px;
    margin: 0 auto 24px !important;
    font-size: 16px !important;
    color: var(--sp-as-sekundar) !important;
}

/* Medlemsomdömen ([sp_startsida_omdomen] — CSS i global.css §19–28) */
.sp-as-band--omdomen .sp-hp-omdomen-title {
    font-size: 32px !important;
}

.sp-as-band--omdomen .sp-hp-omdomen-cta {
    margin-top: 32px;
    text-align: center;
}

.sp-as-slutcta .sp-as-cta-rad--center {
    margin-top: 28px;
}

/* Utgången medlem: bara callouten (problem-blocket hoppas över) */
.sp-as-band--utgangen {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Noten ovanför den låsta kursplanen (ersätter chipet på var rad) */
.sp-as-kursplan-not {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -12px 0 24px !important;
    font-size: 16px !important;
    color: var(--sp-as-sekundar) !important;
}

.sp-as-kursplan-not .sp-as-icon {
    width: 18px;
    height: 18px;
    color: var(--sp-as-chip-text);
}

/* Avsändarblocket: porträtt + vem som skrivit kursen */
.sp-as-cecilia {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 36px;
    align-items: center;
    padding: 36px;
    background: var(--sp-as-kort);
    border: 1px solid var(--sp-as-kort-ram);
    border-radius: 16px;
}

.sp-as-cecilia-bild img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 4px solid #fff;
    box-shadow: var(--sp-as-kort-skugga);
}

.sp-as-cecilia-rubrik {
    font-size: 26px;
    margin-bottom: 8px;
}

.sp-as-cecilia-underrubrik {
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--sp-as-gron);
    margin: 0 0 14px !important;
}

.sp-as-cecilia-brod {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 18px !important;
}

.sp-as-cecilia-lank {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-family: var(--sp-as-font-semibold);
    font-weight: 600;
    font-size: 16px;
    color: var(--sp-as-gron);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-as-cecilia-lank .sp-as-icon {
    width: 18px;
    height: 18px;
}

.sp-as-cecilia-lank:hover {
    color: var(--sp-as-gron-mork);
}

.sp-as-cecilia-lank:focus-visible {
    outline: 2px solid var(--sp-as-gron);
    outline-offset: 3px;
    border-radius: 6px;
}


/* ========================================================================
   11. ADMIN-NOTIS, SKÄRMLÄSARTEXT
   ======================================================================== */

.sp-as-adminnotis {
    background: #fff8e5;
    border: 1px solid #f0d78c;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-size: 14px;
    color: #6b5400;
}

.sp-as-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ========================================================================
   12. MOBIL (≤767px)
   ======================================================================== */

@media (max-width: 767px) {
    .sp-as-hero .sp-page-hero-title {
        font-size: 32px !important;
    }

    .sp-as-hero .sp-page-hero-subtitle {
        font-size: 16px !important;
    }

    /* Mobil: mer luft ovanför eyebrow-raden (uppmätt live 2026-09-09: 32 px
       kändes tight). Landningen får 56/64, delarnas kompakta hero 48/52 —
       i linje med landningsstandardens mobilvärden (64/76). */
    .sp-as-hero .sp-page-hero-content {
        padding: 56px 20px 64px;
    }

    .sp-as-hero--kompakt .sp-page-hero-content {
        padding: 48px 20px 52px;
    }

    .sp-as-hero--kompakt .sp-page-hero-title {
        font-size: 28px !important;
    }

    .sp-as-layout {
        padding: 20px 20px 64px;
    }

    .sp-as-content {
        font-size: 16px;
    }

    .sp-as-content h2 {
        font-size: 20px;
        margin-top: 36px;
    }

    .sp-as-content h3 {
        font-size: 17px;
    }

    .sp-as-details > summary,
    .sp-as-details-body {
        font-size: 16px;
    }

    .sp-as-klar {
        padding: 28px 20px;
    }

    .sp-as-btn {
        width: 100%;
        min-height: 56px;
    }

    .sp-as-btn--text {
        width: auto;
        min-height: 44px;
    }

    .sp-as-nav {
        flex-direction: column-reverse;
    }

    .sp-as-nav-btn--next {
        justify-content: space-between;
        text-align: left;
    }

    .sp-as-nav-btn--next .sp-as-nav-btn-text {
        order: 1;
    }

    .sp-as-nav-btn--next .sp-as-icon {
        order: 2;
    }

    .sp-as-band {
        padding: 56px 20px;
    }

    .sp-as-band--fortsatt {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .sp-as-rubrik {
        font-size: 26px;
    }

    .sp-as-fortsatt {
        padding: 24px 20px;
    }

    .sp-as-fortsatt-titel {
        font-size: 22px;
    }

    .sp-as-kursplan-rad {
        min-height: 72px;
        padding: 16px 16px;
        gap: 14px;
    }

    .sp-as-kursplan-sammanfattning {
        font-size: 14px;
    }

    .sp-as-kursplan-pil {
        display: none;
    }

    .sp-as-funkar,
    .sp-as-kortgrid--3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sp-as-funkar-steg,
    .sp-as-infokort {
        padding: 22px 20px;
    }

    .sp-as-cta-rad {
        flex-direction: column;
        align-items: stretch;
    }

    .sp-as-cta-rad .sp-cta-btn {
        text-align: center;
    }

    .sp-as-cta-rad--center {
        align-items: center;
    }

    .sp-as-kursplan-cta .sp-cta-btn,
    .sp-as-slutcta .sp-cta-btn {
        width: 100%;
        max-width: 360px;
    }

    .sp-as-igenkanning li {
        font-size: 16px;
    }

    .sp-as-content .sp-as-lankar {
        grid-template-columns: 1fr;
    }

    .sp-as-punktruta,
    .sp-as-callout {
        padding: 18px 18px 16px;
    }

    .sp-as-content .sp-as-lyft {
        padding-left: 16px;
    }

    .sp-as-content .sp-as-sjalvtest {
        padding: 12px 14px 18px;
    }

    .sp-as-content .sp-as-sjalvtest-lista {
        columns: 1;
    }

    .sp-as-content .sp-as-table--oversikt th,
    .sp-as-content .sp-as-table--oversikt td {
        padding: 10px 8px;
        font-size: 15px;
    }

    .sp-as-content .sp-as-table--oversikt td:first-child {
        white-space: normal;
    }

    .sp-as-content .sp-as-table--matris th,
    .sp-as-content .sp-as-table--matris td {
        padding: 9px 6px;
    }

    .sp-as-content .sp-as-table--matris th[scope="row"] {
        font-size: 15px;
    }

    .sp-as-content .sp-as-table--matris thead th:not(:first-child),
    .sp-as-content .sp-as-table--matris .sp-as-matris-cell {
        width: 38px;
        padding-left: 4px;
        padding-right: 4px;
        font-size: 13px;
    }

    .sp-as-content .sp-as-details-body .sp-as-lista-kompakt {
        columns: 2;
        column-gap: 16px;
    }

    .sp-as-toc-header {
        padding: 16px 20px;
    }

    .sp-as-toc-list,
    .sp-as-content .sp-as-toc-list {
        padding: 0 20px 16px;
    }

    .sp-as-punktruta-lista li {
        font-size: 16px;
    }

    .sp-as-kursplan-cta {
        padding: 28px 20px;
        margin-top: 28px;
    }

    .sp-as-band--omdomen .sp-hp-omdomen-title {
        font-size: 26px !important;
    }

    .sp-as-kursplan-not {
        margin-top: -6px !important;
        font-size: 15px !important;
    }

    .sp-as-cecilia {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 26px 20px;
        text-align: center;
    }

    .sp-as-cecilia-bild img {
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }

    .sp-as-cecilia-rubrik {
        font-size: 24px;
    }

    .sp-as-fortsatt-rad {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (min-width: 1200px) {
    .sp-as-layout {
        grid-template-columns: 280px minmax(0, 760px);
        column-gap: 56px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .sp-as-funkar,
    .sp-as-kortgrid--3 {
        grid-template-columns: 1fr;
    }

    .sp-as-funkar-steg,
    .sp-as-infokort {
        max-width: 760px;
        margin: 0 auto;
        width: 100%;
    }
}


/* ========================================================================
   13. MINSKA RÖRELSE
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sp-as *,
    .sp-as *::before,
    .sp-as *::after {
        transition: none !important;
        animation: none !important;
    }

    .sp-as-kursplan-rad:hover,
    .sp-as-verktyg:hover,
    .sp-as-btn--primary:hover {
        transform: none;
    }
}