/* Standalone hosts: merch.raisethebarfitness.ca and ops.raisethebarfitness.ca.
   Both pages skip template.php, so they share one slim header here instead of
   the full marketing nav. The bar is deliberately white in BOTH themes - these
   are utility pages, and the full-colour logo needs a light background. */

:root {
	--standalone-header-height: 84px;
	--standalone-header-gap: 22px;
}

.site-header-standalone,
.site-header-standalone.site-header-scrolled,
body.theme-dark .site-header-standalone,
body.theme-dark .site-header-standalone.site-header-scrolled {
	backdrop-filter: blur(14px);
	background: rgba(255, 255, 255, 0.97) !important;
	border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important;
	box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08) !important;
	padding: 10px 0;
}

.site-header-standalone .container {
	min-height: 64px;
}

.standalone-brand {
	display: inline-flex;
	flex: 0 0 auto;
}

.standalone-brand img {
	display: block;
	height: 64px;
	object-fit: contain;
	width: auto;
}

.standalone-main-site-link,
body.theme-dark .standalone-main-site-link {
	align-items: center;
	background: #ffffff;
	border: 1px solid rgba(17, 17, 17, 0.24);
	border-radius: 999px;
	color: #111111;
	display: inline-flex;
	font-size: 0.88rem;
	font-weight: 700;
	gap: 9px;
	line-height: 1;
	padding: 0.72rem 1rem;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.standalone-main-site-link:hover,
.standalone-main-site-link:focus-visible,
body.theme-dark .standalone-main-site-link:hover,
body.theme-dark .standalone-main-site-link:focus-visible {
	background: #111111;
	border-color: #111111;
	color: #ffffff;
	outline: none;
	transform: translateY(-1px);
}

.standalone-main-site-link:focus-visible {
	box-shadow: 0 0 0 3px rgba(214, 31, 38, 0.2);
}

/* Content clearance for the fixed bar. Single source of truth for both
   standalone pages, including the extra offset when the admin session bar
   is on screen. */

body.merch-page main {
	padding-top: var(--standalone-header-height);
}

body.ops-page .ops-site-main {
	padding-top: calc( var(--standalone-header-height) + var(--standalone-header-gap) );
}

body.admin-session.merch-page main {
	padding-top: calc( var(--standalone-header-height) + var(--admin-session-bar-height) );
}

body.admin-session.ops-page .ops-site-main {
	padding-top: calc( var(--standalone-header-height) + var(--standalone-header-gap) + var(--admin-session-bar-height) );
}

/* Toasts sit just under the fixed bar so they never cover the logo or the
   progress link. */

body.ops-page .admin-toast-stack {
	top: calc( var(--standalone-header-height) + 12px );
}

body.admin-session.ops-page .admin-toast-stack {
	top: calc( var(--standalone-header-height) + 12px + var(--admin-session-bar-height) );
}

@media (max-width: 767.98px) {
	:root {
		--standalone-header-gap: 16px;
	}
}

@media (max-width: 575.98px) {
	:root {
		--standalone-header-height: 72px;
	}

	.site-header-standalone,
	.site-header-standalone.site-header-scrolled,
	body.theme-dark .site-header-standalone,
	body.theme-dark .site-header-standalone.site-header-scrolled {
		padding: 8px 0;
	}

	.site-header-standalone .container {
		min-height: 56px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.standalone-brand img {
		height: 52px;
	}

	.standalone-main-site-link {
		font-size: 0.8rem;
		gap: 7px;
		padding: 0.62rem 0.82rem;
	}
}