:root {
        --primary-blue: #005A9C;
        --secondary-blue: #00477a;
        --primary-yellow: #FFC107; /* Ny accentfärg */
        --primary-yellow-dark: #e6ac00;
        --success-green: #198754;
        --light-gray-bg: #f8f9fa;
        --border-color: #dee2e6;
        --text-color: #212529;
        --text-color-light: #fff;
        --box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        --box-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    body {
        font-family: 'Inter', sans-serif;
        background-color: var(--light-gray-bg);
        color: var(--text-color);
    }

    .navbar {
        background-color: #fff;
        box-shadow: var(--box-shadow-light);
    }

    .navbar .navbar-brand,
    .navbar .nav-link {
        color: var(--primary-blue) !important;
        font-weight: 500;
    }

    .navbar .navbar-brand {
        font-weight: 700;
    }
    
    /* Ny Hero-sektion för index.html */
    .hero-section {
        background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
        color: var(--text-color-light);
        padding: 4rem 0 6rem 0; /* Mer padding, särskilt nedtill */
    }

    .hero-section h1 {
        font-weight: 700;
    }

    .hero-visual .bi {
        font-size: 8rem;
        color: rgba(255, 255, 255, 0.2);
    }

    /* Ny container för formulär och tabell */
    .comparison-container {
        background-color: #fff;
        border-radius: 12px;
        box-shadow: var(--box-shadow);
        padding: 2rem;
        margin-top: -4rem; /* Lyfter upp containern över hero-sektionen */
        position: relative;
        z-index: 10;
    }

    /* Justeringar för formuläret */
    #calc-form .btn {
        height: 100%;
        font-weight: 700;
    }
    #calc-form .btn-success {
        background-color: var(--primary-yellow);
        border-color: var(--primary-yellow);
        color: var(--text-color);
    }
    #calc-form .btn-success:hover {
        background-color: var(--primary-yellow-dark);
        border-color: var(--primary-yellow-dark);
    }

    .nav-pills .nav-link {
        color: var(--primary-blue);
        font-weight: 500;
    }

    .nav-pills .nav-link.active {
        background-color: var(--primary-blue);
        color: #fff;
        box-shadow: 0 2px 4px rgba(0, 90, 156, 0.3);
    }
    
    /* Förbättringar för tabellen */
    .table-container {
        margin-top: 2rem;
    }

    .table thead th {
        color: var(--primary-blue);
        font-weight: 700;
        white-space: nowrap;
        border-bottom: 2px solid var(--border-color);
        vertical-align: middle;
    }

    .table tbody tr {
        border-bottom: 1px solid var(--border-color);
    }
    .table tbody tr:last-child {
        border-bottom: none;
    }
    
    .company-row:hover {
        background-color: #fcfcfd;
    }

    .cheapest-row {
        background-color: #e6f3ff;
        border-left: 5px solid var(--success-green);
    }
    .cheapest-row td:last-child a.btn-primary {
        background-color: var(--success-green);
        border-color: var(--success-green);
        color: #fff;
    }

    .details-row .card {
        border-radius: 0;
        border: none;
        background-color: #fafafa;
        border-top: 1px solid var(--border-color);
    }

    .footer {
        background-color: #343a40;
        color: #adb5bd;
        padding: 2rem 0;
        margin-top: 4rem;
    }

    /* Skapa en container-klass för blogginnehåll */
    .blog-content {
        /* Gör texten lite större och mer lättläst */
        font-size: 1.1rem; 
        line-height: 1.7;
    }

    /* Lägg till ett generöst mellanrum (luft) under varje stycke */
    .blog-content p {
        margin-bottom: 1.25rem; /* ca 20px */
    }

    /* Ge rubriker mer utrymme före och lite efter */
    .blog-content h1,
    .blog-content h2,
    .blog-content h3,
    .blog-content h4,
    .blog-content h5,
    .blog-content h6 {
        margin-top: 2.5rem;    /* Stort avstånd ovanför rubriken */
        margin-bottom: 2.5rem;   /* Mindre avstånd under rubriken */
        font-weight: 600;
    }

    /* Se till att listor också får lite luft under sig */
    .blog-content ul,
    .blog-content ol {
        margin-bottom: 1.25rem;
    }

    /* Styla blockcitat snyggt */
    .blog-content blockquote {
        margin: 1.5rem 0;
        padding: 0.5rem 1.5rem;
        border-left: 4px solid #e9ecef;
        color: #6c757d;
    }

    /* Ny stil för artikelbilder i listvyn */
    .article-preview-image {
        max-width: 300px; /* ca 4x mindre än 1200px. Justera detta värde om du vill! */
        width: 100%;      /* Gör att bilden anpassar sig till mindre skärmar */
        height: auto;     /* Behåller bildens korrekta proportioner */
        display: block;   /* Nödvändigt för att margin: auto ska fungera */
        margin-left: auto;  /* Centrerar bilden horisontellt */
        margin-right: auto; /* Centrerar bilden horisontellt */
        margin-bottom: 1.5rem; /* Skapar lite luft mellan bilden och rubriken under */
    }
    
    /* Förbättrad mobilvy */
    @media (max-width: 768px) {
        .hero-section {
            padding: 2rem 0 5rem 0;
            text-align: center;
        }
        .comparison-container {
            padding: 1.5rem;
        }

        .table thead { display: none; }
        .table tr.company-row {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: var(--box-shadow-light);
        }
        .table tbody, .table td, .table th { display: block; width: 100%; text-align: left !important; }
        .table td, .table th[scope="row"] { padding: 0.8rem 1rem; border: none; border-bottom: 1px solid #e9ecef; }
        .table tr.company-row > *:last-child { border-bottom: none; }

        .table td:before, .table th[scope="row"]:before {
            content: attr(data-label);
            display: block;
            font-size: 0.8em;
            font-weight: 600;
            color: #6c757d;
            text-transform: uppercase;
            margin-bottom: 0.35rem;
        }
        .table td.company-name-cell { padding-top: 1rem; }
        .table td.company-name-cell:before { display: none; }
        .table td.company-name-cell strong { font-size: 1.2rem; }
        .table th[scope="row"] { background-color: #f8f9fa; }

        .table td.highlight-col {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-blue);
        }
        .table .cheapest-row td.highlight-col { color: var(--success-green); }

        .table td.button-cell { padding: 1rem; background-color: #f8f9fa; }
        .table td.button-cell:before { display: none; }
        .table td.button-cell a.btn {
            display: block;
            width: 100%;
            padding: 0.75rem;
            font-size: 1rem;
            font-weight: 700;
        }
        .cheapest-row { border-left: none; }
    }