/* ======================================================================== */
/* BEST OF BOTH WORLDS: Yeti design, maar met Spacelab body-tekst           */
/* ======================================================================== */
body {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 16px !important;
    color: #343a40 !important; /* Duidelijk leesbaar donkergrijs */
    line-height: 1.6 !important; /* Prettige regelafstand voor lange teksten */
}

/* Zorg dat de header spierwit blijft (Yeti's 'light' is soms heel lichtgrijs) */
#navbar-main {
    background-color: #ffffff !important;
    background-image: none !important; 
    border: none !important; 
}

/* ======================================================================== */
/* ### FRONTPAGE SLIDESHOW (100% BREEDTE & SPLIDE FIXES)                    */
/* ======================================================================== */

/* 1. Verberg de play/pauze knop van Splide (overal) */
.splide__toggle {
    display:         none !important;
}

/* 2. Dwing ALLE header-regio's en blokken op de frontpage uit hun kaders */
.path-frontpage .featured-top,
.path-frontpage .featured-top [class*="container"],
.path-frontpage .featured-top .featured-top__inner,
.path-frontpage .region-featured-top,
.path-frontpage .region-featured-top [class*="container"],
.path-frontpage .featured-top .block,
.path-frontpage .splide,
.path-frontpage .splide__track {
    max-width:       100% !important;
    width:           100% !important;
    padding-left:    0    !important;
    padding-right:   0    !important;
    padding:         0    !important;
    margin:          0    !important;
}

/* 3. Reset de Bootstrap row marges om horizontale scrollbalken te voorkomen */
.path-frontpage .featured-top .row,
.path-frontpage .region-featured-top .row {
    margin-left:     0    !important;
    margin-right:    0    !important;
    max-width:       100% !important;
    width:           100% !important;
}

/* 4. Fix voor Splide afbeeldingen: dwing de foto superstrak in het kader */
.featured-top img,
.splide__slide img {
    display:         block !important;
    width:           100%  !important;
    height:          auto  !important;
    margin:          0     !important;
}

/* ======================================================================== */
/* ### RUIMTE TUSSEN SLIDESHOW EN CONTENT (BREADCRUMBS / TITEL)             */
/* ======================================================================== */

#main-wrapper {
    padding-top:     16px !important; 
}

@media (max-width: 991.98px) {
    #main-wrapper {
        padding-top: 8px  !important; 
    }
}

/* ======================================================================== */
/* ### UITLIJNING TEKST EN TITEL (LAYOUT BUILDER GUTTER FIX)                */
/* ======================================================================== */

.layout-builder__layout.row > div[class*="col-"]:first-child {
    padding-left:    0    !important;
}

/* ======================================================================== */
/* ### MOBIELE ZIJBALKEN (RUIMTE AAN DE ZIJKANTEN HERSTELLEN)               */
/* ======================================================================== */

@media (max-width: 991.98px) {
    .region-sidebar-first,
    .region-sidebar-second {
        padding-left:  15px !important;
        padding-right: 15px !important;
    }
}

/* ======================================================================== */
/* HEADER ACHTERGROND SPIERWIT MAKEN (Overschrijft Spacelab thema)          */
/* ======================================================================== */
#navbar-main {
    background-color: #ffffff !important;
    background-image: none !important; /* Verwijder het grijze verloopje */
    border: none !important; /* Verwijdert eventuele donkere randjes */
}

/* ======================================================================== */
/* ### STICKY HEADER & LOGO ANIMATIE FIX                                    */
/* ======================================================================== */

#header {
    position:         sticky  !important;
    top:              0       !important;
    z-index:          1030    !important; 
    background-color: #ffffff !important; 
    transition:       all 0.3s ease-in-out !important;
}

#header .navbar-brand img {
    transition:       all 0.3s ease-in-out !important;
    max-height:       80px    !important; 
    width:            auto    !important;
}

#header.scrolled .navbar-brand img {
    max-height:       50px    !important; 
}

/* ======================================================================== */
/* LOGO & HEADER STYLING (RESPONSIVE)                                       */
/* ======================================================================== */

/* ------------------------------------------------------------------------ */
/* 1. MOBIEL: Logo klein & naast menuknop houden                            */
/* ------------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  
  /* Logo max 180px op mobiel */
  .navbar-brand img,
  .navbar-brand img.img-fluid {
      max-width: 180px !important; 
      height: auto !important;
  }

  /* Zorg dat logo en menuknop op één regel blijven (Flexbox fix) */
  .navbar > .container {
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: space-between !important;
  }
}

