/* ==========================================================================
   iOS/PWA hotfix layer
   --------------------------------------------------------------------------
   Toggle in functions.php:
   define( 'MONASH_ENABLE_IOS_HOTFIX', true );
   ========================================================================== */

:root {
	--monash-safe-top: env(safe-area-inset-top, 0px);
	--monash-safe-right: env(safe-area-inset-right, 0px);
	--monash-safe-bottom: env(safe-area-inset-bottom, 0px);
	--monash-safe-left: env(safe-area-inset-left, 0px);
}

/* --------------------------------------------------------------------------
   1) Viewport height normalization on iOS.
   Keep overrides local to known full-screen sections only.
   -------------------------------------------------------------------------- */
@supports (-webkit-touch-callout: none) {
	/* Home full-screen sections */
	.monash-home-main,
	.monash-home [data-section],
	/* Template sections with 100dvh in source CSS */
	.monash-ranks__section,
	.monash-glossary,
	/* Quiz viewport blocks */
	.page-template-page-quiz .monash-quiz-main,
	.page-template-page-quiz [class*="quiz-result__header"],
	.page-template-page-quiz [class*="quiz-result"]:not([class*="quiz-result__"]) {
		min-height: 100svh;
	}

	@supports (height: 100dvh) {
		.monash-home-main,
		.monash-home [data-section],
		.monash-ranks__section,
		.monash-glossary,
		.page-template-page-quiz .monash-quiz-main,
		.page-template-page-quiz [class*="quiz-result__header"],
		.page-template-page-quiz
			[class*="quiz-result"]:not([class*="quiz-result__"]) {
			height: 100dvh !important;
			min-height: 100dvh !important;
		}
	}
}

/* --------------------------------------------------------------------------
   2) Old Safari fallback for quiz pages without :has().
   The quiz bundle uses :has() to restore scrolling; if unsupported, layout can
   stay locked. Scope this fallback to quiz template only.
   -------------------------------------------------------------------------- */
@supports not selector(:has(*)) {
	body.page-template-page-quiz {
		overflow: visible !important;
	}

	body.page-template-page-quiz main:not(.scroll-visible) {
		overflow-x: hidden !important;
		overflow-y: auto !important;
		scroll-snap-type: y proximity !important;
	}
}

/* --------------------------------------------------------------------------
   3) Standalone PWA safe-area tuning.
   -------------------------------------------------------------------------- */
@media (display-mode: standalone) {
	.monash-nav-toggle {
		top: calc(var(--monash-safe-top) + 0.75rem) !important;
		right: max(
			calc(var(--monash-safe-right) + 0.75rem),
			calc((100vw - 529px) / 2 + 0.75rem)
		);
	}

	.monash-nav-close {
		top: calc(var(--monash-safe-top) + 1rem) !important;
		right: calc(var(--monash-safe-right) + 0.75rem);
	}

	.monash-nav-panel {
		padding-top: calc(var(--monash-safe-top) + 0.5rem);
		padding-bottom: calc(var(--monash-safe-bottom) + 1rem);
		padding-left: max(0px, var(--monash-safe-left));
		padding-right: max(0px, var(--monash-safe-right));
	}

	/* Quiz overlay elements (CSS modules hashed classnames). */
	body.page-template-page-quiz [class*="_menu_"],
	body.page-template-page-quiz [class*="_player_"],
	body.page-template-page-quiz [class*="glossary-popup-overlay"] {
		padding-top: max(1rem, var(--monash-safe-top)) !important;
		padding-bottom: max(1rem, var(--monash-safe-bottom)) !important;
		padding-left: max(0.75rem, var(--monash-safe-left)) !important;
		padding-right: max(0.75rem, var(--monash-safe-right)) !important;
	}

	/* Keep bottom controls above iPhone home indicator on Home template. */
	.monash-home .scroll-down {
		bottom: calc(1rem + var(--monash-safe-bottom)) !important;
	}
}