/* Collapse the social/language utility row whenever the page leaves the top. */
body.home-nav-auto-hide .topbar,
.mobile-site-header {
	transition: height .32s ease, min-height .32s ease, background-color .4s ease, box-shadow .4s ease;
}

body.home-nav-auto-hide .header-utility,
.mobile-header-utility {
	overflow: visible;
	transform-origin: top;
	transition: height .32s ease, min-height .32s ease;
}

/* When returning to the hero, remove the solid navigation background immediately.
   This prevents one transitional white frame from showing below the utility row. */
body.home-nav-auto-hide:not(.nav-is-scrolled) .topbar,
body.home-nav-auto-hide:not(.nav-is-scrolled) .header-main {
	background-color: transparent !important;
	box-shadow: none !important;
	transition: none !important;
}

body.home-nav-auto-hide.header-utility-collapsed .topbar {
	height: 78px;
	min-height: 78px;
}

body.header-utility-collapsed .mobile-site-header {
	height: 64px;
}

body.home-nav-auto-hide.header-utility-collapsed .header-utility,
body.header-utility-collapsed .mobile-header-utility {
	height: 0;
	overflow: hidden;
	visibility: visible;
	opacity: 1;
	pointer-events: none;
	transform: none;
}

body.header-utility-collapsed .mobile-drawer-nav {
	padding-top: 78px;
}

body.home-nav-auto-hide .utility-social-links {
	gap: 8px;
}

.mobile-utility-social-links {
	gap: 6px;
}

body.home-nav-auto-hide .header-utility .utility-language-menu > .dropdown-content,
.mobile-utility-language-options {
	display: block;
	top: calc(100% + 8px);
	right: auto;
	left: 50%;
	box-sizing: border-box;
	width: max-content;
	min-width: calc(100% + 8px);
	padding: 5px 0;
	visibility: hidden;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(-7px);
	transition: opacity .24s ease, transform .3s ease, visibility 0s linear .3s;
}

.mobile-utility-language:hover .mobile-utility-language-options,
.mobile-utility-language:focus-within .mobile-utility-language-options {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(-7px);
}

body.home-nav-auto-hide .header-utility .utility-language-menu.is-open > .dropdown-content,
.mobile-utility-language.is-open .mobile-utility-language-options,
.mobile-utility-language.is-open:hover .mobile-utility-language-options,
.mobile-utility-language.is-open:focus-within .mobile-utility-language-options {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: opacity .24s ease, transform .3s ease, visibility 0s;
}

body.home-nav-auto-hide .header-utility .utility-language-menu > .dropdown-content p {
	margin: 0;
}

body.home-nav-auto-hide .header-utility .utility-language-menu > .dropdown-content a,
.mobile-utility-language-options > a {
	justify-content: center;
	padding: 6px 10px;
	text-align: center;
}

.utility-language-trigger > i,
.mobile-utility-language-trigger > i {
	transition: transform .3s ease;
}

.utility-language-menu.is-open .utility-language-trigger > i,
.mobile-utility-language.is-open .mobile-utility-language-trigger > i {
	transform: rotate(180deg);
}

@media (max-width: 1180px) {
	body.home-nav-auto-hide.header-utility-collapsed .topbar {
		height: 64px;
		min-height: 64px;
	}

	body.home-nav-auto-hide.header-utility-collapsed .nav {
		top: 64px;
	}

	body.home-nav-auto-hide .header-inner,
	.mobile-header-inner {
		position: relative;
		justify-content: flex-end;
	}

	body.home-nav-auto-hide .header-brand,
	.mobile-header-brand {
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 2;
		transform: translateX(-50%);
		transition: left .32s ease, transform .32s ease;
	}

	body.home-nav-auto-hide .header-actions,
	.mobile-header-actions {
		position: relative;
		z-index: 3;
	}

	body.home-nav-auto-hide .header-search-action > i,
	.mobile-header-search .header-search-action > i {
		position: relative;
		top: -1px;
	}

	body.home-nav-auto-hide.header-search-open .header-brand,
	body.header-search-open .mobile-header-brand {
		left: 0;
		transform: translateX(0);
	}

	body.home-nav-auto-hide.header-search-open .header-search.is-open .header-search-form {
		width: calc(100vw - 158px);
		box-shadow: 0 2px 8px rgba(0, 0, 0, .11);
	}

	body.header-search-open .mobile-header-search.is-open .header-search-form {
		width: calc(100vw - 116px);
		box-shadow: 0 2px 8px rgba(0, 0, 0, .11);
	}
}

@media (max-width: 360px) {
	.mobile-utility-social-links {
		gap: 4px;
	}

	body.header-search-open .mobile-header-brand {
		left: 4px;
	}

	body.header-search-open .mobile-header-search.is-open .header-search-form {
		width: calc(100vw - 114px);
	}
}

