/* Site chrome: banner scrolls away; navbar + breadcrumbs stick */

/* Kill the elastic rubber-band bounce past the top/bottom edge of the page.
   That bounce is what makes `position: fixed` elements (#scroll_to_top, the sticky
   navbar) visibly detach from the viewport for a moment on a hard trackpad scroll —
   a real browser compositing artifact during the bounce, not a layout bug (verified:
   no ancestor of #scroll_to_top has a transform/filter/perspective/will-change that
   would break its containing block). Removing the bounce removes the trigger. */
html {
	overscroll-behavior-y: none;
}

/* Never hide site chrome on cabinet / PM / profile / posting */
body.site-chrome-sticky header,
body.pm-section header,
body.cabinet-section header,
body.profile-section header,
body.posting-section header {
	display: block !important;
}

body.site-chrome-sticky .layout-container:has(.ads-two-banners-row),
body.posting-section .layout-container:has(.ads-two-banners-row) {
	display: block !important;
}

/* Profile, PM, cabinet, news, subscriptions: no top two-banners row */
body.profile-section .layout-container:has(.ads-two-banners-row),
body.pm-section .layout-container:has(.ads-two-banners-row),
body.cabinet-section .layout-container:has(.ads-two-banners-row),
body.news-section .layout-container:has(.ads-two-banners-row),
body.subscriptions-section .layout-container:has(.ads-two-banners-row) {
	display: none !important;
}

body.profile-section .phpbb-ads,
body.pm-section .phpbb-ads,
body.cabinet-section .phpbb-ads,
body.news-section .phpbb-ads,
body.subscriptions-section .phpbb-ads {
	display: none !important;
}

body.profile-section .left-sidebar,
body.profile-section .right-sidebar,
body.pm-section .left-sidebar,
body.pm-section .right-sidebar,
body.cabinet-section .left-sidebar,
body.cabinet-section .right-sidebar,
body.news-section .left-sidebar,
body.news-section .right-sidebar,
body.subscriptions-section .left-sidebar,
body.subscriptions-section .right-sidebar {
	display: none !important;
}

/* Scroll to top: VK-style. Two layers:
   - #scroll_to_top (outer): the WIDE, invisible hover-trigger zone — spans the free
     area to the left of the forum content (JS-measured), from right below the sticky
     navbar down to the footer (JS, recalculated on scroll). No background of its own.
   - .stl-rect (inner): the NARROW visible rectangle — flush to the left edge, full
     height of the outer zone, shrink-to-fit width around the pill + symmetric padding
     (only slightly wider than the "Наверх" label). Lights up on hover of the OUTER
     zone, so moving the mouse anywhere in the free area triggers it.
   Desktop only, shown after the second menu (breadcrumbs/search) scrolls out of view.
   `transform: translateZ(0)` + `backface-visibility: hidden` force this fixed element
   onto its own GPU layer — the same fix already used below for `.navbar` and
   `#page-header .header-section`. Without it, `position: fixed` visibly detaches from
   the viewport for a frame during rubber-band/elastic overscroll (both edges — top
   against the navbar and bottom against the footer), because the compositor redraws it
   late. The footer keeps its own stacking context above this zone (see `footer` rule
   below) as a backstop for that transient moment.
   Plain hand-written CSS (no Tailwind utility classes) since this theme's stylesheet.css
   is pre-compiled and does not include arbitrary new utility classes. */
#scroll_to_top {
	display: none;
	position: fixed;
	top: 4rem;
	left: 0;
	width: 7rem;
	z-index: 11;
	cursor: pointer;
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* Backstop for #scroll_to_top: stacks above it so a transient rubber-band-scroll
   glitch (see comment above) never visually shows through over the footer. */
footer {
	position: relative;
	z-index: 20;
}

@media (min-width: 1024px) {
	#scroll_to_top.stl-show {
		display: block;
	}
}

#scroll_to_top .stl-rect {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	padding: 1rem 1.35rem 0;
	transition: background-color .2s linear;
}

#scroll_to_top:hover .stl-rect {
	background: rgba(0, 0, 0, .06);
}

html.dark #scroll_to_top:hover .stl-rect,
:is(.dark #scroll_to_top:hover .stl-rect) {
	background: rgba(255, 255, 255, .08);
}

#scroll_to_top .stl-pill {
	display: flex;
	align-items: center;
	gap: .375rem;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	opacity: .5;
	color: rgb(130, 130, 130);
	transition: opacity .2s linear;
}

#scroll_to_top:hover .stl-pill {
	opacity: 1;
}

/* Kill parallax fixed background — it jumps on fast scroll */
body.site-chrome-sticky .header-banner,
body.site-chrome-sticky .header-section .header-image,
body.site-chrome-sticky .header-section {
	background-attachment: scroll !important;
}

