html body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Verdana  !important;
    font-size: 18px !important;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
}

.pop-out-color-primary {
    color: #1A2891;
}

.pop-out-color {
    color: #1A2891;
}

input[type=button],
input[type=submit] {
    background-color: #1A2891;
    color: #FFFFFF;
}

    input[type=button]:hover,
    input[type=submit]:hover {
        opacity: .6;
    }

body {
    color: #3F3F3F;
    background-color: #FFFFFF;
}

body a {
    color: #8D3175;
}

body a:hover {
    color: #3F3F3F;
} 

body .fc-event {
    border: 1px solid #8D3175;
}
.text-primary {
    color: #1A2891 !important;
}

.text-dark {
    color: #3F3F3F !important;
}

.right-column a:hover {
    text-decoration: none;
    color: #3F3F3F;
}

    .right-column a:hover .right-text {
        color: #3F3F3F;
    }

.right-column a .right-text {
    color: #CCCCCC;
}

.right-column .right-item {
    border-bottom: 1px solid #CCCCCC;
}

.getvideo:hover {
    background-color: #F7F4F5;
    color: #3F3F3F;
}

.content-container {
    background-color: #FFFFFF;
}

footer, .banner {
    background-color: #F7F4F5;
    border-color: #F7F4F5;
}

nav.navbar .nav-item.dropdown .dropdown-toggle::after {
    border-color: #1A2891;
}

.nav-item .nav-link {
    background-color: #FFFFFF;
    color: #3F3F3F !important;
}

.nav-item.dropdown .dropdown-toggle::after {
    border-color: #1A2891;
}

.nav-item.dropdown .dropdown-item, .nav-item.dropdown .dropdown-item:hover, .nav-item.dropdown .dropdown-item:focus {
    background-color: #F7F4F5;
    color: #3F3F3F;
}

    .nav-item.dropdown .dropdown-item:before {
        color: transparent;
    }

    .nav-item.dropdown .dropdown-item:not(.dropdown-toggle):hover:before {
        color: #1A2891;
    }

.nav-item.dropdown .dropdown-menu {
    color: #3F3F3F;
    background-color: #F7F4F5;
}

.nav-item.dropdown.show:after {
    color: #F7F4F5;
}

#search-bar {
    color: #3F3F3F;
}

    #search-bar .search {
        color: #3F3F3F;
    }

        #search-bar .search:hover {
            color: #1A2891;
        }

    #search-bar input[type=text] {
        border-bottom: 2px solid #3F3F3F;
    }

        #search-bar input[type=text]::placeholder {
            color: #CCCCCC;
        }

        #search-bar input[type=text]:-ms-input-placeholder {
            color: #CCCCCC;
        }

        #search-bar input[type=text]::-ms-input-placeholder {
            color: #CCCCCC;
        }

.tekst-blok a.card-a {
    color: #3F3F3F;
}

    .tekst-blok a.card-a:hover {
        color: #3F3F3F;
    }

    .tekst-blok a.card-a .meer-info, .tekst-blok a.card-a .feather-chevron-right {
        color: #8D3175;
    }

.tekst-blok .card {
    background-color: #FFFFFF;
}

body .hc-socials a {
    border: 2px solid #1A2891;
}

body .hc-socials a:hover,
body .hc-socials a:focus {
    background: #1A2891;
    color: #FFFFFF;
}

body .hc-socials a:focus svg,
body .hc-socials a:focus svg path,
body .hc-socials a:hover svg,
body .hc-socials a:hover svg path {
    color: #FFFFFF;
    stroke: #FFFFFF;
}

@media (max-width: 992px) {
    body .nav-item .nav-link, .navbar-collapse,
    body .nav-item.dropdown .dropdown-item,
    body .nav-item.dropdown .dropdown-item:hover,
    body .nav-item.dropdown .dropdown-item:focus,
    body .nav-item.dropdown .dropdown-menu,
    body nav.navbar .nav-item.dropdown .dropdown-menu,
    #search-bar-md input[type=text] {
        background: #1A2891;
        background-color: #1A2891;
        color: #FFFFFF !important;
        filter: brightness(100%);
    }

        #search-bar-md input[type=text]::placeholder {
            color: #FFFFFF !important;
            opacity: .6;
        }

        #search-bar-md input[type=text]:-ms-input-placeholder {
            color: #FFFFFF !important;
            opacity: .6;
        }

        #search-bar-md input[type=text]::-ms-input-placeholder {
            color: #FFFFFF !important;
            opacity: .6;
        }

    body nav.navbar .nav-item.dropdown .dropdown-toggle::after {
        border-color: #FFFFFF;
    }

    body .navbar-toggler:after, body .navbar-toggler:before,
    body .navbar-toggler div {
        background-color: #FFFFFF;
    }

    body .navbar-toggler.collapsed:after, body .navbar-toggler.collapsed:before,
    body .navbar-toggler.collapsed div {
        background-color: #3F3F3F;
    }
}

