/* Action Bridge site chrome: hide the theme header/title and style the injected nav. */

body.ab-chrome #masthead,
body.ab-chrome .site-header,
body.ab-chrome .site-header-wrap,
body.ab-chrome .site-header-item,
body.ab-chrome .site-navigation,
body.ab-chrome .main-navigation,
body.ab-chrome .site-branding,
body.ab-chrome .site-logo-and-responsive-menu-logo,
body.ab-chrome .page-header,
body.ab-chrome .archive-title { display: none !important; }

body.ab-chrome.ab-hide-title .entry-header,
body.ab-chrome.ab-hide-title .page-title,
body.ab-chrome.ab-hide-title h1.entry-title { display: none !important; }

.ab-nav {
	position: sticky;
	top: 0;
	z-index: 80;
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border-bottom: 1px solid rgba(15, 23, 42, .09);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.ab-nav-in {
	width: min(1200px, 92%);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 74px;
	gap: 1.5rem;
	position: relative;
}

.ab-brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-family: 'Sora', sans-serif;
	font-weight: 800;
	font-size: 1.1rem;
	letter-spacing: -.02em;
	color: #0a0f1f;
	text-decoration: none;
}

.ab-brand img {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	object-fit: cover;
	background: #fff;
	flex: none;
	border: 1px solid rgba(15, 23, 42, .09);
	box-shadow: 0 8px 20px -8px rgba(37, 99, 255, .7);
}

.ab-links {
	display: flex;
	gap: 1.6rem;
	font-weight: 500;
	font-size: .94rem;
	color: #5b6478;
}

.ab-links a {
	position: relative;
	padding: .4rem 0;
	transition: .2s;
	white-space: nowrap;
	text-decoration: none;
}

.ab-links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #2563ff, #7c3aed);
	transition: .3s;
}

.ab-links a:hover,
.ab-links a.current { color: #0a0f1f; }

.ab-links a:hover::after,
.ab-links a.current::after { width: 100%; }

.ab-cta { display: flex; gap: .6rem; align-items: center; }

.ab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-weight: 600;
	font-size: .86rem;
	border-radius: 999px;
	padding: .6rem 1.1rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: .28s cubic-bezier(.2, .7, .3, 1);
	white-space: nowrap;
	text-decoration: none;
}

.ab-btn:focus-visible { outline: 3px solid rgba(37, 99, 255, .45); outline-offset: 3px; }

.ab-btn-primary {
	background: linear-gradient(135deg, #2563ff, #7c3aed);
	color: #fff;
	box-shadow: 0 40px 90px -40px rgba(37, 99, 255, .45);
}

.ab-btn-primary:hover { transform: translateY(-3px); color: #fff; }

.ab-btn-ghost { background: #fff; color: #0a0f1f; border-color: rgba(15, 23, 42, .09); }

.ab-btn-ghost:hover { transform: translateY(-3px); border-color: rgba(37, 99, 255, .35); color: #2563ff; }

.ab-btn-dark { background: #0a0f1f; color: #fff; }

.ab-btn-dark:hover { transform: translateY(-3px); background: #000; color: #fff; }

.ab-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: #fff;
	border: 1px solid rgba(15, 23, 42, .09);
	border-radius: 12px;
	padding: .7rem;
	cursor: pointer;
}

.ab-burger span { width: 20px; height: 2px; background: #0a0f1f; border-radius: 2px; display: block; }

@media (max-width: 1040px) {
	.ab-links,
	.ab-cta { display: none; }

	.ab-burger { display: flex; }

	.ab-nav.open .ab-links {
		display: flex;
		position: absolute;
		top: 74px;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: #fff;
		border: 1px solid rgba(15, 23, 42, .09);
		border-radius: 16px;
		padding: .6rem;
		box-shadow: 0 18px 50px -22px rgba(16, 24, 40, .28);
		z-index: 90;
	}

	.ab-nav.open .ab-links a { padding: .75rem 1rem; border-radius: 10px; }

	.ab-nav.open .ab-links a::after { display: none; }

	.ab-nav.open .ab-links a:hover { background: #f6f8fe; }

	.ab-nav.open .ab-cta {
		display: flex;
		position: absolute;
		top: calc(74px + 21.5rem);
		left: 0;
		right: 0;
		flex-wrap: wrap;
		background: #fff;
		border: 1px solid rgba(15, 23, 42, .09);
		border-radius: 16px;
		padding: .75rem;
		gap: .6rem;
		box-shadow: 0 18px 50px -22px rgba(16, 24, 40, .28);
		z-index: 90;
	}
}

/* ------------------------------------------------------------------ dark */
/* The chrome palette is hard-coded light above so the brand chip always
   reads; flip every surface, border and text for dark mode. The logo keeps
   its white chip on both schemes. */

@media (prefers-color-scheme: dark) {
	.ab-nav {
		background: rgba(13, 17, 28, .88);
		border-bottom-color: rgba(255, 255, 255, .1);
	}

	.ab-brand { color: #eef1ef; }

	.ab-links { color: #a9b2ad; }

	.ab-links a:hover,
	.ab-links a.current { color: #fff; }

	.ab-btn-ghost {
		background: rgba(255, 255, 255, .06);
		color: #eef1ef;
		border-color: rgba(255, 255, 255, .14);
	}

	.ab-btn-ghost:hover {
		border-color: rgba(37, 99, 255, .55);
		color: #9db8ff;
	}

	.ab-burger {
		background: rgba(255, 255, 255, .06);
		border-color: rgba(255, 255, 255, .14);
	}

	.ab-burger span { background: #eef1ef; }

	.ab-nav.open .ab-links,
	.ab-nav.open .ab-cta {
		background: #11162a;
		border-color: rgba(255, 255, 255, .12);
		box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .7);
	}

	.ab-nav.open .ab-links a:hover { background: rgba(255, 255, 255, .06); }
}