body.lhc-inner-page-shell {
	overflow-x: clip;
}

body.lhc-inner-page-shell .lhc-inner-header,
body.lhc-inner-page-shell .lhc-inner-header * {
	box-sizing: border-box;
}

body.lhc-inner-page-shell .lhc-inner-header {
	width: 100%;
	min-height: 74px;
	margin: 0;
	border-bottom: 1px solid #e4e7e5;
	background: #fff;
	color: #17211d;
}

body.lhc-inner-page-shell .lhc-inner-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(1180px, calc(100% - 48px));
	min-height: 74px;
	margin: 0 auto;
	gap: 24px;
}

body.lhc-inner-page-shell .lhc-inner-header__brand,
body.lhc-inner-page-shell .lhc-inner-header__languages,
body.lhc-inner-page-shell .lhc-inner-header__language {
	font-family: Manrope, "Avenir Next", Montserrat, Poppins, Arial, sans-serif;
	letter-spacing: 0;
}

body.lhc-inner-page-shell .lhc-inner-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: #12203f;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
}

body.lhc-inner-page-shell .lhc-inner-header__brand-mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 8px 18px rgba(22, 135, 248, 0.22);
	padding: 6px;
	overflow: hidden;
}

body.lhc-inner-page-shell .lhc-inner-header__brand-mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body.lhc-inner-page-shell .lhc-inner-header__brand-name {
	line-height: 1.1;
}

/* v1.0.184：中文/EN 之前是两个各自独立描边的胶囊，中间留 4px 空隙——
   拆成两个胶囊挨在一起，视觉上像"分了工"的两颗按钮。改成外层容器本身
   就是一整颗胶囊（描边/圆角/背景都放在容器上），里面两个语言各自变成
   无边框的纯文字项，中间用一条竖线分隔（伪元素画线，不依赖任何额外
   标记），整体合并成一颗大胶囊，跟截图里的效果一致。 */
body.lhc-inner-page-shell .lhc-inner-header__languages {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 34px;
	padding: 3px;
	border: 1px solid rgba(22, 135, 248, 0.18);
	border-radius: 999px;
	background: #fff;
}

body.lhc-inner-page-shell .lhc-inner-header__language {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 28px;
	padding: 4px 12px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: #12203f;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none;
}

body.lhc-inner-page-shell .lhc-inner-header__language + .lhc-inner-header__language::before {
	position: absolute;
	left: 0;
	width: 1px;
	height: 14px;
	background: rgba(18, 32, 63, 0.16);
	content: "";
}

body.lhc-inner-page-shell .lhc-inner-header__language.is-active {
	color: #2f5bff;
	font-weight: 800;
	box-shadow: none;
}

body.lhc-inner-page-shell .lhc-inner-header__separator {
	display: none;
}

/* These business pages don't wrap their header in .lhc-content-shell (that
   wrapper carries page-wide resets meant for full content pages), so mirror
   just the width/centering rule .lhc-content-shell__header would have given
   it, keeping the shared header pixel-consistent with the rest of the site. */
/* The shared header (and its mini-CTA, active nav underline, language pills)
   is styled entirely through homepage.css custom properties that are only
   ever defined on an ".lhc-home-v2" ancestor. Every Life Hub business page
   that renders this shared header directly (not wrapped in that class) --
   not just the marketplace listing/roommate/secondhand browse pages, but
   every other bound inner page too (post-listing/submit-a-listing, contact,
   about, arrival support, and so on) -- needs these values redefined here,
   or the button/pill background/border colors resolve to nothing (the CSS
   custom properties are simply undefined) and the button/pills render with
   only their white text visible against a transparent background, looking
   like blank color blocks. Scoped to body.lhc-inner-page-shell -- the class
   every such inner page carries -- rather than the narrower
   body.lhc-marketplace-page (added only to the housing/flatmate/secondhand
   browse pages), which is what left the other inner pages, like this one,
   without these tokens. Values copied verbatim from homepage.css's own
   definition. */
body.lhc-inner-page-shell {
	--lhc-home-blue: var(--lhc-brand-blue);
	--lhc-home-navy: #06244a;
	--lhc-home-teal: #35c7bd;
	--lhc-home-ink: #0b1f3a;
	--lhc-home-muted: #617089;
	--lhc-home-border: rgba(13, 71, 123, 0.14);
	--lhc-home-soft: #eef7ff;
	--lhc-home-gold: #d7b46a;
	--lhc-home-page: min(90vw, 1320px);
	--lhc-home-shadow: 0 18px 42px rgba(6, 36, 74, 0.10);
}

body.lhc-inner-page-shell .lhc-home-v2__header,
body.lhc-inner-page-shell .lhc-home-v2__header *,
body.lhc-inner-page-shell .lhc-home-v2__header *::before,
body.lhc-inner-page-shell .lhc-home-v2__header *::after {
	box-sizing: border-box;
}

body.lhc-inner-page-shell .lhc-home-v2__header {
	position: relative;
	width: min(90vw, 1320px) !important;
	max-width: 1320px !important;
	margin-inline: auto !important;
	padding: 12px 0 !important;
}

