/* ============================================================
   Webweek Theme Settings — gegenereerd door de plugin
   Pas dit bestand NIET handmatig aan; gebruik het CMS.
   ============================================================ */

:root {
    --body_background:       #ffffff;
        --bodyFont:    "Inter", sans-serif;    --headingFont: "Quicksand", sans-serif;    --body_font_size:        1.8rem;
    --body_line_height:      2.95rem;
    --body_font_weight:      300;
    --body_font_color:       #545454;
    --heading_color: #282828;
    --body_link_color:       #1e4d2b;
    --body_link_hover_color: #8da97e;

    --containerWidth:    1350px; --containerWidth_25:500px;
    --containerWidth_50: 900px; --containerWidth_75:1050px;
    --containerWidth_85: 1100px; --containerWidth_125:1450px;

    --primary:#1e4d2b; --primary_textcolor:#ffffff;
    --primary_headingcolor:#ffffff; --primary_linkcolor:#8da97e;
    --secondary:#3c6e47; --secondary_textcolor:#ffffff;
    --secondary_headingcolor:#ffffff; --secondary_linkcolor:#8da97e;
    --default:#8da97e; --default_textcolor:#f9f3e3;
    --default_headingcolor:#f9f3e3; --default_linkcolor:#f9f3e3;

    --heading_margin:30px; --heading_font_weight:700;
    --heading1_size:6.5rem; --heading1_line_height:1.0;
    --heading1_letter_spacing:-1px;        --heading2_size:4.6rem; --heading2_line_height:1.2;
    --heading2_letter_spacing:-1px;        --heading3_size:4.0rem; --heading3_line_height:1.2;
            --heading4_size:3.2rem; --heading4_line_height:1.3;
            --heading5_size:2.5rem; --heading5_line_height:1.4;
            --heading6_size:2.2rem; --heading6_line_height:1.35;
        
        --button_font_family:var(--headingFont); --button_radius:30px; --button_font_weight:600; --button_font_size:1.7rem;
    --button_height:55px; --button_padding:0 28px;
    --button_primary:#1e4d2b; --button_primary_text:#ffffff;
    --button_primary_hover:#0f2816; --button_primary_hover_text:#ffffff;
        --btn_primary_border:0px solid #1e4d2b; --btn_primary_hover_border:0px solid #1e4d2b;
    --button_secondary:#3c6e47; --button_secondary_text:#ffffff;
    --button_secondary_hover:#2b5133; --button_secondary_hover_text:#ffffff;
        --btn_secondary_border:0px solid #3c6e47; --btn_secondary_hover_border:0px solid #3c6e47;
    --button_default:#8da97e; --button_default_text:#f9f3e3;
    --button_default_hover:#6b845e; --button_default_hover_text:#ffffff;
        --btn_default_border:0px solid #8da97e; --btn_default_hover_border:0px solid #8da97e;

    --image_border_radius:10px;

    --nav_bg:transparent; --nav_height:125px;
    --nav_link:#ffffff; --nav_link_hover:#ffffff; --nav_link_active:#ffffff;
    --nav_font_size:1.7rem; --nav_font_weight:600;
    --nav_link_padding:16px;    --nav_dd_bg:#ffffff; --nav_dd_link:#1a1a1a;
    --nav_dd_link_active:#2271b1;
    --nav_dd_hover_bg:#f5f7fa; --nav_dd_hover_link:#2271b1;
    --nav_dd_radius:6px;

    --topbar_bg:#1a1a1a; --topbar_text:#ffffff;
    --topbar_link:#ffffff; --topbar_link_hover:#cccccc;
    --topbar_height:42px; --topbar_font_size:1.4rem;

    --mob_nav_bg:#1e4d2b;
    --mob_nav_link:#ffffff;
    --mob_nav_hover:#8da97e;
    --mob_nav_hover_bg:#0a3917;

    --input_height:60px; --input_font_size:1.7rem;
    --input_font_weight:400; --input_padding_h:15px;
    --input_border_width:1px; --input_border_color:#e5e5e5;
    --input_border_color_focus:#1e4d2b; --input_border_radius:8px;
    --input_background:#ffffff; --input_color:#1a1a1a;
    --input_placeholder_color:#aaaaaa; --textarea_height:140px;
}

/* ── Body & links ─────────────────────────────────────────── */
body{background:var(--body_background);font-family:var(--bodyFont);font-size:var(--body_font_size);line-height:var(--body_line_height);font-weight:var(--body_font_weight);color:var(--body_font_color);}
a{color:var(--body_link_color);text-decoration:none;}
a:hover{color:var(--body_link_hover_color);text-decoration:none;}