@media (min-width: 992px) {
    header {
        /*background-color: $main-bg-color;*/
    }

    .hasbanner .banner h1.navBanner {
        background-color: #FFFFFF;
        color: #1A2891;
    }
}
 /* ========================================== */
/* TITEL - WELKOM BIJ HERVORMD BENNEKOM (ALLEEN HOMEPAGE) */
/* Homepage detectie via banner afbeelding home_image.png */
/* ========================================== */

/* Witte achtergrond box - breder voor 2 regels */
.hasbanner:has(img[src*="home_image.png"]) h1.navBanner.parallax_scroll {
    position: absolute !important;
    top: calc(50% - 150px) !important;
    left: -100px !important;
    
    padding: 40px 50px !important;
    max-width: 750px !important;
    background-color: #FFFFFF !important;
    color: transparent !important;
    z-index: 10 !important;
    font-size: 0 !important;
    border-radius: 20px !important;
}

/* Eerste regel: Welkom bij (oranje) */
.hasbanner:has(img[src*="home_image.png"]) h1.navBanner.parallax_scroll::before {
    content: 'Welkom bij' !important;
    display: block !important;
    color: #E09507 !important;
    font-size: 56.826px !important;
    font-family: "Bree Serif", arial, sans-serif !important;
    font-weight: inherit !important;
    line-height: 1.1 !important;
}

