:root {
	--primary-light: 196.1, 100%, 91.96%;
	--wp--preset--color--primary: #0085ca;
	--wp--preset--color--accent: #ffd100;
}

/* ============== */
/* NAVIGATION BAR */
/* ============== */

.nav.sticky {
	position: fixed;
	padding: 2rem;
	top: 3rem;
	left: 50%;
	transform: translateX(-50%);
	width: 1200px;
	margin-inline: auto;
	background: hsl(var(--primary-light), 0.7) !important;
	backdrop-filter: blur(10px);
	z-index: 2;
	border-radius: 10000px;
	border: 2px solid var(--wp--preset--color--primary);
}

.nav.sticky img {
	width: 90px;
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

	& > li {
		background-color: transparent;
		transition: background-color 0.3s;

		&:first-child {
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
		}

		&:last-child {
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
		}

		&:hover {
			background-color: var(--wp--preset--color--accent);
		}
	}

	& > li > a {
		padding: 1.2em !important;
		height: 100%;
		width: 100%;
	}
}

.wp-block-navigation-item.active {
	text-decoration: underline;
	text-underline-offset: 0.4rem;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--primary);
}

.nav-cta,
.wp-element-button {
	background-color: var(--wp--preset--color--accent) !important;
	padding: 1rem 1.25rem;
	border-radius: 1000px;
	cursor: pointer;
	transition: background-color 0.3s;
	font-weight: bold;

	&:hover {
		background-color: color-mix(
			var(--wp--preset--color--accent),
			#000 8%
		) !important;
	}
}

@media screen and (max-width: 800px) {
	body .is-layout-flex {
		flex-direction: column;
	}
}

/* ======= */
/* FOOTER */
/* ====== */
.footer-link > a {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

/* ======= */
/* GLOBAL */
/* ====== */
.rise-video > video {
	border-radius: 24px;
}