/*
Theme Name: De Buitenkans
Theme URI: https://www.kleuterschoolbossuit.be/
Author: Brecht Vervaeke
Author URI: https://www.kleuterschoolbossuit.be/
Description: WordPress thema gebaseerd op de stijl van Kleuterschool De Buitenkans in Bossuit. Gebouwd op het KidsM4 Mobirise thema-design.
Version: 1.3.1
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: buitenkans
Tags: education, kindergarten, green, nature, responsive
*/

/* ===========================
   THEMAKLEUREN (standaardwaarden)
   Aanpassen via Weergave → Customizer → Themakleuren
   =========================== */
:root {
    --kleur-groen:        #82bd5c;
    --kleur-groen-licht:  #b9eed5;
    --kleur-blauw-licht:  #45b3df;
    --kleur-blauw-donker: #12265a;
    --kleur-perzik:       #ffe5b2;
    --kleur-tekst:        #70747f;
    --kleur-wit:          #ffffff;
    --kleur-zwart:        #000000;
    --kleur-groen-rgb:        130, 189, 92;
    --kleur-blauw-donker-rgb: 18, 38, 90;

    --font-nunito: 'Nunito', sans-serif;
    --font-muli:   'Muli', sans-serif;

    --afgerond:      30px;
    --afgerond-klein: 10px;
    --afgerond-50:   50%;
    --container-max: 1200px;
    --pagina-kop-max: 1440px;

    --overgang: 0.4s;

    --menu-font-groot: 1.05rem;
    --menu-sub-font-groot: 0.95rem;
}

/* ===========================
   RESET & BASIS
   =========================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-muli);
    font-size: 16px;
    font-style: normal;
    line-height: 1.5;
    color: var(--kleur-tekst);
    background-color: var(--kleur-wit);
    position: relative;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    color: var(--kleur-groen);
    transition: color var(--overgang);
}

a:hover {
    text-decoration: none;
    color: var(--kleur-groen);
}

ul, ol {
    list-style: none;
}

b, strong {
    font-weight: bold;
}

figure {
    margin-bottom: 0;
    overflow: hidden;
}

/* ===========================
   TYPOGRAFIE (exact Mobirise)
   =========================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-nunito);
    line-height: 1;
    word-break: break-word;
    word-wrap: break-word;
    color: var(--kleur-blauw-donker);
}

h1.pagina-titel {
    word-break: normal;
    word-wrap: normal;
    overflow-wrap: normal;
}

/* display-1: zelden gebruikt */
.display-1 {
    font-family: var(--font-nunito);
    font-size: 0.4rem;
    font-weight: 900;
    letter-spacing: -2px;
}

/* display-2: grote titels, hero */
.display-2 {
    font-family: var(--font-nunito);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    word-break: break-word;
}

/* display-4: logo naam, kleine labels */
.display-4 {
    font-family: var(--font-muli);
    font-size: 1rem;
    line-height: 1;
}

/* display-5: sectieopschriften, WELKOM-label */
.display-5 {
    font-family: var(--font-nunito);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.1;
}

/* display-7: navigatielinks, bodytekst klein */
.display-7 {
    font-family: var(--font-muli);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0;
}

.mbr-section-title {
    font-style: normal;
    line-height: 1.1;
    color: var(--kleur-blauw-donker);
    margin-bottom: 0;
}

.mbr-section-subtitle {
    line-height: 1.3;
    color: var(--kleur-blauw-donker);
}

.mbr-text {
    font-style: normal;
    line-height: 1.6;
}

.mbr-white { color: var(--kleur-wit); }
.mbr-black { color: var(--kleur-zwart); }
.mbr-light { font-weight: 300; }
.mbr-bold  { font-weight: 700; }
.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }

/* Tekstkleurklassen */
.text-warning { color: var(--kleur-groen) !important; }
.text-primary { color: var(--kleur-blauw-donker) !important; }
.text-white   { color: var(--kleur-wit) !important; }

/* Achtergrondklassen */
.bg-success { background-color: var(--kleur-groen-licht) !important; }
.bg-warning { background-color: var(--kleur-groen) !important; }