@media (max-width: 420px) {
	body.home-nav-auto-hide .utility-social-links {
		gap: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home-nav-auto-hide .topbar,
	body.home-nav-auto-hide .header-utility,
	.mobile-site-header,
	.mobile-header-utility,
	body.home-nav-auto-hide .header-brand,
	.mobile-header-brand {
		transition-duration: 0s;
	}
}

/* Inner-page header space is provided by the header itself, so the hero and
   the first content section never render underneath a sticky overlay. */
body.inner-page-nav {
	padding-top: 0 !important;
}

body.inner-page-nav .site-header-spacer,
body:not(.mobile-home-page) .mobile-header-spacer {
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Reveal the utility row by changing its height only. There is no opacity
   transition, so the social links enter as part of the header's layout. */
body.home-nav-auto-hide .header-utility,
.mobile-header-utility {
	height: 34px;
	min-height: 34px;
	overflow: visible;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: height .32s ease, min-height .32s ease;
}

body.home-nav-auto-hide.header-utility-collapsed .header-utility,
body.header-utility-collapsed .mobile-header-utility {
	height: 0 !important;
	min-height: 0 !important;
	overflow: hidden;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: none;
}

body.home-nav-auto-hide .topbar,
.mobile-site-header {
	transition: height .32s ease, min-height .32s ease, background-color .35s ease, box-shadow .35s ease;
}

body.home-nav-auto-hide .header-main {
	transition: background-color .35s ease, box-shadow .35s ease;
}

/* Inner-page headers stay in the document flow and use one stable theme
   while they move from the hero into the sticky state. */
body.inner-page-nav .topbar {
	position: sticky !important;
	top: 0;
	right: auto;
	left: auto;
	box-sizing: border-box;
	width: 100%;
	height: 112px;
	min-height: 112px;
	background: #fff !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12) !important;
}

body.inner-page-nav.header-utility-collapsed .topbar {
	height: 78px;
	min-height: 78px;
}

body.home-nav-auto-hide.inner-page-nav .header-main,
body.home-nav-auto-hide.inner-page-nav:not(.nav-is-scrolled) .header-main {
	background: #fff !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12) !important;
}

body.inner-page-nav .nav > ul > li > a,
body.inner-page-nav .nav > ul > li > a:hover,
body.inner-page-nav .nav > ul > li > a.on,
body.inner-page-nav .nav > ul > li > a.cur,
body.inner-page-nav .nav > ul > li > a .sanjiao:before,
body.inner-page-nav .header-actions a,
body.inner-page-nav .header-actions i,
body.inner-page-nav .utility-language-trigger {
	color: #222 !important;
}

body.inner-page-nav .header-brand .logo {
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

body.inner-page-nav .site-header-spacer,
body:not(.mobile-home-page) .mobile-header-spacer {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

@media (max-width: 1180px) {
	body.inner-page-nav .topbar {
		height: 98px;
		min-height: 98px;
	}

	body.inner-page-nav.header-utility-collapsed .topbar {
		height: 64px;
		min-height: 64px;
	}
}

body:not(.mobile-home-page) .mobile-site-header {
	position: sticky !important;
	top: 0;
	right: auto;
	left: auto;
	width: 100%;
	height: 98px;
	background: #fff !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12) !important;
}

body:not(.mobile-home-page).header-utility-collapsed .mobile-site-header {
	height: 64px;
}

body:not(.mobile-home-page) .mobile-header-main {
	background: #fff !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12) !important;
}

body:not(.mobile-home-page) .mobile-header-brand img {
	filter: brightness(0);
}

/* Keep the inner-page shell opaque throughout the sticky transition. The
   homepage rule above uses a transparent topbar, and its lower specificity
   previously allowed a translucent frame to appear while the utility row
   was collapsing. */
body.home-nav-auto-hide.inner-page-nav .topbar,
body.home-nav-auto-hide.inner-page-nav:not(.nav-is-scrolled) .topbar,
body.home-nav-auto-hide.inner-page-nav.nav-is-scrolled .topbar {
	background: #fff !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12) !important;
	-webkit-transition: none !important;
	transition: none !important;
}

body.home-nav-auto-hide.inner-page-nav .header-main {
	background: #fff !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12) !important;
	-webkit-transition: none;
	transition: none;
}

body.home-nav-auto-hide.inner-page-nav.header-utility-collapsed .topbar {
	height: 78px !important;
	min-height: 78px !important;
}

body.home-nav-auto-hide.inner-page-nav .header-utility {
	-webkit-transition: none !important;
	transition: none !important;
}

body:not(.mobile-home-page) .mobile-site-header {
	-webkit-transition: none !important;
	transition: none !important;
}

body:not(.mobile-home-page) .mobile-header-utility {
	-webkit-transition: none !important;
	transition: none !important;
}

/* Inner pages: let the utility row remain in normal flow and make only the
   main row sticky. The header wrapper has no box so it cannot clip the
   sticky child or paint a second background behind it. */
body.inner-page-nav > header.topbar {
	display: contents;
	position: static !important;
	height: auto !important;
	min-height: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.inner-page-nav > header.topbar > .header-utility {
	position: relative;
	/* The open language menu must paint above the sticky main navigation. */
	z-index: 1001;
	box-sizing: border-box;
	width: 100%;
	height: 34px !important;
	min-height: 34px !important;
	overflow: visible;
	background: #161616 !important;
	transition: none !important;
}

body.inner-page-nav > header.topbar > .header-main {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 1000;
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 78px !important;
	min-height: 78px !important;
	background: #fff !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12) !important;
	transition: none !important;
}

body.inner-page-nav > header.topbar > .header-main > .header-inner {
	height: 78px !important;
	min-height: 78px !important;
}

body.inner-page-nav .header-utility .utility-social-links > a,
body.inner-page-nav .header-utility .utility-language-trigger,
body.inner-page-nav .header-utility .utility-language-trigger > i {
	color: #e8e8e8 !important;
}

body.inner-page-nav .header-utility .utility-social-links > a:hover,
body.inner-page-nav .header-utility .utility-language-trigger:hover,
body.inner-page-nav .header-utility .utility-language-trigger:focus {
	color: #f7b500 !important;
}

body.inner-page-nav .header-main .nav > ul > li > a,
body.inner-page-nav .header-main .nav > ul > li > a:hover,
body.inner-page-nav .header-main .nav > ul > li > a.on,
body.inner-page-nav .header-main .nav > ul > li > a.cur,
body.inner-page-nav .header-main .nav > ul > li > a .sanjiao:before,
body.inner-page-nav .header-main .header-actions a,
body.inner-page-nav .header-main .header-actions i {
	color: #222 !important;
}

body.inner-page-nav .header-main .nav > ul > li > ul,
body.inner-page-nav .header-main .nav > ul > li > ul > a {
	background: #fff;
	color: #222;
}

body.inner-page-nav .header-main .nav > ul > li > ul > a:hover {
	color: #f28f1a;
	background: #f6f6f6;
}

body.inner-page-nav .header-brand .logo {
	-webkit-filter: brightness(0);
	filter: brightness(0);
}

body.inner-page-nav > .site-header-spacer,
body:not(.mobile-home-page) > .mobile-header-spacer {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Mobile template uses the same two-level flow. */
body:not(.mobile-home-page) > header.mobile-site-header {
	display: contents;
	position: static !important;
	height: auto !important;
	min-height: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body:not(.mobile-home-page) > header.mobile-site-header > .mobile-header-utility {
	position: relative;
	/* Keep the mobile language menu above the sticky main navigation too. */
	z-index: 1001;
	box-sizing: border-box;
	width: 100%;
	height: 34px !important;
	min-height: 34px !important;
	overflow: visible;
	background: #161616 !important;
	transition: none !important;
}

body:not(.mobile-home-page) > header.mobile-site-header > .mobile-header-main {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 1000;
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 64px !important;
	min-height: 64px !important;
	background: #fff !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .12) !important;
	transition: none !important;
}

body:not(.mobile-home-page) > header.mobile-site-header > .mobile-header-main > .mobile-header-inner {
	height: 64px !important;
	min-height: 64px !important;
}

body:not(.mobile-home-page) .mobile-header-utility .mobile-utility-social-links > a,
body:not(.mobile-home-page) .mobile-header-utility .mobile-utility-language-trigger,
body:not(.mobile-home-page) .mobile-header-utility .mobile-utility-language-trigger > i {
	color: #e8e8e8 !important;
}

body:not(.mobile-home-page) .mobile-header-utility .mobile-utility-social-links > a:hover,
body:not(.mobile-home-page) .mobile-header-utility .mobile-utility-language-trigger:hover,
body:not(.mobile-home-page) .mobile-header-utility .mobile-utility-language-trigger:focus {
	color: #f7b500 !important;
}

body:not(.mobile-home-page) .mobile-header-main .mobile-nav-toggle,
body:not(.mobile-home-page) .mobile-header-main .header-search-action {
	color: #222 !important;
}

@media (max-width: 1180px) {
	body.inner-page-nav > header.topbar > .header-main {
		height: 64px !important;
		min-height: 64px !important;
	}

	body.inner-page-nav > header.topbar > .header-main > .header-inner {
		height: 64px !important;
		min-height: 64px !important;
	}

	/* The drawer is fixed below the visible main row while it is open. */
	body.inner-page-nav .header-main .nav {
		top: 64px !important;
	}
}