/* ==========================================================================
   Top Ad Banner — fixed behind content, site slides over it
   ========================================================================== */

   .ftn-top-ad-banner {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	background: #ececec;
	text-align: center;
	padding: 10px 0;
}

.ftn-top-ad-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	overflow: hidden;
}

/* Only cap the height when the CSS variable is set (max-height > 0 in admin) */
.ftn-top-ad-banner[style*="--ftn-top-ad-max-height"] .ftn-top-ad-banner__inner {
	max-height: var(--ftn-top-ad-max-height);
}

.ftn-top-ad-banner[style*="--ftn-top-ad-max-height"] img {
	max-height: var(--ftn-top-ad-max-height);
	object-fit: cover;
}

/* Ensure ad images inside are responsive */
.ftn-top-ad-banner img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* AdRotate wrapper resets */
.ftn-top-ad-banner .adrotate-group,
.ftn-top-ad-banner .a-single {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Spacer — reserves the banner height so content starts below it */
.ftn-top-ad-spacer {
	display: block;
	width: 100%;
	height: 0; /* JS sets this to match the banner's actual height */
}

/* Site wrapper slides over the fixed banner */
.site-outer {
	position: relative;
	z-index: 10;
	background: var(--bg, #fff);
}

/* Login page uses MemberPress guest template — no .site-outer wrapper.
   Apply equivalent stacking so the fixed banner is covered by the page content. */
body.mepr-guest-layout #page.site {
	position: relative;
	z-index: 10;
	background: #000;
}