/* ===========================
   LAYOUT
   =========================== */
.container-fluid {
    position: relative;
    word-wrap: break-word;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-fluid--vol {
    max-width: 100%;
}

.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.col-lg-12,
.col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* ===========================
   KNOPPEN
   =========================== */
.btn {
    color: initial;
    border-radius: 35px;
    font-family: var(--font-nunito);
    font-weight: 900;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.7;
    padding: 0.7rem 2.7rem;
    margin: 0.4rem 0.8rem;
    white-space: normal;
    transition: all 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    cursor: pointer;
    border: none;
}

.btn-warning,
.btn-warning:active {
    background-color: var(--kleur-groen) !important;
    border-color: var(--kleur-groen) !important;
    color: var(--kleur-wit) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--kleur-perzik) !important;
    border-color: var(--kleur-perzik) !important;
    color: var(--kleur-wit) !important;
}

.btn-success,
.btn-success:active {
    background-color: var(--kleur-groen-licht) !important;
    border-color: var(--kleur-groen-licht) !important;
    color: var(--kleur-zwart) !important;
}

/* Terug naar boven knop */
#scrollToTop {
    bottom: 25px;
    right: 30px;
    position: fixed;
    z-index: 5000;
}

#scrollToTop a {
    background: rgba(var(--kleur-groen-rgb), 0.8);
    border-radius: 50%;
    color: var(--kleur-wit);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    font-size: 1.4rem;
    font-weight: bold;
}

#scrollToTop a:hover {
    background-color: var(--kleur-groen);
}

/* ===========================
   HIGHLIGHT-LIJN ACHTER TEKST
   (line-bg-warning uit Mobirise)
   =========================== */
.line-bg-warning {
    background-size: 100% 0.521em;
    display: inline;
    margin: 0 -12px;
    padding: 0 12px;
    background-image: linear-gradient(to top,
        rgba(var(--kleur-groen-rgb), 0.5),
        rgba(var(--kleur-groen-rgb), 0.5));
    background-repeat: no-repeat;
    background-position: 0% 74%;
}

.line-bg-primary {
    background-size: 100% 0.521em;
    display: inline;
    margin: 0 -12px;
    padding: 0 12px;
    background-image: linear-gradient(to top,
        rgba(var(--kleur-blauw-donker-rgb), 0.25),
        rgba(var(--kleur-blauw-donker-rgb), 0.25));
    background-repeat: no-repeat;
    background-position: 0% 74%;
}

/* Paginatitel: één regel (markering op h1, geen inner span) */
/* ===========================
   COLOR BLOCK (contactpagina-titels)
   =========================== */
.color-block {
    background-color: var(--kleur-groen);
    display: inline;
    padding: 0.5rem 0.8rem;
    color: var(--kleur-wit);
    float: left;
    border-radius: var(--afgerond-klein);
    margin-right: 1rem;
    margin-top: 0.8rem;
    font-family: var(--font-nunito);
    font-weight: 900;
    font-size: 1.2rem;
}

/* ===========================
   HEADER / NAVBAR
   (exact cid-rHd4LPs6LH stijl)
   =========================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 11;
    background: var(--kleur-wit);
}

.site-header .navbar {
    display: flex;
    flex-wrap: nowrap;
    background: var(--kleur-wit);
    transition: none;
    min-height: 77px;
    padding: 0.5rem 0;
    align-items: center;
    justify-content: space-between;
}

.site-header .container-fluid {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    padding: 0.5rem 1rem;
}

/* Logo deel */
.menu-logo .navbar-brand {
    display: flex;
    align-items: center;
    min-height: 3.8rem;
    gap: 0.75rem;
    text-decoration: none;
}

.navbar-logo img,
.navbar-logo a img {
    height: 3rem !important;
    width: auto;
    display: block;
}

.logo-name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.logo-name .mbr-section-title {
    font-family: var(--font-muli);
    font-size: 1rem;
    font-weight: 700;
    color: var(--kleur-groen);
    margin-bottom: 0;
}

