/*
 * WPaneelwerck — Admin bar (lichte balk; lettertype uit fonts.css)
 * 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-preview,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-mdw-dashboard,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default > #wp-admin-bar-mdw-homepage,
#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-top-secondary > #wp-admin-bar-wpaneelwerck-nachtmodus,
#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; }
/*
 * Lichte balk (steen), passend bij de dashboard-look. Kleuren staan in
 * CSS-variabelen op #wpadminbar, zodat het dashboard ze in nachtmodus kan
 * overschrijven (zie dashboard-theme.css) zonder elke regel te herhalen.
 */
#wpadminbar {
	--mdw-bar-bg: #F8F7F4;
	--mdw-bar-border: #DEDAD2;
	--mdw-bar-text: #4F5752;
	--mdw-bar-text-strong: #1F2A24;
	--mdw-bar-hover-bg: #EFEEEA;
	--mdw-bar-accent: #2F4A3E;
	--mdw-bar-sub-bg: #FFFFFF;
	--mdw-bar-sub-hover-bg: #F0F3F0;
	--mdw-bar-shadow: 0 12px 28px -12px rgba(31, 42, 36, .28);
	height: 46px !important;
	background: var(--mdw-bar-bg) !important;
	box-shadow: inset 0 -1px 0 var(--mdw-bar-border);
	padding-left: 10px !important;
	/* Padding binnen de breedte: op smalle schermen staat de balk op
	   position: absolute en zou hij anders 10px breder zijn dan het scherm
	   (horizontaal scrollen). */
	box-sizing: border-box;
}
#wpadminbar .ab-item,
#wpadminbar .ab-label {
	font-family: 'WPaneelwerck Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 13px !important;
}
/*
 * Kleurenschema-onafhankelijk houden: WordPress' eigen admin-kleurenschema's
 * zetten #wpadminbar .ab-item e.d. op hun eigen kleur (bv. #333 of #f0f0f1),
 * wat op onze vaste lichte balk hierboven slecht of niet leesbaar kan zijn.
 * 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: none !important;
	color: var(--mdw-bar-text) !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 {
	color: var(--mdw-bar-text-strong) !important;
	background: var(--mdw-bar-hover-bg) !important;
}
#wpadminbar .ab-sub-wrapper {
	background: var(--mdw-bar-sub-bg) !important;
	border-radius: 0 0 12px 12px;
	box-shadow: var(--mdw-bar-shadow) !important;
}
#wpadminbar .quicklinks .menupop ul li:hover > .ab-item,
#wpadminbar .quicklinks .menupop ul li > .ab-item:focus {
	color: var(--mdw-bar-text-strong) !important;
	background: var(--mdw-bar-sub-hover-bg) !important;
	border-radius: 8px;
}
/* Huidige pagina: het dashboard krijgt een groen streepje onder "Dashboard". */
body.index-php #wpadminbar #wp-admin-bar-mdw-dashboard > .ab-item {
	color: var(--mdw-bar-text-strong) !important;
	font-weight: 500 !important;
	box-shadow: inset 0 -2px 0 var(--mdw-bar-accent);
}
#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: none !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; }

/*
 * Bovenste blok in het gebruikersmenu (naam + "Profiel bewerken"). Dat zijn
 * twee regels in één link; de vaste hoogte van 34px voor submenu-items
 * hierboven liet de tweede regel over "Uitloggen" heen lopen. De
 * kleurenschema's van WordPress maken deze tekst bovendien wit (onzichtbaar
 * op het lichte uitklapmenu) of blauw bij hover.
 */
#wpadminbar .quicklinks .menupop ul li#wp-admin-bar-user-info > .ab-item {
	height: auto !important;
	padding: 8px 10px !important;
	line-height: 1.45 !important;
}
#wpadminbar #wp-admin-bar-user-info .display-name {
	color: var(--mdw-bar-text-strong) !important;
	font-weight: 500;
}
#wpadminbar #wp-admin-bar-user-info .username,
#wpadminbar #wp-admin-bar-user-info .edit-profile {
	color: var(--mdw-bar-text) !important;
	font-size: 12px !important;
}
#wpadminbar #wp-admin-bar-user-info .display-name.edit-profile { font-weight: 400; }
#wp-admin-bar-my-account {
	float: right !important;
	padding-right: 20px !important;
}

/*
 * Knop voor de nachtmodus (alleen op het dashboard, zie NightModeService).
 * Staat rechts van het gebruikersmenu: in #wp-admin-bar-top-secondary staat
 * hij in de HTML vóór "my-account", en met float: right komt het eerste
 * element het meest rechts te staan.
 */
