/* ------------------------------------------------------------------ *
 * Arveon shared mobile layer.
 *
 * The nav and footer markup is copy-pasted across every page template,
 * so its CSS is duplicated across five stylesheets. Rather than edit all
 * five, phone-specific corrections live here and load last on every
 * page, in both English and Chinese.
 *
 * Everything below is scoped to touch/narrow screens, so the desktop
 * layout is untouched.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 1. Real phone viewport height
 *
 * Phone browsers hide the address bar as you scroll, so "100vh" is the
 * TALL version of the viewport, not what you can actually see. Anything
 * pinned to 100vh therefore hangs below the fold, and its bottom-anchored
 * text sits under the address bar. "svh" is the short (bar-showing)
 * height, which stays put whether the bar is showing or not.
 * ------------------------------------------------------------------ */

@supports (height: 100svh) {
	@media (max-width: 900px) {
		/* Pinned homepage hero stage. */
		.av-stage {
			height: 100svh;
		}

		/* Scroll track that drives the hero. Keeping it in the same unit as
		   the stage stops the animation from re-timing when the bar moves. */
		.av-scroll {
			height: 520svh;
		}

		/* Full-height opening screens on LifeRing and Lift Protocol. */
		.av-lr-hero,
		.av-ls-hero {
			min-height: 100svh;
		}
	}
}

/* ------------------------------------------------------------------ *
 * 2. No sideways scrolling
 *
 * A single over-wide element makes the whole page drift left and right
 * under the thumb. "clip" pins it without breaking the sticky nav or the
 * pinned hero the way "hidden" would.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	body {
		overflow-x: clip;
	}

	/* Stop iOS inflating body text when the phone is turned sideways. */
	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * 3. Phone header: one flush bar across the top
 *
 * On desktop the header is a floating pill inset from the page edges,
 * which on a phone left the bar too narrow for everything it carried —
 * the "Contact Us" button ran off the right-hand edge of the screen. On
 * phones it becomes a plain full-width bar stuck to the top, carrying
 * only the three things wanted at a glance: logo, sound on/off and the
 * language switch. The page links, WhatsApp and Contact Us all live in
 * the burger menu instead.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	/* Edge to edge, no inset, top of the screen at all times. The desktop
	   rule animates this padding on scroll; zero here means nothing shifts. */
	.av-nav-wrap {
		padding: 0;
	}

	/* Square off the pill and drop its side and top edges, leaving a single
	   hairline where the bar meets the page. */
	.av-nav {
		border-radius: 0;
		border-left: none;
		border-right: none;
		border-top: none;
		padding: 10px 16px;
		gap: 8px;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	}

	/* The language switch is hidden below 900px by every page stylesheet;
	   on the new bar there is room for it, so it comes back — and the phone
	   menu no longer needs its own copy of it. */
	.av-nav__lang {
		display: block;
	}

	/* Moved into the burger menu: WhatsApp and Contact Us. The menu already
	   carries a Contact Us button, and it goes to the same page. */
	.av-nav__whatsapp,
	.av-nav__col--right .av-nav__cta {
		display: none;
	}

	/* The thin separators were spacing out five items; three sit better on
	   plain gaps. */
	.av-nav__divider {
		display: none;
	}

	.av-nav__col--left {
		gap: 14px;
	}

	/* The dropdown hangs off a bar that now reaches the screen edge, so pin
	   it under the switch rather than centring it on it. */
	.av-nav__lang-menu {
		top: calc(100% + 8px);
		left: auto;
		right: 0;
		transform: translateY(-6px);
	}

	.av-nav__lang:hover .av-nav__lang-menu,
	.av-nav__lang:focus-within .av-nav__lang-menu,
	.av-nav__lang.is-open .av-nav__lang-menu {
		transform: translateY(0);
	}

	.av-lang-toggle {
		font-size: 14px;
		padding: 8px 4px;
	}

	/* The slide-down menu hangs directly off the bar, at the same width. */
	.av-mobile-menu {
		margin-top: 0;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.av-nav-wrap.is-expanded .av-mobile-menu {
		margin-top: 0;
	}
}