.logo-name .mbr-section-subtitle {
    font-family: var(--font-muli);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--kleur-blauw-donker);
}

/* Navigatielinks */
.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    gap: 0;
}

.nav-item {
    position: relative;
}

.nav-link.link {
    display: flex;
    align-items: center;
    padding: 0.7rem 0 !important;
    margin: 0 1.2rem !important;
    color: var(--kleur-blauw-donker);
    font-weight: 900;
    font-family: var(--font-nunito);
    font-size: var(--menu-font-groot);
    line-height: 1.35;
    text-transform: uppercase;
    transition: color var(--overgang);
    text-decoration: none;
    white-space: nowrap;
}

.site-header .nav-link.link.display-7 {
    font-size: var(--menu-font-groot);
    line-height: 1.35;
}

.nav-link.link.text-warning {
    color: var(--kleur-groen) !important;
}

.nav-link.link:hover {
    color: var(--kleur-groen) !important;
}

/* Geen persistente markering voor open/gekozen menu-items (alleen hover-kleur hierboven). */

/* Dropdown menu — exact Mobirise stijl met gestippelde groene rand */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: var(--kleur-wit);
    border: 2px dashed var(--kleur-groen);
    border-radius: 20px;
    padding: 0.6rem 0;
    z-index: 1000;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    overflow: hidden;
    list-style: none;
    margin: 0;
}

/* Onzichtbare brug: muis raakt submenu zonder dat dropdown sluit (Firefox/Chrome) */
@media (min-width: 993px) {
    .nav-item.dropdown::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 0.75rem;
        background: transparent;
        z-index: 999;
    }

    .dropdown.open > .dropdown-menu,
    .dropdown:hover > .dropdown-menu,
    .dropdown:focus-within > .dropdown-menu {
        display: block;
    }
}

/* De <li> wrapper rond elk submenu-item */
.dropdown-item-wrapper {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* De eigenlijke link */
.dropdown-item {
    display: block;
    padding: 5px 28px !important;
    margin: 0 !important;
    font-weight: 900;
    font-family: var(--font-nunito);
    font-size: var(--menu-sub-font-groot);
    color: var(--kleur-groen);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
    background: transparent;
    transition: color var(--overgang);
}

.site-header .dropdown-item.display-7 {
    font-size: var(--menu-sub-font-groot);
    line-height: 1.5;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:focus-visible {
    color: var(--kleur-blauw-donker);
    background: transparent;
    text-decoration: none;
}

/* Hamburger (mobiel) */
.navbar-toggler {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: absolute;
    left: 1rem;
    top: 1.5rem;
    width: 31px;
    height: 18px;
    z-index: 10;
}

.hamburger {
    position: relative;
    width: 30px;
    height: 18px;
}

.hamburger span {
    position: absolute;
    right: 0;
    width: 30px;
    height: 2px;
    background-color: var(--kleur-blauw-donker);
    transition: all 0.2s;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 8px; }
.hamburger span:nth-child(4) { top: 16px; }

/* Hamburger geopend animatie */
.navbar.opened .hamburger span:nth-child(1) {
    top: 8px; width: 0; opacity: 0; right: 50%;
}
.navbar.opened .hamburger span:nth-child(2) {
    transform: rotate(45deg);
}
.navbar.opened .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
}
.navbar.opened .hamburger span:nth-child(4) {
    top: 8px; width: 0; opacity: 0; right: 50%;
}

/* ===========================
   HERO SECTIE
   (exact cid-rGu1lE6miU stijl)
   =========================== */
.hero-sectie {
    position: relative;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 380px;
    overflow: hidden;
}

.hero-sectie .container-fluid {
    max-width: var(--container-max);
    position: relative;
    z-index: 2;
    padding: 5rem 1.5rem 6rem;
}

.hero-sectie .wrapper-left {
    text-align: left;
}

.hero-sectie .mbr-section-subtitle {
    color: var(--kleur-perzik);
    font-family: var(--font-nunito);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.2;
    max-width: 700px;
}

/* Golvend SVG onderaan hero (exact path van site) */
.hero-sectie .svg-1 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}

