/* =========================================
   FÄRG-TOKENS (dark bakgrund, ljus text)
========================================= */
:root {
    --accent: #30e0b6; /* grön accent */
    --text: #e5e7eb; /* primär brödtext */
    --muted: #9ca3af; /* dämpad text */
    --text-muted: var(--muted); /* alias för konsistens */

    --card-bg: rgba(17,24,39,.85); /* mörk kort-bakgrund */
    --card-border: rgba(148,163,184,.18);
    --summary-bg: rgba(255, 255, 255, 0.06);
    --code-bg: rgba(96,165,250,.12);
    --code-text: #60a5fa;
}

/* =========================================
   ARTIKEL-LAYOUT & TYPOGRAFI
========================================= */

.blog-article {
    color: var(--text);
}

    /* Wrapper för maxbredd */
    .blog-article .article-wrap {
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Brödtext */
    .blog-article p {
        line-height: 1.7;
        margin-bottom: .85rem;
        color: var(--text);
    }

    /* Dämpad text (t.ex. metadata) */
    .blog-article .text-muted {
        color: var(--text-muted) !important;
    }

    /* Huvudrubrik på sidan */
    .blog-article .post-title {
        font-weight: 800;
        font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
        line-height: 1.25;
        margin-bottom: .5rem;
    }

    /* Underrubrik / ingress */
    .blog-article .post-subtitle {
        font-size: 1.05rem;
        color: var(--text-muted);
        margin-bottom: 1.25rem;
    }

    /* Sektion-spacing */
    .blog-article section {
        margin-bottom: 2rem;
    }

    /* =========================================
   HERO-BILD
========================================= */

    .blog-article .post-hero img {
        border-radius: .75rem;
        max-height: 340px;
        width: 100%;
        object-fit: cover;
    }

    .blog-article .post-hero figcaption {
        text-align: center;
        font-size: .9rem;
        color: var(--text-muted);
        margin-top: .5rem;
    }

    /* =========================================
   BREADCRUMBS
========================================= */

    .blog-article .breadcrumb {
        font-size: .9rem;
    }

    /* =========================================
   LISTOR (t.ex. Bootstrap list-group)
========================================= */

    .blog-article .list-group .list-group-item {
        background: rgba(255,255,255,.05);
        border-color: rgba(255,255,255,.12);
        padding: .85rem 1rem;
    }

    .blog-article .list-group .small {
        color: var(--text-muted);
    }

    /* =========================================
   SAMMANFATTNING / INFOBOX
========================================= */

    .blog-article .summary-box {
        background: var(--summary-bg);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: .6rem;
        padding: 1.5rem;
    }

        .blog-article .summary-box h3 {
            margin-top: 0;
            margin-bottom: 1rem;
        }

    /* =========================================
   LÄNKAR
========================================= */

    .blog-article a {
        color: var(--accent);
        text-decoration: none;
    }

        .blog-article a:hover {
            text-decoration: underline;
        }

    /* Extra “varför”-markering */
    .blog-article .why {
        font-weight: 600;
        color: #60a5fa; /* blå accent */
    }

    /* =========================================
   INLINE-KOD
========================================= */

    .blog-article code {
        background: var(--code-bg);
        color: var(--code-text);
        padding: 0.1rem 0.3rem;
        border-radius: 4px;
        font-size: 0.9em;
    }

/* =========================================
   BADGES / BOOTSTRAP OVERRIDES
========================================= */

.bg-secondary-subtle {
    background-color: rgba(148,163,184,.18) !important;
}

.text-secondary-emphasis {
    color: var(--text-muted) !important;
}

/* =========================================
   RUBRIKER I ARTIKELN
========================================= */

/* Ta bort dekor innan/efter rubriker om du hade det globalt */
.blog-article h2::before,
.blog-article h2::after {
    content: none !important;
}

.blog-article .section-title {
    border: none;
    padding-left: 0;
}

/* Sektion-rubrik (nivå 2) */
.blog-article h2 {
    font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem);
    font-weight: 700;
    margin: 1.75rem 0 .75rem;
    color: #f3f4f6; /* lite ljusare än body-text */
    letter-spacing: .3px;
    border-bottom: 1px solid rgba(255,255,255,.25);
    padding-bottom: .3rem;
}

/* Underrubrik (nivå 3) */
.blog-article h3 {
    font-size: clamp(1rem, .9rem + .4vw, 1.125rem);
    font-weight: 700;
    color: #cbd5e1;
    margin-top: 1.25rem;
    margin-bottom: .25rem;
    letter-spacing: .2px;
}

/* =========================================
   UTILITIES
========================================= */

.object-cover {
    object-fit: cover;
}