:root {
    --page-bg: linear-gradient(140deg, #F5F5F5 0%, #D9E0E6 100%);
    --table-stripe: #F7F8FA;
    /* Containermaten overgenomen van embloom.nl (Enfold-thema):
       gecentreerde container van max 1440px met 50px zijpadding. */
    --site-max-width: 1440px;
    --site-side-padding: 50px;
}

/* Afwisselende rijkleur voor MudBlazor-tabellen: wit / var(--table-stripe) */
body .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: #fff;
}

body .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(even) {
    background-color: var(--table-stripe);
}

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.type-badge2 {
    display: inline-flex;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
}

.type-badge {    
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 0.03em;
}

.type-filter-badge {
   
    font-size: 0.85rem !important;
    font-weight: 400 !important;
}
    .type-filter-badge.active {
        color: #fff !important;
    }

    .type-filter-badge:not(.active):hover {
        background-color: color-mix(in srgb, currentColor 15%, transparent) !important;
    }


.type-module-filter {
    color: #0C6488 !important;
    border: solid 1px #0C6488 !important;
}

.type-exercise-filter {
    color: #EF8B20 !important;
    border: solid 1px #EF8B20 !important;
}

.type-education-filter {
    color: #BCC639 !important;
    border: solid 1px #BCC639 !important;
}

.type-journal-filter {
    color: #EF8A9C !important;
    border: solid 1px #EF8A9C !important;
}

.type-questionnaire-filter {
    color: #7e1b3f !important;
    border: solid 1px #7e1b3f !important;
}

