/* Centrale headeropmaak; extern geladen voor pagina's met strikte CSP. */
.header-main > .brand .okvisie-logo-image{display:block;width:290px;max-width:100%;height:auto;flex-shrink:0;}
@media(min-width:1000px){
 header > .wrap.header-main{width:calc(100% - 40px);max-width:1600px;display:flex;flex-wrap:nowrap;align-items:center;gap:14px;min-height:82px;padding:8px 0;}
 .header-main > .brand{flex:0 0 auto;gap:12px;}
 .header-main > .brand .brand-note{padding-left:12px;font-size:.68rem;}
 .header-main nav{width:auto;order:0;flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:5px;margin-left:auto;padding:0;}
 .header-main nav > *{flex-shrink:0;}
 .header-main nav a,.header-main nav button{white-space:nowrap;font-size:.78rem;padding:10px 9px;}
 .header-main > .header-cta{flex:0 0 auto;white-space:nowrap;margin-left:0;padding:10px 12px;font-size:.74rem;}
 .header-main > .menu-toggle{display:none;}
}
@media(min-width:1000px) and (max-width:1399px){
 .header-main > .brand .brand-note{display:none;}
 .header-main > .brand .okvisie-logo-image{width:260px;}
}
@media(max-width:999px){.header-main > .brand .okvisie-logo-image{width:230px;}}
@media(max-width:380px){.header-main > .brand .okvisie-logo-image{width:195px;}}

/* Mobiel hoofdmenu: één item per regel; desktopregels hierboven blijven behouden. */
@media (max-width: 760px) {
    header .header-main > #nav {
        order: 3;
        flex: 0 0 100%;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        margin: 8px 0 0 !important;
        padding: 12px 0 16px !important;
        border-top: 1px solid #d2e3d8;
        box-sizing: border-box;
        max-height: calc(100vh - 150px);
        max-height: calc(100dvh - 150px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    header .header-main > #nav:not(.open) {
        display: none !important;
    }
    header .header-main > #nav.open {
        display: flex !important;
    }
    header .header-main > #nav > a,
    header .header-main > #nav > .okv-nav-dropdown {
        flex: 0 0 auto !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        box-sizing: border-box;
    }
    header .header-main > #nav > a,
    header .header-main > #nav > .okv-nav-dropdown > summary {
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        width: 100%;
        min-height: 46px;
        padding: 12px 14px !important;
        box-sizing: border-box;
        border: 1px solid #d2e3d8;
        border-radius: 8px;
        background: #e5f0e9;
        color: #164e56;
        font-size: 15px;
        line-height: 1.4;
        text-align: left;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    header .header-main > #nav > .okv-nav-dropdown > summary {
        justify-content: space-between !important;
    }
    header .header-main > #nav > a:hover,
    header .header-main > #nav > .okv-nav-dropdown > summary:hover {
        background: #d8e9de;
        border-color: #bdd5c6;
    }
    header .header-main > #nav > a[aria-current],
    header .header-main > #nav > .okv-nav-dropdown[data-active="true"] > summary,
    header .header-main > #nav > .okv-nav-dropdown[open] > summary {
        background: #d3e5da;
        border-color: #b3cdbd;
    }
    header .header-main > #nav > .okv-nav-dropdown[open] > .okv-nav-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        position: static !important;
        inset: auto;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        margin: 6px 0 0;
        padding: 6px;
        box-sizing: border-box;
        border: 1px solid #d2e3d8;
        border-radius: 8px;
        background: #f4f8f5;
        box-shadow: none;
    }
    header .header-main > #nav .okv-nav-panel > a {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 11px 12px;
        box-sizing: border-box;
        font-size: 14px;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
    }
}