/* ######################################################################## */
/* ### 1.0 SUPERFISH: BASIS LAYOUT & HOVER FUNCTIONALITEIT                  */
/* ######################################################################## */

/* ======================================================================== */
/* 1.1 HORIZONTAAL HOOFDMENU (DESKTOP)                                      */
/* ======================================================================== */

@media (min-width: 992px) {
    #navbar-main .block-superfishmain {
        display          : flex !important;
        justify-content  : flex-end !important;
        width            : 100% !important;
    }

    ul.sf-horizontal.sf-style-none {
        display          : flex !important;
        justify-content  : flex-end !important;
        margin           : 0;
        padding          : 0;
        list-style       : none !important;
    }

    ul.sf-horizontal.sf-style-none > li {
        background-color : #ffffff;
        border           : 1px solid #e2e2e2;
        border-bottom    : 2px solid #cccccc;
        position         : relative;
        margin-left      : 5px;
    }

    ul.sf-horizontal.sf-style-none > li > a {
        color            : #444444;
        padding          : 10px 18px;
        font-weight      : 500;
        text-transform   : uppercase;
        text-decoration  : none;
        display          : block;
    }

    /* Roze kleur voor actieve knop en bij hover op de hoofdknop */
    ul.sf-horizontal.sf-style-none > li:hover,
    ul.sf-horizontal.sf-style-none > li.sfHover,
    ul.sf-horizontal.sf-style-none > li.active-trail {
        background-color : #b52b53;
        border-color     : #9c2345;
    }

    ul.sf-horizontal.sf-style-none > li:hover > a,
    ul.sf-horizontal.sf-style-none > li.sfHover > a,
    ul.sf-horizontal.sf-style-none > li.active-trail > a {
        color            : #ffffff;
    }

    /* --- Submenu (Level 2, 3, etc.) - Gelijk aan zijbalk styling, zonder groen --- */
    ul.sf-horizontal.sf-style-none ul {
        background-color : #f9f9f9 !important;    
        border           : 1px solid #e2e2e2 !important;
        min-width        : 220px !important;
        position         : absolute !important;
        z-index          : 9999 !important;        
        display          : none;                   
        box-shadow       : 3px 3px 8px rgba(0,0,0,0.1) !important;
        padding          : 0 !important;
        list-style       : none !important;
        margin           : 0 !important;
    }

    /* Zorg dat het submenu verschijnt bij hover */
    ul.sf-horizontal.sf-style-none li:hover > ul,
    ul.sf-horizontal.sf-style-none li.sfHover > ul {
        display          : block !important;
    }

    ul.sf-horizontal.sf-style-none ul li {
        border-bottom    : 1px solid #e2e2e2 !important;
        width            : 100% !important;
    }

    ul.sf-horizontal.sf-style-none ul li a {
        color            : #444444 !important;    
        padding          : 12px 20px !important;
        text-decoration  : none !important;
        display          : block !important;
        font-size        : 16px !important;
        font-weight      : 400 !important;
        text-transform   : lowercase !important;
    }

    ul.sf-horizontal.sf-style-none ul li a::first-letter {
        text-transform   : uppercase !important;
    }

    /* Hover EN Active status in submenu: Altijd de grijstint van het main menu */
    ul.sf-horizontal.sf-style-none ul li a:hover,
    ul.sf-horizontal.sf-style-none ul li.sfHover > a,
    ul.sf-horizontal.sf-style-none ul li a.is-active {
        background-color : #e0e0e0 !important;     /* De bekende grijstint */
        color            : #000000 !important;     /* Tekst naar zwart voor contrast */
    }
}

/* ======================================================================== */
/* 1.2 VERTICAAL MENU (FALLBACK / BASIS)                                    */
/* ======================================================================== */

ul.sf-vertical,
ul.sf-vertical ul {
    list-style       : none !important;
    padding          : 0 !important;
    margin           : 0 !important;
}

ul.sf-vertical {
    background-color : #f9f9f9 !important;
    border           : 1px solid #e2e2e2 !important;
}

ul.sf-vertical li {
    border-bottom    : 1px solid #eeeeee !important;
    position         : relative !important;
}

ul.sf-vertical li a {
    display          : block !important;
    padding          : 10px 15px !important;
    color            : #007487 !important;
    font-weight      : 500 !important;
    text-decoration  : none !important;
}

