body:has(.notification-bar) {
	--notification-height: 4.5rem;
}
#header:not(.scrolled) {
	top: var(--notification-height);
}
body.admin-bar #header:not(.scrolled) {
	top: calc(var(--wp-admin--admin-bar--height) + var(--notification-height));
}

.notification-bar {
	display: block;
	height: var(--notification-height);
	position: relative;
	z-index: 9;
}
.notification-bar .wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: var(--wp--preset--spacing--8);
}
.notification-bar p {
	font-size: var(--wp--preset--font-size--large);
	text-align: start;
	margin: 0;
	flex-grow: 1;
	
	@media (max-width: 781px) {
		font-size: var(--wp--preset--font-size--normal);
		text-align: initial;
	}
}
.close-notification {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.close-notification span {
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	
	@media (max-width: 781px) { 
		display: none;
	}
}
.close-notification i {
	font-size: var(--wp--preset--font-size--h-4);
	margin-left: var(--wp--preset--spacing--8);
	text-transform: none;
}