/**
 * Header alignment for the B2B News Page Revamp navbar.
 *
 * Overrides the legacy .nav-bar-1 rules in style.css: the logo was pinned
 * 40px from the viewport edge and the menu was centred on the viewport, so
 * nothing lined up with the 1176px page container. Everything now sits inside
 * that same container - logo left, menu centred in the space between, CTA right.
 *
 * Figma: node 177:954 (desktop, 1440x80) and node 1:26743 (mobile, 375x72).
 */

.nav-bar-1 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 0 20px;
}

.nav-bar-1 .nav-inner {
	display: flex;
	align-items: center;
	gap: 40px;
	width: 100%;
	max-width: 1176px;
	min-height: 80px;
	margin: 0 auto;
}

/* ------------------------------------------------------------------ Brand */

.nav-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

/* The legacy rule absolutely positions this against the viewport edge. */
.nav-bar-1 .logo-wrapper {
	position: static;
	transform: none;
	display: flex;
	align-items: center;
	width: auto;
	margin: 0;
}

.nav-bar-1 .logo-wrapper img {
	display: block;
	width: auto;
	height: 24px;
}

.nav-brand-label {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 150%;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	white-space: nowrap;
	/* Solid colour first as the fallback where background-clip: text is unsupported. */
	color: #a7abb3;
	background: linear-gradient(90deg, #7a7d84 0%, #aeaeae 63.03%, #3d3e41 109.55%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------------- Menu */

.nav-bar-1 .main-menu-1 {
	--menu-item-gap: 32px;
	flex: 1;
	justify-content: center;
}

/* ---------------------------------------------------------------- Actions */

.nav-actions-2 {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
	margin-left: auto;
}

.nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 16px;
	border-radius: 6px;
	background: #0cf0bb;
	color: #15172e;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.nav-cta:hover,
.nav-cta:focus {
	background: #0bd8a9;
	color: #15172e;
}

.nav-bar-1 .mobile-toggle-1 {
	line-height: 1;
	user-select: none;
}

/* Swap the hamburger for a close icon while the menu is open. The menu markup
   precedes .nav-actions-2 inside .nav-inner, so a sibling selector handles this
   without touching the existing toggleMenu() script. */
.mobile-toggle-1 .toggle-icon-close {
	display: none;
}

#mobileMenu.active ~ .nav-actions-2 .mobile-toggle-1 .toggle-icon-open {
	display: none;
}

#mobileMenu.active ~ .nav-actions-2 .mobile-toggle-1 .toggle-icon-close {
	display: inline-block;
	font-size: 26px;
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1200px) {
	.nav-bar-1 .nav-inner {
		gap: 24px;
	}

	.nav-bar-1 .main-menu-1 {
		--menu-item-gap: 24px;
	}

	.nav-bar-1 .main-menu-1 > li > a {
		font-size: 15px;
	}
}

@media (max-width: 767px) {
	.nav-bar-1 {
		min-height: 72px;
		padding: 0 20px;
	}

	.nav-bar-1 .nav-inner {
		gap: 12px;
		min-height: 72px;
	}

	/* Keeps the dropdown clear of the shorter mobile bar. */
	.nav-bar-1 .main-menu-1 {
		top: 72px;
	}

	.nav-brand-label {
		font-size: 11px;
		line-height: 150%;
		letter-spacing: 1.1px;
	}

	.nav-actions-2 {
		gap: 12px;
	}

	.nav-cta {
		height: 40px;
		padding: 0 14px;
		font-size: 13px;
	}
}

/* The brand label still fits at 375px (per the mobile frame); it only gets
   dropped on the narrowest phones. */
@media (max-width: 359px) {
	.nav-brand-label {
		display: none;
	}

	.nav-cta {
		padding: 0 12px;
		font-size: 12px;
	}
}