.type-program-filter {
    color: #0ea5e9 !important;
    border: solid 1px #0ea5e9 !important;
}

        .type-module, .type-module-filter.active {
            background: linear-gradient(135deg, #0C6488, #0C6488);
        }

        .type-exercise, .type-exercise-filter.active {
            background: linear-gradient(135deg, #EF8B20, #EF8B20);
        }

        .type-education, .type-education-filter.active {
            background: linear-gradient(135deg, #BCC639, #BCC639);
        }

        .type-journal, .type-journal-filter.active {
            background: linear-gradient(135deg, #EF8A9C, #EF8A9C);
        }

        .type-questionnaire, .type-questionnaire-filter.active {
            background: linear-gradient(135deg, #7e1b3f, #7e1b3f);
        }

        .type-program, .type-program-filter.active {
            background: linear-gradient(135deg, #0ea5e9, #38bdf8);
        }

        .type-default {
            color: #fff;
            background: linear-gradient(135deg, #475569, #94a3b8);
        }

/* MudTooltip max-width */

/* SVGFlag border styling */
svg.flag-icon,
.svg-flag-icon,
[class*="flag"] svg {
    border: 1px solid #9ca3af;
    border-radius: 2px;
    vertical-align: middle;
    display: block;
}
/* ── Result card ─────────────────────────────────────────────────────
   Gedeelde styling voor de zoekresultaat-card. Gebruikt door:
   - SearchView/SearchResultView.razor (echte card)
   - ContentDetail/ContentDetailView.razor (bewerkbaar voorbeeld in edit-modus)
   Layout-wijzigingen hier gelden automatisch voor beide weergaven. */

.result-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 26px;
    height: 100%;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.result-card:hover {
    box-shadow: 0 32px 60px rgba(15, 23, 42, 0.18);
}

/* Header-rij: afbeelding exact gecentreerd, type-chip linksboven
   (absoluut, zodat hij de centrering niet verschuift).
   Background/border neutraliseren Bootstraps .card-header-stijlen. */
.result-card .card-header {
    position: relative;
    display: flex;
    justify-content: center;
    background: transparent;
    border-bottom: none;
}

.result-card .card-header .type-badge {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1;
}

/* Licentiekosten e.d. rechtsboven, op dezelfde hoogte als het type-badge. */
.result-card .card-header .card-header-aside {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.35rem 0;
    display: inline-flex;
    align-items: flex-start;
}

.card-license {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.card-license-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(71, 85, 105, 0.7);
    line-height: 1;
    margin-top: -1px;
}

.card-license-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #475569;
    line-height: 1;
}

.result-card .result-illustration {
    width: 128px;
    height: 128px;
    object-fit: contain;
    align-self: center;
}

.result-card .card-content {
    flex: 1;
    display: flex;
}

.result-card .card-copy {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.result-card .card-end {
    margin-top: auto;
}

.result-card .card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #EF8B20;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: overflow 2.5s ease, max-height 2.5s ease;
    max-height: 1.3em;
}

.result-card .card-summary {
    margin: 0;
    font-size: 0.8rem;
    color: #4a6380;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-card .card-meta {
    display: flex;
    flex-wrap: nowrap; /* licentie blijft rechts op dezelfde regel; chips wrappen binnen hun eigen container */
    gap: 0.75rem;
    font-size: 0.85rem;
    color: rgba(15, 23, 42, 0.65);
    align-items: center;
    margin-top: auto;
}

.result-card .meta-item {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
}

/* Licentie altijd rechts uitgelijnd op dezelfde meta-regel */
.result-card .meta-license {
    margin-left: auto;
    white-space: nowrap;
}

.result-card .meta-divider {
    color: rgba(148, 163, 184, 0.6);
    font-size: 0.8rem;
    user-select: none;
}

.result-card .card-targetgroups {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap; /* chips wrappen binnen de eigen container, zodat de licentie op de regel blijft */
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    margin: 0;
    line-height: 1;
}

.result-card .targetgroup-text-chip {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 400;
    border-radius: 999px;
    border: 1px solid #D3DDE6;
    color: #404040;
    line-height: 1.4;
    white-space: nowrap;
}

.result-card .card-divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.3);
    border-radius: 999px;
    margin: 0.5rem 0;
}

.result-card .card-actions {
    margin-top: 0.2rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.result-card .btn-text {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #EF8B20;
    text-decoration: none;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1.5px solid #EF8B20;
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.result-card .btn-text:hover {
    background: #EF8B20;
    color: #fff;
}

/* Info-knop rechts uitgelijnd in de actie-rij
   (eigen naam i.p.v. "btn-info" — dat is een Bootstrap-class) */
.result-card .card-actions .btn-card-info {
    margin-left: auto;
    order: 1;
}

@media (max-width: 640px) {
    .result-card .result-illustration {
        width: 80px;
        height: 80px;
    }

    .result-card .card-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }
}

/* MudBlazor-chips binnen de card (doelgroepen / "Handleiding in platform") */
.result-card .card-targetgroups .mud-chipset,
.result-card .card-treatmentphases .mud-chipset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.result-card .card-targetgroups .mud-chip,
.result-card .card-treatmentphases .mud-chip {
    margin: 0;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    justify-content: center;
    align-items: center;
}

.result-card .card-targetgroups .mud-chip .mud-chip-content,
.result-card .card-treatmentphases .mud-chip .mud-chip-content {
    padding: 0;
    justify-content: center;
}

.result-card .card-targetgroups .mud-chip .mud-chip-icon,
.result-card .card-treatmentphases .mud-chip .mud-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.result-card .card-actions .mud-chip {
    margin: 0 !important;
    padding: 0.35rem 0.65rem !important;
    line-height: 1 !important;
}

/* ── Eigen sitekop ────────────────────────────────────────────────────────────
   Voor bezoekers die direct binnenkomen (bv. via Google op een detailpagina).
   In een iframe levert de omringende pagina de kop al; App.razor zet dan de
   klasse 'embedded' op <html> en verbergt deze. Maten en kleuren zijn overgenomen
   van de kop op embloom.nl: logo 230x88, knoppen 15px/600 in wit op #EF8B20
   (Proefaccount) en #7D103F (Inloggen), rechthoekig met 10px padding. */
.site-header {
    /* Vast bovenaan en licht doorschijnend, zoals de kop op embloom.nl. Daar is de kop
       volledig transparant; hier niet, want de detailpagina begint met een donkerrode
       hero en het logo is zelf donkerrood — dat zou onleesbaar worden. Vandaar een
       lichte laag met blur: content scrolt zichtbaar door, tekst blijft leesbaar.
       z-index onder die van MudBlazor-dialogs (1300+), boven de pagina-inhoud. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* De vaste kop valt uit de normale flow; de pagina schuift er even ver onderdoor. */
html:not(.embedded) body {
    padding-top: 90px;
}

html.embedded .site-header {
    display: none;
}

.site-header-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 var(--site-side-padding);
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.site-header-logo img {
    display: block;
    width: 230px;
    height: 88px;
    object-fit: contain;
}

.site-header-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-header-nav a {
    color: #707070;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}

.site-header-nav a:hover {
    color: #EF8B20;
}

.site-header-nav .site-header-btn {
    color: #fff;
    padding: 10px;
    line-height: 1.2;
}

.site-header-nav .site-header-btn:hover {
    color: #fff;
    opacity: 0.9;
}

.site-header-btn-signup {
    background: #EF8B20;
}

.site-header-btn-login {
    background: #7D103F;
}

@media (max-width: 860px) {
    html:not(.embedded) body {
        padding-top: 70px;
    }

    .site-header-inner {
        padding: 0 1.25rem;
        min-height: 70px;
        gap: 0.75rem;
    }

    .site-header-logo img {
        width: 160px;
        height: 60px;
    }

    .site-header-nav {
        gap: 0.6rem;
    }

    /* Op smalle schermen blijven alleen de twee acties staan. */
    .site-header-nav a:not(.site-header-btn) {
        display: none;
    }

    .site-header-nav .site-header-btn {
        font-size: 14px;
        padding: 8px 10px;
    }
}

/* ── 'Terug naar zoekresultaten' ───────────────────────────────────────────────
   Alleen zinvol als de bezoeker van binnen de app komt; wie via een zoekmachine
   op een detailpagina landt, heeft geen zoekresultaten om naar terug te keren.
   App.razor zet 'internal-nav' op <html>. De html-prefix geeft genoeg
   specificiteit tegenover MudBlazor's eigen display-regel. */
html .cd-back {
    display: none;
}

html.internal-nav .cd-back {
    display: inline-flex;
}

/* ── Cookiebalk ───────────────────────────────────────────────────────────────
   Alleen voor bezoekers die direct binnenkomen; consent.js bepaalt of hij zichtbaar
   wordt en bewaart de keuze in dezelfde cookies als embloom.nl. In een iframe blijft
   hij weg (de omringende pagina heeft zijn eigen balk). */
.consent-bar {
    /* Verborgen tot consent.js vaststelt dat er nog een keuze nodig is. Dat gebeurt met
       een klasse op <html>, buiten het bereik van Blazor's DOM-patching. */
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.12);
}

html.needs-consent .consent-bar {
    display: block;
}

/* In een iframe levert de omringende pagina de cookiemelding. */
html.embedded .consent-bar {
    display: none;
}

.consent-bar-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 1rem var(--site-side-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.consent-bar-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #0f172a;
    max-width: 70ch;
}

.consent-bar-text a {
    color: #7D103F;
    text-decoration: underline;
}

.consent-bar-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.consent-btn {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 14px;
    border: 0;
    cursor: pointer;
    line-height: 1.2;
}

.consent-btn-accept {
    background: #EF8B20;
    color: #fff;
}

.consent-btn-decline {
    background: transparent;
    color: #707070;
    text-decoration: underline;
}

.consent-btn:hover {
    opacity: 0.9;
}

@media (max-width: 860px) {
    .consent-bar-inner {
        padding: 0.85rem 1.25rem;
        gap: 0.85rem;
    }

    .consent-bar-actions {
        width: 100%;
    }

    .consent-btn-accept {
        flex: 1;
    }
}