/**
 * iOS Mobile Safari — page frame, overscroll, safe areas.
 * Pairs with theme-color meta (inc/ios-safari.php).
 *
 * Loaded on every public page. Rules inside @supports (-webkit-touch-callout: none)
 * target iOS Safari; :root vars are safe fallbacks elsewhere.
 */

:root {
	--studio-frame-paper: #faf9f7;
	--studio-frame-ink: #0e1a1f;
	--studio-frame-soon: #0d1012;
	--studio-safe-top: env(safe-area-inset-top, 0px);
	--studio-safe-right: env(safe-area-inset-right, 0px);
	--studio-safe-bottom: env(safe-area-inset-bottom, 0px);
	--studio-safe-left: env(safe-area-inset-left, 0px);
}

/* Rubber-band and letterboxing show html background — not default white. */
html {
	background-color: var(--studio-frame-paper);
	color-scheme: light;
}

body {
	background-color: var(--studio-frame-paper);
	min-height: 100%;
	min-height: -webkit-fill-available;
}

.wp-site-blocks {
	min-height: 100vh;
	min-height: 100svh;
	min-height: -webkit-fill-available;
}

body.studio-frame--dark {
	background-color: var(--studio-frame-ink);
}

body.studio-frame--dark.studio-frame--soon,
body:has(.coming-soon-page) {
	background-color: var(--studio-frame-soon);
}

html:has(body.studio-frame--dark) {
	background-color: var(--studio-frame-ink);
}

html:has(body:has(.coming-soon-page)) {
	background-color: var(--studio-frame-soon);
}

/* Mixed-frame pages: paper main band; ink only in overscroll when JS has not run yet */
body.studio-frame--mixed main {
	background-color: var(--studio-frame-paper);
}

/* Work hub (homepage): white main canvas */
body.home.studio-frame--mixed main {
	background-color: #ffffff;
}

/* ─── iOS Safari only ─────────────────────────────────────────── */

@supports (-webkit-touch-callout: none) {
	.site-header,
	.site-header.has-global-padding {
		padding-left: max(var(--wp--style--root--padding-left, 1.5rem), var(--studio-safe-left)) !important;
		padding-right: max(var(--wp--style--root--padding-right, 1.5rem), var(--studio-safe-right)) !important;
	}

	@media (max-width: 782px) {
		.site-header,
		.site-header.has-global-padding {
			padding-top: max(0.5rem, var(--studio-safe-top)) !important;
		}
	}

	/* Home hero — full viewport under notch */
	.hero-interactive {
		padding-top: var(--studio-safe-top);
		box-sizing: border-box;
		min-height: 100vh;
		min-height: 100svh;
	}

	/* Cinematic heroes — work hub, clusters, bridges, work full case pages */
	.studio-hero.studio-hero--video .cluster-hero__content,
	.studio-hero.studio-hero--video .work-bridge-hero__inner,
	.studio-hero.studio-hero--work .work-hero__content.cluster-hero__content {
		padding-left: max(
			var(--studio-hero-pad-left, var(--wp--style--root--padding-left, 1.5rem)),
			var(--studio-safe-left)
		) !important;
		padding-right: max(
			var(--studio-hero-pad-right, var(--wp--style--root--padding-right, 1.5rem)),
			var(--studio-safe-right)
		) !important;
	}

	@media (max-width: 782px) {
		.studio-hero.studio-hero--video .cluster-hero__content,
		.studio-case__hero.studio-hero--video .cluster-hero__content,
		.studio-hero--work-bridge .cluster-hero__content,
		.studio-hero--project-bridge .cluster-hero__content {
			padding-top: max(
				var(--wp--preset--spacing--50, 2.5rem),
				calc(var(--studio-safe-top) + 0.35rem)
			) !important;
			padding-bottom: max(var(--wp--preset--spacing--50, 2.5rem), var(--studio-safe-bottom)) !important;
		}

		.studio-gate-context--case-study .studio-case__hero.studio-hero--video .cluster-hero__content {
			padding-top: max(
				var(--wp--preset--spacing--40, 1.5rem),
				calc(var(--studio-safe-top) + 0.25rem)
			) !important;
			padding-bottom: max(var(--wp--preset--spacing--40, 1.5rem), var(--studio-safe-bottom)) !important;
		}
	}

	/* Paper content shells — bridges, full case studies, essays */
	main.studio-bridge-page,
	main.studio-work-bridge.studio-bridge-page,
	main.studio-project-bridge.studio-bridge-page {
		padding-left: max(var(--wp--style--root--padding-left, 1.5rem), var(--studio-safe-left)) !important;
		padding-right: max(var(--wp--style--root--padding-right, 1.5rem), var(--studio-safe-right)) !important;
	}

	.studio-case__body .wp-block-post-content,
	.studio-case__body .entry-content {
		padding-left: max(var(--wp--style--root--padding-left, 1.5rem), var(--studio-safe-left)) !important;
		padding-right: max(var(--wp--style--root--padding-right, 1.5rem), var(--studio-safe-right)) !important;
	}

	main.studio-essay .studio-essay__header,
	main.studio-essay .studio-essay__prose {
		padding-left: max(var(--wp--style--root--padding-left, 1.5rem), var(--studio-safe-left)) !important;
		padding-right: max(var(--wp--style--root--padding-right, 1.5rem), var(--studio-safe-right)) !important;
	}

	.studio-case__body .cs-gate,
	.studio-case__body .post-password-form.cs-gate {
		padding-left: max(0px, var(--studio-safe-left));
		padding-right: max(0px, var(--studio-safe-right));
		box-sizing: border-box;
	}

	.coming-soon-page {
		padding-top: max(var(--wp--preset--spacing--60, 4rem), var(--studio-safe-top)) !important;
		padding-bottom: max(var(--wp--preset--spacing--60, 4rem), var(--studio-safe-bottom)) !important;
		padding-left: max(var(--wp--preset--spacing--55, 3rem), var(--studio-safe-left)) !important;
		padding-right: max(var(--wp--preset--spacing--55, 3rem), var(--studio-safe-right)) !important;
	}

	.site-footer {
		padding-bottom: max(var(--wp--preset--spacing--55, 3rem), var(--studio-safe-bottom)) !important;
		padding-left: max(var(--wp--style--root--padding-left, 1.5rem), var(--studio-safe-left)) !important;
		padding-right: max(var(--wp--style--root--padding-right, 1.5rem), var(--studio-safe-right)) !important;
	}
}