.header-menu {
	position: sticky;
	top: 0;
	z-index: 10;

	@media (width > 56em) {
		display: none;
	}

	& .header-container {
		padding-inline: 16px;
		padding-block: 8px;

		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
		min-height: 72px;

		background: var(--color-bg-1);

		& .header-logo {
			flex-shrink: 0;

			& .header-logo-icon {
				width: 112px;
				height: 32px;
			}
		}

		& .header-hamburger {
			& .header-hamburger-trigger {
				cursor: pointer;
				display: flex;
				gap: 8px;
				align-items: center;

				& .header-hamburger-trigger-button {
					&.button {
						padding: 4px;
						height: 100%;
					}

					& .header-hamburger-trigger-icon {
						width: 40px;
						height: 40px;
					}
				}
			}

			& .header-hamburger-overlay {
				background: var(--color-overlay);
				position: fixed;
				inset: 0;
				transition-property: opacity;

				&:is(
					.header-hamburger:not(
							:has(
								.header-hamburger-trigger:focus,
								.header-nav:focus-within
							)
						)
						*
				) {
					pointer-events: none;
					opacity: 0;
				}
			}

			& .header-hamburger-content {
				position: fixed;
				right: 0;
				top: 0;

				padding: 16px;
				padding-top: 8px;
				background: var(--color-bg-1);
				height: 100%;
				transition-property: translate;

				display: flex;
				flex-direction: column;
				gap: 32px;

				&:is(
					.header-hamburger:not(
							:has(
								.header-hamburger-trigger:focus,
								.header-nav:focus-within
							)
						)
						*
				) {
					translate: 100% 0;
				}

				& .header-hamburger-close {
					align-self: flex-end;

					cursor: pointer;
					display: flex;
					gap: 8px;
					align-items: center;

					& .header-hamburger-close-button {
						&.button {
							padding: 4px;
							height: 100%;
						}

						& .header-hamburger-close-icon {
							width: 40px;
							height: 40px;
						}
					}
				}

				& .header-nav {
					flex-grow: 1;

					display: flex;
					flex-direction: column;
					gap: 8px;

					& .header-links {
						display: contents;
					}
				}

				& .header-cta {
					display: flex;
					flex-direction: column;
					gap: 8px;
				}
			}
		}
	}
}