/* ── Headings ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:var(--headingFont);font-weight:var(--heading_font_weight);margin-top:0;margin-bottom:var(--heading_margin);color:var(--heading_color);}
h1,.h1{font-size:var(--heading1_size);line-height:var(--heading1_line_height);font-weight:var(--heading1_font_weight,var(--heading_font_weight));letter-spacing:var(--heading1_letter_spacing,-0.02em);text-wrap:balance;}
h2,.h2{font-size:var(--heading2_size);line-height:var(--heading2_line_height);font-weight:var(--heading2_font_weight,var(--heading_font_weight));letter-spacing:var(--heading2_letter_spacing,-0.01em);}
h3,.h3{font-size:var(--heading3_size);line-height:var(--heading3_line_height);font-weight:var(--heading3_font_weight,var(--heading_font_weight));letter-spacing:var(--heading3_letter_spacing,0);}
h4,.h4{font-size:var(--heading4_size);line-height:var(--heading4_line_height);font-weight:var(--heading4_font_weight,var(--heading_font_weight));letter-spacing:var(--heading4_letter_spacing,0);}
h5,.h5{font-size:var(--heading5_size);line-height:var(--heading5_line_height);font-weight:var(--heading5_font_weight,var(--heading_font_weight));letter-spacing:var(--heading5_letter_spacing,0);}
h6,.h6{font-size:var(--heading6_size);line-height:var(--heading6_line_height);font-weight:var(--heading6_font_weight,var(--heading_font_weight));letter-spacing:var(--heading6_letter_spacing,0);}

/* ── Achtergrond-klassen ──────────────────────────────────── */
.background_primary{background:#1e4d2b;color:#ffffff;}
.background_primary h1,.background_primary h2,.background_primary h3,.background_primary h4,.background_primary h5,.background_primary h6{color:#ffffff;}
.background_primary a:not(.btn){color:#8da97e;}
.background_primary a:not(.btn):hover{color:#ffffff;}
.background_primary .btn.btn-primary{background:#043311;color:#ffffff;}
.background_primary .btn.btn-primary:hover{background:#001a00;}
.background_secondary{background:#3c6e47;color:#ffffff;}
.background_secondary h1,.background_secondary h2,.background_secondary h3,.background_secondary h4,.background_secondary h5,.background_secondary h6{color:#ffffff;}
.background_secondary a:not(.btn){color:#8da97e;}
.background_secondary a:not(.btn):hover{color:#ffffff;}
.background_secondary .btn.btn-secondary{background:#22542d;color:#ffffff;}
.background_secondary .btn.btn-secondary:hover{background:#093b14;}
.background_default{background:#8da97e;color:#f9f3e3;}
.background_default h1,.background_default h2,.background_default h3,.background_default h4,.background_default h5,.background_default h6{color:#f9f3e3;}
.background_default a:not(.btn){color:#f9f3e3;}
.background_default a:not(.btn):hover{color:#000000;}
.background_default .btn.btn-default{background:#738f64;color:#f9f3e3;}
.background_default .btn.btn-default:hover{background:#5a764b;}
.background_white{background:#fff;color:#000;}.background_white h1,.background_white h2,.background_white h3,.background_white h4,.background_white h5,.background_white h6{color:#000;}
.background_black{background:#000;color:#fff;}.background_black h1,.background_black h2,.background_black h3,.background_black h4,.background_black h5,.background_black h6{color:#fff;}
.background_extra_2{background:#f3efe5;color:;}
.background_extra_2 h1,.background_extra_2 h2,.background_extra_2 h3,.background_extra_2 h4,.background_extra_2 h5,.background_extra_2 h6{color:!important;}
.background_extra_2 a:not(.btn){color:;}
.background_extra_2 a:not(.btn):hover{color:;}
.btn.btn-extra-2{background:#f3efe5;color:;border-radius:var(--button_radius);font-weight:var(--button_font_weight);}
.btn.btn-extra-2:hover{background:#d9d5cb;}
.background_extra_3{background:#d4a373;color:;}
.background_extra_3 h1,.background_extra_3 h2,.background_extra_3 h3,.background_extra_3 h4,.background_extra_3 h5,.background_extra_3 h6{color:!important;}
.background_extra_3 a:not(.btn){color:;}
.background_extra_3 a:not(.btn):hover{color:;}
.btn.btn-extra-3{background:#d4a373;color:;border-radius:var(--button_radius);font-weight:var(--button_font_weight);}
.btn.btn-extra-3:hover{background:#ba8959;}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--button_padding);height:var(--button_height);border-radius:var(--button_radius);font-family:var(--button_font_family,var(--bodyFont));font-weight:var(--button_font_weight);font-size:var(--button_font_size);text-decoration:none;cursor:pointer;transition:background 0.2s,color 0.2s,border-color 0.2s;line-height:1;box-sizing:border-box;}
.btn.btn-primary{background:var(--button_primary);color:var(--button_primary_text);border:var(--btn_primary_border);}
.btn.btn-secondary{background:var(--button_secondary);color:var(--button_secondary_text);border:var(--btn_secondary_border);}
.btn.btn-default{background:var(--button_default);color:var(--button_default_text);border:var(--btn_default_border);}
.btn.btn-white{background:#fff;color:#000;border:0;}.btn.btn-black{background:#000;color:#fff;border:0;}
.btn.btn-primary:hover{background:var(--button_primary_hover);color:var(--button_primary_hover_text);border:var(--btn_primary_hover_border);}
.btn.btn-secondary:hover{background:var(--button_secondary_hover);color:var(--button_secondary_hover_text);border:var(--btn_secondary_hover_border);}
.btn.btn-default:hover{background:var(--button_default_hover);color:var(--button_default_hover_text);border:var(--btn_default_hover_border);}
.btn:not(.no_after)::after{content:"›";font-size:1.6rem;margin-left:8px;vertical-align:middle;line-height:1;}
.btn.no_after::after{display:none !important;}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar{background:var(--topbar_bg);color:var(--topbar_text);min-height:var(--topbar_height);font-size:var(--topbar_font_size);display:flex;align-items:center;}
.topbar a{color:var(--topbar_link);text-decoration:none;transition:color 0.2s;}
.topbar a:hover{color:var(--topbar_link_hover);}
/* Topbar page builder altijd 100% breed */
.topbar #mpb-builder-frontend,.topbar .mpb-builder-frontend{width:100% !important;max-width:100% !important;}

/* Mobiel menu — bottom content fixed onderaan */
.mobile_navigation .ww-mob-bottom{
    flex-shrink:0;
    padding:14px 16px;
    border-top:1px solid #002e0c;
    background:#11401e;
    color:var(--mob-link);
}

/* ── Header ───────────────────────────────────────────────── */
header.header{position:relative;z-index:100;width:100%;}
header.header.is-sticky{position:fixed;top:0;left:0;right:0;z-index:999;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);will-change:transform;}
/* Verborgen staat (mode: verschijnen bij omhoog scrollen) */
header.header.is-sticky.ww-nav-hidden{transform:translateY(-100%);}

/* ── Navigation ───────────────────────────────────────────── */
.navigation{background:var(--nav_bg);height:var(--nav_height);display:flex;align-items:center;transition:background 0.35s ease,height 0.35s ease,box-shadow 0.35s ease;width:100%;position:relative;will-change:height,background;}
.navigation .container-fluid,.navigation .container{display:flex;align-items:center;width:100%;}

/* Brand / logo */
.navigation .brand,
.navigation .brand.d-inline-block{
    flex-shrink:0;margin-right:20px;
    display:flex !important;align-items:center;
}
.navigation .brand a{display:flex;align-items:center;text-decoration:none;}
.navigation .brand img{display:block;height:auto;max-width:none;}

/* Nav-wrapper — overschrijft Bootstrap d-inline-block
   KEY FIX: de inner .d-none.d-xl-inline-block wrapper moet ook flex + justify-content krijgen */
.navigation .the_nav,
.navigation .the_nav.d-inline-block{
    flex:1;
    display:flex !important;
    align-items:center;
    justify-content:center;
    font-family:var(--headingFont);
}
/* Overschrijf de Bootstrap .d-none.d-xl-inline-block inner wrapper */
.navigation .the_nav > div,
.navigation .the_nav > .d-none,
.navigation .the_nav > .d-xl-inline-block,
.navigation .the_nav > [class*="d-none"],
.navigation .the_nav > [class*="d-xl"]{
    display:flex !important;
    flex:1;
    width:100%;
    justify-content:center;
    align-items:center;
}
.navigation .the_nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;}
.navigation .the_nav ul li{position:relative;}
.navigation .the_nav ul li a:not(.btn) {
    color:var(--nav_link);
    font-size:var(--nav_font_size);
    font-weight:var(--nav_font_weight);
    padding:0 var(--nav_link_padding);
    display:flex;align-items:center;gap:5px;
    text-decoration:none;
    white-space:nowrap;
    height:var(--nav_height);
    line-height:1;
    transition:color 0.2s;
    position:relative;
    z-index:1;
}
.navigation .the_nav ul li a:not(.btn):hover{color:var(--nav_link_hover);}

/* Actieve menu-item kleur */
.navigation .the_nav ul li.current-menu-item>a,
.navigation .the_nav ul li.current_page_item>a,
.navigation .the_nav ul li.current-menu-ancestor>a,
.navigation .the_nav ul li.current-menu-parent>a{color:var(--nav_link_active);}

/* ── Dropdown arrow ───────────────────────────────────────── */
.navigation .the_nav ul li.menu-item-has-children>a>.ww-dd-arrow{
    display:inline-flex;align-items:center;justify-content:center;
    width:12px;height:12px;margin-left:4px;flex-shrink:0;
    position:relative;
    transition:transform 0.25s ease;
}
.navigation .the_nav ul li.menu-item-has-children>a>.ww-dd-arrow::before,
.navigation .the_nav ul li.menu-item-has-children>a>.ww-dd-arrow::after{
    content:'';position:absolute;bottom:2px;
    width:7px;height:2px;background:currentColor;border-radius:1px;
    transition:transform 0.25s ease,bottom 0.25s ease;
}
.navigation .the_nav ul li.menu-item-has-children>a>.ww-dd-arrow::before{left:0;transform:rotate(45deg);transform-origin:right center;}
.navigation .the_nav ul li.menu-item-has-children>a>.ww-dd-arrow::after{right:0;transform:rotate(-45deg);transform-origin:left center;}

/* ── Dropdown menu ────────────────────────────────────────── */
.navigation .the_nav ul li ul.sub-menu{
    display:block;
    visibility:hidden;
    position:absolute;top:100%;left:0;
    min-width:220px;        background:var(--nav_dd_bg);
    border-radius:var(--nav_dd_radius);
    padding:6px 0;
    z-index:9999;
    box-shadow:0 8px 32px rgba(0,0,0,0.13);    opacity:0;
    transform:translateY(-8px);
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    pointer-events:none;
}
/* Brug: voorkomt dat dropdown sluit als muis tussen link en menu beweegt */
.navigation .the_nav ul li.menu-item-has-children::after{
    content:'';position:absolute;
    top:calc(100% - 6px);left:0;right:0;height:10px;
    z-index:9998;
}
.navigation .the_nav ul li ul.sub-menu li a{
    height:auto !important;
    padding:11px 20px !important;
    color:var(--nav_dd_link);
    font-size:calc(var(--nav_font_size) * 0.9);
    white-space:nowrap;
    display:block !important;
}
.navigation .the_nav ul li ul.sub-menu li a:hover{background:var(--nav_dd_hover_bg);color:var(--nav_dd_hover_link);}
.navigation .the_nav ul li ul.sub-menu li.current-menu-item>a,
.navigation .the_nav ul li ul.sub-menu li.current_page_item>a{color:var(--nav_dd_link_active);}
.navigation .the_nav ul li ul.sub-menu li{position:relative;}
.navigation .the_nav ul li ul.sub-menu li ul.sub-menu{top:0;left:100%;}

/* Hover trigger — toon met animatie */
.navigation .the_nav ul li.menu-item-has-children:hover>ul.sub-menu{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
    pointer-events:auto;
}

/* Mobiele breakpoint — hamburger zichtbaarheid & nav collapse */
@media(min-width:1200px){
    .navbar-toggler.collapse_mobile_menu{display:none !important;}
}
@media(max-width:1199px){
    .navigation .the_nav > .d-none,
    .navigation .the_nav > [class*="d-xl"]{display:none !important;}
}

/* ── Megamenu ─────────────────────────────────────────────── */
/* li met class 'megamenu' → position:static zodat dropdown nav-breed is */
li.megamenu{position:static !important;}
.megamenu-dropdown{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    background:#ffffff;
    z-index:9999;
    display:none;
    opacity:0;
    transform:translateY(30px);
    pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease;
    box-shadow:0 8px 32px rgba(0,0,0,0.13);    border-top:2px solid #2271b1;
}
/* Overlay — z-index LAGER dan dropdown (9999), JS past z-index aan t.o.v. header */
.megamenu-overlay{
    position:fixed;
    inset:0;
    z-index:9998;
    display:none;
    background:#000000;
    opacity:0.4;
    pointer-events:none;
}
/* .active class: fade in van onderaf */
.megamenu-dropdown.active{
    display:block;
    animation:ww-mega-in 0.25s ease forwards;
    pointer-events:auto;
}
@keyframes ww-mega-in{
    from{opacity:0;transform:translateY(30px);}
    to{opacity:1;transform:translateY(0);}
}
/* Sluitanimatie: .closing houdt dropdown display:block terwijl die wegfadet */
.megamenu-dropdown.closing{
    display:block;
    pointer-events:none;
    animation:ww-mega-out 0.22s ease forwards;
}
@keyframes ww-mega-out{
    from{opacity:1;transform:translateY(0);}
    to{opacity:0;transform:translateY(20px);}
}
.megamenu-overlay{transition:opacity 0.25s ease;}
.megamenu-overlay.active{
    display:block;
    pointer-events:auto;
    animation:ww-overlay-in 0.25s ease forwards;
}
@keyframes ww-overlay-in{
    from{opacity:0;}
    to{opacity:0.4;}
}
/* Grid */
.megamenu-dropdown > .container,
.megamenu-dropdown > .container-fluid{padding-top:28px;padding-bottom:28px;}
.megamenu-grid{display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap;}
.megamenu-col{flex:1 1 0;min-width:100px;display:flex;flex-direction:column;}
/* Sub-list vult de resterende hoogte */
.megamenu-sub-list{flex:1;}
/* img-stretch: ALLEEN bij 100% hoogte instelling — vult de kolomhoogte */
.nav-item-img.img-stretch{
    flex:1;
    align-self:stretch;
    min-height:60px;
    object-fit:cover;
}
.megamenu-col > a.megamenu-col-title:has(.img-stretch){
    flex:1;
    display:flex;
    flex-direction:column;
}
/* Kolom-titel */
.megamenu-col > a,
.megamenu-col > a.megamenu-col-title{
    display:block;width:100%;height:auto;
    line-height:1.4;padding:0 0 8px;margin:0 0 10px;
    font-size:1.7rem;font-weight:600;
    color:#1a1a1a;
    text-decoration:none;background:none;transition:color 0.2s;
    white-space:normal;
}
/* Koptekst classes op col-title a */
.megamenu-col > a.h1,.megamenu-col > a.megamenu-col-title.h1{font-size:var(--heading1_size);margin-bottom:30px;}
.megamenu-col > a.h2,.megamenu-col > a.megamenu-col-title.h2{font-size:var(--heading2_size);margin-bottom:30px;}
.megamenu-col > a.h3,.megamenu-col > a.megamenu-col-title.h3{font-size:var(--heading3_size);margin-bottom:30px;}
.megamenu-col > a.h4,.megamenu-col > a.megamenu-col-title.h4{font-size:var(--heading4_size);margin-bottom:30px;}
.megamenu-col > a.h5,.megamenu-col > a.megamenu-col-title.h5{font-size:var(--heading5_size);margin-bottom:30px;}
.megamenu-col > a.h6,.megamenu-col > a.megamenu-col-title.h6{font-size:var(--heading6_size);margin-bottom:30px;}
.megamenu-col > a:hover,.megamenu-col > a.megamenu-col-title:hover{color:#2271b1;}
/* Alle li's en a's in de grid — display:block, normale hoogte, geen nav-styles */
.megamenu-grid li,.megamenu-sub-list li{
    display:block;width:100%;height:auto;
    line-height:1.4;margin:0;padding:0;
    border:none;background:none;float:none;
}
.megamenu-sub-list{list-style:none;margin:0;padding:0;}
.megamenu-grid li a,.megamenu-sub-list li a{
    display:block;width:100%;height:auto;
    line-height:1.4;padding:5px 0;
    color:#1a1a1a;font-size:calc(1.7rem * 0.9);
    font-weight:normal;text-decoration:none;
    background:none;border:none;transition:color 0.25s ease, padding-left 0.25s ease, background 0.25s ease;
    white-space:normal;
}
.megamenu-grid li a:hover,.megamenu-sub-list li a:hover{
    color:#2271b1;padding-left:5px;
}
/* Koptekst li in megamenu: margin + font-size via thema-variabelen */
.megamenu-grid li.h2 a, .megamenu-sub-list li.h2 a{ font-size:var(--heading2_size, 2rem); font-weight:600; }
.megamenu-grid li.h3 a, .megamenu-sub-list li.h3 a{ font-size:var(--heading3_size, 1.75rem); font-weight:600; }
.megamenu-grid li.h4 a, .megamenu-sub-list li.h4 a{ font-size:var(--heading4_size, 1.5rem); font-weight:600; }
.megamenu-grid li.h5 a, .megamenu-sub-list li.h5 a{ font-size:var(--heading5_size, 1.25rem); font-weight:600; }
.megamenu-grid li.h6 a, .megamenu-sub-list li.h6 a{ font-size:var(--heading6_size, 1.1rem); font-weight:600; }
/* Fallback: heading class direct op de <a> */
.megamenu-grid li a.h2,.megamenu-sub-list li a.h2{ font-size:var(--heading2_size, 2rem); font-weight:600; }
.megamenu-grid li a.h3,.megamenu-sub-list li a.h3{ font-size:var(--heading3_size, 1.75rem); font-weight:600; }
.megamenu-grid li a.h4,.megamenu-sub-list li a.h4{ font-size:var(--heading4_size, 1.5rem); font-weight:600; }
.megamenu-grid li a.h5,.megamenu-sub-list li a.h5{ font-size:var(--heading5_size, 1.25rem); font-weight:600; }
.megamenu-grid li a.h6,.megamenu-sub-list li a.h6{ font-size:var(--heading6_size, 1.1rem); font-weight:600; }
.megamenu-grid li.h2,.megamenu-grid li.h3,.megamenu-grid li.h4,
.megamenu-grid li.h5,.megamenu-grid li.h6,
.megamenu-sub-list li.h2,.megamenu-sub-list li.h3,.megamenu-sub-list li.h4,
.megamenu-sub-list li.h5,.megamenu-sub-list li.h6{margin:0 0 30px;}
/* Verbergen op mobiel */
@media(max-width:1199px){
    .megamenu-dropdown{display:none;}
}
/* ── Nav extra content ────────────────────────────────────── */
/* Responsief verbergen van losse nav-items via CSS custom property */
@media (max-width: 9999px) {
    .ww-nav-item--bp { display: inline-flex; }
}
/* Elk item met --ww-item-bp verbergt onder dat breekpunt */
.ww-nav-item--bp[style*="--ww-item-bp"] {
    display: inline-flex;
}
/* We use a JS approach for per-item breakpoints — see frontend script */

/* Extra menu in nav-extra — zelfde stijl als .the_nav */
.ww-nav-extra .ww-extra-menu{
    display:flex;
    align-items:center;
    list-style:none;
    margin:0;
    padding:0;
    gap:0;
}
.ww-nav-extra .ww-extra-menu li{
    display:flex;
    align-items:center;
}
.ww-nav-extra .ww-extra-menu li a{
    display:flex;
    align-items:center;
    height:var(--nav_height, 80px);
    padding:0 var(--nav_link_padding, 16px);
    color:var(--nav_link, #1a1a1a);
    font-size:calc(var(--body_font_size) * 0.95);
    font-weight:500;
    text-decoration:none;
    transition:color 0.2s ease;
    white-space:nowrap;
}
.ww-nav-extra .ww-extra-menu li a:hover{
    color:var(--nav_link_hover, #2271b1);
}
.ww-nav-extra .ww-extra-menu li.current-menu-item > a,
.ww-nav-extra .ww-extra-menu li.current_page_item > a{
    color:var(--nav_link_active, var(--nav_link_hover));
}

.ww-nav-extra{
    display:flex;
    align-items:center;
    font-family:var(--headingFont);
    font-size:var(--nav_font_size);
    flex-shrink:0;
    margin-left:auto;}
.ww-nav-extra a{color:var(--nav_link);text-decoration:none;transition:color 0.25s;}
.ww-nav-extra a:hover{color:var(--nav_link_hover);}
/* Geen margins op content in de nav — anders klopt de verticale uitlijning niet */
.ww-nav-extra p,
.ww-nav-extra h1,.ww-nav-extra h2,.ww-nav-extra h3,
.ww-nav-extra h4,.ww-nav-extra h5,.ww-nav-extra h6,
.ww-nav-extra ul,.ww-nav-extra ol,.ww-nav-extra li,
.ww-nav-extra div,.ww-nav-extra span{
    margin-bottom:0;
    margin-top:0;
}
/* Per-item zichtbaarheid wordt geregeld via JS (data-hide-bp / data-show-from).
   Geen globale media query op .ww-nav-extra — dat zou alle items tegelijk verbergen. */

/* ── Responsive nav hoogte ────────────────────────────────── */
@media(max-width:991px){
    :root{--nav_height:125px;}
}
@media(max-width:1199px){
    :root{--nav_height:75px;}
}

/* ── Padding breakpoints navigatielinks ───────────────────── */

/* ── Sticky nav ───────────────────────────────────────────── */

/* ── Logo breedte ─────────────────────────────────────────── */
@media(max-width:768px){.navigation .brand img{width:160px;height:auto;}}

/* ── Kleur utility classes ─────────────────────────────────── */
/* Tekstkleur */
.color-primary   { color: var(--primary); }
.color-secondary { color: var(--secondary); }
.color-default   { color: var(--default); }
/* Achtergrondkleur */
.bg-primary   { background: var(--primary);   color: var(--primary_textcolor); }
.bg-secondary { background: var(--secondary); color: var(--secondary_textcolor); }
.bg-default   { background: var(--default);   color: var(--default_textcolor); }
.color-extra-3   { color: #f3efe5; }
.bg-extra-3      { background: #f3efe5; color: ; }
.color-extra-4   { color: #d4a373; }
.bg-extra-4      { background: #d4a373; color: ; }


/* ── Openingstijden live status widget ────────────────────── */
.ot-live-wrap{display:inline-flex;flex-direction:column;gap:3px;}
.ot-status{display:flex;align-items:center;gap:7px;font-weight:600;}
.ot-next{font-size:0.9em;opacity:0.85;padding-left:19px;}
.ot-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.ot-dot.open{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,0.2);}
.ot-dot.closed{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.2);}

/* ── Navigatie custom CSS ─────────────────────────────────── */

/* ── Tekst-selectie ───────────────────────────────────────── */
::selection{background:#1e4d2b;color:#3c6e47;}
::-moz-selection{background:#1e4d2b;color:#3c6e47;}

/* ── Socials ──────────────────────────────────────────────── */
.socials a{
    display:inline-flex;align-items:center;justify-content:center;
    vertical-align:top;
    background:var(--primary);
    width:55px;height:55px;
    border-radius:50px;
    margin-right:11px;
    text-decoration:none;
    transition:background 0.2s,color 0.2s;
    flex-shrink:0;
}
.socials a:last-of-type{margin-right:0;}
.socials a svg{width:25px;height:25px;display:block;}
.socials a svg path{fill:#ffffff;}
.socials a:hover,.socials a:focus,.socials a:active{background:var(--default);}
@media(max-width:768px){
    .socials a svg{width:21px;height:21px;}
}

/* ── Hamburger toggle ─────────────────────────────────────── */
.navbar-toggler.collapse_mobile_menu{
    cursor:pointer;
    margin-left:15px;
    width:60px;
    height:60px;
    border-radius:30px;
    background:#1e4d2b;
    display:flex;align-items:center;justify-content:center;
    border:none;padding:0;flex-shrink:0;
    transition:opacity 0.2s;
    position:relative;
}
.navbar-toggler.collapse_mobile_menu:hover{opacity:0.85;}
.navbar-toggler.collapse_mobile_menu .inner{
    width:42px;
    display:flex;flex-direction:column;gap:5px;
}
/* 3 streepjes — 4e span verbergen */
.navbar-toggler.collapse_mobile_menu .inner span:nth-child(4){display:none;}
.navbar-toggler.collapse_mobile_menu .inner span{
    display:block;height:2px;
    background:#ffffff;
    border-radius:2px;
    transition:transform 0.3s ease, opacity 0.3s ease;
    transform-origin:center;
}
/* Close animatie (X) als .is-active */
.navbar-toggler.collapse_mobile_menu.is-active .inner span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navbar-toggler.collapse_mobile_menu.is-active .inner span:nth-child(2){opacity:0;transform:scaleX(0);}
.navbar-toggler.collapse_mobile_menu.is-active .inner span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── Mobiel menu overlay ──────────────────────────────────── */
.ww-mob-overlay{
    display:none;
    position:fixed;inset:0;
    background:#000000;
    opacity:0;z-index:99998;
    transition:opacity 0.32s ease;
}
.ww-mob-overlay.active{display:block;opacity:0.6;}

/* ── Mobiel menu (.mobile_navigation) — volledige structuur ─ */
.mobile_navigation{
    opacity:0;
    pointer-events:none;
    z-index:99999;
    position:fixed;
    top:0;bottom:0;
    right:0;left:auto;    width:85%;
    max-width:520px;
    transform:translateX(100%);
    transition:transform 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.32s ease;
    --mob-bg:#1e4d2b;
    --mob-link:#ffffff;
    --mob-hover:#8da97e;
    --mob-hover-bg:#0a3917;
}
.mobile_navigation.active{
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
}
/* Nav wrap */
.mobile_navigation .nav-wrap{
    font-family:inherit;
    background:var(--mob-bg);
    overflow:hidden;
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
}
.mobile_navigation .nav-viewport{overflow:hidden;position:relative;flex:1;}
.mobile_navigation .nav-track{display:flex;transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);will-change:transform;height:100%;}
.mobile_navigation .nav-panel{min-width:100%;flex-shrink:0;overflow-y:auto;}
/* Header balk */
.mobile_navigation .nav-header{
    display:flex;align-items:center;gap:10px;
    padding:14px 16px;
    border-bottom:1px solid #002604;
    background:#11401e;
    min-height:52px;
    flex-shrink:0;
}
.mobile_navigation .nav-back{
    display:flex;align-items:center;gap:6px;
    background:none;border:none;cursor:pointer;
    font-size:15px;font-weight:500;font-family:inherit;
    color:var(--mob-link);
    padding:4px 6px 4px 2px;border-radius:8px;
    flex-shrink:0;
    transition:color 0.15s,background 0.15s;
}
.mobile_navigation .nav-back:hover{color:var(--mob-hover);background:var(--mob-hover-bg);}
.mobile_navigation .nav-back svg{flex-shrink:0;}
.mobile_navigation .nav-title{font-size:15px;font-weight:500;color:#ffffff;flex:1;}
/* Sluitknop — via margin-left:auto altijd rechts in de flex-row, nooit overlappend */
.mobile_navigation .ww-mob-close{
    margin-left:auto;
    flex-shrink:0;
    background:none;border:none;cursor:pointer;
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    color:#ffffff;
    transition:background 0.15s;
}
.mobile_navigation .ww-mob-close:hover{background:rgba(0,0,0,0.1);}
/* Bottom content blok */
.mobile_navigation .ww-mob-bottom{
    flex-shrink:0;
    padding:14px 16px;
    border-top:1px solid #002e0c;
    background:#11401e;
    color:var(--mob-link);
}
.mobile_navigation .ww-mob-bottom a{color:var(--mob-hover);}
/* Nav lijst */
.mobile_navigation .nav-list{list-style:none;margin:0;padding:8px 0;}
.mobile_navigation .nav-list .nav-item{
    display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;min-height:48px;
    border-bottom:1px solid #043311;
    transition:background 0.12s;
}
.mobile_navigation .nav-list .nav-item:last-child{border-bottom:none;}
.mobile_navigation .nav-list .nav-item:hover{background:var(--mob-hover-bg);}
.mobile_navigation .nav-list .nav-item .item-label{
    font-size:15px;color:var(--mob-link);
    text-decoration:none;flex:1;padding:12px 0;
}
.mobile_navigation .nav-list .nav-item:hover .item-label{color:var(--mob-hover);}
.mobile_navigation .nav-list .nav-item .item-chevron{
    color:var(--mob-link);
    display:flex;align-items:center;flex-shrink:0;cursor:pointer;margin-left:8px;
}

/* ── Vaste WhatsApp knop ──────────────────────────────────── */
.ww-wa-fixed{
    position:fixed;
    right:20px;
    bottom:20px;
    width:56px;
    height:56px;
    border-radius:50%;
    background:#25d366;
    display:flex;align-items:center;justify-content:center;
    z-index:9990;
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
    transition:transform 0.2s ease,box-shadow 0.2s ease,opacity 0.2s ease;
    text-decoration:none;
    cursor:pointer;
}
.ww-wa-fixed:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,0.22);}
.ww-wa-fixed svg{width:29px;height:29px;flex-shrink:0;}
.ww-wa-fixed svg path,.ww-wa-fixed svg circle,.ww-wa-fixed svg polygon{fill:#ffffff;}
@media(max-width:768px){
    .ww-wa-fixed{
        width:48px;
        height:48px;
        right:16px;
        bottom:16px;
    }
    .ww-wa-fixed svg{width:25px;height:25px;}
}

/* ── Containers ───────────────────────────────────────────── */
.container,.container-default{max-width:var(--containerWidth);margin-right:auto;margin-left:auto;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);}
.container-25{max-width:var(--containerWidth_25);margin:0 auto;}
.container-50{max-width:var(--containerWidth_50);margin:0 auto;}
.container-75{max-width:var(--containerWidth_75);margin:0 auto;}
.container-85{max-width:var(--containerWidth_85);margin:0 auto;}
.container-125{max-width:var(--containerWidth_125);margin:0 auto;}
.container-fluid{padding-left:50px;padding-right:50px;width:100%;}
.container,.container-right,.container-fluid,.container-full,.container-fullwidth{.container_inner{width:100%;}}
.container-left,.container-right{padding-left:0;padding-right:0;}
@media(min-width:576px){.container-left{margin-left:0;margin-right:calc(50vw - 270px);}.container-right{margin-right:0;margin-left:calc(50vw - 270px);}}
@media(min-width:768px){.container-left{margin-left:0;margin-right:calc(50vw - 360px);}.container-right{margin-right:0;margin-left:calc(50vw - 360px);}}
@media(min-width:992px){.container-left{margin-left:0;margin-right:calc(50vw - 480px);}.container-right{margin-right:0;margin-left:calc(50vw - 480px);}}
@media(min-width:1200px){.container-left{margin-left:0;margin-right:calc(50vw - (var(--containerWidth) / 2));}.container-right{margin-right:0;margin-left:calc(50vw - (var(--containerWidth) / 2));}}
@media(max-width:1350px){.container-fluid{padding-left:30px;padding-right:30px;}}
@media(max-width:1300px){:root{--containerWidth:1175px;--containerWidth_125:1200px;}}
@media(max-width:1199px){:root{--containerWidth:1100px;--containerWidth_125:1125px;}}
@media(max-width:1100px){.container,.container-default,.container-25,.container-50,.container-75,.container-85,.container-125,.container-fluid{width:100%;padding-left:55px;padding-right:55px;box-sizing:border-box;}}
@media(max-width:991px){.container,.container-default,.container-25,.container-50,.container-75,.container-85,.container-125,.container-fluid{width:100%;padding-left:45px;padding-right:45px;box-sizing:border-box;}}
@media(max-width:768px){
    .container,.container-default,.container-25,.container-50,.container-75,.container-85,.container-125,.container-fluid,.container-left,.container-right{width:100%;max-width:100%;padding-left:25px;padding-right:25px;box-sizing:border-box;}
    .container-left,.container-right{padding-left:25px;max-width:100%;padding-right:0!important;}
}

/* ── Inputs & formulieren ─────────────────────────────────── */
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="number"],input[type="password"],input[type="search"],
input[type="date"],select{
    height:var(--input_height);
    font-size:var(--input_font_size);
    font-weight:var(--input_font_weight);
    padding:0 var(--input_padding_h);
    border:var(--input_border_width) solid var(--input_border_color);
    border-radius:var(--input_border_radius);
    background:var(--input_background);
    color:var(--input_color);
    width:100%;box-sizing:border-box;
    transition:border-color 0.15s,box-shadow 0.15s;
}
textarea{
    height:var(--textarea_height);
    font-family:var(--bodyFont, inherit) !important;
    font-size:var(--input_font_size);
    font-weight:var(--input_font_weight);
    padding:14px var(--input_padding_h);
    border:var(--input_border_width) solid var(--input_border_color);
    border-radius:var(--input_border_radius);
    background:var(--input_background);
    color:var(--input_color);
    width:100%;box-sizing:border-box;resize:vertical;
    transition:border-color 0.15s,box-shadow 0.15s;
}
input:focus,select:focus,textarea:focus{
    border-color:var(--input_border_color_focus);
    outline:none;
    box-shadow:0 0 0 3px #b7e6c440;
}
input::placeholder,textarea::placeholder{color:var(--input_placeholder_color);}

/* img border-radius verwijderd — gebruik eigen CSS */

/* ── Responsive — tablet ──────────────────────────────────── */
@media(max-width:991px){
    :root{
        --body_font_size:1.8rem;
        --body_line_height:3.2rem;
        --heading_margin:30px;--heading_font_weight:700;
        --heading1_size:5.7rem;--heading1_line_height:1.0;
        --heading1_letter_spacing:-1px;                --heading2_size:4.3rem;--heading2_line_height:1.05;
        --heading2_letter_spacing:0px;                --heading3_size:3.6rem;--heading3_line_height:1.2;
                        --heading4_size:2.2rem;--heading4_line_height:1.3;
                        --heading5_size:2.0rem;--heading5_line_height:1.4;
                        --heading6_size:1.8rem;--heading6_line_height:1.35;
                    }
}

/* ── Responsive — mobiel ──────────────────────────────────── */
@media(max-width:768px){
    :root{
        --body_font_size:1.6rem;
        --body_line_height:2.6rem;
        --heading_margin:25px;--heading_font_weight:700;
        --heading1_size:3.3rem;--heading1_line_height:1.1;
        --heading1_letter_spacing:0px;                --heading2_size:2.9rem;--heading2_line_height:1.2;
                        --heading3_size:2.6rem;--heading3_line_height:1.2;
                        --heading4_size:2.5rem;--heading4_line_height:1.3;
                        --heading5_size:2.2rem;--heading5_line_height:1.4;
                        --heading6_size:2.0rem;--heading6_line_height:1.35;
                    }
    .btn{height:46px;padding:0 20px;font-size:1.5rem;}
    input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
    input[type="number"],input[type="password"],input[type="search"],
    input[type="date"],select{height:48px;font-size:1.6rem;}
    textarea{height:110px;font-size:1.6rem;}
}

/* ── Custom CSS voor buttons (ALLERLAATSTE = hoogste prioriteit) ─── */