/* .lhc-home-v2__header carries its own background (homepage.css), but this
   inner-page rule above constrains the header ITSELF to a centered
   1320px-max box. Once the browser's visible width (a wide monitor, or a
   page zoomed out below 100%) exceeds that box, the background is
   constrained right along with it, leaving plain, uncolored page
   background exposed on both sides instead of the banner reading as a
   full-width bar. Give it a full-bleed backdrop layer, independent of the
   box's own constrained width, using the box's own edges as the anchor
   (works even though the header isn't a direct child of <body>). */
body.lhc-inner-page-shell .lhc-home-v2__header::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	transform: translateX(-50%);
	background: inherit;
	backdrop-filter: inherit;
	-webkit-backdrop-filter: inherit;
}

body.lhc-inner-page-shell .lhc-inner-header__brand:hover,
body.lhc-inner-page-shell .lhc-inner-header__language:hover {
	color: #2f6f59;
}

body.lhc-inner-page-shell .lhc-inner-header__brand:hover .lhc-inner-header__brand-mark {
	opacity: 0.85;
}

body.lhc-inner-page-shell .lhc-inner-header__brand:focus-visible,
body.lhc-inner-page-shell .lhc-inner-header__language:focus-visible {
	outline: 3px solid #d99a3e;
	outline-offset: 3px;
}

body.lhc-inner-page-shell .wp-site-blocks > main.wp-block-group#wp--skip-link--target {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

body.lhc-inner-page-shell .wp-site-blocks > main#wp--skip-link--target > .wp-block-group.alignfull:first-child {
	padding-block-start: clamp(36px, 4vw, 48px) !important;
	padding-top: clamp(36px, 4vw, 48px) !important;
}

@media (max-width: 640px) {
	body.lhc-inner-page-shell .lhc-inner-header,
	body.lhc-inner-page-shell .lhc-inner-header__inner {
		min-height: 68px;
	}

	body.lhc-inner-page-shell .lhc-inner-header__inner {
		width: calc(100% - 32px);
		gap: 10px;
	}

	body.lhc-inner-page-shell .lhc-inner-header__brand {
		font-size: 22px;
	}

	body.lhc-inner-page-shell .lhc-inner-header__language {
		padding-inline: 4px;
		font-size: 14px;
	}

	body.lhc-inner-page-shell .wp-site-blocks > main#wp--skip-link--target > .wp-block-group.alignfull:first-child {
		padding-block-start: 32px !important;
		padding-top: 32px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.lhc-inner-page-shell .lhc-inner-header *,
	body.lhc-inner-page-shell .lhc-inner-header *::before,
	body.lhc-inner-page-shell .lhc-inner-header *::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

/* Keep every Life Hub business inner page aligned with the Housing wide-content layout. */
body.lhc-inner-page-shell :where(.wp-site-blocks, main, .site-main, .content-area, .entry-content, .wp-block-post-content, .wp-block-shortcode, .is-layout-constrained, .alignwide, .alignfull) {
    max-width: none !important;
}

body.lhc-inner-page-shell :where(main, .site-main, .content-area) {
    width: 100% !important;
}

/* box-sizing: border-box is the fix, not just tidiness -- the theme adds
   its own "has-global-padding" left/right padding to .entry-content /
   .wp-block-post-content (and this class's own padding varies by theme
   version), and by default that padding is CONTENT-BOX sized, meaning it
   gets added on top of whatever "width" says instead of being absorbed
   inside it. That silently made every width value below narrower than
   the box's real rendered footprint -- on a phone the box ended up ~60px
   wider than the viewport, overflowing off the right edge and leaving a
   plain unpainted strip there wherever a background (like the header's)
   was sized to the *intended* width instead of the real one. border-box
   makes "width" mean the full box including padding, so it can never
   silently grow past what's specified again, regardless of how much
   padding a future theme update adds. */
body.lhc-inner-page-shell :where(.wp-block-post-content, .entry-content, .wp-block-shortcode),
body.lhc-inner-page-shell :where(.wp-block-post-title, .entry-title, .page-title) {
    box-sizing: border-box !important;
    width: min(90vw, 1320px) !important;
    max-width: 1320px !important;
    margin-inline: auto !important;
}

body.lhc-inner-page-shell .lhc-inner-header__inner {
    width: min(90vw, 1320px);
    max-width: 1320px;
}

@media (max-width: 1100px) {
    body.lhc-inner-page-shell :where(.wp-block-post-content, .entry-content, .wp-block-shortcode),
    body.lhc-inner-page-shell :where(.wp-block-post-title, .entry-title, .page-title) {
        width: calc(100vw - 48px) !important;
    }

    body.lhc-inner-page-shell .lhc-inner-header__inner {
        width: calc(100vw - 48px);
    }
}

@media (max-width: 480px) {
    body.lhc-inner-page-shell :where(.wp-block-post-content, .entry-content, .wp-block-shortcode),
    body.lhc-inner-page-shell :where(.wp-block-post-title, .entry-title, .page-title) {
        width: calc(100vw - 28px) !important;
    }

    body.lhc-inner-page-shell .lhc-inner-header__inner {
        width: calc(100vw - 28px);
    }
}