body {
	&:has(#c-header__nav-control:checked) {
		overflow-y: hidden;
	}
}

.c-header {
	--hdr-bkg: var(--color-white);
	--hdr-txt: var(--color-primary);
	--hdr-off: var(--color-grey);
	--hdr-alt: var(--color-secondary);

	--fix-light: var(--color-white);
	--fix-dark: var(--color-primary);
	--fix-extra: var(--color-secondary);

	position: sticky;
	top: 0;
	right: 0;
	left: 0;
	z-index: 999;
	background: var(--hdr-bkg);
	transition: all .1s ease-out;
	transform: translateZ(0);

	&.c-header--alternate {
		--hdr-bkg: var(--color-primary);
		--hdr-txt: var(--color-white);
		--hdr-off: var(--color-grey);
		--hdr-alt: var(--color-secondary);
	}

	&.c-header--trade {
		.c-header__logo {
			padding-left: var(--spacing-xs);
			padding-right: var(--spacing-xs);
			background-color: var(--color-secondary);
		}
	}

	&:not(.fixed).header-hidden {
		transform: translate3d(0, -100%, 0);
	}

	> .container.container--default {
		display: flex;
		align-items: center;
		max-width: var(--width);
		margin: 0 auto;
	}

	.c-header__logo-wrapper {
		min-width: 100px;
	}

	.c-header__logo {
		&.c-header__logo--desktop,
		&.c-header__logo--mobile {
			:is(img, svg) {
				max-height: 3rem;
			}
		}

		&.c-header__logo--desktop {
			display: none;
			max-width: 129px;
			padding: var(--spacing-sm) 0;

			img {
				max-width: 130px;
				max-height: 44px;
			}
		}

		&.c-header__logo--mobile {
			display: block;
			max-width: 75px;
			padding: var(--spacing-xs) 0;

			img {
				max-width: 75px;
				max-height: 75px;
			}
		}

		&.c-header__logo--desktop svg,
		&.c-header__logo--mobile svg {
			width: 100%;
			height: 100%;
			fill: inherit;
		}
	}

	.c-header__nav {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 999;
		background: var(--fix-dark);
		transition: transform .3s ease;
		transform: translateX(-100%);

		&:has(#c-header__nav-control:checked) {
			transform: translateX(0);
		}

		#c-header__nav-control {
			display: none;
		}

		ul {
			display: flex;
			flex-direction: column;
			place-items: stretch;
			margin-bottom: 0;
			padding-left: 0;
		}

		.c-header__nav-item {
			display: block;
			margin: var(--spacing-xs) 0;
			position: relative;
			font-weight: 700;

			@media (width <= 1100px) {
				padding: 0 var(--spacing-sm);
			}

			&:hover {
				cursor: pointer;
			}

			&:has(.c-button) {
				text-align: left;
			}

			.c-header__nav-item-internal {
				display: grid;
				grid-template: auto / auto calc(35px + var(--spacing-xs) + var(--spacing-xs));
				place-items: center;
				place-content: space-between;

				label {
					display: flex;
					width: 100%;
					height: 35px;
					cursor: pointer;
					place-items: center;
					place-content: center;

					svg {
						position: static;
						transition: transform 0.3s;
					}
				}
			}

			&:has(.c-header__nav-dropdown) {
				position: relative;

				svg {
					width: 20px;
					height: 15px;
					margin: auto 0;
					position: absolute;
					top: 0;
					right: var(--spacing-sm);
					z-index: 5;
				}

				div:not(.c-header__nav-dropdown) {
					.c-header__nav-link {
						position: relative;
						z-index: 1;
					}
				}
			}

			label {
				display: inline;

				svg {
					display: inline;
					cursor: pointer;
				}
			}

			input.control {
				display: none;
			}

			.c-header__nav-dropdown {
				display: none;
				flex-direction: column;
				max-height: 280px;
				padding-left: 70px;
				overflow-y: auto;

				&:after,
				&:before {
					content: "";
					display: block;
					margin: 0 auto;
					position: absolute;
					right: 0;
					bottom: 0;
					left: 0;
				}

				&:after {
					display: none;
					width: 12px;
					height: 6px;
					background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAgNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMS40MjkuMTQzTDUgMy43MTQgOC41NzEuMTQzIDEwIC44NTdsLTUgNS01LTVMMS40MjkuMTQzeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
					background-position: 50%;
					background-repeat: no-repeat;
					background-size: cover;
				}

				ul {
					padding: var(--spacing-sm) 0;
					list-style-type: none;
				}

				a {
					display: block;
					margin-bottom: var(--spacing-xs);
					color: var(--fix-light);
					font-weight: 500;

					&:hover {
						color: var(--hdr-alt);
					}
				}

				.c-header__nav-dropdown-label {
					margin-bottom: var(--spacing-xs);
					color: var(--fix-light);
					cursor: default;
				}
			}

			&.c-header__nav-item--help {
				padding-top: var(--spacing-lg);
			}

			.c-header__nav-link {
				display: flex;
				align-items: center;
				gap: var(--spacing-sm);
				color: var(--fix-light);

				&:active {
					color: var(--hdr-txt);
				}

				&:hover {
					color: var(--hdr-alt);
				}

				.c-header__nav-link-icon {
					display: block;
					width: 35px;
					height: 35px;
					background-position: 50%;
					background-repeat: no-repeat;
					background-size: contain;

					@media (width > 1100px) {
						display: none;
					}
				}
			}
		}
	}

	&.alternate {
		> .container.container--default .c-header__logo-wrapper {
			min-width: -webkit-min-content;
			min-width: -moz-min-content;
			min-width: min-content;
			max-width: -webkit-max-content;
			max-width: -moz-max-content;
			max-width: max-content;


			.c-header__logo {
				&.c-header__logo--desktop,
				&.c-header__logo--mobile {
					fill: var(--hdr-bkg);
				}
			}
		}
	}

	/* Hamburger */
	> .container.container--default .c-header__nav:has(#c-header__nav-control) ~ .c-header__nav-control-label .hamburger {
		display: block;
		margin-top: auto;
		margin-right: -22px;
		margin-bottom: auto;
		padding: 0;
		position: absolute;
		top: -6px;
		right: 25px;
		bottom: 0;
		z-index: 999;
		background: transparent;
		opacity: 1;
		transition: opacity .3s ease-in-out;

		&:hover {
			cursor: pointer;
		}

		&:focus {
			outline: none;
		}

		svg {
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			user-select: none;
			transition: transform .4s;
			-webkit-tap-highlight-color: transparent;

			.bottom,
			.top {
				stroke-dasharray: 40 82;
			}

			.line {
				transition: stroke-dasharray .4s, stroke-dashoffset .4s;
				fill: none;
				stroke: var(--hdr-txt);
				stroke-width: 3.5;
				stroke-linecap: round;
			}
		}
	}

	&.alternate > .container.container--default .c-header__nav:has(#c-header__nav-control) ~ .c-header__nav-control-label .hamburger svg path {
		stroke: var(--hdr-bkg);
	}

	.c-header__nav:has(#c-header__nav-control) > ul .c-header__nav-item:has(input.control:checked) label svg {
		transform: rotate(180deg);
	}

	.c-header__nav:has(#c-header__nav-control:checked) ~ .c-header__nav-control-label .hamburger svg {
		transform: rotate(180deg);

		.bottom,
		.top {
			stroke-dasharray: 14 82;
			stroke-dashoffset: -72px;
		}
	}

	/* Mobile adjustments */
	@media (width <= 768px) {
		.c-header__nav > ul .c-header__nav-dropdown {
			flex-flow: column;

			&.open {
				display: flex;
				padding-bottom: var(--spacing-sm);
			}
		}
	}

	/* Desktop navigation */
	@media (width >= 1101px) {
		> .container.container--default .c-header__nav {
			width: auto;
			height: auto;
			margin-left: auto;
			position: relative;
			background: transparent;
			transition: none;
			transform: translateX(0);

			> .c-header__nav-item.c-header__nav-item--help {
				display: none;
			}

			> ul {
				place-items: center;
				flex-direction: row;

				.c-header__nav-item {
					margin: 0;

					.c-header__nav-item-internal {
						display: flex;
						align-items: center;
						gap: 6px;

						label {
							width: 12px;
							height: 8px;
						}
					}

					.c-header__nav-link {
						color: var(--hdr-txt);
						padding: var(--spacing-md) 0;
					}

					&.c-header__nav-item--help {
						display: none;
					}

					&:has(.c-header__nav-dropdown) {
						svg {
							right: 0;
							bottom: 0;
							color: var(--hdr-txt);
						}
					}

					&:has(.c-header__nav-dropdown):hover {
						svg {
							transform: rotateX(180deg);
						}

						.c-header__nav-link,
						.c-header__nav-link svg {
							color: var(--hdr-alt);
						}
					}

					&:hover {
						.c-header__nav-item-internal {
							a {
								color: var(--color-secondary);
							}
						}

						.c-header__nav-dropdown {
							display: flex;
						}

						svg {
							color: var(--hdr-alt);
						}
					}

					&:has(.c-header__nav-dropdown) .c-header__nav-link {
						padding: var(--spacing-md) 0;
					}

					.c-header__nav-dropdown {
						display: none;
						flex-direction: row;
						max-height: none;
						padding-bottom: 10px;
						padding-left: 0;
						overflow-y: visible;
						position: absolute;
						top: calc(100% + 1px);
						z-index: 10;
						background: var(--fix-light);
						box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .1);

						ul {
							min-width: 230px;
							padding: 0;
						}

						a {
							margin-bottom: 0;
							padding: 10px 25px;
							color: var(--fix-dark);

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

						.c-header__nav-dropdown-label {
							margin-bottom: 15px;
							padding: 20px 25px;
							border-bottom: 2px solid hsla(0, 0%, 89.8%, .5);
							color: var(--fix-dark);
							font-weight: 700;
						}
					}
				}
			}
		}

		&.alternate .c-header__nav .c-header__nav-item {
			.c-header__nav-link,
			.c-header__nav-link + svg {
				color: var(--fix-light);
			}

			&:hover {
				.c-header__nav-link,
				.c-header__nav-link + svg {
					color: var(--hdr-alt);
				}
			}
		}
	}

	/* Mobile dropdown toggle */
	@media (width <= 1101px) {
		.c-header__nav .c-header__nav-item:has(input.control:checked) .c-header__nav-dropdown {
			display: flex;
		}
	}

	@media (width >= 1101px) and (width <= 1280px) {
		> .container.container--default .c-header__nav > ul {
			gap: 2.3vw;

			.c-header__nav-item {
				font-size: .625rem;

				&:has(.c-header__nav-dropdown) svg {
					width: 10px;
					height: 6px;
				}
			}
		}
	}

	@media (width >= 1279px) {
		> .container.container--default .c-header__logo {
			&.c-header__logo--mobile {
				display: none;
			}
		}
	}

	@media (width <= 1279px) {
		> .container.container--default {
			.c-header__logo-wrapper {
				flex: 1 0 auto;
			}

			.c-header__nav {
				flex: 0 1 auto;
			}
		}
	}

	@media (width >= 1279px) {
		> .container.container--default {
			.c-header__nav {
				display: flex;
				align-items: flex-end;

				ul {
					margin-left: auto;
				}
			}

			.c-header__logo-wrapper {
				flex: 0 1 auto;
			}

			.c-header__logo {
				&.c-header__logo--desktop {
					display: flex;
					align-items: center;

					img {
						max-width: 154px;
						max-height: 46px;
					}
				}
			}
		}
	}

	@media (width >= 1280px) {
		> .container.container--default .c-header__nav > ul {
			gap: var(--spacing-md);

			.c-header__nav-item {
				padding-right: 0;
				padding-left: 0;
				font-size: .75rem;

				&:has(.c-header__nav-dropdown) svg {
					width: 12px;
					height: 8px;
				}
			}
		}
	}

	@media (width >= 1101px) {
		body:has(#c-header__nav-control:checked) {
			overflow-y: auto;
		}

		> .container.container--default .c-header__nav:has(#c-header__nav-control) ~ .c-header__nav-control-label {
			display: none;
		}
	}
}