.hero-sectie .svg-1 path {
    fill: var(--kleur-wit);
}

/* ===========================
   INFO BALK / TITLE1 SECTIE
   =========================== */
.info-sectie {
    background-color: var(--kleur-wit);
    padding: 2.5rem 1.5rem 2rem;
    position: relative;
}

.info-sectie .container-fluid {
    max-width: var(--container-max);
}

.info-sectie .col-center {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.info-sectie .mbr-section-title {
    font-family: var(--font-nunito);
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--kleur-blauw-donker);
    line-height: 1.6;
}

/* ===========================
   WELKOM / FEATURES8 SECTIE
   (exact cid-sGPBL5ODu2 stijl)
   =========================== */
.welkom-sectie {
    background-color: var(--kleur-groen-licht);
    position: relative;
    overflow: visible;
}

.welkom-sectie .container-fluid {
    max-width: var(--container-max);
    padding: 0 1.5rem;
}

.welkom-sectie .wrapper-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.welkom-sectie .imageContainer {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 2rem 0 2rem 3rem;
    margin: -42px 0;
}

.welkom-sectie .imageContainer img {
    width: 100%;
    object-fit: cover;
    border-radius: var(--afgerond);
    display: block;
}

.welkom-sectie .right-wrapper {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 2rem 2rem 2rem 3.5rem;
}

/* Gestippelde rand op de wrapper-block */
@media (min-width: 767px) {
    .welkom-sectie .wrapper-block {
        border: 2px dashed var(--kleur-groen);
        border-radius: var(--afgerond);
    }
}

.welkom-sectie .mbr-section-title {
    margin-bottom: 1rem;
}

.welkom-sectie .mbr-section-subtitle {
    margin-bottom: 1.2rem;
    color: var(--kleur-blauw-licht);
    font-weight: 900;
}

.welkom-sectie p {
    font-family: var(--font-muli);
    color: var(--kleur-tekst);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.welkom-sectie .display-5 {
    color: var(--kleur-blauw-donker);
    margin-bottom: 1rem;
}

.welkom-sectie em {
    font-style: italic;
    font-weight: normal;
}

/* ===========================
   IMAGE SECTIES (image1, image2)
   =========================== */
.image-sectie {
    position: relative;
    background-color: var(--kleur-wit);
}

.image-sectie .container-fluid {
    max-width: var(--container-max);
    padding: 2rem 1.5rem;
}

.image-sectie .image-block img {
    width: 100%;
    border-radius: var(--afgerond);
    object-fit: cover;
}

.image-sectie--vol .image-block img {
    width: 100%;
    border-radius: 0;
}

/* ===========================
   FOOTER
   (exact cid-sGPBp04mM8 stijl)
   =========================== */
.site-footer {
    background-color: var(--kleur-groen-licht);
    padding-top: 75px;
    padding-bottom: 15px;
    position: relative;
}

.site-footer svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.site-footer .svg-1,
.site-footer .cls-footer-1 {
    fill: var(--kleur-blauw-licht);
}

.site-footer .container-fluid {
    max-width: var(--container-max);
    position: relative;
    z-index: 1;
}

.site-footer .mbr-text {
    color: var(--kleur-blauw-donker);
    font-family: var(--font-muli);
    font-size: 0.8rem;
    line-height: 2;
    text-align: center;
}

.site-footer a {
    color: var(--kleur-blauw-donker);
}

.site-footer a:hover {
    color: var(--kleur-groen);
}

@media (max-width: 767px) {
    .site-footer {
        padding-top: 25px;
        padding-bottom: 5px;
    }
}

/* ===========================
   PAGINA-HEADER (subpagina's)
   =========================== */
.pagina-header {
    background: linear-gradient(135deg, var(--kleur-groen-licht), rgba(var(--kleur-groen-rgb), 0.2));
    padding: 3rem 1.5rem;
    text-align: left;
    position: relative;
}

.pagina-header .container,
.pagina-header .container-fluid {
    max-width: var(--pagina-kop-max);
}

.pagina-header h1,
.pagina-header .pagina-header__titel {
    font-family: var(--font-nunito);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--kleur-blauw-donker);
    line-height: 1.05;
    margin-bottom: 0.5rem;
    width: auto;
    max-width: none;
    white-space: nowrap;
    text-wrap: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: manual;
}

