/* Plaatselijk Belang Barneveld – huisstijl op Bootstrap 5 */
:root {
    --pbb-blue: #1d5fae;
    --pbb-blue-dark: #15457f;
    --pbb-green: #3f7d3a;
    --pbb-ink: #1f2a37;
    --pbb-muted: #5b6675;
    --pbb-tint: #f2f6fb;
    --pbb-line: #dfe6ef;

    --bs-primary: var(--pbb-blue);
    --bs-primary-rgb: 29, 95, 174;
    --bs-link-color: var(--pbb-blue);
    --bs-link-color-rgb: 29, 95, 174;
    --bs-link-hover-color: var(--pbb-blue-dark);
    --bs-body-color: var(--pbb-ink);
    --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-border-radius: .6rem;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-family: "Lora", Georgia, serif;
    font-weight: 600;
    color: var(--pbb-ink);
}

.btn-primary {
    --bs-btn-bg: var(--pbb-blue);
    --bs-btn-border-color: var(--pbb-blue);
    --bs-btn-hover-bg: var(--pbb-blue-dark);
    --bs-btn-hover-border-color: var(--pbb-blue-dark);
    --bs-btn-active-bg: var(--pbb-blue-dark);
    --bs-btn-active-border-color: var(--pbb-blue-dark);
    font-weight: 600;
}
.btn-light, .btn-outline-light { font-weight: 600; }

.skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .4rem; }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid var(--pbb-line); z-index: 1030; }
.site-header .navbar { padding-block: .6rem; }
.site-header .navbar-brand img { height: 64px; width: auto; }
@media (max-width: 575.98px) { .site-header .navbar-brand img { height: 50px; } }
.site-header .nav-link { font-weight: 600; color: var(--pbb-ink); padding-inline: .75rem !important; }
.site-header .nav-link:hover { color: var(--pbb-blue); }
.site-header .nav-link.active { color: var(--pbb-blue); box-shadow: inset 0 -2px 0 var(--pbb-blue); }
@media (max-width: 991.98px) {
    .site-header .nav-link.active { box-shadow: none; }
    .site-header .navbar-nav { padding-block: .75rem; }
    .site-header .navbar-nav .btn { margin-top: .5rem; }
}

/* Hero met bewegende banner */
.hero {
    position: relative;
    overflow: hidden;
    min-height: min(80vh, 680px);
    display: flex;
    align-items: flex-end;
    padding: 6rem 0 5.5rem;
    color: #fff;
    background: #142235;
}
.hero-carousel, .hero-carousel .carousel-inner, .hero-carousel .carousel-item { position: absolute; inset: 0; height: 100%; }
.hero-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transform-origin: 60% 50%; }
.hero-carousel .carousel-item.active img { animation: kenburns 9s ease-out forwards; }
.hero-carousel .carousel-item:nth-child(even).active img { transform-origin: 30% 40%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
.hero-carousel.is-paused .carousel-item.active img { animation-play-state: paused; }
.hero-carousel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 25, 45, .55) 0%, rgba(10, 25, 45, .15) 60%, rgba(10, 25, 45, 0) 100%),
        linear-gradient(180deg, rgba(10, 25, 45, .1) 0%, rgba(10, 25, 45, .3) 45%, rgba(10, 25, 45, .8) 100%);
}
.hero-content h1, .hero-content .lead, .hero-content .eyebrow { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.hero > .container { position: relative; z-index: 2; }
.hero-caption { position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 3; max-width: calc(100% - 9rem); }
.hero-caption a, .hero-caption span {
    display: inline-block; padding: .4rem .85rem; border-radius: 2rem; font-size: .9rem;
    background: rgba(10, 25, 45, .55); color: #fff; text-decoration: none; backdrop-filter: blur(4px);
}
.hero-caption a:hover { background: rgba(29, 95, 174, .85); }
.hero-carousel .carousel-indicators { z-index: 3; left: 1.25rem; right: auto; bottom: 1.25rem; margin: 0; justify-content: flex-start; }
.hero-carousel .carousel-indicators [data-bs-target] { width: 28px; height: 4px; border-radius: 2px; }
.hero-pause {
    position: absolute; z-index: 3; bottom: 1rem; left: calc(1.25rem + 4 * 34px + .5rem);
    width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(10, 25, 45, .55); color: #fff; line-height: 1;
}
.hero-pause:hover, .hero-pause:focus-visible { background: rgba(29, 95, 174, .85); }
@media (max-width: 575.98px) {
    .hero { padding-bottom: 6.5rem; }
    .hero-caption { left: 1.25rem; right: auto; bottom: 3rem; max-width: calc(100% - 2.5rem); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-carousel .carousel-item.active img { animation: none; }
}
.hero-content { max-width: 40rem; }
.hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.15; }
.hero .lead { font-size: 1.25rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; font-weight: 700; opacity: .9; margin-bottom: .5rem; }

/* Paginabanner */
.page-banner { background: var(--pbb-blue); color: #fff; padding: 3.5rem 0 3rem; }
.page-banner h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.75rem); }
.page-banner .lead { max-width: 48rem; opacity: .95; }

