/**
 * Sticky Nav Menu Module
 */

/* ==========================================================================
   Sticky bar
   ========================================================================== */

.sticky-nav-menu {
	position: sticky;
	top: 80px;
	z-index: 99;
	background-color: var(--color-blue);
	display: flex;
	flex-direction: column;
	border-radius: 6px;
	padding: 5px;
	width: 100%;
	clear: both;
	margin-bottom: 50px;
	transition: padding 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

	@media (min-width: 960px) {
		top: 125px;
	}

	body.admin-bar & {
		top: 126px;

		@media (min-width: 783px) {
			top: 112px;
		}

		@media (min-width: 960px) {
			top: 157px;
		}
	}
}

/* ==========================================================================
   Nav list
   ========================================================================== */

.sticky-nav-menu__inner {
	ul {
		text-transform: uppercase;
		list-style-type: none;
		margin: 0;
		text-align: center;

		&.desktop {
			display: none;

			@media (min-width: 960px) {
				display: block;
			}
		}

		&.mobile {
			display: block;

			@media (min-width: 960px) {
				display: none;
			}
		}

		li {
			display: inline;
			font-size: 14px;
			font-weight: 700;
			white-space: nowrap;
			border-right: 1px #d5cb23 solid;

			@media (min-width: 768px) {
				font-size: 16px;
			}

			&:last-of-type {
				border: none;
			}

			a {
				color: #fff;
				padding: 5px 10px;
				display: inline-flex;

				@media (min-width: 768px) {
					padding: 5px 15px;
				}

				&:hover,
				&.active {
					color: #d5cb23;
				}
			}
		}
	}
}

/* ==========================================================================
   Pinned state — full-width with shadow
   ========================================================================== */

.sticky-nav-menu.is-pinned {
	border-radius: 0;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}