/* ============================================================
   PQA Navigation Bar (pqa/nav-bar)
   Prototype: .archive-jump in prototype/spectacular-archive.html
   ============================================================ */

.pqa-nav-bar {
	position: relative;
	z-index: 900;
	border-bottom: 1px solid var(--pqa-border);
	background-color: var(--pqa-white);
}

.pqa-nav-bar.is-sticky {
	position: sticky;
	top: var(--pqa-nav-bar-top, 72px); /* set by nav-bar.js to the header's height */
	background-color: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.pqa-nav-bar--light,
.pqa-nav-bar--light.is-sticky {
	background-color: rgba(244, 244, 247, 0.96);
}

.pqa-nav-bar--dark,
.pqa-nav-bar--dark.is-sticky {
	background-color: rgba(43, 46, 95, 0.97);
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

.pqa-nav-bar-list {
	display: flex;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0.75rem 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pqa-nav-bar-list::-webkit-scrollbar {
	display: none;
}

.pqa-nav-bar--center .pqa-nav-bar-list {
	justify-content: center;
}

/* Centered lists that overflow on small screens must start at the left edge */
@media (max-width: 768px) {
	.pqa-nav-bar--center .pqa-nav-bar-list { justify-content: flex-start; }
}

.pqa-nav-bar-list li {
	flex-shrink: 0;
	margin: 0;
}

.pqa-nav-bar-link {
	display: inline-block;
	font-family: var(--font-base);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--pqa-navy);
	text-decoration: none;
	padding: 0.6rem 0.9rem;
	border-radius: 100px;
	transition: background-color var(--transition), color var(--transition);
}

.pqa-nav-bar-link:hover,
.pqa-nav-bar-link:focus-visible {
	background-color: var(--pqa-light-navy);
	color: var(--pqa-navy);
	text-decoration: none;
}

.pqa-nav-bar-link:focus-visible {
	outline: 3px solid var(--pqa-accent-blue);
	outline-offset: 2px;
}

.pqa-nav-bar-link.is-active,
.pqa-nav-bar-link[aria-current="true"] {
	background-color: var(--pqa-navy);
	color: var(--pqa-white);
}

.pqa-nav-bar--light .pqa-nav-bar-link:hover { background-color: var(--pqa-white); }

.pqa-nav-bar--dark .pqa-nav-bar-link { color: var(--pqa-white); }
.pqa-nav-bar--dark .pqa-nav-bar-link:hover,
.pqa-nav-bar--dark .pqa-nav-bar-link:focus-visible { background-color: rgba(255, 255, 255, 0.12); color: var(--pqa-white); }
.pqa-nav-bar--dark .pqa-nav-bar-link.is-active,
.pqa-nav-bar--dark .pqa-nav-bar-link[aria-current="true"] { background-color: var(--pqa-white); color: var(--pqa-navy); }

/* Editor: never stick inside the canvas */
.editor-styles-wrapper .pqa-nav-bar.is-sticky {
	position: relative;
	top: auto;
}