/* Secties */
.section { padding: 4.5rem 0; }
.section-tint { background: var(--pbb-tint); }
.section-cta { background: var(--pbb-green); color: #fff; }
.section-cta h2 { color: #fff; }

/* Kaarten */
.feature-card {
    display: block; height: 100%;
    padding: 2rem; border: 1px solid var(--pbb-line); border-radius: 1rem;
    color: inherit; text-decoration: none; background: #fff;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.feature-card:hover { border-color: var(--pbb-blue); box-shadow: 0 .75rem 1.5rem rgba(29, 95, 174, .08); transform: translateY(-2px); }
.feature-card > i { font-size: 2rem; color: var(--pbb-green); display: block; margin-bottom: 1rem; }
.feature-card p { color: var(--pbb-muted); }

.link-arrow { font-weight: 600; color: var(--pbb-blue); text-decoration: none; }
.link-arrow::after { content: " \2192"; }

.pluim-card { border: 1px solid var(--pbb-line); border-radius: 1rem; overflow: hidden; }
.pluim-card .card-img-top { aspect-ratio: 4 / 3; object-fit: cover; }
.pluim-foto { display: block; overflow: hidden; }
.pluim-foto img { transition: transform .3s; }
.pluim-foto:hover img { transform: scale(1.03); }
.pluim-leeg { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--pbb-tint); color: var(--pbb-line); font-size: 4rem; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.project-card { padding: 1.5rem; border-radius: 1rem; background: #fff; border: 1px solid var(--pbb-line); }
.project-card > i { font-size: 1.6rem; color: var(--pbb-blue); display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--pbb-tint); margin-bottom: .9rem; }
.project-card p { color: var(--pbb-muted); }

.side-box { background: var(--pbb-tint); border-radius: 1rem; padding: 1.75rem; }
.section-tint .side-box { background: #fff; }
@media (min-width: 992px) { .side-sticky { position: sticky; top: 7.5rem; } }

.callout { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; border-radius: 1rem; background: #eef6ec; border: 1px solid #cfe3cb; }
.callout > i { font-size: 1.75rem; color: var(--pbb-green); }

.check-list { list-style: none; padding-left: 0; }
.check-list li { position: relative; padding-left: 1.75rem; margin-bottom: .5rem; }
.check-list li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: var(--pbb-green); }

/* Jaarnavigatie pluimen */
.year-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.year-nav a { padding: .25rem .65rem; border-radius: 2rem; border: 1px solid var(--pbb-line); text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--pbb-ink); }
.year-nav a:hover { border-color: var(--pbb-blue); color: var(--pbb-blue); }
[id^="pluim-"] { scroll-margin-top: 7rem; }

/* Tijdlijn historie */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--pbb-line); }
.timeline li { position: relative; display: flex; gap: 1rem; padding: 0 0 1rem 1.5rem; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--pbb-blue); border: 2px solid #fff; }
.timeline-year { flex: 0 0 3.25rem; font-weight: 700; color: var(--pbb-blue); }

/* Bestuur */
.bestuur-list { list-style: none; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.bestuur-list li { display: flex; gap: .85rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--pbb-line); border-radius: .8rem; }
.avatar { flex: 0 0 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--pbb-blue); color: #fff; font-weight: 700; font-family: "Lora", serif; }

/* Contact */
.contact-list dt { font-weight: 700; margin-top: .75rem; }
.contact-list dt:first-child { margin-top: 0; }
.contact-list dt i { color: var(--pbb-blue); margin-right: .35rem; }
.contact-list dd { margin-left: 1.6rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.site-footer { background: #142235; color: #c9d3e0; padding: 3.5rem 0 2rem; font-size: .95rem; }
.site-footer h2 { color: #fff; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer li { margin-bottom: .35rem; }
.footer-heading { font-family: var(--bs-body-font-family) !important; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: #fff; margin-bottom: .9rem; }
.site-footer hr { border-color: rgba(255, 255, 255, .15); opacity: 1; margin: 2.5rem 0 1.25rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* Submenu */
.site-header .dropdown-menu { border: 1px solid var(--pbb-line); border-radius: .75rem; box-shadow: 0 .75rem 2rem rgba(20, 34, 53, .12); padding: .5rem; }
.site-header .dropdown-item { border-radius: .45rem; padding: .45rem .85rem; font-weight: 600; color: var(--pbb-ink); }
.site-header .dropdown-item:hover, .site-header .dropdown-item:focus { background: var(--pbb-tint); color: var(--pbb-blue); }
.site-header .dropdown-item.active { background: var(--pbb-blue); color: #fff; }
@media (min-width: 992px) {
    .site-header .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
    .site-header .dropdown > .dropdown-menu { top: 100%; }
}
@media (max-width: 991.98px) {
    .site-header .dropdown-menu { border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; }
}

/* Projectpagina's */
.breadcrumb-bar { background: #fff; border-bottom: 1px solid var(--pbb-line); padding: .75rem 0; font-size: .95rem; }
.breadcrumb-bar a { text-decoration: none; }
.project-page .section-title { margin-bottom: 1.5rem; }
.prose p { line-height: 1.7; }
.quote { border-left: 4px solid var(--pbb-green); padding: .5rem 0 .5rem 1.25rem; margin: 1.5rem 0; font-family: "Lora", Georgia, serif; font-size: 1.15rem; font-style: italic; color: var(--pbb-ink); }
.foto { margin: 0 0 1rem; }
.foto img { width: 100%; height: auto; border-radius: 1rem; display: block; box-shadow: 0 .25rem 1rem rgba(20, 34, 53, .08); transition: transform .3s; }
.foto a:hover img { transform: scale(1.015); }
.foto figcaption { font-size: .9rem; color: var(--pbb-muted); margin-top: .5rem; }
.foto-kaart img { aspect-ratio: 4 / 3; object-fit: cover; }
.feiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.feiten div { background: var(--pbb-tint); border-radius: .8rem; padding: 1rem .75rem; text-align: center; }
.feiten strong { display: block; font-family: "Lora", serif; font-size: 1.5rem; color: var(--pbb-blue); }
.feiten span { font-size: .85rem; color: var(--pbb-muted); }
.route { list-style: none; padding: 0; margin: 0; }
.route li { display: flex; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--pbb-line); }
.route-nr { flex: 0 0 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--pbb-blue); color: #fff; font-weight: 700; display: inline-grid; place-items: center; }
.route-nr-sm { flex-basis: 1.6rem; width: 1.6rem; height: 1.6rem; font-size: .8rem; vertical-align: middle; margin-right: .25rem; }
.timeline-time { flex-basis: 7.5rem; white-space: nowrap; }
.project-card { position: relative; }
.project-card-link { transition: border-color .2s, box-shadow .2s, transform .2s; }
.project-card-link:hover { border-color: var(--pbb-blue); box-shadow: 0 .75rem 1.5rem rgba(29, 95, 174, .08); transform: translateY(-2px); }
.project-card h3 a { color: inherit; text-decoration: none; }
.chip { display: inline-block; padding: .45rem 1rem; border-radius: 2rem; border: 1px solid var(--pbb-line); background: #fff; font-weight: 600; text-decoration: none; color: var(--pbb-ink); }
.chip:hover { border-color: var(--pbb-blue); color: var(--pbb-blue); }
.chip-primary { background: var(--pbb-blue); border-color: var(--pbb-blue); color: #fff; }
.chip-primary:hover { color: #fff; background: var(--pbb-blue-dark); }