ul.sf-vertical li.active-trail > a,
ul.sf-vertical a.is-active {
    background-color : #439f35 !important;
    color            : #ffffff !important;
}

ul.sf-vertical li a:hover,
ul.sf-vertical li.sfHover > a {
    background-color : #e0e0e0 !important;
    color            : #333333 !important;
}

/* ######################################################################## */
/* ### 2.0 MOBIEL MENU: ALWAYS EXPANDED (OFF-CANVAS)                        */
/* ######################################################################## */

@media (max-width: 991.98px) {
    #navbar-main .block-superfishmain,
    #block-bario-sub-mobielmenu-superfish h2 {
        display          : none !important;
    }

    #block-bario-sub-mobielmenu-superfish ul.sf-menu,
    #block-bario-sub-mobielmenu-superfish ul.sf-accordion {
        display          : block !important;
        width            : 100% !important;
        padding          : 0 !important;
        margin           : 0 !important;
        list-style       : none !important;
    }

    /* Forceer submenu's altijd open op mobiel */
    #block-bario-sub-mobielmenu-superfish ul li ul,
    #block-bario-sub-mobielmenu-superfish .sf-accordion ul {
        display          : block !important;
        visibility       : visible !important;
        opacity          : 1 !important;
        position         : static !important;
        width            : 100% !important;
        height           : auto !important;
        margin           : 0 !important;
        padding          : 0 !important;
    }

    #block-bario-sub-mobielmenu-superfish .sf-accordion-toggle,
    #block-bario-sub-mobielmenu-superfish .sf-sub-indicator {
        display          : none !important;
    }

    #block-bario-sub-mobielmenu-superfish ul li a,
    #block-bario-sub-mobielmenu-superfish ul li span {
        display          : block !important;
        width            : 100% !important;
        box-sizing       : border-box !important;
        padding          : 16px 20px !important;
        text-decoration  : none !important;
        border-bottom    : 1px solid rgba(255,255,255,0.2) !important;
    }

    /* Parents: Blauw */
    #block-bario-sub-mobielmenu-superfish ul > li > a,
    #block-bario-sub-mobielmenu-superfish ul > li > span {
        background-color : #1a7b8c !important;
        color            : #ffffff !important;
        font-weight      : 600 !important;
        text-transform   : uppercase !important;
    }

    /* Submenu items: Wit & Sentence Case */
    #block-bario-sub-mobielmenu-superfish ul ul li a {
        background-color : #ffffff !important;
        color            : #444444 !important;
        text-transform   : lowercase !important;
        font-weight      : 400 !important;
        border-bottom    : 1px solid #eeeeee !important;
    }

    #block-bario-sub-mobielmenu-superfish ul ul li a::first-letter {
        text-transform   : uppercase !important;
    }

    /* Active: Roze */
    #block-bario-sub-mobielmenu-superfish ul li a.is-active,
    #block-bario-sub-mobielmenu-superfish ul ul li a.is-active {
        background-color : #b52b53 !important;
        color            : #ffffff !important;
        font-weight      : 700 !important;
    }
}

/* ######################################################################## */
/* ### 3.0 MOBIEL EN ZIJBALK MENU'S: GEÏSOLEERDE STYLING                    */
/* ######################################################################## */

/* ======================================================================== */
/* 3.1 MOBIEL (OFF-CANVAS) SUPERFISH: 100% WIDTH & HOOGTE                   */
/* ======================================================================== */

@media (max-width: 991.98px) {
    #navbar-main .block-superfishmain,
    #block-bario-sub-mobielmenu-superfish h2 {
        display          : none !important;
    }

    /* Mobiele container: Volledige breedte hersteld */
    #block-bario-sub-mobielmenu-superfish ul.sf-menu,
    #block-bario-sub-mobielmenu-superfish ul.sf-accordion {
        display          : block !important;
        width            : 100% !important;
        padding          : 0 !important;
        margin           : 0 !important;
        list-style       : none !important;
    }

    #block-bario-sub-mobielmenu-superfish ul li a,
    #block-bario-sub-mobielmenu-superfish ul li span {
        display          : block !important;
        width            : 100% !important;
        box-sizing       : border-box !important;
        padding          : 18px 20px !important; /* Iets hoger voor mobiel */
        margin-left      : 0 !important;         /* Reset voor mobiele modal */
        text-decoration  : none !important;
        border-bottom    : 1px solid rgba(255,255,255,0.2) !important;
        color            : #444444 !important;   /* Grijs conform main menu */
    }

    /* Mobiele Parents: Blauw conform */
    #block-bario-sub-mobielmenu-superfish ul > li > a,
    #block-bario-sub-mobielmenu-superfish ul > li > span {
        background-color : #1a7b8c !important;
        color            : #ffffff !important;   
        font-weight      : 600 !important;
        text-transform   : uppercase !important;
    }

    /* Mobiele Submenu items: Wit */
    #block-bario-sub-mobielmenu-superfish ul ul li a {
        background-color : #ffffff !important;
        color            : #444444 !important;   
    }
}

