/* VISTA Notices — Frontend Styles v1.3.0
   The bar lives in the footer of the DOM.
   position:fixed + top:0 makes it render at the top of the viewport
   regardless of where in the HTML it appears.                         */

/* ── Bar container ───────────────────────────────────────────────────── */

#vn-notices-bar {
	/* Position: always fixed at the very top of the viewport. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	/* Sit above everything in the theme, including sticky navs */
	z-index: 999999;

	/* No inherited spacing that could create gaps */
	margin: 0;
	padding: 0;

	box-sizing: border-box;
	width: 100%;
}

/* ── WordPress Admin Bar ─────────────────────────────────────────────── */
/* When logged in, WP renders a 32px (desktop) / 46px (mobile) black bar
   at the very top at z-index 99999. We sit at 999999 so we'd cover it —
   instead, shift our bar down so the admin bar stays visible.           */

.admin-bar #vn-notices-bar {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	.admin-bar #vn-notices-bar {
		top: 46px;
	}
}

/* ── Individual notice rows ──────────────────────────────────────────── */

.vn-notice {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.vn-notice-inner {
	padding: 12px 20px;
	box-sizing: border-box;
	line-height: 1.5;
	text-align: center;
}

/* Links inherit notice text colour */
.vn-notice a {
	color: inherit;
	text-decoration: underline;
}

.vn-notice a:hover,
.vn-notice a:focus {
	opacity: 0.8;
	outline: none;
}