/* ------------------------------------------------------------------------ */
/* 2. DESKTOP: Groot logo dat krimpt bij scrollen                           */
/* ------------------------------------------------------------------------ */
@media (min-width: 992px) {

  /* A. STARTPOSITIE (Bovenaan de pagina) - XL Versie */
  .navbar-brand img, 
  .navbar-brand img.img-fluid {
      max-width: 400px !important; /* Lekker groot beginnen */
      width: auto !important;
      height: auto !important;
      transition: all 0.4s ease-in-out !important; 
  }

  /* B. SCROLLED STAAT (Als je naar beneden scrollt) */
  /* Krimpt naar 150px voor meer leesruimte */
  body.scrolled .navbar-brand img,
  body.scrolled .navbar-brand img.img-fluid {
      max-width: 150px !important; 
  }
  
  /* C. HEADER ADEMT MEE (Padding) */
  header.navbar {
      transition: padding 0.4s ease-in-out;
      padding-top: 30px !important; /* Veel lucht rondom logo */
      padding-bottom: 30px !important;
  }
  
  /* Header klapt in bij scrollen */
  body.scrolled header.navbar {
      padding-top: 5px !important; 
      padding-bottom: 5px !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
  }
}

/* ======================================================================== */
/* ### MENU WISSELTRUC: SUPERFISH (DESKTOP) VS NATIVE (MOBIEL)              */
/* ======================================================================== */

/* 1. Verberg het Superfish menu op mobiele schermen */
/*
@media (max-width: 991.98px) {
    #block-bario-sub-mobielmenu-superfish {
        display: none !important;
    }
}
*/
/* 2. Verberg het reguliere (native) menu op grote schermen (desktop) */
@media (min-width: 992px) {
    #block-bario-sub-mobielmenu {
        display: none !important;
    }
}

/* 3. Verberg het Mobiele menu (native) op grote schermen (desktop) */
@media (min-width: 992px) {
    #block-bario-sub-mobielmenu-superfish {
        display: none !important;
    }
}

/* ======================================================================== */
/* ### MOBIEL MENU STYLING (HAMBURGER RECHTS & 100% BREEDTE)                */
/* ======================================================================== */

@media (max-width: 991.98px) {
    .navbar {
        width:           100% !important;
        justify-content: space-between !important;
    }

    .navbar-toggler {
        margin-left:     auto !important;
    }

    .navbar-collapse {
        width:           100%    !important;
        flex-basis:      100%    !important;
        background-color:#ffffff !important;
        padding:         15px 20px !important;
        box-shadow:      0 10px 15px -3px rgba(0,0,0,0.1) !important;
    }
    
    .navbar-collapse .nav-item {
        border-bottom:   1px solid #f3f4f6 !important;
        padding-top:     8px !important;
        padding-bottom:  8px !important;
    }
    
    .navbar-collapse .nav-item:last-child {
        border-bottom:   none !important;
    }
}

/* ======================================================================== */
/* ### HEADERTOP ACHTERGROND (GRIJS VERWIJDEREN)                            */
/* ======================================================================== */
#header-top,
.region-header-top,
.header-top {
    background-color: #ffffff !important;
}

/* ======================================================================== */
/* ### STICKY HEADER & KRIMPEND LOGO (CSS DEEL)                             */
/* ======================================================================== */
#header {
    position:         sticky  !important;
    top:              0       !important;
    z-index:          1030    !important; 
    background-color: #ffffff !important; 
    transition:       all 0.3s ease-in-out !important;
    /* Standaard ruimte boven en onder, zodat hij straks kan krimpen */
/*  padding-top:      15px    !important;	*/
    padding-bottom:   15px    !important;
}

/* Zorgt voor een soepele overgang van het logo */
#header .navbar-brand img {
    transition:       all 0.3s ease-in-out !important;
    max-height:       80px    !important; 
    width:            auto    !important;
}

/* --- DE ACTIEVE SCROLL STATUS (Wordt door JavaScript aangezet) --- */
#header.scrolled {
    padding-top:      5px     !important;  /* Header balk wordt smaller */
    padding-bottom:   5px     !important;  /* Header balk wordt smaller */
    box-shadow:       0 4px 6px -1px rgba(0,0,0,0.1) !important; /* Mooi subtiel schaduwtje */
}

#header.scrolled .navbar-brand img {
    max-height:       50px    !important; /* Logo krimpt in */
}