/* ======================================================================== */
/* 3.2 ZIJBALK MENU'S (SIDEBAR & COL-3): STRUCTURELE VERSCHUIVING           */
/* ======================================================================== */

/* 1. Verschuif de gehele menu-box als één geheel naar links */
.region-sidebar-first ul.sf-vertical,
.col-lg-3 ul.sf-vertical {
    margin-left          : -15px !important;
    width                : calc(100% + 15px) !important; 
    padding              : 0 !important;
    border               : none !important;
}

/* 2. Lijn de blok-titels uit op de nieuwe linkerlijn van het menu */
.region-sidebar-first h2,
.col-lg-3 h2 {
    margin-left          : -15px !important;
    margin-bottom        : 15px !important;
    color                : #343a40 !important;
    font-weight          : 400 !important;
}

/* 3. Basis Styling Items: Padding zorgt voor tekst-uitlijning onder titel */
.region-sidebar-first ul li a,
.region-sidebar-first ul li span,
.col-lg-3 ul li a,
.col-lg-3 ul li span {
    display              : block !important;
    box-sizing           : border-box !important;
    /* 15px padding herstelt de tekstpositie visueel naar de '0-lijn' */
    padding              : 14px 15px !important;    
    margin               : 0 !important;
    /* Grijze basiskleur en tekstkleur conform main menu */
    background-color     : #f9f9f9 !important; 
    color                : #444444 !important;      
    font-size            : 16px !important;         
    font-weight          : 500 !important;          
    text-transform       : lowercase !important;    
    border-bottom        : 1px solid #e2e2e2 !important;
    text-decoration      : none !important;
    position             : relative !important;
    transition           : background-color 0.2s ease, color 0.2s ease !important;
}

.region-sidebar-first ul li a::first-letter,
.col-lg-3 ul li a::first-letter {
    text-transform       : uppercase !important;
}

/* 4. Submenu logica: Verbergen tenzij actief */
.region-sidebar-first ul li ul,
.col-lg-3 ul li ul {
    display              : none !important;
}

.region-sidebar-first ul li.active-trail > ul,
.col-lg-3 ul li.active-trail > ul {
    display              : block !important;
}

/* --- HOVER & ACTIEF STATUSSEN --- */

/* Hover: Grijstint conform hoofdmenu */
.region-sidebar-first ul li a:hover,
.col-lg-3 ul li a:hover {
    background-color     : #e0e0e0 !important;
    color                : #000000 !important;
}

/* Active Trail (Pad naar pagina): Lichte grijstint */
.region-sidebar-first ul li.active-trail > a,
.col-lg-3 ul li.active-trail > a {
    background-color     : #f2f2f2 !important; 
    color                : #000000 !important;
}

/* De huidige pagina: Thema Groen */
.region-sidebar-first ul li a.is-active,
.col-lg-3 ul li a.is-active {
    background-color     : #439f35 !important; 
    color                : #ffffff !important;
    font-weight          : 500 !important;
    border-bottom        : 1px solid #439f35 !important;
}

/* ======================================================================== */
/* 3.3 SUBTIEL INDICATOR DRIEHOEKJE                                         */
/* ======================================================================== */

.col-lg-3 ul li a.menuparent::after {
    content              : "" !important;
    position             : absolute !important;
    top                  : 50% !important;
    right                : 10px !important;
    transform            : translateY(-50%) !important;
    width                : 0 !important;
    height               : 0 !important;
    border-style         : solid !important;
    border-width         : 4px 0 4px 5px !important;
    border-color         : transparent transparent transparent #999999 !important;
}