/* ------------------------------------------------------------------ *
 * 4. Thumb-sized tap targets
 *
 * The nav icons and footer social links are drawn at 30-34px, which is
 * fine for a mouse pointer and fiddly for a fingertip. The circles stay
 * the same size visually; the tappable area around them grows to 44px.
 * ------------------------------------------------------------------ */

@media (pointer: coarse) {
	.av-nav__icon-btn,
	.av-nav__burger,
	.av-footer__social a {
		position: relative;
		-webkit-tap-highlight-color: transparent;
	}

	.av-nav__icon-btn::after,
	.av-nav__burger::after,
	.av-footer__social a::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}

	/* Menu rows are already full-width; just give them a full finger. */
	.av-mobile-menu__list a {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	/* Footer link lists sit close together on a phone. */
	.av-fcol a,
	.av-footer__legal a {
		display: inline-block;
		padding: 4px 0;
	}
}

/* ------------------------------------------------------------------ *
 * 5. Form fields
 *
 * iOS zooms the page in whenever a field's text is under 16px. Matching
 * 16px keeps the page still when a field is tapped.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	input,
	select,
	textarea {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------ *
 * 6. Wide tables
 *
 * The comparison table is deliberately wider than a phone and scrolls
 * inside its own box. This just makes it obvious that it can be swiped.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.av-ls-compare__table-wrap {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}
}

/* ------------------------------------------------------------------ *
 * 7. Homepage opening screen at phone size
 *
 * The phone rules shrank D.O. to roughly a quarter of the screen width
 * and left the headline on its smallest step, so the opening screen read
 * as a lot of empty background with a small figure and small type in it.
 * D.O. and the words underneath him are scaled up to fill the screen; the
 * "Start Here" button is deliberately left at the size it already is.
 *
 * The English and Chinese homepages share these class names, so both
 * follow from here.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.av-do {
		/* Was clamp(100px, 26vw, 160px) — about 100px on a typical phone. */
		width: clamp(190px, 48vw, 300px);
	}

	.av-hero-copy__label {
		font-size: 13px;
		letter-spacing: 0.2em;
		margin-bottom: 16px;
	}

	.av-hero-copy__headline {
		font-size: clamp(34px, 9vw, 46px);
		margin-bottom: 20px;
	}

	.av-hero-copy__sub {
		font-size: 17px;
		line-height: 1.65;
		margin-bottom: 28px;
	}
}