/* ======================================================================== */
/* ### MOBIEL MENU: RUSTIGE & STABIELE "ALWAYS EXPANDED" LOOK               */
/* ======================================================================== */
@media (max-width: 991.98px) {
    /* 1. Reset container */
    #block-bario-sub-mobielmenu ul {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* 2. De Hoofdsecties (Parents: KAMPEN, OUDERS, etc.) */
    #block-bario-sub-mobielmenu ul li > a {
        display: block !important;
        width: 100% !important;
        padding: 12px 20px !important;
        color: #444444 !important;
        background-color: #f7f7f7 !important; /* Subtiel grijs vlak voor rust */
        border-bottom: 1px solid #e2e2e2 !important;
        border-left: 4px solid #cccccc !important; /* Neutrale indicator ipv Bold */
        font-weight: 500 !important; /* Minder zwaar dan bold */
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    /* 3. Submenu's altijd zichtbaar tonen */
    #block-bario-sub-mobielmenu ul li ul {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 4. De Submenu-items (Kind-items) */
    #block-bario-sub-mobielmenu ul li ul li a {
        display: block !important;
        padding: 12px 25px !important; /* Minimale inspringing voor rust */
        font-size: 15px !important;
        color: #555555 !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #f0f0f0 !important;
        text-transform: none !important;
        font-weight: 400 !important;
    }

    /* --- 5. STATUS EN FOCUS --- */

    /* Als de sectie actief is (Active Trail) -> Blauwe lijn */
    #block-bario-sub-mobielmenu ul li.menu-item--active-trail > a {
        border-left-color: #1a7b8c !important;
        color: #1a7b8c !important;
    }

    /* De Huidige Pagina (Subtiel Rood accent) */
    #block-bario-sub-mobielmenu ul li a.is-active {
        background-color: #fff0f3 !important; /* Zachte roze gloed */
        color: #b52b53 !important;
        font-weight: 600 !important;
        border-left: 4px solid #b52b53 !important;
        padding-left: 21px !important; /* Compensatie voor de rode lijn */
    }
}

/* ######################################################################## */
/* ### LAYOUT BALANS: SLIDESHOW, HEADER & BREADCRUMBS                       */
/* ######################################################################## */

/* 1. Sluit header aan op slideshow */
header#header,
#navbar-main {
    margin-bottom        : 0 !important;
    padding-bottom       : 0 !important;
}

/* 2. Slideshow marges: 5px boven voor ademruimte, 10px onder voor aansluiting */
.featured-top {
    margin-top           : 5px !important;  
    margin-bottom        : 10px !important; 
}

/* 3. Verwijder het grote gat boven de content/breadcrumbs */
#main-wrapper {
    margin-top           : 0 !important;
    padding-top          : 0 !important;
}

/* 4. Breadcrumbs: Verwijder top-marge, behoud ruimte naar de titel */
.breadcrumb {
    margin-top           : 0 !important;
    margin-bottom        : 15px !important;
    padding-top          : 0 !important;
}

/* 5. Mobiele correcties voor compacte weergave */
@media (max-width: 991.98px) {
    .featured-top {
        margin-top       : 0 !important;
        margin-bottom    : 5px !important;
    }
    
    .breadcrumb {
        margin-bottom    : 10px !important;
    }
    
    /* Zorg dat de paginatitel op mobiel niet tegen de breadcrumb plakt */
    #block-bario-sub-page-title {
        margin-top       : 5px !important;
    }
}

/* ######################################################################## */
/* ### FEATURE BOX EN MATERIAL ICONS                                        */
/* ######################################################################## */

/* 1. BASIS: De roze cirkel (altijd gecentreerd) */
.feature-box.secondary, 
p.feature-box.secondary.large {
    background-color: #c13c61 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    clear: both;
}

/* 2. MATEN: Groot en Klein */
.feature-box.secondary.large, 
p.feature-box.secondary.large { 
    width: 100px !important; 
    height: 100px !important; 
    margin-bottom: 15px !important;
}

.feature-box.secondary.small { 
    width: 60px !important; 
    height: 60px !important; 
}

/* 3. ICONEN: Wit en de juiste maat */
.feature-box.secondary .material-icons,
p.feature-box.secondary .material-icons {
    color: #ffffff !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.feature-box.secondary.large .material-icons { font-size: 55px !important; }
.feature-box.secondary.small .material-icons { font-size: 32px !important; }

/* 4. LAYOUT: Float-optie voor 'Icoon Links' */
.feature-box.secondary.float-start {
    float: left !important;
    margin-right: 20px !important;
    margin-bottom: 10px !important;
}

/* 5. DE BOX: Grijze rand en aansluiting op float */
.border.p-4.rounded {
    overflow: hidden !important; /* Voorkomt 'lekkage' onder het icoon */
    margin-top: 25px !important;
    clear: both;
}

/* Verwijder de marge van het laatste element in de box voor een strakke aansluiting */
.border.p-4.rounded > *:last-child {
    margin-bottom: 0 !important;
}

/* Optioneel: als je de box in het algemeen te hoog vindt, verlaag de padding */
.border.p-4.rounded {
    padding: 1.5rem !important; /* Dit is de standaard p-4, verlaag naar 1rem voor minder ruimte */
}

/* Verwijdert de extra marge van de laatste alinea in de box */
.border.p-4.rounded > *:last-child {
    margin-bottom: 0 !important;
}

/* Verlaag de algemene padding voor een compactere box */
.border.p-4.rounded {
    padding: 1.2rem !important;
}

/* 6. TITELS: Fix voor witruimte in of boven de box */
.border.p-4.rounded h2, 
.border.p-4.rounded .h2,
h2 + .border.p-4.rounded {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}