/*
 * Dutch2Dutch Header Full Width
 */

/* Header over de volledige viewport-breedte */
header,
.site-header,
#masthead,
.elementor-location-header,
.wp-site-blocks > header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
}

/* Binnenzijde van de header ook volledig breed */
header > .container,
header > .inner,
.site-header > .container,
.site-header > .inner,
.site-header-inner,
#masthead > .container,
#masthead > .inner {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Merknaam links */
header .logo,
header .site-logo,
header .custom-logo-link,
.site-header .logo,
.site-header .site-logo,
.site-header .custom-logo-link,
.site-branding {
    margin-left: 0 !important;
    margin-right: auto !important;
    flex: 0 0 auto !important;
}

/* Navigatie rechts */
header nav,
.site-header nav,
.main-navigation,
.primary-navigation {
    margin-left: auto !important;
    margin-right: 0 !important;
    max-width: none !important;
}

header nav ul,
.site-header nav ul,
.main-navigation ul,
.primary-navigation ul,
.primary-menu,
.menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

header nav li,
.site-header nav li,
.main-navigation li,
.primary-navigation li,
.primary-menu li,
.menu li {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    header > .container,
    header > .inner,
    .site-header > .container,
    .site-header > .inner,
    site-header-inner,
    #masthead > .container,
    #masthead > .inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    header nav ul,
    .site-header nav ul,
    .main-navigation ul,
    .primary-navigation ul,
    .primary-menu,
    .menu {
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
}