/*
 * WPaneelwerck — Admin bar
 * Verbergt de standaard admin bar-items en toont alleen de door de plugin
 * toegevoegde snelkoppelingen. Scope strikt op de admin-bar om conflicten
 * met page builders te vermijden. Geldt op zowel wp-admin als de voorkant.
 */

#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > li,
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > li {
	display: none !important;
}

#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-view,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-mdw-dashboard,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-dwb,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-edit,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-mdw-woocommerce,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-mdw-bookly,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-litespeed-purge-all,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-wpaneelwerck-nag-picker-toggle,
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-autoptimize,
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-my-account,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-mdw-woocommerce,
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-my-account .ab-submenu li {
	display: list-item !important;
}

#wp-admin-bar-dashboard { padding: 0 0 0 20px !important; }
#wpadminbar { height: 46px !important; background: #2C3E50; padding-left: 10px !important; }
/*
 * Kleurenschema-onafhankelijk houden: WordPress' eigen admin-kleurenschema's
 * (bv. "Licht") zetten #wpadminbar .ab-item e.d. op color:#333 — leesbaar op
 * hún lichte balk, maar onleesbaar op onze altijd donkere achtergrond
 * hierboven. Daarom hier expliciet en met !important vastgezet, ongeacht
 * welk kleurenschema de gebruiker via Gebruiker → Kleurenschema kiest.
 */
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > li > .ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon {
	height: 46px !important;
	line-height: 46px !important;
	text-transform: lowercase !important;
	color: #f0f0f1 !important;
}
html.wp-toolbar { padding-top: 46px !important; }
.interface-interface-skeleton { top: 46px; }
#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus,
.ab-sub-wrapper {
	color: #fff !important;
	background: #2C3E50 !important;
}
#wpadminbar .ab-submenu { padding: 8px !important; }
#wpadminbar .quicklinks > ul > li > a { padding: 0 12px; }
.ab-item::before,
.ab-icon::before {
	display: none !important;
}
.ab-item {
	text-transform: lowercase !important;
	font-weight: 400 !important;
}
#wpadminbar .ab-top-secondary { float: none; }
#wpadminbar .quicklinks .menupop ul li .ab-item,
#wpadminbar .quicklinks .menupop ul li a strong,
#wpadminbar .quicklinks .menupop.hover ul li .ab-item,
#wpadminbar .shortlink-input,
#wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item {
	line-height: 2 !important;
	height: 34px !important;
}
#wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li { margin: 0; }
#wp-admin-bar-user-info .avatar,
.avatar.photo {
	display: none !important;
}
#wp-admin-bar-logout { margin-top: 10px !important; }
#wp-admin-bar-my-account {
	float: right !important;
	padding-right: 20px !important;
}

/*
 * Submenu's van eigen snelkoppelingen (Instellingen → WPaneelwerck → Admin
 * bar). WordPress bouwt het uitklapmenu en het pijltje (.wp-admin-bar-arrow)
 * zelf op; core gaat daarbij uit van items van 26px hoog met 6px
 * submenu-padding (margin-top: -32px). Bij ons zijn items 34px hoog met 8px
 * padding (zie hierboven), dus het uitklapmenu wordt hier zo opgeschoven dat
 * het eerste subitem naast het hoofditem begint, en het pijltje verticaal
 * gecentreerd. Alleen op desktop: onder 782px klapt core submenu's in de
 * lijst zelf uit (position: relative) en verbergt het pijltje.
 */
@media screen and (min-width: 783px) {
	#wpadminbar #wp-admin-bar-dwb li:hover > .ab-sub-wrapper,
	#wpadminbar #wp-admin-bar-dwb li.hover > .ab-sub-wrapper {
		margin-top: -42px;
	}

	#wpadminbar #wp-admin-bar-dwb .menupop > .ab-item .wp-admin-bar-arrow::before {
		top: 4px;
	}
}

@media screen and (max-width: 782px) {
	html.wp-toolbar { padding-top: 46px !important; }
}