/* "Application CTA" (id="applcation-cta" - real typo already baked into the
   anchor name in the page content itself, not ours to fix here without
   breaking the anchor) is a mobile-only sticky duplicate of the "Apply Now"
   button that already sits in the page's normal content flow
   (.is-style-outline--10). Positioned fully off-screen below the viewport
   by default via transform (not display:none - display can't be animated,
   and the requirement is a smooth slide, not an instant cut) - script.js
   adds/removes .cuhk-cta-visible to slide it in/out, only in the 1-column
   mobile layout, and only while the bar hasn't yet reached the
   .wp-block-column containing the real button. */
#applcation-cta {
	min-width: 320px;
	position: fixed;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 40; /* below .cuhk-header's z-index:50 */
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
	/* 100% of its own height clears it completely; +40px is a small buffer
	   so no edge is ever left peeking into view. */
	transform: translateY(calc(100% + 40px));
	transition: transform 0.3s ease;
	pointer-events: none; /* not interactable while off-screen */
	/* Promotes this fixed element to its own compositor layer. Without
	   this, mobile Safari defers repainting position:fixed elements while
	   a touch-scroll gesture is actively in progress and only "catches up"
	   once the scroll momentum settles - so a transition triggered mid-
	   scroll can end up snapping straight to its end state right as
	   scrolling stops, instead of visibly sliding, even though the same
	   transition plays correctly on desktop/non-fixed elements. */
	will-change: transform;
}
#applcation-cta.cuhk-cta-visible {
	transform: translateY(0);
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	#applcation-cta {
		transition: none;
	}
}
/* internal comments 20260911 #1.1: this bar shares z-index:40 with
   .header__overlay (the mobile nav drawer, cuhk-header.css) - when the
   drawer is open and this bar also happens to be slid in (scrolled past
   the real button), it renders on top of the drawer's last menu item
   instead of being covered by it, confirmed live via Playwright
   (programme/innovation-leadership on mobile, drawer open + several
   accordions expanded). Force it fully off-screen and non-interactive
   whenever the drawer is active, regardless of its own scroll-based
   visibility state - the !important is required since .cuhk-cta-visible
   above also carries an unqualified (non-!important) transform that would
   otherwise still win by source order. */
body:has(.header__overlay.active) #applcation-cta {
	transform: translateY(calc(100% + 40px)) !important;
	pointer-events: none !important;
}