/**
 * Bridge: reference new-navigation on DE without COM siteheader chrome.
 * Reference header.site-header + panels replace COM .siteheader for DE.
 */

body:has(.nw-v3-ref-nav) .hamburger,
body:has(.nw-v3-ref-nav) .mobile-nav,
body:has(.nw-v3-ref-nav) .mobile-nav-overlay,
body:has(.nw-v3-ref-nav) .siteheader {
	display: none !important;
}

/*
 * COM styles.css sets body { font-family: "Roboto Flex" } which beats
 * site.css :root { font-family: Funnel Sans } for inheritance. Force the
 * reference face + ink on DE chrome pages so nav/content/footer match.
 */
body:has(.nw-v3-ref-nav),
body:has([data-nw-v3-site-footer]) {
	--font-display: "Funnel Sans", sans-serif;
	--font-body: "Funnel Sans", sans-serif;
	--ink: #030712;
	--secondary: #374151;
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 400;
}

/* W2 collision URLs under DE chrome (e.g. /de/beyond/) still ship Montserrat /
 * Funnel Display tokens — remap to reference Funnel Sans. */
body:has(.nw-v3-ref-nav) .w2-content {
	--font-display: "Funnel Sans", sans-serif;
	--font-body: "Funnel Sans", sans-serif;
	font-family: var(--font-body);
	color: var(--ink, #030712);
}

/* COM styles.css hardcodes Funnel Display / Montserrat on eyebrows + prose. */
body:has(.nw-v3-ref-nav) .w2-content p.eyebrow,
body:has(.nw-v3-ref-nav) .w2-content .eyebrow,
body:has(.nw-v3-ref-nav) .w2-content .editorial-body p,
body:has(.nw-v3-ref-nav) .w2-content .breadcrumb a {
	font-family: "Funnel Sans", sans-serif;
}

.nw-v3-ref-nav {
	position: relative;
	z-index: 1000;
	font-family: "Funnel Sans", sans-serif;
}

.nw-v3-ref-nav .site-header {
	position: sticky;
	top: 0;
	z-index: 1001;
}

/* Reset native <button> chrome if design-variant attribute is missing briefly. */
.nw-v3-ref-nav .new-navigation-trigger {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

/* Keep COM <main> wrapper valid when reference nav injects its own panels before it. */
body:has(.nw-v3-ref-nav) > main {
	display: block;
}

/* Reference site-footer replaces COM .sitefooter for DE nav context. */
body:has([data-nw-v3-site-footer]) .sitefooter {
	display: none !important;
}

body:has([data-nw-v3-site-footer]) .page-banner--footer {
	display: none !important;
}

/* Harden footer type against COM p { font-size/line-height } and a { color:black }. */
.site-footer[data-nw-v3-site-footer] {
	font-family: "Funnel Sans", sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #9ca3af;
	background: #fff;
}

.site-footer[data-nw-v3-site-footer] .site-footer-copyright {
	margin: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.025em;
	color: #9ca3af;
}

.site-footer[data-nw-v3-site-footer] .site-footer-legal {
	font-size: 13px;
	line-height: 1.7;
}

.site-footer[data-nw-v3-site-footer] .site-footer-legal a {
	color: #667085;
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.7;
	text-decoration: none;
}

.site-footer[data-nw-v3-site-footer] .site-footer-legal a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
 * COM styles.css leaks onto inlined imported-source / content-page heroes:
 *   section .container h1|h2 { color:#030712; font Funnel Display 48/36 }
 *   p.eyebrow { color:#334155 }
 *   section .container { max-width:1280px; padding:0 24px }  ← zeros .hero-inner
 *   main>section:first-child:not(.hero-block) { padding-top:40px }
 * Reference keeps these pages in an iframe; staging inlines them under DE chrome.
 */
body:has(.nw-v3-ref-nav) main.imported-source-page-shell > section.hero {
	padding-top: 0;
}

body:has(.nw-v3-ref-nav) main.imported-source-page-shell section .container {
	max-width: 1540px;
	padding-inline: var(--gutter, clamp(24px, 5.95vw, 113px));
	padding-block: 0;
}

body:has(.nw-v3-ref-nav) main.imported-source-page-shell section .container.hero-inner {
	padding-block: 76px 52px;
}

body:has(.nw-v3-ref-nav) main.imported-source-page-shell section .container :is(h1, h2, h3) {
	color: inherit;
	font-family: "Funnel Sans", sans-serif;
	font-weight: 500;
	letter-spacing: -0.055em;
}

body:has(.nw-v3-ref-nav) main.imported-source-page-shell section.hero .container h1,
body:has(.nw-v3-ref-nav) main.imported-source-page-shell .hero h1 {
	color: #fff;
	font-size: clamp(64px, 7.1vw, 110px);
	line-height: 1;
	margin-top: 25px;
	max-width: 1100px;
}

body:has(.nw-v3-ref-nav) main.imported-source-page-shell section .container h2 {
	font-size: clamp(40px, 3.7vw, 58px);
	line-height: 1.08;
}

body:has(.nw-v3-ref-nav) main.imported-source-page-shell :is(.eyebrow, p.eyebrow) {
	color: inherit;
	font-family: "Funnel Sans", sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

body:has(.nw-v3-ref-nav) main.imported-source-page-shell .section .eyebrow {
	margin-bottom: 28px;
}

/* Content-page template heroes share the same navy plane — pin light type. */
body:has(.nw-v3-ref-nav) .nw-content-hero,
body:has(.nw-v3-ref-nav) .nw-content-hero h1,
body:has(.nw-v3-ref-nav) .nw-content-diagram-intro h1 {
	color: #fff;
}

body:has(.nw-v3-ref-nav) .nw-content-hero :is(.nw-content-eyebrow, .eyebrow, p.eyebrow) {
	color: inherit;
	font-family: "Funnel Sans", sans-serif;
}

@media (max-width: 600px) {
	body:has(.nw-v3-ref-nav) main.imported-source-page-shell section .container.hero-inner {
		padding-block: 56px 40px;
	}

	body:has(.nw-v3-ref-nav) main.imported-source-page-shell section.hero .container h1,
	body:has(.nw-v3-ref-nav) main.imported-source-page-shell .hero h1 {
		font-size: clamp(46px, 11.5vw, 66px);
		margin-top: 26px;
	}

	body:has(.nw-v3-ref-nav) main.imported-source-page-shell section .container h2 {
		font-size: clamp(32px, 9vw, 43px);
	}

	body:has(.nw-v3-ref-nav) main.imported-source-page-shell :is(.eyebrow, p.eyebrow) {
		font-size: 11px;
		letter-spacing: 0.1em;
	}

	body:has(.nw-v3-ref-nav) main.imported-source-page-shell .section .eyebrow {
		margin-bottom: 22px;
	}
}