/*
 * Off-canvas menu at 200 % zoom (WCAG 1.4.4).
 *
 * Astra's drawer has no height limit of its own. Where a project sets
 * `height: fit-content` the drawer content exceeds the viewport at
 * 1280x768 / 200 % zoom: the page behind it scrolls, the drawer does not, and
 * the second menu level stays permanently out of reach.
 */

.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
	max-height: 100dvh;
	overflow-y: auto;

	/* Do not hand the scroll over to the page once the drawer hits its end. */
	overscroll-behavior: contain;
}

/* Fallback for browsers without dvh support. */
@supports not (height: 100dvh) {
	.ast-mobile-popup-drawer.active .ast-mobile-popup-inner {
		max-height: 100vh;
	}
}

/*
 * Percentage side padding (projects use up to 35 % per side) squeezes the
 * content into a third of the width once the viewport gets narrow in CSS
 * pixels, which is exactly what zooming does. clamp() keeps the intent on
 * wide screens and gives the content room when there is none to spare.
 */
@media (width >= 992px) {
	.ast-mobile-popup-drawer.active .ast-mobile-popup-inner .ast-desktop-popup-content {
		padding-left: clamp(1rem, 35%, 35%);
		padding-right: clamp(1rem, 35%, 35%);
	}
}

/*
 * Below 600 CSS pixels of height there is no room for generous padding at all
 * - that is the 200 % zoom case on a 768px tall screen.
 */
@media (height <= 600px) {
	.ast-mobile-popup-drawer.active .ast-mobile-popup-inner .ast-desktop-popup-content,
	.ast-mobile-popup-drawer.active .ast-mobile-popup-inner .ast-mobile-popup-content {
		padding-left: 1rem;
		padding-right: 1rem;
		padding-bottom: 1rem;
	}
}