/* --- JBN-huisstijl (afgeleid van jbn.nl, 2-10-2026) ---
   Oranje #FF5100, blauw #2E3092, zand #e2e0d7. jbn.nl gebruikt Circular XX (betaald),
   hier Figtree van Google Fonts. Koppen: hoofdletters, extra zwaar cursief. */

:root {
    --jbn-orange: #FF5100;
    --jbn-orange-dark: #d94500;
    --jbn-blue: #2E3092;
    --jbn-blue-dark: #23256f;
    --jbn-sand: #e2e0d7;
    --jbn-sand-light: #f3f2ed;
    --jbn-dark: #333333;

    --bs-primary: var(--jbn-orange);
    --bs-primary-rgb: 255, 81, 0;
    --bs-secondary: var(--jbn-blue);
    --bs-secondary-rgb: 46, 48, 146;
    --bs-link-color: var(--jbn-blue);
    --bs-link-color-rgb: 46, 48, 146;
    --bs-link-hover-color: var(--jbn-orange);
    --bs-link-hover-color-rgb: 255, 81, 0;
    --bs-body-font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-color: #000;
    --bs-focus-ring-color: rgba(255, 81, 0, .25);
}

/* Koppen */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--jbn-blue);
}
h1, .h1 { color: var(--jbn-orange); }
.card-title, .modal-title { color: var(--jbn-blue); }

/* Knoppen: hoofdactie oranje, hover blauw (in de frontend is groen ook hoofdactie) */
.btn { font-weight: 700; }
.btn-primary, .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--jbn-orange);
    --bs-btn-border-color: var(--jbn-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jbn-blue);
    --bs-btn-hover-border-color: var(--jbn-blue);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--jbn-blue-dark);
    --bs-btn-active-border-color: var(--jbn-blue-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--jbn-orange);
    --bs-btn-disabled-border-color: var(--jbn-orange);
    --bs-btn-focus-shadow-rgb: 255, 81, 0;
}
.btn-outline-primary, .btn-outline-secondary {
    --bs-btn-color: var(--jbn-blue);
    --bs-btn-border-color: var(--jbn-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--jbn-blue);
    --bs-btn-hover-border-color: var(--jbn-blue);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--jbn-blue-dark);
    --bs-btn-active-border-color: var(--jbn-blue-dark);
    --bs-btn-disabled-color: var(--jbn-blue);
    --bs-btn-disabled-border-color: var(--jbn-blue);
    --bs-btn-focus-shadow-rgb: 46, 48, 146;
}
/* Pilvorm zoals jbn.nl; kleine knoppen in tabellen niet */
.btn:not(.btn-xs):not(.btn-sm):not(.btn-close):not(.dropdown-toggle-split) { border-radius: 50rem; }
.btn-lg { padding: .7rem 1.6rem; }
.input-group > .btn { border-radius: var(--bs-border-radius); }

/* Navbar: wit, logo links */
#topnav {
    background-color: #fff;
    border-bottom: 3px solid var(--jbn-orange);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
#topnav .navbar-brand {
    color: var(--jbn-blue);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
}
#topnav .nav-link { color: var(--jbn-dark); font-weight: 700; }
#topnav .nav-link:hover,
#topnav .nav-link:focus,
#topnav .nav-link.active,
#topnav .show > .nav-link { color: var(--jbn-orange); }
/* Het actieve menu-item is een btn-primary: oranje pil, niet de blauwe active-kleur */
#topnav .nav-link.btn-primary {
    background-color: var(--jbn-orange);
    border-color: var(--jbn-orange);
    color: #fff !important;
    border-radius: 50rem;
    padding: .35rem 1rem;
}
#topnav .nav-link.btn-primary:hover { background-color: var(--jbn-blue); border-color: var(--jbn-blue); }

/* Dropdowns */
.dropdown-menu {
    --bs-dropdown-link-hover-bg: var(--jbn-sand-light);
    --bs-dropdown-link-hover-color: var(--jbn-orange);
    --bs-dropdown-link-active-bg: var(--jbn-orange);
    --bs-dropdown-link-active-color: #fff;
}

/* Cards en tabellen */
.card { border-color: var(--jbn-sand); }
.card-header {
    background-color: var(--jbn-sand);
    border-bottom-color: var(--jbn-sand);
    color: var(--jbn-blue);
    font-weight: 700;
}
.table-light {
    --bs-table-bg: var(--jbn-sand);
    --bs-table-color: var(--jbn-blue);
    --bs-table-border-color: var(--jbn-sand);
}

/* Badges */
.badge.text-bg-primary { background-color: var(--jbn-blue) !important; color: #fff !important; }
.badge.text-bg-info { background-color: #ffe3d6 !important; color: #a33400 !important; }

/* Formulieren */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #ffa880;
    box-shadow: 0 0 0 .25rem rgba(255, 81, 0, .2);
}
.form-check-input:checked { background-color: var(--jbn-orange); border-color: var(--jbn-orange); }

/* Paginering, nav-tabs/pills */
.pagination {
    --bs-pagination-color: var(--jbn-blue);
    --bs-pagination-hover-color: var(--jbn-orange);
    --bs-pagination-active-bg: var(--jbn-orange);
    --bs-pagination-active-border-color: var(--jbn-orange);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--jbn-orange); }
.nav-link { --bs-nav-link-color: var(--jbn-blue); --bs-nav-link-hover-color: var(--jbn-orange); }

/* Footer: blauw met witte tekst */
.footer-jbn {
    background-color: var(--jbn-blue);
    color: #fff;
}
.footer-jbn a { color: #fff; text-decoration: none; }
.footer-jbn a:hover { color: var(--jbn-orange); text-decoration: underline; }
/* De privacy-modal staat in de footer: niet wit erven */
.footer-jbn .modal { color: var(--bs-body-color); }
.footer-jbn .modal a { color: var(--bs-link-color); }
.footer-jbn .footer-logo {
    background: #fff;
    border-radius: .5rem;
    padding: .35rem .5rem;
    height: 2.5rem;
}