#header {
	z-index: 999;
	transition: background-color 0.3s;

	.navbar-brand {
		display: inline-flex;
		max-width: 8rem;
		padding: 1rem 0;
		margin-right: 0;
		transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

		img {
			width: 100%;
			filter: invert(1);
		}
	}

	.navbar-toggler {
		padding: 0;
		border: none;

		--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}

	.navbar {
		--bs-navbar-padding-y: 0;
		transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

		> .container {
			gap: 3rem;
		}

		.offcanvas {
			--bs-offcanvas-bg: var(--color-black);
			--bs-offcanvas-color: var(--color-white);

			.offcanvas-header {
				.btn-close {
					--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
				}
			}

			.offcanvas-body {
				display: flex;
				flex-direction: column;
			}
		}

		.navbar-nav {
			.menu-item-has-children {
				position: relative;
				display: flex;
				flex-direction: column;
			}
			> .menu-item {
				display: inline-flex;
				align-items: stretch;

				> a {
					width: 100%;
					display: inline-flex;
					align-items: center;
					font-size: var(--text-xl);
					font-weight: 600;
					color: var(--color-white);
					padding: 1.25rem;

					&:hover,
					&:focus-visible {
						color: var(--color-primary);
					}
				}

				.toggle-dropdown-btn {
					position: absolute;
					top: 0;
					right: 0;
					display: grid;
					place-items: center;
					width: 2em;
					height: 4em;
					font-size: 0.875em;
					flex-shrink: 0;
					color: var(--color-white);
					background: none;
					border: none;
					transition: transform 0.15s;
				}

				.sub-menu {
					display: none;
					visibility: hidden;
					opacity: 0;
					transition: all 0.3s;
					transform: scaleY(0);
					transform-origin: center top 0;

					.menu-item {
						display: inline-flex;
						align-items: center;

						a {
							width: 100%;
							font-size: var(--text-base);
							font-weight: 600;
							padding: 0.625rem 1rem;
							transition: all 0.15s;

							&:hover,
							&:focus-visible {
								color: var(--color-primary);
							}
						}
					}

					&.opened {
						display: flex;
						flex-direction: column;
						position: relative;
						top: 0;
						visibility: visible;
						opacity: 1;
						transform: scaleY(100%);
					}
				}

				&:hover {
					> a {
						color: var(--color-primary);
					}
				}
			}
		}
	}

	&.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	&.is-scrolling {
		background-color: oklch(from var(--color-black) l c h / 0.5);

		.navbar-brand {
			padding: 1.25rem 0;
			max-width: 6rem;
		}
	}

	@media (width >= 1400px) {
		.navbar {
			backdrop-filter: blur(10px);

			> .container {
				align-items: stretch;

				.offcanvas {
					.offcanvas-body {
						flex-grow: 1;
						flex-direction: row;

						.navbar-nav {
							.menu-item-has-children {
								flex-direction: row;

								.toggle-dropdown-btn {
									&:not(:focus):not(:focus-within) {
										width: 1px!important;
										height: 1px!important;
										padding: 0!important;
										margin: -1px!important;
										overflow: hidden!important;
										clip: rect(0,0,0,0)!important;
										white-space: nowrap!important;
										border: 0!important
									}
								}

								.sub-menu {
									display: flex;
									flex-direction: column;
									background-color: var(--color-white);
									box-shadow: 0px 2px 20px 0px rgba(62, 65, 159, 0.09);
									width: 250px;
									position: absolute;
									padding: 20px 0;
									top: 110%;
									z-index: 10;
								}

								&:hover {
									.sub-menu {
										top: 100%;
										visibility: visible;
										opacity: 1;
										transform: scaleY(100%);
									}
								}
							}
							> .menu-item {
								> a {
									color: var(--color-white);
								}
								&:hover {
									> a {
										color: var(--color-primary);
									}
								}
								.sub-menu {
									a {
										color: var(--color-black);
										&:hover {
											color: var(--color-primary);
										}
									}
								}
							}
						}
					}
				}
			}
		}
		.navbar-brand {
			padding: 2.5rem 0;
		}
	}
}