/**
 * Development page sticky section nav
 * Shown after scroll, white CTAs + primary, active state inverts colours
 */

.development-sticky-nav {
	position: sticky;
	top: 66px;
	z-index: 1000;
	opacity: 0;
	transform: translateY(-100%);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
	background-color: rgb(255 255 255 / 70%);
	backdrop-filter: blur(8px);
	border-radius: 2rem 0 0 2rem;
	padding: 0.8rem !important;
	gap: 0.8rem;
	transition: opacity 0.3s ease, transform 0.3s ease, top .7s;
	max-width: var(--grid-limit);
	width: calc(100% - 15px);
	margin-inline: auto;
	margin-left: 15px;
}
@media (min-width: 992px){
	.development-sticky-nav {
		top: 116px;
		border-radius: 2rem;
		max-width: calc(var(--grid-limit) - 30px);
		width: calc(100% - 15px);
		margin-inline: auto;
	}
}
body:has(#head.oculta) .development-sticky-nav {
	top: 16px;
}
.development-sticky-nav > * {
	text-decoration: none;
	padding: .3rem 1rem;
	text-align: center;
	font-size: 1rem;
	font-weight: 500;
}

.development-sticky-nav.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	box-shadow: 0px 3px 10px -2px  #ccc;
}

.development-sticky-nav__link--light {
	color: var(--primary);
}

.development-sticky-nav__link--light:before {
	background-color: var(--primary);
}

.development-sticky-nav__link.is-active {
	background-color: var(--primary);
	color: #fff;
}

.development-sticky-nav__link.is-active:before {
	background-color: #fff;
}

@media (min-width: 992px) {
	.development-sticky-nav__link {
		transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
	}
	.development-sticky-nav__link:hover {
		opacity: 0.9;
	}
	.development-sticky-nav__link:not(.is-active):hover {
		background-color: rgba(0, 0, 0, 0.06);
	}
	.development-sticky-nav__link.is-active:hover {
		opacity: 0.95;
	}
}

@media (max-width: 991px){
	body:has(#head.oculta) .development-sticky-nav{
		top: 66px;
	}
	.development-sticky-nav__current-tag {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
		position: sticky;
		left: 0;
		z-index: 2;
		padding: 0.3rem 1rem;
		font-size: 1rem;
		font-weight: 500;
		text-align: center;
		background-color: var(--secondary);
		color: #fff;
		border-radius: 2.1rem;
		box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.15);
		min-width: 99px;
		text-align: center;
		justify-content: center;
	}
}
@media (min-width: 992px) {
	.development-sticky-nav__current-tag {
		display: none;
	}
}