/**
 * mobile-app-bridge.css
 *
 * Pads the site's fixed header below the iOS status bar / Dynamic Island
 * when running inside the native app WebView. Scoped to body.mab-native-app
 * so desktop/mobile-web visitors are unaffected. env() requires
 * viewport-fit=cover on the viewport meta (set by mobile-app-bridge.js).
 */
body.mab-native-app .bb-mobile-header-wrapper {
	/* Fallback for engines without env() */
	padding-top: 20px;
	padding-top: env( safe-area-inset-top, 20px );
	/* Wrapper has an explicit 76px height from theme breakpoint rules;
	   border-box padding would squeeze the icon row instead of pushing it
	   down. Release height and let the inner .bb-mobile-header (76px)
	   define content height, so total = 76px + inset. */
	height: auto;
}

/* 2.2.3: theme offsets content by the original 76px header height; the safe-area
   fix grew the fixed header by env(safe-area-inset-top), so the taller header
   overlaps the top of content in-app. Compensate by the same inset.
   76px verified via live Web Inspector probe on emilton.org, 2026-08-06. */
body.mab-native-app #content.site-content {
	padding-top: calc(76px + env(safe-area-inset-top, 20px));
}