/*
Theme Name: Eduma Child
Theme URI: https://eduma.thimpress.com/
Description: Production child theme – Digits login/register in Eduma popup + Profile Tabs Manager.
Author: Custom
Template: eduma
Version: 5.1.22
Text Domain: eduma-child
*/

/*
 * Mobile header stability for Eduma.
 *
 * Eduma adds .menu-hidden to #masthead while a visitor scrolls down, then
 * translates the entire sticky header above the viewport. On Android this
 * can make the navigation appear to disappear or return late. Keep the
 * existing sticky header visible on small screens only; its layout, menu
 * links, desktop behavior, and all quiz/PWA code remain unchanged.
 */
@media (max-width: 768px) {
	#masthead.sticky-header.affix.menu-hidden {
		-webkit-transform: translate(0, 0) !important;
		transform: translate(0, 0) !important;
	}
}

/*
 * Mobile bottom nav bar stability (Eduma's .navbar-mobile-button, the
 * "Home / Courses / Search / Account" bar).
 *
 * Eduma's flex items (.item-menubar) keep the browser default
 * min-width: auto, meaning they refuse to shrink below their own
 * content width. On Android, fast scrolling makes Chrome briefly
 * collapse/expand the URL bar, which momentarily shrinks the usable
 * viewport width. In that instant the items can't shrink to fit, so
 * the bar becomes briefly wider than the screen (the sideways
 * "roller") and can flicker/disappear until the browser chrome and
 * layout settle again.
 *
 * This only forces the items to shrink evenly and locks the bar to
 * its own compositor layer so it isn't dropped/repainted during that
 * resize. It is scoped with :not(.hide) so it never touches the
 * quiz-page behaviour, which works by Eduma's own JS toggling the
 * .hide class on this same element (see thim-scripts.js
 * course_menu_landing()) — that toggle, and everything about the
 * quiz pages, is left completely alone.
 */
@media (max-width: 768px) {
	/* Stop an oversized child from turning the entire Android page into a
	 * horizontal scroller. `hidden` supports older WebView versions; modern
	 * Chrome upgrades it to `clip` and therefore creates no scroll container. */
	html,
	body {
		max-width: 100%;
		overflow-x: hidden !important;
	}
	@supports (overflow: clip) {
		html,
		body {
			overflow-x: clip !important;
		}
	}

	.navbar-mobile-button:not(.hide) {
		/* Anchor both physical edges. Unlike width:100%, this remains stable
		 * while Android Chrome changes the visual viewport during a fast scroll. */
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
		overflow-x: hidden;
		overflow-x: clip;
		flex-wrap: nowrap;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		will-change: transform;
		overscroll-behavior-x: none;
	}
	.navbar-mobile-button:not(.hide) .item-menubar {
		min-width: 0;
		max-width: 100%;
		flex: 1 1 0;
		overflow: hidden;
	}
}