.nav-logo {
	display: flex;
	align-items: center;
}

nav {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;

	ul.desktop-menu {
		display: flex;
		gap: 8px;
		padding-left: 0;

		li {
			list-style: none;
		}
	}

	.hamburger-menu__icon {
		cursor: pointer;

		svg * {
			fill: var(--color-brand-accent) !important;
		}

		&:hover {
			transform: scale(1.1);
		}
	}

	.hamburger-menu-toggle {
		display: none;
		anchor-name: --hamburger-toggle;

		input {
			display: none;
		}

		.hamburger-menu__open-icon {
			display: block;
			anchor-name: --my-anchor;
		}

		.hamburger-menu__close-icon {
			display: none;
		}
	}

	.hamburger-menu {
		display: none;
	}

	.hamburger-backdrop {
		display: none;
	}

	@media (max-width: 1000px) {
		.hamburger-menu-toggle {
			display: flex;
			align-items: center;
		}

		ul.desktop-menu {
			display: none;
		}

		.hamburger-menu {
			position: fixed;
			position-anchor: --my-anchor;
			position-try-fallbacks: flip-inline;
			top: calc(anchor(top) - 2px);
			right: calc(anchor(right) - 14px);
			display: flex;
			opacity: 0;
			transition: opacity 50ms;
			pointer-events: none;
			box-shadow: -3px 3px var(--color-brand-canvas-07);
			background-color: var(--color-brand-canvas);
			flex-flow: column;
			padding: 12px;
			padding-top: 2px;
			align-items: flex-end;
			z-index: 10;

			ul {
				display: flex !important;
				margin: 0;
				padding: 0;

				flex-flow: column;
				align-items: stretch;
				justify-content: stretch;
				width: 50%;
				width: fit-content;
				row-gap: 12px;

				li {
					list-style: none;

					a {
						margin: 0;
						width: 100%;
					}
				}
			}
		}

		&:has(#hamburger-menu-toggle-checkbox:checked) {
			.hamburger-menu__close-icon {
				display: block;
			}

			.hamburger-menu {
				opacity: 1;
				pointer-events: all;
			}

			.hamburger-backdrop {
				display: block;
				position: fixed;
				top: 0;
				left: 0;
				height: 100vh;
				width: 100vw;
				background-color: #0000002b;
				cursor: pointer;
				z-index: 2;
				backdrop-filter: blur(2px);
			}
		}
	}
}