#wpadminbar #wp-admin-bar-wpaneelwerck-nachtmodus {
	float: right !important;
	margin-right: 16px;
}
#wpadminbar #wp-admin-bar-wpaneelwerck-nachtmodus ~ #wp-admin-bar-my-account {
	padding-right: 4px !important;
}
#wpadminbar #wp-admin-bar-wpaneelwerck-nachtmodus > .ab-item {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 34px;
	height: 34px !important;
	margin-top: 6px;
	padding: 0 !important;
	border: 1px solid var(--mdw-bar-border);
	border-radius: 50%;
	background: var(--mdw-bar-sub-bg) !important;
	color: var(--mdw-bar-text-strong) !important;
	line-height: 1 !important;
}
#wpadminbar #wp-admin-bar-wpaneelwerck-nachtmodus > .ab-item:hover,
#wpadminbar #wp-admin-bar-wpaneelwerck-nachtmodus > .ab-item:focus {
	background: var(--mdw-bar-hover-bg) !important;
}
#wpadminbar #wp-admin-bar-wpaneelwerck-nachtmodus > .ab-item:focus-visible {
	outline: 2px solid var(--mdw-bar-accent);
	outline-offset: 2px;
}
#wpadminbar .mdw-nacht-knop__icoon {
	display: block;
	width: 16px;
	height: 16px;
}
#wpadminbar .mdw-nacht-knop__icoon--zon,
body.wpaneelwerck-nacht #wpadminbar .mdw-nacht-knop__icoon--maan {
	display: none;
}
body.wpaneelwerck-nacht #wpadminbar .mdw-nacht-knop__icoon--zon {
	display: block;
}

/*
 * 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; }

	/*
	 * Smalle schermen: de balk blijft één regel hoog. De linkergroep
	 * (Dashboard, Homepage, Snelkoppelingen, …) scrolt zo nodig horizontaal;
	 * het account en de nachtmodus-knop blijven vast rechts staan. Zonder
	 * dit liepen de items door naar een tweede regel, die over de pagina
	 * viel (bv. over "Schermopties" en "Help").
	 *
	 * Uitklapmenu's worden hierdoor niet afgekapt: WordPress zet de
	 * menu-items op smalle schermen op position: static, zodat een
	 * uitklapmenu zich positioneert ten opzichte van #wpadminbar zelf, en
	 * dat valt buiten de scrollende groep.
	 */
	#wpadminbar .quicklinks {
		display: flex;
		align-items: stretch;
	}
	#wpadminbar #wp-admin-bar-root-default {
		display: flex;
		flex: 1 1 auto;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	#wpadminbar #wp-admin-bar-root-default::-webkit-scrollbar { display: none; }
	#wpadminbar #wp-admin-bar-root-default > li {
		position: static;
		flex: 0 0 auto;
		float: none;
	}
	#wpadminbar #wp-admin-bar-root-default > li > .ab-item,
	#wpadminbar #wp-admin-bar-root-default > li > .ab-empty-item {
		padding: 0 9px;
		white-space: nowrap;
	}
	#wpadminbar #wp-admin-bar-dashboard { padding: 0 !important; }
	#wpadminbar .ab-top-secondary {
		display: flex;
		flex: 0 0 auto;
	}
	#wpadminbar .ab-top-secondary > li { float: none !important; }
	#wpadminbar #wp-admin-bar-wpaneelwerck-nachtmodus {
		order: 2;
		margin-right: 8px;
	}
	#wpadminbar #wp-admin-bar-my-account {
		order: 1;
		padding-right: 4px !important;
	}

	/*
	 * Account: WordPress toont hier op smalle schermen alleen de
	 * profielfoto (de tekst schuift weg). Die foto is in deze balk
	 * verborgen, dus komt er een eenvoudig persoon-icoon voor in de plaats.
	 */
	#wpadminbar #wp-admin-bar-my-account > .ab-item {
		position: relative;
		width: 44px;
		padding: 0 !important;
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
	}
	#wpadminbar #wp-admin-bar-my-account > .ab-item::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 20px;
		margin: -10px 0 0 -10px;
		/* Vaste balkkleur i.p.v. currentColor: de kleurenschema's van
		   WordPress geven ::after in de balk een eigen (lichte) tekstkleur. */
		background: var(--mdw-bar-text) !important;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/*
	 * "Pagina bewerken" (core-node 'edit') op smalle schermen. WordPress
	 * verbergt daar de tekst van dit item (text-indent: 100%, vaste breedte
	 * van 52px) en toont alleen het potlood-icoon. Omdat alle iconen
	 * hierboven verborgen zijn (.ab-item::before), bleef er een leeg vakje
	 * over. Hier wordt de tekst teruggezet, net als bij de overige items.
	 * #wp-toolbar in de selector maakt hem specifieker dan de core-regel
	 * (#wpadminbar #wp-admin-bar-edit > .ab-item), zonder !important.
	 */
	#wpadminbar #wp-toolbar #wp-admin-bar-edit > .ab-item {
		text-indent: 0;
		width: auto;
		overflow: visible;
		padding: 0 12px;
	}
}

/*
 * Telefoon (600px en smaller; bewust ná het blok voor 782px, dat dezelfde
 * regel op 46px zet): WordPress laat de balk hier meescrollen
 * (position: absolute binnen #wpwrap) en reserveert de ruimte zelf via
 * #wpbody { padding-top: 46px }. De vaste 46px bovenaan de pagina moet dan
 * weg, anders staat er een lege strook boven de balk.
 */
@media screen and (max-width: 600px) {
	html.wp-toolbar { padding-top: 0 !important; }
}