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

/* 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, .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 first 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); at the moment this one actually goes stuck, canvas.js
   also merges the other bars' items into it and hides them, so scrolling
   leaves one sticky row instead of 2-3 stacked full-width bars. The
   default, unscrolled page is untouched — still the original separate
   bars — until that happens. */
.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: 98.4vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* The merge (canvas.js moving the other bars' items in) happens in the
	   same instant as this class getting added, so without this the bar's
	   new, wider content just pops into place. `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 it in every time regardless. */
	animation: canvas-navbar-fade-in 0.3s ease;
}

/* Once merged, the bar's list is too full to 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. Keep it to one row and let
   it scroll horizontally instead, and drop three specific extnavbar links
   entirely on request rather than have them take up space in that scroll.
   Matched by href, not the link text/title, so it isn't tied to whatever
   language the board is in. Scoped to .is-canvas-stuck only — the default,
   unscrolled bars are 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;
	}

	.navbar.canvas-sticky-navbar.is-canvas-stuck li:has(> a[href="/publish"]),
	.navbar.canvas-sticky-navbar.is-canvas-stuck li:has(> a[href="/gasreading"]),
	.navbar.canvas-sticky-navbar.is-canvas-stuck li:has(> a[href="/powerenergy"]) {
		display: none;
	}
}

@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);
}