/* Level band navigation (tv-catalog-nav) on the chapter catalog. */

/*
 * The container that holds the nav sticks under the fixed 5rem site header.
 * Stil → Navigering in the widget: "Fäst vid toppen" (position) and "Avstånd från toppen" (--tv-catalog-nav-top).
 */
.e-con:has(> .elementor-widget-tv-catalog-nav),
.e-con:has(> .e-con-inner > .elementor-widget-tv-catalog-nav) {
	position: sticky;
	top: calc(var(--tv-catalog-nav-top, 5rem) + var(--tv-catalog-adminbar, 0px));
	z-index: 40;
}
body.admin-bar { --tv-catalog-adminbar: 32px; }
@media (max-width: 782px) {
	body.admin-bar { --tv-catalog-adminbar: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar { --tv-catalog-adminbar: 0px; } /* the admin bar scrolls away here */
}

.elementor-widget-tv-catalog-nav { width: 100%; }

.tv-catalog-nav {
	border-bottom: 1px solid color-mix(in oklab, var(--e-global-color-primary, #051644) 10%, transparent);
	background: color-mix(in oklab, var(--e-global-color-e33c8be, #fcfaf6) 94%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.tv-catalog-nav__inner {
	display: flex;
	width: min(100%, 80rem);
	margin-inline: auto;
	gap: .35rem;
	overflow-x: auto;
	padding: .7rem 1.25rem;
	scrollbar-width: none;
}
.tv-catalog-nav__inner::-webkit-scrollbar { display: none; }

.tv-catalog-nav a.tv-catalog-nav__link {
	display: inline-flex;
	min-height: 2.75rem;
	flex: 0 0 auto;
	align-items: center;
	gap: .55rem;
	border-radius: 8px;
	padding: .4rem .75rem;
	background: transparent;
	color: color-mix(in oklab, var(--e-global-color-primary, #051644) 62%, transparent);
	font-family: "Outfit", sans-serif;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}
.tv-catalog-nav a.tv-catalog-nav__link:hover,
.tv-catalog-nav a.tv-catalog-nav__link:focus-visible,
.tv-catalog-nav a.tv-catalog-nav__link.is-active {
	background: var(--e-global-color-a24cbff, #e8f5fd);
	color: var(--e-global-color-primary, #051644);
}

.tv-catalog-nav__chip {
	display: inline-grid;
	box-sizing: border-box;
	min-width: 2.5rem;
	height: 1.75rem;
	place-items: center;
	border-radius: 999px;
	padding-inline: .55rem;
	font-family: "Bebas Neue", sans-serif;
	font-size: .9rem;
	line-height: 1.7;
}
.tv-catalog-nav__chip--gold { background: var(--e-global-color-722ed5d, #efd686); color: var(--e-global-color-primary, #051644); }
.tv-catalog-nav__chip--bright { background: var(--e-global-color-b1a8e7f, #44a8e7); color: var(--e-global-color-primary, #051644); }
.tv-catalog-nav__chip--steel { background: var(--e-global-color-secondary, #2d6ca9); color: var(--e-global-color-e33c8be, #fcfaf6); }
.tv-catalog-nav__chip--navy { background: var(--e-global-color-0521490, #052149); color: var(--e-global-color-e33c8be, #fcfaf6); }
.tv-catalog-nav__chip--soft-gold {
	border: 1px solid color-mix(in oklab, var(--e-global-color-accent, #e2b42c) 55%, transparent);
	background: var(--e-global-color-f4d3a01, #fff4d3);
	color: var(--e-global-color-primary, #051644);
}