.pagina-header h1 span.line-bg-warning,
.pagina-header h1 span.line-bg-warning--titel {
    display: inline-block;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    text-wrap: nowrap;
    word-break: keep-all;
    box-decoration-break: slice;
}

/* Volledige breedte voor paginatitels (boven kolomlayout) */
.pagina-kop > .container-fluid,
.pagina-kop .container-fluid {
    max-width: var(--pagina-kop-max);
}

.pagina-kop .pagina-titel-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 2.5rem 0 1.25rem;
    overflow-x: auto;
    overflow-y: visible;
}

h1.pagina-titel {
    display: inline-block;
    width: max-content;
    max-width: none;
    margin: 0;
    padding: 0 12px;
    font-family: var(--font-nunito);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1.05;
    color: var(--kleur-blauw-donker);
    white-space: nowrap;
    text-wrap: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    word-wrap: normal;
    hyphens: manual;
    background-size: 100% 0.521em;
    background-image: linear-gradient(
        to top,
        rgba(var(--kleur-groen-rgb), 0.5),
        rgba(var(--kleur-groen-rgb), 0.5)
    );
    background-repeat: no-repeat;
    background-position: 0 74%;
}

.pagina-kop .pagina-kop__split {
    align-items: stretch;
}

.pagina-header h3 {
    font-family: var(--font-nunito);
    font-size: 2rem;
    font-weight: 900;
    color: var(--kleur-blauw-donker);
    margin-bottom: 0.5rem;
}

/* ===========================
   INHOUD PAGINA'S
   =========================== */
.pagina-inhoud {
    padding: 2rem 1.5rem 3rem;
    position: relative;
    background-color: var(--kleur-wit);
}

/* Startpagina: alleen editor-inhoud, geen thema-titel of uitgelichte afbeelding */
.pagina-inhoud--start {
    padding: 0;
}

.pagina-inhoud--start .entry-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.pagina-inhoud--start .entry-content .wp-block-image img,
.pagina-inhoud--start .entry-content img {
    width: 100%;
    height: auto;
    display: block;
}

.pagina-inhoud--start .entry-content.pagina-inhoud-melding {
    font-family: var(--font-muli);
    color: var(--kleur-tekst);
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--kleur-groen-licht);
    border-radius: var(--afgerond-klein);
}

.pagina-inhoud--start .pagina-inhoud-lead {
    font-family: var(--font-muli);
    font-size: 1.125rem;
    color: var(--kleur-tekst);
    margin-bottom: 1.5rem;
}

.pagina-inhoud--start .pagina-inhoud-fallback-afb img {
    border-radius: var(--afgerond);
}

.pagina-inhoud .container-fluid {
    max-width: var(--container-max);
}

.pagina-inhoud h2,
.pagina-inhoud h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: var(--font-nunito);
    color: var(--kleur-blauw-donker);
}

.pagina-inhoud p {
    font-family: var(--font-muli);
    color: var(--kleur-tekst);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.pagina-inhoud ul,
.pagina-inhoud ol {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    font-family: var(--font-muli);
    color: var(--kleur-tekst);
}

.pagina-inhoud ol { list-style: decimal; }

.pagina-inhoud strong {
    color: var(--kleur-blauw-donker);
}

.pagina-inhoud blockquote {
    border-left: 3px solid var(--kleur-groen);
    padding: 10px 0 10px 20px;
    font-style: italic;
    font-size: 1.09rem;
    margin-bottom: 2.3rem;
}

.pagina-inhoud hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 1.5rem 0;
}

/* ===========================
   CONTACT PAGINA STIJL
   (exact cid-sqYZNgsAn1 / header2)
   =========================== */
.contact-sectie {
    position: relative;
    background-color: var(--kleur-wit);
}

.contact-sectie .container-fluid {
    max-width: var(--container-max);
    padding: 0 1.4rem;
}

