/* ==========================================================================
   Nectar Announcement Bar — bar appearance
   ========================================================================== */

#nectar-announcement-bar {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 44px;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
}

#nectar-announcement-bar.nab-is-multi {
	padding-left: 46px;
	padding-right: 84px;
}

#nectar-announcement-bar .nab-inner a,
#nectar-announcement-bar .nab-slide a {
	text-decoration: underline;
	color: inherit;
}

/* ---- Slider (only present with 2+ messages) ---- */

.nab-slider {
	position: relative;
	width: 100%;
	min-height: 1.6em; /* sensible fallback if JS never runs to set a real height */
	overflow: visible;
}

.nab-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: visible;
	transition: opacity 0.4s ease;
}

.nab-slide-inner {
	width: 100%;
	text-align: center;
}

.nab-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.nab-slide {
		transition: none;
	}
}

.nab-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	padding: 6px 10px;
	color: inherit;
	opacity: 0.7;
}

.nab-arrow:hover {
	opacity: 1;
}

.nab-arrow-prev {
	left: 6px;
}

.nab-arrow-next {
	right: 44px;
}

/* If dismiss is disabled, let the next arrow use the space it would have used. */
#nectar-announcement-bar:not(:has(.nab-dismiss)) .nab-arrow-next {
	right: 8px;
}

#nectar-announcement-bar .nab-dismiss {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 4px 8px;
	color: inherit;
	opacity: 0.7;
}

#nectar-announcement-bar .nab-dismiss:hover {
	opacity: 1;
}

@media (max-width: 600px) {
	#nectar-announcement-bar {
		padding: 10px 38px;
		font-size: 13px;
	}

	#nectar-announcement-bar.nab-is-multi {
		padding-left: 40px;
		padding-right: 76px;
	}

	.nab-arrow-next {
		right: 38px;
	}

	#nectar-announcement-bar:not(:has(.nab-dismiss)) .nab-arrow-next {
		right: 6px;
	}
}

/* ==========================================================================
   Salient header integration
   --------------------------------------------------------------------------
   No CSS override is applied to #header-outer itself. Salient's header
   positioning (`top: 0` at rest, whether `.transparent`/absolute or a
   standard in-flow header) turns out to be measured from a wrapper that is
   itself in normal document flow — so once the announcement bar sits above
   that wrapper in the DOM (via wp_body_open), the header is already pushed
   into the correct spot for free. Adding our own top/margin offset on top
   of that double-counted the bar's height. Confirmed by testing on both a
   transparent (forced-transparency) page and a standard page.

   Once the user scrolls and Salient adds `.fixed-menu` to hide/reveal the
   header, the announcement bar (which scrolls away with the page) is
   already out of view, so there's nothing to coordinate there either.

   The one place a real fix is still needed is Salient's off-canvas mobile
   menu (#slide-out-widget-area), handled in announcement-bar.js — see the
   comment below.

   --nab-height is still kept in sync with the bar's real rendered height
   via ResizeObserver in announcement-bar.js, for that purpose.
   ========================================================================== */

:root {
	--nab-height: 0px;
}

/* #header-space reserves flow space equal to the header's own height,
   set inline by Salient. Because the announcement bar is placed *before*
   #header-space in the document, #header-space already starts right after
   the bar automatically, purely from normal document flow — it needs no
   adjustment from us at all. (An earlier version of this stylesheet added
   padding-top: var(--nab-height) here too, which double-counted the bar's
   height on top of the offset already inherited from flow — that was the
   cause of content being pushed down by roughly 2x the bar's height.) */

/* #slide-out-widget-area (Salient's off-canvas mobile menu) gets its
   padding-top written dynamically by Salient's own JS to clear the header.
   That's the SAME property we'd otherwise want to adjust, so overriding it
   here in CSS would just get clobbered (or would clobber Salient). Instead,
   announcement-bar.js watches that element and adds --nab-height on top of
   whatever Salient last wrote, every time Salient rewrites it. Nothing to
   do here in CSS for that element. */

body.nab-dismissed #nectar-announcement-bar {
	display: none;
}