.vb-notification{
	background:#D4E3F5;
	color:#121212;
	position:relative;
	z-index:1020; /* below sticky header but above content */
}
.vb-notification__inner{
	display:flex;
	align-items:center;
	gap:12px;
	padding-top: 16px;
	padding-bottom: 16px;
	min-height:56px;
	justify-content:center;
	position:relative;
	padding-right:48px; /* room for absolute close button */
}
.vb-notification__icon{
	display: flex;
	flex:0 0 auto;
}
.vb-notification__text{
	text-align: center;
	margin:0;
	font-weight: var(--w-regular);
	font-family: var(--font-sans-1);
	font-size: var(--fs-h4);
	line-height: var(--lh-h4);
	flex:1 1 auto;
}
.vb-notification__link{
	margin-left: 16px;
	font-weight: var(--w-medium);
	color:var(--brand-blue);
	text-decoration:underline;
}
.vb-notification__close{
	appearance:none;
	border:0;
	background:transparent;
	padding:8px;
	cursor:pointer;
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
}

/* Stick the notification just below the sticky header */
.vb-header + .vb-notification{ /* ensure directly below header */
	border-top:1px solid rgba(0,0,0,0.02);
	position: relative;
}
.admin-bar .vb-header + .vb-notification{ top: calc(80px + 32px); }
@media (max-width: 782px){ .admin-bar .vb-header + .vb-notification{ top: calc(80px + 46px); } }

/* Keyboard focus: brand-blue ring for interactive elements inside the banner */
.vb-notification__inner a:focus-visible,
.vb-notification__inner button:focus-visible,
.vb-notification__inner [role="button"]:focus-visible,
.vb-notification__inner input:focus-visible,
.vb-notification__inner select:focus-visible,
.vb-notification__inner textarea:focus-visible,
.vb-notification__inner [href]:focus-visible,
.vb-notification__inner [tabindex]:focus-visible{
	outline: 2px solid var(--brand-blue) !important;
	outline-offset: 2px !important;
}

/* Mobile adjustments */
@media (max-width: 719px){
	.vb-notification__icon{ display:none; }
	.vb-notification__inner{ justify-content:center; }
	.vb-notification__text{ text-align:center; }
}

/* Apply top alignment on viewports below 1200px */
@media (max-width: 1199.98px){
	.vb-notification__inner div{ align-items:flex-start !important; }
	.vb-notification__text {text-align: unset;}
}