.contact-sectie.pagina-kop .container-fluid,
.welkom-sectie.pagina-kop .container-fluid {
    max-width: var(--pagina-kop-max);
}

.contact-sectie .row {
    align-items: stretch;
}

.contact-sectie .imageContainer {
    flex: 0 0 50%;
    max-width: 50%;
    display: inline-block;
    position: relative;
    z-index: 0;
}

.contact-sectie .imageContainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 96%;
    height: 100%;
    border: 2px dashed var(--kleur-groen);
    border-radius: var(--afgerond);
    z-index: -1;
}

.contact-sectie .imageContainer img {
    width: 100%;
    border-radius: var(--afgerond);
}

.contact-sectie .right-wrapper {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 2rem 1.4rem 2rem 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-sectie .mbr-text {
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
}

/* Contactinhoud sectie (content2) */
.contactinfo-sectie {
    background-color: var(--kleur-groen-licht);
    padding: 3rem 1.5rem;
}

.contactinfo-sectie .container-fluid {
    max-width: var(--container-max);
}

.contactinfo-sectie p {
    font-family: var(--font-muli);
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--kleur-tekst);
}

/* ===========================
   TEAM PAGINA
   (circle afbeeldingen)
   =========================== */
.team-sectie {
    position: relative;
    background-color: var(--kleur-wit);
}

.team-sectie .container-fluid {
    max-width: var(--container-max);
    padding: 2rem 1.5rem;
}

.team-sectie .img-wrapper {
    width: 220px;
    height: 220px;
    position: relative;
    border: 2px solid var(--kleur-groen);
    border-radius: 50%;
    transition: padding 0.5s;
    overflow: hidden;
    margin: 0 auto 1rem;
}

.team-sectie .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.team-sectie .content-row:hover .img-wrapper {
    padding: 12px;
}

/* ===========================
   SPONSORS SECTIE
   =========================== */
.sponsors-sectie {
    background-color: var(--kleur-groen-licht);
    padding: 3rem 1.5rem;
}

.sponsors-sectie .container-fluid {
    max-width: var(--container-max);
}

.sponsors-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    align-items: center;
    justify-items: center;
}

.sponsor-logo {
    max-height: 100px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    filter: grayscale(30%);
    transition: filter 0.3s;
}

.sponsor-logo:hover {
    filter: grayscale(0%);
}

/* ===========================
   NIEUWS / ARCHIEF
   =========================== */
.nieuws-sectie {
    background-color: var(--kleur-wit);
    padding: 3rem 1.5rem;
}

.nieuws-sectie .container-fluid {
    max-width: var(--container-max);
}

.nieuws-sectie .sectie-titel {
    font-family: var(--font-nunito);
    font-size: 2rem;
    font-weight: 900;
    color: var(--kleur-blauw-donker);
    margin-bottom: 2rem;
    text-align: center;
}

.nieuws-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.nieuws-kaart {
    background-color: var(--kleur-wit);
    border-radius: var(--afgerond);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid rgba(var(--kleur-groen-rgb), 0.2);
}

