/* 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, #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.
 */

/* The sticky-navbar full-bleed trick below (width: 100vw + negative
   margins) is intentionally wider than the visible viewport on any
   browser that reserves space for a vertical scrollbar, since 100vw
   includes that reserved space. That sliver of overflow would otherwise
   grow a second, horizontal scrollbar at the bottom of the page. This
   rule lives here — a static file, versioned automatically via
   assets_version — rather than in the templated inline <style>, so it
   takes effect the moment the file is uploaded instead of waiting on a
   phpBB template-cache purge. It's harmless with the fixed navbar off
   too, so it isn't worth gating behind a config check.

   overflow-x: clip, not hidden — the two axes of `overflow` aren't
   independent for any value except `clip`: giving x anything else
   non-visible (hidden/auto/scroll) forces the UA to also make y a
   scroll-container value, and once html/body become a scroll container
   that way, .canvas-sticky-navbar's position: sticky stops sticking to
   the viewport (it just scrolls past instead of pinning). `clip` is the
   one value that doesn't force that pairing, so overflow-y can stay
   `visible` and sticky keeps working. */
html,
body {
	overflow-x: clip;
	overflow-y: visible;
}

.headerbar {
	position: relative;
}

#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 .navbar as a whole) once the fixed-navbar setting is
   on. Stock prosilver only ever has one such bar, so this is normally just
   "the" header navbar — a style/extension that adds more only affects
   which one of them gets picked, never how many go sticky. */
.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.
	   Comfortably clear of any third-party floating widget 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: 98.4vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* `animation`, not `transition` — the class is only ever added, never
	   toggled off and back on to re-trigger a transition; this
	   play-once-per-add keyframe fades the width/margin jump in every time
	   regardless. */
	animation: canvas-navbar-fade-in 0.3s ease;
}

/* A long quicklinks list (stock links plus whatever a board's own
   extensions add) doesn't always fit one row on a phone-width screen
   (matches prosilver's own ~700px breakpoint) — left alone it wraps into
   2-3 rows, eating a lot of vertical space on a bar that's now stuck to
   the top. Keep it to one row and let it scroll horizontally instead.
   Scoped to .is-canvas-stuck only — the default, unscrolled bar is
   unaffected. */
@media (max-width: 700px) {
	.navbar.canvas-sticky-navbar.is-canvas-stuck ul[role="menubar"] {
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@keyframes canvas-navbar-fade-in {
	from {
		opacity: 0;
	}
}

/* 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);
}

/* Any ::-webkit-scrollbar-* rule (even just -thumb, above) switches Chrome
   away from the OS's native overlay scrollbar to its own "classic" one,
   which reserves real layout space instead of floating over content. Left
   unstyled, that reserved track renders in Chrome's default (light) colour
   — a stark, disconnected-looking strip right next to Canvas's dark bars.
   Matching it to the page background here makes the reserved gutter blend
   in instead of reading as a gap. */
::-webkit-scrollbar-track {
	background-color: var(--canvas-scrollbar-track-color, transparent);
}

* {
	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);
}