/* Tweede regel: Hervormd Bennekom op één regel (blauw) */
.hasbanner:has(img[src*="home_image.png"]) h1.navBanner.parallax_scroll::after {
    content: 'Hervormd Bennekom' !important;
    display: block !important;
    color: #0066CC !important;
    font-size: 56.826px !important;
    font-family: "Bree Serif", arial, sans-serif !important;
    font-weight: inherit !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

/* Tablet/medium screens */
@media (max-width: 1024px) {
    .hasbanner:has(img[src*="home_image.png"]) h1.navBanner.parallax_scroll {
        left: -50px !important;
        max-width: 600px !important;
        padding: 30px 40px !important;
    }
    
    .hasbanner:has(img[src*="home_image.png"]) h1.navBanner.parallax_scroll::before,
    .hasbanner:has(img[src*="home_image.png"]) h1.navBanner.parallax_scroll::after {
        font-size: 42px !important;
    }
    
    .hasbanner:has(img[src*="home_image.png"]) h1.navBanner.parallax_scroll::after {
        white-space: normal !important;
    }
}

/* Mobile screens */
@media (max-width: 768px) {
    .hasbanner:has(img[src*="home_image.png"]) h1.navBanner.parallax_scroll {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        max-width: 100% !important;
        padding: 20px 30px !important;
        background-color: transparent !important;
        border-radius: 0 !important;
    }
    
    .hasbanner:has(img[src*="home_image.png"]) h1.navBanner.parallax_scroll::before,
    .hasbanner:has(img[src*="home_image.png"]) h1.navBanner.parallax_scroll::after {
        font-size: 36px !important;
        white-space: normal !important;
    }
}

/* Parent moet relative zijn voor absolute positioning */
.hasbanner:has(img[src*="home_image.png"]) .row.no-gutters .col-12.col-md-9 {
    position: relative !important;
}


/* ========================================== */
/* ALLE CARDS STANDAARD GRIJS + HOVER EFFECT */
/* ========================================== */
.card {
    background-color: #F9F4F5 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12) !important;
}

.card .card-body {
    padding: 40px !important;
}

/* ========================================== */
/* ORANJE CARD - "Eén gemeente, twee wijken" (ALLEEN HOMEPAGE) */
/* ========================================== */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(1) .card {
    background-color: #E09507 !important;
    border-radius: 20px !important;
    color: #333 !important;
    margin-bottom: 0 !important;
}
/* Meer padding rondom de tekst */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(1) 
.card .card-body { padding: 40px !important; }
/* Titel wit maken */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(1) .card h2.tekstblok_pagetitle {
    color: #FFFFFF !important;
}
/* Tekst wit maken */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(1) .card .card-text {
    color: #FFFFFF !important;
}


/* ================================ */
/* FULLSCREEN AFBEELDING CARD - "Welkom in de Oude Kerk" (ALLEEN HOMEPAGE) */
/* ================================ */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(2) .card.mb-4 {
    margin-bottom: 0 !important;
}
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(2) .card {
    padding: 0 !important;
    position: relative !important;
    min-height: 400px !important;
}
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(2) .card h2.tekstblok_pagetitle {
    display: none !important;
    margin: 0 !important;
}
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(2) .card .card-body {
    padding: 0 !important;
    margin: 0 !important;
}
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(2) .card .card-text {
    margin: 0 !important;
    padding: 0 !important;
}
/* Maak divAfbeelding fullscreen */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(2) .card .divAfbeelding {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
/* Maak afbeelding fullscreen */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(2) .card .divAfbeelding img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
}


/* ================================ */
/* BLAUW CARD - "Neem contact op" (ALLEEN HOMEPAGE) */
/* ================================ */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(5) .card {
    background-color: #1E3A6B !important;
    border-radius: 20px !important;
    margin-bottom: 0 !important;
}
/* Meer padding rondom de tekst */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(5) .card .card-body {
    padding: 40px !important;
}
/* Titel wit maken */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(5) .card h2.tekstblok_pagetitle {
    color: #FFFFFF !important;
}
/* Tekst wit maken */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(5) .card .card-text {
    color: #FFFFFF !important;
}
/* H4 ook wit */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(5) .card .card-text h4 {
    color: #FFFFFF !important;
}
/* Link wit maken */
.hasbanner:has(img[src*="home_image.png"]) .row .tekst-blok:nth-child(5) .card .card-text a {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* "Meer info >" op alle kaarten, behalve terugknoppen */
div.meer-info {
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
    color: #1A2891 !important;
}

:not(.terugknop) > div.meer-info::before {
    content: 'Lees meer\00a0' !important;
    display: inline !important;
}


/* ================================ */
/* HEADER AFBEELDINGEN IN CARDS - Hoger + rounded top corners */
/* ================================ */

/* ALLEEN afbeeldingen die IN een card zitten via .tekst-blok */
.tekst-blok .card .divAfbeelding img {
    height: 300px !important;
    object-fit: cover !important;
    border-radius: 20px 20px 0 0 !important;
}

/* Fix cursor voor menu items */
.navbar .nav-link,
.navbar .dropdown-toggle,
.navbar .dropdown-item {
    cursor: pointer !important;
}

/* Verwijder text cursor van spans in menu */
.navbar span.nav-link {
    cursor: pointer !important;
    user-select: none !important;
}

/* Hover effect voor hoofdmenu items */
.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
    color: #E09507 !important;
    transition: color 0.2s ease !important;
}

/* Dropdown menu styling */
.navbar .dropdown-menu {
    background-color: #F9F4F5 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 8px 0 !important;
    margin-top: 0 !important;
}

.navbar .dropdown-item {
    color: #333 !important;
    padding: 10px 20px !important;
    transition: background-color 0.2s ease !important;
}

.navbar .dropdown-item:hover {
    background-color: #E09507 !important;
    color: #FFFFFF !important;
}

.navbar .dropdown-item.active {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

/* Verberg Home's dropdown en sub-menu's */
.navbar .dropdown:first-child .dropdown-menu {
    display: none !important;
}

.navbar .dropdown-menu .sub-menu {
    display: none !important;
}

/* Fix mobiel menu - verwijder grijze achtergrond */
@media (max-width: 991px) {
    .navbar .dropdown-menu {
        background-color: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    .navbar .dropdown-item {
        background-color: transparent !important;
        color: #FFFFFF !important;
    }
    
    .navbar .dropdown-item:hover,
    .navbar .dropdown-item:active,
    .navbar .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #FFFFFF !important;
    }
}

/* Logo klikbaar maken */
.navbar-brand,
.navbar-brand img.logo {
    cursor: pointer !important;
}

/* Zorg dat nav-links (zoals Home) altijd klikbaar zijn */
.navbar .nav-link {
    cursor: pointer !important;
}

/* Zorg dat active links ook pointer hebben */
.navbar .nav-link.active {
    cursor: pointer !important;
}