.nieuws-kaart:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.nieuws-kaart__afbeelding {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.nieuws-kaart__afbeelding--placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--kleur-groen-licht), rgba(var(--kleur-groen-rgb), 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.nieuws-kaart__inhoud {
    padding: 1.5rem;
}

.nieuws-kaart__categorie {
    display: inline-block;
    background-color: var(--kleur-groen);
    color: var(--kleur-wit);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: var(--afgerond);
    margin-bottom: 0.75rem;
    font-family: var(--font-nunito);
}

.nieuws-kaart__titel {
    font-family: var(--font-nunito);
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--kleur-blauw-donker);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.nieuws-kaart__titel a {
    color: inherit;
}

.nieuws-kaart__titel a:hover {
    color: var(--kleur-groen);
}

.nieuws-kaart__datum {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.75rem;
    font-family: var(--font-muli);
}

.nieuws-kaart__samenvatting {
    font-size: 0.875rem;
    color: var(--kleur-tekst);
    line-height: 1.6;
    font-family: var(--font-muli);
}

/* ===========================
   RESPONSIEF DESIGN
   =========================== */
@media (max-width: 992px) {
    .navbar-toggler {
        display: block;
    }

    .navbar-collapse {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--kleur-blauw-donker);
        padding: 1rem;
        z-index: 999;
        max-height: 94vh;
        overflow-y: auto;
    }

    .navbar-collapse.show {
        display: block !important;
    }

    .navbar-nav {
        flex-direction: column;
        text-align: center;
    }

    .nav-item {
        clear: both;
    }

    .nav-link.link {
        color: var(--kleur-wit) !important;
        margin: 0.25rem 1rem !important;
        font-size: var(--menu-font-groot);
        line-height: 1.35;
    }

    .nav-link.link:hover {
        color: var(--kleur-wit) !important;
        background: var(--kleur-groen);
        border-radius: 5px;
    }

    .dropdown-menu {
        position: relative;
        top: 0;
        list-style: none;
        background: rgba(255,255,255,0.1) !important;
        border: 1px dashed rgba(var(--kleur-groen-rgb), 0.5) !important;
        box-shadow: none !important;
        width: 100%;
        text-align: center;
        border-radius: 10px;
        padding: 0;
        margin: 0;
        opacity: 0;
        max-height: 0;
        visibility: hidden;
        overflow: hidden;
        transition: opacity 0.25s, max-height 0.35s;
        margin-top: 0.25rem;
    }

    .dropdown.open > .dropdown-menu {
        display: block;
        opacity: 1;
        max-height: 500px;
        padding: 0.75rem 0;
        visibility: visible;
    }

    .dropdown:hover > .dropdown-menu {
        display: none;
    }

    .dropdown-item-wrapper {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .dropdown-item {
        color: var(--kleur-wit) !important;
        background: transparent;
        text-align: center;
    }

    .dropdown-item:hover {
        color: var(--kleur-perzik) !important;
        text-decoration: none;
    }

    .site-header .container-fluid {
        flex-wrap: wrap;
        position: relative;
    }

    .menu-logo {
        flex: 1;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .display-2 {
        font-size: calc(1.7rem + (3 - 1.7) * ((100vw - 20rem) / (48 - 20)));
        line-height: 1.4;
    }

    .display-5 {
        font-size: calc(1.07rem + (1.2 - 1.07) * ((100vw - 20rem) / (48 - 20)));
        line-height: 1.4;
    }

    .welkom-sectie .imageContainer {
        flex: 0 0 100%;
        max-width: 100%;
        margin: 0;
        padding: 1.5rem 1.5rem 0;
    }

    .welkom-sectie .right-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 1.5rem;
    }

    .contact-sectie .imageContainer,
    .contact-sectie .right-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .contact-sectie .right-wrapper {
        padding-left: 1.5rem;
    }

    .pagina-header h1,
    .pagina-header .pagina-header__titel,
    h1.pagina-titel {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
        line-height: 1.15;
        white-space: nowrap;
    }

    .hero-sectie .mbr-section-subtitle {
        font-size: 2rem;
    }
}

/* ===========================
   WORDPRESS-SPECIFIEKE STIJLEN
   =========================== */
.alignleft {
    float: left;
    margin: 0 1.5rem 1rem 0;
}

.alignright {
    float: right;
    margin: 0 0 1rem 1.5rem;
}

.aligncenter {
    display: block;
    margin: 1rem auto;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Paginering */
.paginering {
    text-align: center;
    padding: 2rem 0;
}

.paginering .page-numbers {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    margin: 0 0.2rem;
    border-radius: 50%;
    font-family: var(--font-nunito);
    font-weight: 900;
    font-size: 0.875rem;
    color: var(--kleur-blauw-donker);
    transition: all 0.2s;
    text-decoration: none;
}

.paginering .page-numbers:hover,
.paginering .page-numbers.current {
    background-color: var(--kleur-groen);
    color: var(--kleur-wit);
}

/* Paginatitel: harde garantie één regel (o.a. Firefox) */
.pagina-kop h1.pagina-titel {
    display: inline-block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
}