/* --- Bar --- */
.acbnav-topbar {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: linear-gradient(180deg, rgba(21, 25, 34, .85), rgba(21, 25, 34, .70));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	color: #e9edf1;
}

.acbnav-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: .65rem 1rem;
	display: flex;
	align-items: center;
	gap: .75rem;
}

/* --- Brand --- */
.acbnav-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	text-decoration: none;
	color: #e9edf1;
	font-weight: 600;
	letter-spacing: .2px;
}

.acbnav-dot {
	width: .7rem;
	height: .7rem;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 30%, #8b5cf6, #5a3ac5);
	box-shadow: 0 0 0 .15rem rgba(139, 92, 246, .15), 0 0 .6rem .1rem rgba(139, 92, 246, .25);
	flex: 0 0 .7rem;
}

.acbnav-brandtext {
	opacity: .95;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- Toggle (hamburger) - Mobile only --- */
.acbnav-toggle {
	display: none; /* Hidden by default, shown on mobile */
	margin-left: auto;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: .75rem;
	padding: .5rem;
	line-height: 0;
	background: transparent;
	color: #e9edf1;
	cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.acbnav-toggle:hover,
.acbnav-toggle:focus-visible {
	border-color: rgba(139, 92, 246, .5);
	box-shadow: 0 0 0 .18rem rgba(139, 92, 246, .25);
	outline: none;
}

.acbnav-togglebar {
	display: block;
	width: 22px;
	height: 2px;
	margin: 4px 0;
	border-radius: 2px;
	background: #e9edf1;
	transition: transform .18s ease, opacity .18s ease;
}

/* --- Nav --- */
.acbnav-nav {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: auto;
}

.acbnav-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .48rem .9rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .06);
	color: #a9b3c1;
	background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0));
	text-decoration: none;
	font-size: .95rem;
	line-height: 1;
	white-space: nowrap;
	transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .12s ease;
}

.acbnav-pill:hover,
.acbnav-pill:focus-visible {
	color: #e9edf1;
	border-color: rgba(139, 92, 246, .5);
	box-shadow: 0 0 0 .18rem rgba(139, 92, 246, .35), inset 0 0 .5rem rgba(139, 92, 246, .12);
	transform: translateY(-1px);
	outline: none;
}

.acbnav-accent {
	color: #e9edf1;
	border-color: rgba(139, 92, 246, .45);
	background:
		radial-gradient(120% 100% at 10% 0%, rgba(139, 92, 246, .18), transparent 55%),
		linear-gradient(180deg, rgba(139, 92, 246, .12), rgba(139, 92, 246, .04));
	box-shadow: inset 0 0 .5rem rgba(139, 92, 246, .14);
}

.acbnav-accent:hover,
.acbnav-accent:focus-visible {
	box-shadow: 0 0 0 .18rem rgba(139, 92, 246, .35), inset 0 0 .8rem rgba(139, 92, 246, .24);
}

/* --- Animated "read" badge --- */
.acbnav-has-badge {
	position: relative;
	overflow: visible;
}

.acbnav-badge-read {
	position: absolute;
	top: -10px;
	left: -12px;
	padding: 3px 8px;
	font: 600 11px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	transform: rotate(-16deg);
	z-index: 2;
	background: #ffa99a;
	border: 1px solid rgba(249, 115, 22, 0.6);
	color: #fff3ed;
	box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18), 0 0 14px rgba(249, 115, 22, 0.45), 0 0 28px rgba(249, 115, 22, 0.25);
	text-shadow: 0 0 6px rgba(249, 115, 22, 0.75), 0 0 12px rgba(249, 115, 22, 0.55);
	animation: badge-zoom 1.9s ease-in-out infinite;
}

@keyframes badge-zoom {
	0%,
	100% {
		transform: rotate(-16deg) scale(1);
		box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18), 0 0 14px rgba(249, 115, 22, 0.45), 0 0 28px rgba(249, 115, 22, 0.25);
	}

	50% {
		transform: rotate(-16deg) scale(1.09);
		box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22), 0 0 22px rgba(249, 115, 22, 0.55), 0 0 40px rgba(249, 115, 22, 0.35);
	}
}

@media (prefers-reduced-motion: reduce) {
	.acbnav-badge-read {
		animation: none;
	}
}

/* --- Button color variations --- */
.acbnav-primary {
	background: rgba(139, 92, 246, 0.15);
	border: 1px solid rgba(139, 92, 246, 0.5);
	color: #8b5cf6;
}

.acbnav-primary:hover {
	background: rgba(139, 92, 246, 0.25);
	border-color: rgba(139, 92, 246, 0.7);
	box-shadow: 0 0 0 .18rem rgba(139, 92, 246, .35), inset 0 0 .5rem rgba(139, 92, 246, .12);
}

.acbnav-secondary {
	background: rgba(249, 115, 22, 0.15);
	border: 1px solid rgba(249, 115, 22, 0.5);
	color: #f97316;
}

.acbnav-secondary:hover {
	background: rgba(249, 115, 22, 0.25);
	border-color: rgba(249, 115, 22, 0.7);
	box-shadow: 0 0 0 .18rem rgba(249, 115, 22, .35), inset 0 0 .5rem rgba(249, 115, 22, .12);
}

.acbnav-orcid {
	background: rgba(166, 206, 57, 0.15);
	border: 1px solid rgba(166, 206, 57, 0.5);
	color: #8aa739;
}

.acbnav-orcid:hover {
	background: rgba(166, 206, 57, 0.25);
	border-color: rgba(166, 206, 57, 0.7);
	box-shadow: 0 0 0 .18rem rgba(166, 206, 57, .35), inset 0 0 .5rem rgba(166, 206, 57, .12);
}

.acbnav-ezp {
	background: linear-gradient(180deg, rgba(122, 162, 255, .28), rgba(86, 125, 255, .22));
	border: 1px solid rgba(139, 92, 246, .55);
	color: #6394ff;
}

.acbnav-ezp:hover {
	background: linear-gradient(180deg, rgba(86, 126, 218, 0.28), rgba(56, 102, 255, 0.22));
	border-color: rgba(139, 92, 246, .75);
	box-shadow: 0 0 0 .18rem rgba(139, 92, 246, .35), inset 0 0 .5rem rgba(122, 162, 255, .12);
}

/* --- Mobile (max-width: 720px) --- */
@media (max-width: 720px) {
	.acbnav-toggle {
		display: block;
	}
	
	.acbnav-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: linear-gradient(180deg, rgba(21, 25, 34, .95), rgba(21, 25, 34, .90));
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		padding: 1rem;
		margin-top: 1px;
		border-bottom: 1px solid rgba(255, 255, 255, .06);
		flex-direction: column;
		gap: .5rem;
		display: none;
	}
	
	.acbnav-nav.active {
		display: flex;
	}
	
	.acbnav-pill {
		width: 100%;
		padding: .7rem 1rem;
		border-radius: 12px;
	}
}