/*
 * Site review fixes — Hub s554 (Max review 02.11, items B–F).
 * Loaded after custom.css / custom_doc.css / custom_responsive.css / betterdocs-custom.css
 * (inc/tpm-site-review-fixes.php), so equal-specificity rules here win.
 */

/* ---------- B. Home: tour launcher + offer card bottom-LEFT, like on every other page ----------
 * The home page content (TPM Home / Главная / Головна) moves the dock to the right on desktop
 * (inline style "tpm-home-tour-clearance": right:16px; bottom:110px). Keep the 110px clearance
 * above the slider tabs, but anchor the dock to the left edge. Below 1025px the page already
 * puts the dock in the flow, nothing to change there. */
@media (min-width: 1025px) {
	html body.home .tpm-tg-player .tpm-tg-player__launch-dock {
		left: max(16px, env(safe-area-inset-left, 0px)) !important;
		right: auto !important;
		/* s556 (Max 02.11): at the very bottom like on every other page — no 110px lift
		   over the slider tabs, also while scrolling. */
		bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
		align-items: flex-start !important;
	}
}

/* ---------- C. Prev / next pagination under an article: one level on mobile, off the screen edge ---------- */
@media (max-width: 767px) {
	body .doc-section .docs-navigation,
	html.tpm-guide-embed body .docs-navigation,
	body .tpm-guide-inline .docs-navigation {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 12px;
		margin: 16px 0;
		padding: 16px 6px;
	}
	body .doc-section .docs-navigation a,
	html.tpm-guide-embed body .docs-navigation a,
	body .tpm-guide-inline .docs-navigation a {
		flex: 1 1 0;
		min-width: 0;
		max-width: 50%;
		align-items: flex-start;
		gap: 8px;
		font-size: 15px;
		line-height: 20px;
	}
	/* The arrow keeps its size; negative margins centre it on the FIRST text line,
	   so a one-line and a two-line label start on the same level. */
	body .doc-section .docs-navigation a svg,
	html.tpm-guide-embed body .docs-navigation a svg,
	body .tpm-guide-inline .docs-navigation a svg {
		width: 32px !important;
		min-width: 32px;
		height: 35px;
		margin: -7.5px 0;
	}
}

/* ---------- D. Mobile: no empty strip under the header, one side gutter for all blocks ---------- */
/* The new header (body.tpm-hv2) is in the page flow, not fixed — the 60px top padding that
   reserved room for the old fixed header became an empty white strip. */
@media (max-width: 767px) {
	body.tpm-hv2.single-docs #wrapper-container #main-content,
	body.tpm-hv2.tax-doc_category #wrapper-container #main-content {
		padding-top: 0;
	}
}
/* Stacked layout (tablet + mobile): the article column gets the same 10px gutter as the
   category pages and the sidebar blocks below it, so all edges line up. */
@media (max-width: 991.98px) {
	body .doc-section .betterdocs-wrapper.sidebar-toc-enable .center-section {
		padding: 10px 10px 0;
	}
}

/* ---------- E. Cabinet → My Guides → Full Guide: «Tailoring» a little lower under «Tool Guide» ---------- */
body.tpm-profile-full-guide .tpm-mt-bar {
	margin-top: 8px;
}

/* ---------- F. Docs page on tablet ---------- */
/* 992–1199px: three columns stay, the article column gets the most width and the side
   columns give way first (300px each at 1199px → 200px each at 992px). */
@media (min-width: 992px) and (max-width: 1199.98px) {
	body .doc-section .betterdocs-display-flex.grid-col-3 > .left-section,
	body .doc-section .betterdocs-display-flex.grid-col-3 > .right-section {
		flex: 0 0 clamp(200px, calc(50% - 300px), 300px);
		width: auto;
		min-width: 0;
		max-width: none;
	}
	body .doc-section .betterdocs-display-flex.grid-col-3 > .center-section {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		max-width: none;
	}
}
/* 768–991px: one column like on mobile — the article takes the full width (no empty gap on the
   right) and categories + Popular Docs stay available under it. */
@media (min-width: 767px) and (max-width: 991.98px) {
	body .doc-section .betterdocs-display-flex > .center-section,
	body .doc-section .betterdocs-display-flex > .left-section,
	body .doc-section .betterdocs-display-flex > .right-section {
		width: 100% !important;
		max-width: 100%;
	}
	body .doc-section .cat-list,
	body .doc-section .pop-list {
		display: block;
	}
}
/* 992–1199px (s556, Max 02.11): the progress + Table of Contents box FOLLOWS the reader again, like on
   desktop, and Popular Docs is not covered at the top of the page. The box is sticky inside its own
   column (betterdocs-custom.js keeps setting "top" = header height + 16px); the column starts below
   the fixed header, so the box never jumps over Popular Docs. Not in the iframe of the three-window
   mode — there betterdocs-custom.js pins the box itself. Below 992px the box is hidden. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	html:not(.tpm-guide-embed) body .doc-section aside.right-section {
		padding-top: calc(76px + var(--wp-admin--admin-bar--height, 0px));
	}
	html:not(.tpm-guide-embed) body .doc-section aside.right-section .docs-right-sticky {
		position: -webkit-sticky !important;
		position: sticky !important;
		left: auto !important;
		width: auto !important;
		z-index: 5;
	}
	html:not(.tpm-guide-embed) body .doc-section aside.right-section .docs-right-sticky-sentinel {
		height: 0 !important;
		min-height: 0 !important;
	}
}