/* The one header every public page renders (MarketingHeader.tsx): the beta
   banner, then the sticky menu. The blog (agentnava-blog, Nav.astro) and the
   docs (apps/docs) carry copies of these exact rules.

   Every class is prefixed mh- and every value is written out here rather than
   read from a page's own stylesheet. Each page used to draw its own header,
   with landing.css, kit.css or ai-agents.css underneath it, and no two came out
   the same: the logo moved between pages, the banner came and went, and the
   current page's link turned bold and pushed the links after it sideways. The
   current page is now shown by colour alone, so no link changes width.

   Selectors carry the element (div.mh-announce, nav.mh-nav ...) on purpose:
   page stylesheets have rules like `.pp a { color: inherit }`, which outrank a
   bare class and turned the button label dark on the agent pages. */

div.mh-announce {
	margin: 0;
	padding: 9px 20px;
	background: #14140f;
	color: #cfcfc9;
	font-family: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.02em;
	text-align: center;
}
div.mh-announce a {
	margin-left: 8px;
	color: #8fb3a3;
	font-weight: 600;
	text-decoration: none;
}

nav.mh-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(252, 252, 251, 0.86);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #e7e7e3;
	font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.5;
}
nav.mh-nav .mh-wrap {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 30px;
	max-width: 1180px;
	height: 64px;
	margin: 0 auto;
	padding: 0 40px;
}
nav.mh-nav .mh-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #101010;
	text-decoration: none;
}
nav.mh-nav .mh-mark {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: #26463b;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(16, 16, 16, 0.05), 0 1px 3px rgba(16, 16, 16, 0.04);
}
nav.mh-nav .mh-name {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
}
nav.mh-nav .mh-links {
	display: flex;
	gap: 26px;
	margin-left: 14px;
}
nav.mh-nav .mh-links a {
	color: #6b6b67;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
}
nav.mh-nav .mh-links a:hover,
nav.mh-nav .mh-links a[aria-current="page"] {
	color: #101010;
}
nav.mh-nav .mh-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
}
nav.mh-nav .mh-sign {
	color: #3a3a38;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
}
nav.mh-nav .mh-sign:hover {
	color: #101010;
}
nav.mh-nav .mh-cta {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 13px;
	border: 1px solid #1c3729;
	border-radius: 6px;
	background: linear-gradient(180deg, #2e5446 0%, #26463b 52%, #20402f 100%);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(16, 16, 16, 0.16), 0 4px 12px rgba(28, 55, 41, 0.22);
	transition: background 0.16s, box-shadow 0.16s, transform 0.06s;
}
nav.mh-nav .mh-cta:hover {
	background: linear-gradient(180deg, #35604f, #254a38);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 4px rgba(16, 16, 16, 0.18), 0 8px 20px rgba(28, 55, 41, 0.26);
}
nav.mh-nav .mh-cta:active {
	transform: translateY(1px);
}
div.mh-announce a:focus-visible,
nav.mh-nav a:focus-visible {
	outline: 3px solid rgba(38, 70, 59, 0.16);
	outline-offset: 3px;
}

@media (max-width: 900px) {
	nav.mh-nav .mh-wrap {
		gap: 12px;
		padding: 0 22px;
	}
	nav.mh-nav .mh-links,
	nav.mh-nav .mh-actions {
		display: none;
	}
	nav.mh-nav .mh-brand {
		min-height: 44px;
	}
}