/*
 * Mobile fit — Hub s564 (Max video 03.11, 07:20–09:55).
 * Loaded last (inc/tpm-site-review-fixes.php). Phones and tablets only; desktop is untouched.
 *
 * 1. Header v2 never wider than the screen. Logged in, the right side carries
 *    EN + search + avatar + cabinet icon + burger: 379px of controls on a 375px screen,
 *    so the whole page could be dragged sideways (the white line on the right edge).
 *    The logo now gives way first; on narrow phones the controls get a little tighter.
 * 2. Cabinet: no empty strip between the header and the cabinet menu. custom.css keeps
 *    60px of top padding for the OLD fixed header; the v2 header is in the page flow, so
 *    the 60px was an empty white strip, and the page jumped by 60px each time the header
 *    slid away and came back (the hidden state already drops that padding).
 * 3. Cabinet menu pop-up ("All Projects" and the other sections): always inside the
 *    visible screen, on any height — scrolls inside, never runs off the bottom.
 * 4. Tour launcher: fixed bottom-left on the screen, also on the TPM pages (Home,
 *    Framework, About …) whose own page CSS put it into the flow under the footer.
 */

/* ---------- 1. Header v2: fits the screen ---------- */
@media (max-width: 600px) {
	html body .tpm-hv2-head .tx2-shell {
		max-width: 100%;
		min-width: 0;
		overflow-x: clip;
	}
	html body .tpm-hv2-head .tx2-brand {
		flex: 0 1 160px;
		min-width: 0;
	}
	html body .tpm-hv2-head .tx2-brand img {
		width: 100%;
		max-width: 160px;
		height: auto;
	}
	html body .tpm-hv2-head .tx2-right {
		flex: 0 0 auto;
		min-width: 0;
	}
}
@media (max-width: 400px) {
	html body .tpm-hv2-head .tx2-shell {
		padding-left: 10px;
		padding-right: 8px;
		gap: 4px;
	}
	html body .tpm-hv2-head .tx2-right,
	html body .tpm-hv2-head .tx2-right-widgets {
		gap: 0;
	}
	html body .tpm-hv2-head .tx2-right-widgets .search-toggle,
	html body .tpm-hv2-head .tx2-right-widgets .thim-link-login > a,
	html body .tpm-hv2-head .tx2-right-widgets .minicart_hover {
		min-width: 36px;
	}
	html body .tpm-hv2-head .tx2-lang__btn {
		padding: 0 4px;
	}
	html body .tpm-hv2-head .tx2-burger {
		width: 40px;
	}
	html body .tpm-hv2-head .tx2-burger span {
		left: 9px;
		right: 9px;
	}
}
/* the burger sheet fits the visible screen (100vh is taller than the screen on phones) */
@media (max-width: 1200px) {
	html body .tpm-hv2-head .tx2-mobile {
		max-height: calc(100dvh - 66px);
		overscroll-behavior: contain;
	}
}
@media (max-width: 600px) {
	html body .tpm-hv2-head .tx2-mobile {
		max-height: calc(100dvh - 58px);
	}
}

/* ---------- 2. Cabinet: no reserved strip under the in-flow header ---------- */
@media (max-width: 1024px) {
	html body.tpm-hv2.learnpress-profile .container.site-content {
		padding-top: 0 !important;
	}
}

/* ---------- 3. Cabinet menu pop-up fits the screen ---------- */
@media (max-width: 990px) {
	html body .popup-overlay {
		height: 100vh;
		height: 100dvh;
	}
	/* top stays at 20%; the box ends 12px above the bottom edge and scrolls inside */
	html body .popup-overlay .popup-content {
		max-height: calc(80% - 12px) !important;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ---------- 4. Tour launcher fixed on the screen (bottom-left) ---------- */
@media (max-width: 1024px) {
	html body .tpm-tg-player .tpm-tg-player__launch-dock {
		position: fixed !important;
		left: max(16px, env(safe-area-inset-left, 0px)) !important;
		right: auto !important;
		top: auto !important;
		bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
		width: auto !important;
		margin: 0 !important;
		align-items: flex-start !important;
	}
	html body .tpm-tg-player .tpm-tg-player__launch-row {
		justify-content: flex-start;
	}
}

/* ---------- 5. Nothing makes a page wider than the screen (Hub s565, Max video 03.11 evening) ----------
 * Point 1 makes the header fit; this is the guard for anything else that runs past the right
 * edge (white strip on the right, the phone zooming out so the pinned tour button falls below
 * the visible bottom edge).
 * Fix (Max video 03.11, 14:45 — phones and tablets did not scroll at all): the guard sits on
 * BODY only. With `clip` on html too, the browser took html's overflow for the whole screen and
 * the page lost its vertical scroll. On body alone it is handed to the screen as "no sideways
 * movement, normal scroll up and down"; html stays visible. */
@media (max-width: 1024px) {
	html { overflow-x: visible; }
	html body { overflow-x: clip; }
}