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

:root {
    --body_background:       #000000;
    --bodyFont:              "Mulish", sans-serif;
    --headingFont:           "Playfair Display", sans-serif;
    --body_font_size:        1.7rem;
    --body_line_height:      2.9rem;
    --body_font_weight:      400;
    --body_font_color:       #dddddd;
    --heading_color: #dddddd;
    --body_link_color:       #c29556;
    --body_link_hover_color: #d3d3d3;

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

    --primary:#020202; --primary_textcolor:#d6d6d6;
    --primary_headingcolor:#ffffff; --primary_linkcolor:#d6d6d6;
    --secondary:#f0f0f0; --secondary_textcolor:#000000;
    --secondary_headingcolor:#000000; --secondary_linkcolor:#000000;
    --default:linear-gradient(90deg, #c29556, #af6a08); --default_textcolor:#000000;
    --default_headingcolor:#000000; --default_linkcolor:#000000;

    --heading_margin:30px; --heading_font_weight:300;
    --heading1_size:6.5rem; --heading1_line_height:1.0;
    --heading1_letter_spacing:-0.5px;        --heading2_size:4.0rem; --heading2_line_height:1.0;
            --heading3_size:4.0rem; --heading3_line_height:1.25;
            --heading4_size:3.0rem; --heading4_line_height:1.25;
            --heading5_size:2.5rem; --heading5_line_height:1.25;
            --heading6_size:2.0rem; --heading6_line_height:1.25;
        
    --button_radius:30px; --button_font_weight:700; --button_font_size:1.5rem;
    --button_height:55px; --button_padding:0 35px;
    --button_primary:#020202; --button_primary_text:#d6d6d6;
    --button_primary_hover:#000000; --button_primary_hover_text:#ffffff;
        --btn_primary_border:0px solid #020202; --btn_primary_hover_border:0px solid #020202;
    --button_secondary:#f0f0f0; --button_secondary_text:#000000;
    --button_secondary_hover:#d3d3d3; --button_secondary_hover_text:#020202;
        --btn_secondary_border:0px solid #f0f0f0; --btn_secondary_hover_border:0px solid #f0f0f0;
    --button_default:linear-gradient(90deg, #c29556, #af6a08); --button_default_text:#ffffff;
    --button_default_hover:#af731f; --button_default_hover_text:#ffffff;
        --btn_default_border:0px solid linear-gradient(90deg, #c29556, #af6a08); --btn_default_hover_border:0px solid linear-gradient(90deg, #c29556, #af6a08);

    --image_border_radius:0px;

    --nav_bg:#000000; --nav_height:125px;
    --nav_link:#e2e2e2; --nav_link_hover:#c29556; --nav_link_active:#c29556;
    --nav_font_size:1.6rem; --nav_font_weight:600;
    --nav_link_padding:20px;    --nav_dd_bg:#262626; --nav_dd_link:#e0e0e0;
    --nav_dd_link_active:#c29556;
    --nav_dd_hover_bg:#000000; --nav_dd_hover_link:#c29556;
    --nav_dd_radius:6px;

    --topbar_bg:#cbcbcb; --topbar_text:#3f3f3f;
    --topbar_link:#383838; --topbar_link_hover:#020202;
    --topbar_height:42px; --topbar_font_size:1.4rem;

    --mob_nav_bg:#070707;
    --mob_nav_link:#e2e2e2;
    --mob_nav_hover:#ffffff;
    --mob_nav_hover_bg:#303030;

    --input_height:55px; --input_font_size:1.6rem;
    --input_font_weight:400; --input_padding_h:15px;
    --input_border_width:1px; --input_border_color:#d9dde3;
    --input_border_color_focus:#c0914e; --input_border_radius:5px;
    --input_background:#f4f4f4; --input_color:#330404;
    --input_placeholder_color:#898989; --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:#020202;color:#d6d6d6;}
.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:#d6d6d6;}
.background_primary a:not(.btn):hover{color:#c29556;}
.background_primary .btn.btn-primary{background:#000000;color:#d6d6d6;}
.background_primary .btn.btn-primary:hover{background:#000000;}
.background_secondary{background:#f0f0f0;color:#000000;}
.background_secondary h1,.background_secondary h2,.background_secondary h3,.background_secondary h4,.background_secondary h5,.background_secondary h6{color:#000000;}
.background_secondary a:not(.btn){color:#000000;}
.background_secondary a:not(.btn):hover{color:#000000;}
.background_secondary .btn.btn-secondary{background:#d6d6d6;color:#000000;}
.background_secondary .btn.btn-secondary:hover{background:#bdbdbd;}
.background_default{background:linear-gradient(90deg, #c29556, #af6a08);color:#000000;}
.background_default h1,.background_default h2,.background_default h3,.background_default h4,.background_default h5,.background_default h6{color:#000000;}
.background_default a:not(.btn){color:#000000;}
.background_default a:not(.btn):hover{color:#000000;}
.background_default .btn.btn-default{background:#linear-gradient(90deg, #c29556, #af6a08);color:#000000;}
.background_default .btn.btn-default:hover{background:#linear-gradient(90deg, #c29556, #af6a08);}
.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_0{background:radial-gradient(#232323, #161616, #020202);color:#bababa;}
.background_extra_0 h1,.background_extra_0 h2,.background_extra_0 h3,.background_extra_0 h4,.background_extra_0 h5,.background_extra_0 h6{color:#ffffff!important;}
.background_extra_0 a:not(.btn){color:#ffffff;}
.background_extra_0 a:not(.btn):hover{color:#ffffff;}
.btn.btn-extra-0{background:radial-gradient(#232323, #161616, #020202);color:#bababa;border-radius:var(--button_radius);font-weight:var(--button_font_weight);}
.btn.btn-extra-0:hover{background:#radial-gradient(#232323, #161616, #020202);}
.background_extra_1{background:linear-gradient(119deg, #020000, #281c00, #020202, #020202);color:#d6d6d6;}
.background_extra_1 h1,.background_extra_1 h2,.background_extra_1 h3,.background_extra_1 h4,.background_extra_1 h5,.background_extra_1 h6{color:#c29556!important;}
.background_extra_1 a:not(.btn){color:#ffffff;}
.background_extra_1 a:not(.btn):hover{color:#c29556;}
.btn.btn-extra-1{background:linear-gradient(119deg, #020000, #281c00, #020202, #020202);color:#d6d6d6;border-radius:var(--button_radius);font-weight:var(--button_font_weight);}
.btn.btn-extra-1:hover{background:#linear-gradient(119deg, #020000, #281c00, #020202, #020202);}

/* ── 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-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.no_after::after{display:none !important;}
.btn-primary {
	color: blue;
}
/* ── 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 #000000;
    background:#000000;
    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;}

/* ── Navigation ───────────────────────────────────────────── */
.navigation{background:var(--nav_bg);height:var(--nav_height);display:flex;align-items:center;transition:background 0.3s,height 0.3s,box-shadow 0.3s;width:100%;position:relative;}
.navigation .container-fluid{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(--bodyFont);
}
/* 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 !important;
    right:0 !important;
    width:auto !important;
    background:#262626;
    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 #c29556;
}
/* 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 !important;
    animation:ww-mega-in 0.25s ease forwards;
    pointer-events:auto !important;
}
@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 !important;
    pointer-events:none !important;
    animation:ww-mega-out 0.22s ease forwards !important;
}
@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 !important;
    pointer-events:auto !important;
    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 !important;
    align-self:stretch !important;
    min-height:60px;
    object-fit:cover !important;
}
.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 !important;width:100% !important;height:auto !important;
    line-height:1.4 !important;padding:0 0 8px !important;margin:0 0 10px !important;
    font-size:1.6rem !important;font-weight:600 !important;
    color:#e0e0e0 !important;
    text-decoration:none !important;background:none !important;transition:color 0.2s;
}
/* Koptekst classes op col-title a */
.megamenu-col > a.h1,.megamenu-col > a.megamenu-col-title.h1{font-size:var(--heading1_size) !important;margin-bottom:30px !important;}
.megamenu-col > a.h2,.megamenu-col > a.megamenu-col-title.h2{font-size:var(--heading2_size) !important;margin-bottom:30px !important;}
.megamenu-col > a.h3,.megamenu-col > a.megamenu-col-title.h3{font-size:var(--heading3_size) !important;margin-bottom:30px !important;}
.megamenu-col > a.h4,.megamenu-col > a.megamenu-col-title.h4{font-size:var(--heading4_size) !important;margin-bottom:30px !important;}
.megamenu-col > a.h5,.megamenu-col > a.megamenu-col-title.h5{font-size:var(--heading5_size) !important;margin-bottom:30px !important;}
.megamenu-col > a.h6,.megamenu-col > a.megamenu-col-title.h6{font-size:var(--heading6_size) !important;margin-bottom:30px !important;}
.megamenu-col > a:hover,.megamenu-col > a.megamenu-col-title:hover{color:#c29556 !important;}
/* 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 !important;width:100% !important;height:auto !important;
    line-height:1.4 !important;margin:0 !important;padding:0 !important;
    border:none !important;background:none !important;float:none !important;
}
.megamenu-sub-list{list-style:none !important;margin:0 !important;padding:0 !important;}
.megamenu-grid li a,.megamenu-sub-list li a{
    display:block !important;width:100% !important;height:auto !important;
    line-height:1.4 !important;padding:5px 0 !important;
    color:#e0e0e0 !important;font-size:calc(1.6rem * 0.9) !important;
    font-weight:normal !important;text-decoration:none !important;
    background:none !important;border:none !important;transition:color 0.25s ease, padding-left 0.25s ease, background 0.25s ease;
}
.megamenu-grid li a:hover,.megamenu-sub-list li a:hover{
    color:#c29556 !important;padding-left:5px !important;
}
/* 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) !important; font-weight:600 !important; }
.megamenu-grid li.h3 a, .megamenu-sub-list li.h3 a{ font-size:var(--heading3_size, 1.75rem) !important; font-weight:600 !important; }
.megamenu-grid li.h4 a, .megamenu-sub-list li.h4 a{ font-size:var(--heading4_size, 1.5rem) !important; font-weight:600 !important; }
.megamenu-grid li.h5 a, .megamenu-sub-list li.h5 a{ font-size:var(--heading5_size, 1.25rem) !important; font-weight:600 !important; }
.megamenu-grid li.h6 a, .megamenu-sub-list li.h6 a{ font-size:var(--heading6_size, 1.1rem) !important; font-weight:600 !important; }
/* Fallback: heading class direct op de <a> */
.megamenu-grid li a.h2,.megamenu-sub-list li a.h2{ font-size:var(--heading2_size, 2rem) !important; font-weight:600 !important; }
.megamenu-grid li a.h3,.megamenu-sub-list li a.h3{ font-size:var(--heading3_size, 1.75rem) !important; font-weight:600 !important; }
.megamenu-grid li a.h4,.megamenu-sub-list li a.h4{ font-size:var(--heading4_size, 1.5rem) !important; font-weight:600 !important; }
.megamenu-grid li a.h5,.megamenu-sub-list li a.h5{ font-size:var(--heading5_size, 1.25rem) !important; font-weight:600 !important; }
.megamenu-grid li a.h6,.megamenu-sub-list li a.h6{ font-size:var(--heading6_size, 1.1rem) !important; font-weight:600 !important; }
.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 !important;}
/* Verbergen op mobiel */
@media(max-width:1199px){
    .megamenu-dropdown{display:none !important;}
}
/* ── 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(--bodyFont);
    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 !important;
    margin-top:0 !important;
}

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

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

/* ── Sticky nav ───────────────────────────────────────────── */
header.header.scrolled .navigation{background:#000000;height:80px;box-shadow:0 2px 16px rgba(0,0,0,0.10);}
header.header.scrolled .navigation .the_nav ul li a{color:#e2e2e2;height:80px;}
header.header.scrolled .navigation .the_nav ul li a:hover{color:#c29556;}
header.header.scrolled .navigation .the_nav ul li.current-menu-item > a,
header.header.scrolled .navigation .the_nav ul li.current-menu-ancestor > a,
header.header.scrolled .navigation .the_nav ul li.current_page_item > a{color:#c29556;}
/* Sticky altijd actief, ook op mobiel */

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

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

/* ── Tekst-selectie ───────────────────────────────────────── */
::selection{background:#191919;color:#c29556;}
::-moz-selection{background:#191919;color:#c29556;}

/* ── 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:48px;
    height:48px;
    border-radius:50px;
    background:#141414;
    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:30px;
    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:#e2e2e2;
    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:#af6b09;
    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:#070707;
    --mob-link:#e2e2e2;
    --mob-hover:#ffffff;
    --mob-hover-bg:#303030;
}
.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 #955100;
    background:#af6b09;
    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:#e2e2e2;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:#e2e2e2;
    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 #000000;
    background:#000000;
    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 #000000;
    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:#78a778;
    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:auto;}
.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-25,.container-50,.container-75,.container-85,.container-125,.container-fluid{width:auto;padding-left:55px;padding-right:55px;}}
@media(max-width:991px){.container,.container-default,.container-25,.container-50,.container-75,.container-85,.container-125,.container-fluid{width:auto;padding-left:45px;padding-right:45px;}}
@media(max-width:768px){
    .container,.container-default,.container-50,.container-75,.container-85,.container-125,.container-fluid,.container-left,.container-right{width:auto;max-width:100%;padding-left:25px;padding-right:25px;}
    .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 #ffffe740;
}
input::placeholder,textarea::placeholder{color:var(--input_placeholder_color);}

img{border-radius:var(--image_border_radius);}

/* ── Responsive — tablet ──────────────────────────────────── */
@media(max-width:991px){
    :root{
        --body_font_size:1.8rem;
        --body_line_height:3.2rem;
        --heading_margin:30px;--heading_font_weight:500;
        --heading1_size:4.0rem;--heading1_line_height:1.0;
                        --heading2_size:3.5rem;--heading2_line_height:1.0;
                        --heading3_size:2.5rem;--heading3_line_height:1.25;
                        --heading4_size:2.5rem;--heading4_line_height:1.25;
                        --heading5_size:2.0rem;--heading5_line_height:1.25;
                        --heading6_size:1.8rem;--heading6_line_height:1.25;
                    }
}

/* ── Responsive — mobiel ──────────────────────────────────── */
@media(max-width:768px){
    :root{
        --body_font_size:1.6rem;
        --body_line_height:2.6rem;
        --heading_margin:25px;--heading_font_weight:500;
        --heading1_size:3.3rem;--heading1_line_height:1.0;
                        --heading2_size:3.0rem;--heading2_line_height:1.0;
                        --heading3_size:3.0rem;--heading3_line_height:1.25;
                        --heading4_size:2.0rem;--heading4_line_height:1.25;
                        --heading5_size:1.8rem;--heading5_line_height:1.25;
                        --heading6_size:1.6rem;--heading6_line_height:1.25;
                    }
    .btn{font-size:1.4rem;height:42px;padding:0 20px;}
    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:125px;font-size:1.6rem;}
}