/* Keep responsive content within the mobile layout without changing scroll
 * ownership. In particular, avoid overflow clipping on page sections because
 * iOS Safari can treat those paint boundaries as touch-scroll traps. */
html,
body {
	width: 100%;
	max-width: 100%;
	overscroll-behavior-x: none;
}

/* iPhone and iPad do not expose a reliable per-element volume level to the
 * browser. Keep mute controls available, but remove every visual range slider
 * so the interface never promises volume adjustment that iOS will ignore. */
.two-cr-apple-touch-device .two-cr-inline-player__volume,
.two-cr-apple-touch-device .two-cr-program-player__volume,
.two-cr-apple-touch-device .two-cr-home-volume__range,
.two-cr-apple-touch-device .twocr-persistent-volume,
.two-cr-apple-touch-device .mejs-horizontal-volume-slider,
.two-cr-apple-touch-device .mejs-volume-slider,
.two-cr-apple-touch-device .jp-volume-bar {
	display: none !important;
}

@media (max-width: 900px) {
	/* The theme's critical CSS gives the desktop header a 198px-tall top row,
	 * but only hides it later in the full mobile stylesheet. Hide it in the
	 * early site shell so slow mobile loads never reserve a blank block above
	 * the real phone header. */
	.header {
		display: none !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.phone_header {
		margin-top: 0 !important;
	}

	/* AdSense auto-ads can inject a fixed top anchor directly beneath <html>
	 * and add inline top padding to <body>. If that ad is blocked or fails to
	 * render, the reserved padding becomes a large empty area above the header.
	 * Remove only that top anchor; regular in-content ad slots remain intact. */
	html > ins.adsbygoogle.adsbygoogle-noablate[data-anchor-status],
	body > ins.adsbygoogle.adsbygoogle-noablate[data-anchor-status] {
		display: none !important;
	}

	html,
	body {
		padding-top: 0 !important;
	}

	/* iOS can rubber-band the visual viewport sideways even when the document
	 * has no horizontal overflow. Keep the document gesture vertical without
	 * introducing an overflow container that can trap vertical scrolling. */
	body {
		touch-action: pan-y pinch-zoom;
	}

	body > * {
		min-width: 0;
		max-width: 100%;
	}

	.swiper-container,
	.swiper-outer,
	.home_banner,
	.home_news,
	.home_show,
	.home_first,
	.home_interview,
	.life_interview,
	.footer,
	footer {
		min-width: 0;
		max-width: 100%;
	}

	ins.adsbygoogle,
	.adsbygoogle,
	ins.adsbygoogle iframe,
	.adsbygoogle iframe,
	iframe[id^="aswift_"],
	iframe[id^="google_ads_iframe_"] {
		width: 100% !important;
		max-width: 100vw !important;
	}
}

/* Shared staging navigation refinement. The mobile drawer uses separate theme
 * markup and is intentionally left untouched. */
@media (min-width: 901px) {
	.nav {
		position: relative !important;
		height: 62px !important;
		margin-bottom: 24px !important;
		padding: 6px !important;
		box-sizing: border-box;
		border: 1px solid #e1e7d2;
		border-radius: 16px;
		background: linear-gradient(180deg, #f8faf4 0%, #f1f5e8 100%);
		box-shadow: 0 12px 30px rgba(52, 66, 15, .12) !important;
	}

	.nav .menu-mainmenu-container,
	.nav .menu-mainmenu-container > ul {
		width: 100% !important;
		height: 100% !important;
	}

	.nav .menu-mainmenu-container > ul {
		display: flex !important;
		position: absolute !important;
		inset: 0 !important;
		align-items: stretch;
		gap: 5px;
		margin: 0 !important;
		padding: 6px !important;
		box-sizing: border-box;
	}

	.nav .menu-mainmenu-container > ul > li {
		position: relative;
		float: none !important;
		flex: 1 1 0;
		width: auto !important;
		height: 50px !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none;
	}

	.nav .menu-mainmenu-container > ul > li > a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		height: 50px !important;
		padding: 0 12px !important;
		border-right: 0;
		border-radius: 10px;
		background: rgba(255, 255, 255, .76) !important;
		box-shadow: inset 0 0 0 1px rgba(71, 88, 35, .08), 0 2px 6px rgba(49, 68, 90, .04);
		color: #31445a !important;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
		font-size: 17px !important;
		font-weight: 800 !important;
		line-height: 1.2 !important;
		text-align: center;
		text-decoration: none !important;
		white-space: nowrap;
		transition: background .18s ease, color .18s ease, box-shadow .18s ease;
	}

	.nav .menu-mainmenu-container > ul > li:not(:last-child)::after {
		display: none;
	}

	.nav .menu-mainmenu-container > ul > li.current-menu-item > a,
	.nav .menu-mainmenu-container > ul > li.current-menu-parent > a,
	.nav .menu-mainmenu-container > ul > li.current-post-ancestor > a,
	.nav .menu-mainmenu-container > ul > li > a:hover {
		background: linear-gradient(135deg, #91a33b, #abbf4a) !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
		color: #fff !important;
	}

	.nav .menu-mainmenu-container > ul > li.current-menu-item::after,
	.nav .menu-mainmenu-container > ul > li.current-menu-parent::after,
	.nav .menu-mainmenu-container > ul > li.current-post-ancestor::after,
	.nav .menu-mainmenu-container > ul > li:hover::after {
		opacity: 0;
	}

	.nav .menu-mainmenu-container > ul > li > .sub-menu {
		top: 50px !important;
		left: 0 !important;
		z-index: 50;
		min-width: 220px;
		padding: 8px !important;
		border: 1px solid #dce4eb;
		border-radius: 0 0 16px 16px;
		background: #fff !important;
		box-shadow: 0 18px 36px rgba(23, 34, 50, .16);
	}

	.nav .menu-mainmenu-container > ul > li > .sub-menu li,
	.nav .menu-mainmenu-container > ul > li > .sub-menu a {
		float: none !important;
		width: 100% !important;
	}

	.nav .menu-mainmenu-container > ul > li > .sub-menu a {
		display: block;
		padding: 11px 13px !important;
		border-radius: 9px;
		color: #31445a !important;
		font-size: 15px !important;
		font-weight: 700;
		line-height: 1.35 !important;
		white-space: normal;
	}

	.nav .menu-mainmenu-container > ul > li > .sub-menu a:hover {
		background: #f4f7e7 !important;
		color: #56700b !important;
	}
}