/* Canvas — colours & dark mode
 * Only rules with zero risk of overriding prosilver's own styling live here
 * unconditionally: Canvas-exclusive selectors, and properties confirmed
 * (against prosilver's actual theme CSS) to never be set by the theme
 * itself. Everything that targets a selector prosilver already styles
 * (.wrap, .forumbg, .navbar, .panel, a, body/html, .headerbar, .site_logo)
 * is emitted conditionally in event/overall_header_stylesheets_after.html
 * instead — a `var(--x, inherit)` fallback on an always-active rule here
 * would still win the cascade and override prosilver's own value with
 * "inherit from parent", which is not the same as leaving it alone.
 */

.headerbar {
	position: relative;
}

.site_logo {
	background-repeat: no-repeat;
}

.canvas-decoration {
	position: absolute;
	top: 0;
	width: 96px;
	height: 96px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	z-index: 5;
}

.canvas-decoration-logo-corner {
	left: 0;
	transform-origin: top left;
}

.canvas-decoration-right-corner {
	right: 0;
	transform-origin: top right;
}

/* canvas.js adds this to exactly one .navbar — the last one before the
   page content — never to .navbar as a whole. Boards with dmzx/extnavbar
   installed render 2-3 sibling .navbar bars (quicklinks, admin tools, the
   breadcrumb bar); pinning all of them would stack that many full-width
   bars at the top of the viewport while scrolling. */
.navbar.canvas-sticky-navbar {
	position: sticky;
	top: 0;
	/* z-index has no effect on a static element, so this only matters on
	   the one bar above that actually goes sticky — but the moment it
	   does, this number is what every dropdown/menu nested in it gets
	   capped at against page content OUTSIDE it, since a positioned
	   element with an explicit z-index becomes its own stacking context.
	   A low value here let third-party floating widgets (seen live:
	   mLive's "Live Activity" panel at z-index: 99999) paint over open
	   dropdowns once the navbar was sticky. Comfortably clear of that
	   instead of guessing per-widget. */
	z-index: 999999;
}

/* .is-canvas-stuck is added by canvas.js only once the sticky navbar has
   actually scrolled into its stuck state (IntersectionObserver on a
   sentinel placed just before it) — position: sticky alone can't be
   conditioned on "currently stuck" in CSS, and the bar should stay at its
   normal, .wrap-width in its default, un-stuck position. Once stuck, bleed
   it edge-to-edge instead, matching the old fixednavbars extension's
   full-width bar, via the standard negative-margin full-bleed trick. */
.navbar.canvas-sticky-navbar.is-canvas-stuck {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Sticky (position: sticky) only pins an element within its own parent's
   box — a short #page-footer never scrolls far enough for that to read as
   "always visible", so the footer navbar needs true position: fixed
   instead. #page-footer's padding-bottom reserves room so the fixed bar
   never permanently covers the copyright/links below it. */
#page-footer .navbar {
	position: var(--canvas-navbar-footer-position, static);
	/* .navbar (above) sets top: 0 for the header's sticky bar — reset it
	   here, otherwise a fixed element with both top: 0 and bottom: 0 set
	   stretches to cover the full viewport height instead of sitting as
	   a thin bar at the bottom. */
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999999;
	/* Already full-width via left/right: 0 above — the header's bleed
	   trick (width + negative margins) would just fight that. */
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

#page-footer {
	padding-bottom: var(--canvas-footer-navbar-space, 0);
}

a,
.button,
.panel {
	transition: var(--canvas-transition, none);
}

::-webkit-scrollbar-thumb {
	background-color: var(--canvas-scrollbar-color, inherit);
}

* {
	scrollbar-color: var(--canvas-scrollbar-color, inherit) transparent;
}

/* Ripple + scroll-to-top (styles/all/template/js/canvas.js) — both
   Canvas-exclusive elements, prosilver has no equivalent to preserve. */

.canvas-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transform: scale(0);
	animation: canvas-ripple-out 0.5s ease-out;
	pointer-events: none;
}

@keyframes canvas-ripple-out {
	to {
		transform: scale(2.2);
		opacity: 0;
	}
}

.canvas-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: var(--canvas-accent-color, #f97316);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--canvas-shadow, 0 4px 12px rgba(0, 0, 0, 0.2));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	transform: translateY(10px);
	z-index: 50;
}

.canvas-scroll-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}