body.site-chrome-sticky #page-header .header-section {
	position: relative;
	transform: translateZ(0);
	backface-visibility: hidden;
}

/* Hide Scripts-injected / Buba sidebar skyscrapers on cabinet & profile only.
   Main forum pages keep Buba custom_style + right_sidebar banners as configured. */
body.profile-section .drcpa-sidebar-ad-1,
body.profile-section .drcpa-sidebar-ad-2,
body.profile-section .drcpa-sidebar-ad-3,
body.cabinet-section .drcpa-sidebar-ad-1,
body.cabinet-section .drcpa-sidebar-ad-2,
body.cabinet-section .drcpa-sidebar-ad-3,
body.pm-section .drcpa-sidebar-ad-1,
body.pm-section .drcpa-sidebar-ad-2,
body.pm-section .drcpa-sidebar-ad-3,
body.subscriptions-section .drcpa-sidebar-ad-1,
body.subscriptions-section .drcpa-sidebar-ad-2,
body.subscriptions-section .drcpa-sidebar-ad-3,
body.news-section .drcpa-sidebar-ad-1,
body.news-section .drcpa-sidebar-ad-2,
body.news-section .drcpa-sidebar-ad-3 {
	display: none !important;
}

/* Buba ad sidebars: hide on mobile when ACP “Show sidebar on mobile” is off */
@media (max-width: 1023px) {
	.left-sidebar.sidebar-hide-mobile,
	.right-sidebar.sidebar-hide-mobile {
		display: none !important;
	}
}

body.site-chrome-sticky .navbar,
.navbar {
	position: sticky;
	top: 0;
	z-index: 12;
	width: 100%;
	transform: translateZ(0);
	backface-visibility: hidden;
	/* Light frosted glass (mobile + desktop) */
	background: rgba(255, 255, 255, 0.78) !important;
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom-color: rgba(60, 60, 67, 0.12);
	box-shadow: none !important;
}

html.dark .navbar,
:is(.dark .navbar) {
	background: rgba(15, 23, 42, 0.78) !important;
	border-bottom-color: rgba(84, 84, 88, 0.35);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.navbar {
		background: rgba(255, 255, 255, 0.94) !important;
	}

	html.dark .navbar,
	:is(.dark .navbar) {
		background: rgba(15, 23, 42, 0.94) !important;
	}
}

/* Second menu: scrolls with the page (not sticky) on mobile and desktop */
body.site-chrome-sticky .breadcrumbs-panel,
.breadcrumbs-panel {
	position: static;
	top: auto;
	z-index: auto;
	width: 100%;
	transform: none;
	backface-visibility: visible;
}

/* Top page-load progress (Discourse / Tilda style) */
.page-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 99999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.page-progress.is-active {
	opacity: 1;
}

.page-progress.is-done {
	opacity: 0;
	transition: opacity 0.35s ease 0.1s;
}

.page-progress__bar {
	height: 100%;
	width: 0;
	transform-origin: left center;
	background: rgba(var(--color-primary, 37 99 235), 1);
	box-shadow:
		0 0 8px rgba(var(--color-primary, 37 99 235), 0.55),
		0 0 2px rgba(var(--color-primary, 37 99 235), 0.8);
	transition: width 0.2s ease-out;
	will-change: width;
}

html.dark .page-progress__bar {
	background: rgba(var(--color-primary-dark, 96 165 250), 1);
	box-shadow:
		0 0 8px rgba(var(--color-primary-dark, 96 165 250), 0.5),
		0 0 2px rgba(var(--color-primary-dark, 96 165 250), 0.75);
}

@media (prefers-reduced-motion: reduce) {
	.page-progress,
	.page-progress__bar {
		transition: none;
	}
}

/* Docs/Word default black → theme text in dark mode (posts + quotes) */
html.dark .content [style*="color:#000"],
html.dark .content [style*="color: #000"],
html.dark .content [style*="color:#000000"],
html.dark .content [style*="color: #000000"],
html.dark .content [style*="color:black"],
html.dark .content [style*="color: black"],
html.dark .content [style*="color:rgb(0, 0, 0)"],
html.dark .content [style*="color: rgb(0, 0, 0)"],
html.dark .content font[color="#000"],
html.dark .content font[color="#000000"],
html.dark .content font[color="black"] {
	color: inherit !important;
}

/* Highlight marker — Light yellow 3 / soft amber in dark */
.content .bbcode-hl,
.bbcode-hl {
	padding: 0.05em 0.2em;
	border-radius: 0.2em;
	background-color: #fff2cc;
}

html.dark .content .bbcode-hl,
html.dark .bbcode-hl {
	background-color: rgba(250, 204, 21, 0.28);
}