/* ------------------------------------------------------------------ *
 * 8. "Better State. Better Life." clear of the fade
 *
 * The homepage footer opens on black, so it reads as a continuation of
 * the last frame of the hero, then fades to cream. That fade is measured
 * in fixed pixels (it finishes 380px down) because it has to line up with
 * the image above it, but the gap above the closing headline shrinks with
 * the screen — down to 80px on a phone. The dark headline therefore landed
 * halfway up the fade, on a ground almost as dark as itself.
 *
 * Holding it below 380px puts it back on flat cream at any phone width.
 * Scoped to the homepage, which is the only footer that opens on black.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	body.arveon-home .av-footer {
		padding-top: 400px;
	}
}

/* ------------------------------------------------------------------ *
 * 9. Homepage hero copy uses the full width
 *
 * Two separate things were keeping the opening lines narrower than the
 * screen: the block itself was capped at 86% of the width, and the
 * headline used "balance", which evens the lines out by pulling them in
 * rather than filling each one. Together they left a wide margin down
 * both sides with the text stacked into more lines than it needed.
 *
 * Balancing is worth having on a wide screen, where a headline is one or
 * two long lines; on a phone it just wastes the width. Desktop keeps it.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.av-hero-copy {
		max-width: 94vw;
	}

	.av-hero-copy__headline {
		text-wrap: normal;
	}
}

/* ------------------------------------------------------------------ *
 * 10. D.O. LifeRing hero — show the ring on a phone
 *
 * The hero photo is a wide landscape shot (1774x887) with the ring sitting
 * about three-quarters of the way across it. The page fills the whole hero
 * with that photo ("cover") anchored on its centre, which on a wide screen
 * is right. On a phone the hero is taller than it is wide, so filling it
 * crops the photo down to a narrow strip through the middle — sand and sky
 * either side of the ring, and no ring at all.
 *
 * Rather than crop harder, the photo becomes a band across the top of the
 * hero: sized by height so the whole thing is never taller than 42% of the
 * screen, and anchored to the right so the ring lands near the middle. The
 * rest of the hero is the same near-black the photo is already tinted with,
 * so the headline and D.O. card below simply sit on dark, and the band's
 * bottom edge is faded into it rather than cut.
 *
 * Two background sizes because the section carries two layers: the darkening
 * gradient (inline on the element) still covers the whole hero, the photo
 * only the band. Written in plain units, not a variable, so an older browser
 * that does not know "svh" drops these lines and keeps the current look
 * instead of half-applying them.
 *
 * English and Chinese LifeRing pages share this markup and this photo.
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.av-lr-hero {
		background-size: 100% 100%, auto 42svh;
		background-position: 0 0, right top;
		padding-top: calc(42svh + 28px);
	}

	/* Fades the foot of the photo into the dark below it. */
	.av-lr-hero::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 42svh;
		z-index: 0;
		pointer-events: none;
		background: linear-gradient(
			180deg,
			rgba(11, 9, 6, 0) 0%,
			rgba(11, 9, 6, 0) 52%,
			var(--av-health-ink, #0b0906) 100%
		);
	}

	/* Keeps the wording above that fade. */
	.av-lr-hero__inner {
		position: relative;
		z-index: 1;
	}
}

/* ------------------------------------------------------------------
 * Language switch: both languages shown side by side as "ENG / 中文".
 *
 * Replaces the click-to-open dropdown on desktop and phone alike. The
 * markup is untouched (toggle button + menu of two options); this just
 * hides the toggle, lays the menu out inline and keeps it always visible.
 * The current language is highlighted and not clickable. The English
 * option's text is "EN" in the templates, so "ENG" is drawn here instead.
 * ------------------------------------------------------------------ */

.av-nav__lang {
	display: flex;
	align-items: center;
}

.av-nav__lang .av-lang-toggle {
	display: none;
}

.av-nav__lang .av-nav__lang-menu {
	position: static;
	display: flex;
	align-items: center;
	min-width: 0;
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.av-nav__lang .av-lang-option,
.av-nav__lang .av-lang-option.is-active {
	display: inline-block;
	width: auto;
	background: none;
	padding: 6px 2px;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
}

.av-nav__lang .av-lang-option:hover {
	background: none;
}

.av-nav__lang .av-lang-option.is-active {
	color: var(--av-rose, currentColor);
	cursor: default;
	pointer-events: none;
}

.av-nav__lang .av-lang-option[data-lang="en"] {
	font-size: 0;
}

.av-nav__lang .av-lang-option[data-lang="en"]::after {
	content: "ENG";
	font-size: 13px;
}

.av-nav__lang .av-lang-option[data-lang="zh"]::before {
	content: "/";
	margin: 0 8px 0 6px;
	font-weight: 400;
	opacity: 0.5;
}

/* Hovering must not move the switch: the old dropdown slid its menu on
   hover/focus, so pin the transform for those states too. */
.av-nav__lang:hover .av-nav__lang-menu,
.av-nav__lang:focus-within .av-nav__lang-menu,
.av-nav__lang.is-open .av-nav__lang-menu {
	transform: none;
	transition: none;
}

.av-nav__lang .av-lang-option {
	transform: none;
	transition: color 0.2s ease;
}