/*
    public/_css/bootstrap5-compat.css

    De site is ontworpen op Bootstrap 4.0.0-beta (2017). Sinds 10-11-2026 draait hij op
    Bootstrap 5.3. Dit blad zet de standaardwaarden van Bootstrap 4 terug waar het ontwerp
    (main.css) op leunt, zodat het beeld gelijk blijft. Het staat tussen bootstrap.min.css
    en main.css in: wat main.css zelf regelt, gaat er nog steeds overheen.
*/

/* Kleuren en links zoals Bootstrap 4: blauw #007bff, niet onderstreept tot hover. */
:root {
    --bs-link-color-rgb: 0, 123, 255;
    --bs-link-hover-color-rgb: 0, 86, 179;
    --bs-border-radius: .25rem;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Rasterwerk: goot van 30px en een container van hooguit 1140px (5 kent ook 1320px). */
.container, .container-fluid, .row { --bs-gutter-x: 30px; }

@media (min-width: 1400px) {
    .container { max-width: 1140px; }
}

/* In 4 had elke kolom zelf 15px opvulling en minstens 1px hoogte, ook buiten een .row (de kop zet ze direct in
   <header>). In 5 komt die alleen van de .row. */
.col, [class^="col-"], [class*=" col-"] { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; }

/* Koppen zonder de meeschalende maten van Bootstrap 5 op kleine schermen. */
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.1; }

small, .small { font-size: 80%; font-weight: 400; }

label { margin-bottom: .5rem; }

hr { color: inherit; opacity: 1; border: 0; border-top: 1px solid rgba(0, 0, 0, .1); }

.text-muted { color: #868e96 !important; }

/* Focus zoals 4-beta: blauwe rand, geen gloed. */
.form-control:focus, .form-select:focus { border-color: #80bdff; box-shadow: none; }

/* Bestaat niet meer in Bootstrap 5; ook het CMS-formulier gebruikt hem (cms.formulieren.klassen). */
.form-group { margin-bottom: 1rem; }

.form-control, .form-select { border-radius: .25rem; }

/* Binnenruimte van kaarten zoals 4 (1.25rem, in 5 1rem). */
.card { --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.25rem; --bs-card-cap-padding-y: .75rem; --bs-card-cap-padding-x: 1.25rem; }

/* Bestaat niet meer in Bootstrap 5: de vier gelijke vlakken op de voorpagina. */
.card-deck { display: flex; flex-direction: column; }
.card-deck .card { margin-bottom: 15px; }

@media (min-width: 576px) {
    .card-deck { flex-flow: row wrap; margin-right: -15px; margin-left: -15px; }
    .card-deck .card { display: flex; flex: 1 0 0%; flex-direction: column; margin-right: 15px; margin-left: 15px; margin-bottom: 0; }
}

/* Tabellen: doorzichtig op de kleurvlakken, ruimte en lijnen zoals Bootstrap 4. */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: inherit;
    --bs-table-striped-color: inherit;
    --bs-table-hover-color: inherit;
}

.table > :not(caption) > * > * { padding: .75rem; border-bottom-width: 0; border-top: 1px solid #e9ecef; }
.table-sm > :not(caption) > * > * { padding: .3rem; }
.table > thead > tr > th { border-bottom: 2px solid #e9ecef; }

/* Knoppen in de kleuren en de ronding van Bootstrap 4. */
.btn { --bs-btn-border-radius: .25rem; }

.btn-primary {
    --bs-btn-bg: #007bff;
    --bs-btn-border-color: #007bff;
    --bs-btn-hover-bg: #0069d9;
    --bs-btn-hover-border-color: #0062cc;
    --bs-btn-active-bg: #0062cc;
    --bs-btn-active-border-color: #005cbf;
}

.btn-secondary {
    --bs-btn-bg: #868e96;
    --bs-btn-border-color: #868e96;
    --bs-btn-hover-bg: #727b84;
    --bs-btn-hover-border-color: #6c757d;
}

.btn-outline-primary {
    --bs-btn-color: #007bff;
    --bs-btn-border-color: #007bff;
    --bs-btn-hover-bg: #007bff;
    --bs-btn-hover-border-color: #007bff;
}

/* Badges (zoekresultaten) zoals 4: kleiner, en het grijs van toen. */
.badge { --bs-badge-padding-x: .4em; --bs-badge-padding-y: .25em; --bs-badge-border-radius: .25rem; }
.badge.text-bg-secondary { background-color: #868e96 !important; }

/* Het sluitkruisje van het venster zoals Bootstrap 4 (5 heeft .btn-close met een plaatje). */
.close {
    float: right;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    background: transparent;
    border: 0;
}

.close:hover { opacity: .75; }
.modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; }