:root {
            /* Merk-accent: eigen kleur van het merk, anders de ScoorJeKamp-huisstijl (koraal) */

            /* Bootstrap op de huisstijl zetten: hoofdactie = koraal-diep, anker = indigo */
            --bs-primary: var(--sjk-koraal-diep);
            --bs-primary-rgb: 242, 86, 79;
            --bs-link-color: var(--sjk-indigo);
            --bs-link-color-rgb: 84, 87, 229;
            --bs-link-hover-color: #4245cc;
            --bs-body-color: var(--sjk-inkt);
            --bs-body-font-family: var(--sjk-font);
            --bs-border-radius: var(--sjk-radius-btn);
            --bs-border-radius-lg: var(--sjk-radius-card);
        }
        body { -webkit-tap-highlight-color: transparent; font-family: var(--sjk-font); color: var(--sjk-inkt); }
        h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
            font-family: var(--sjk-font); font-weight: 800; color: var(--sjk-diep); letter-spacing: -0.01em;
        }
        h4, h5, h6, .h4, .h5, .h6, .lead { font-weight: 600; }

        /* Knoppen — huisstijl: rond (14px), SemiBold, grote touch-targets */
        .btn { min-height: 3rem; border-radius: var(--sjk-radius-btn); font-weight: 600; }
        .btn-primary { --bs-btn-bg: var(--sjk-koraal-diep); --bs-btn-border-color: var(--sjk-koraal-diep);
            --bs-btn-hover-bg: #e0473f; --bs-btn-hover-border-color: #e0473f;
            --bs-btn-active-bg: #d43f38; --bs-btn-active-border-color: #d43f38; }
        .btn-secondary { --bs-btn-bg: var(--sjk-indigo); --bs-btn-border-color: var(--sjk-indigo);
            --bs-btn-hover-bg: #4245cc; --bs-btn-hover-border-color: #4245cc; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }

        /* Merk-hulpklassen (blijven werken op merkpagina's met eigen kleur).
           Via Bootstrap's eigen --bs-btn-* variabelen zodat de hover gemerkt blijft
           (anders maakt een lege --bs-btn-hover-bg de knop op hover transparant/wit). */
        .btn-brand {
            --bs-btn-color: #fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
            --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
            --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand);
            --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
            border-radius: var(--sjk-radius-btn); font-weight: 600;
        }
        .btn-brand:hover, .btn-brand:focus { filter: brightness(0.92); }
        .text-brand { color: var(--brand); }
        .bg-brand { background: var(--brand); }

        .card { border-radius: var(--sjk-radius-card); }
        a { text-decoration-thickness: .08em; text-underline-offset: .15em; }

/* Broodkruimels (visueel), op de donkere pagina-hero's. Voedt zich met $seo['breadcrumbs']. */
.sjk-crumbs { margin: 0 0 .85rem; }
.sjk-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: 0; margin: 0; font-size: .82rem; }
.sjk-crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.7); }
.sjk-crumbs li:not(:last-child)::after { content: "›"; color: rgba(255,255,255,.45); }
.sjk-crumbs a { color: rgba(255,255,255,.82); text-decoration: none; }
.sjk-crumbs a:hover { color: #fff; text-decoration: underline; }
.sjk-crumbs [aria-current="page"] { color: #fff; font-weight: 600; }