// =============================================================================
// :: Header
// =============================================================================
.c-header {
	position: relative;
	z-index: $z-index-atmosphere;

	width: 100%;
	padding: 2.5rem 0;

	background-color: $background-color-base;

	@include respond-at(get-breakpoint("desktop")) {
		padding: 6rem 0 2.5rem;
	}
}

// =============================================================================
// :: Elements
// =============================================================================
.c-header__overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: $z-index-atmosphere;

	display: block;
	width: 100%;
	height: 100vh;

	background-color: $background-color-pink;

	transform: scaleY(0);
	transform-origin: top center;

	transition: transform 0.3s ease-in-out;

	&::after {
		content: "";

		position: absolute;

		width: 100%;
		height: 100%;

		opacity: 0;
		background-image: url("/assets/images/general/background/bg-overlay.svg");
		background-repeat: no-repeat;
		background-position: calc(50% - 30rem) calc(50% - 15rem);

		transform: scale(0);
		transform-origin: top left;

		transition:
			transform 0.3s ease-in-out,
			opacity 0.3s ease-in-out;
	}
}

.c-header__container {
	display: flex;
	justify-content: space-between;
	align-items: center;

	@include respond-at(get-breakpoint("desktop")) {
		align-items: flex-end;
	}
}

.c-header__nav-container {

	@include respond-at(get-breakpoint("desktop")) {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.c-header__content {

	@include respond-to(get-breakpoint("desktop")) {
		position: absolute;
		top: 15rem;

		opacity: 0;

		transition: opacity 0.3s ease-in-out;

		pointer-events: none;
	}
}

.c-header__topnav {
	position: absolute;
	top: 0;
	right: 0;

	.c-topnav__list {
		padding-right: 8rem;
	}
}

.c-header__button {
	color: $text-color-base;
	background-color: $background-color-base;

	&:hover {
		color: $border-color-light;
		background-color: $background-color-purple;
	}

	@include respond-at(get-breakpoint("desktop")) {
		margin-left: 4.5rem;

		color: $text-color-light;
		background-color: $background-color-pink;

		&:hover {
			background-color: $background-color-purple;
		}
	}
}

.c-header__logo {
	transition:
		opacity 0.3s ease-in-out,
		transform 0.3s ease-in-out;
}

.c-header__actions {
	position: relative;

	display: flex;
	justify-content: space-between;
	align-items: center;

	@include respond-at(get-breakpoint("desktop")) {
		display: block;
	}
}

.c-header__nav {

	@include respond-to(get-breakpoint("desktop")) {
		@include extend-heading-decorator--white();

		.c-nav__link {
			font-size: $font-size-2x-large;
			font-weight: $font-weight-bold;

			color: $text-color-light;

			&::after {
				background-color: $background-color-base;
			}

			@include respond-at(get-breakpoint("desktop")) {
				font-size: inherit;
				font-weight: inherit;
			}
		}
	}
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-header__logo--white {
	opacity: 0;

	&.c-logo {
		display: none;
	}
}

.c-header__logo--pink {
	opacity: 1;
}

.c-header__topnav--white {

	&.c-topnav {
		margin-top: 6rem;
		margin-bottom: 8rem;
		padding: 0;

		background-color: transparent;
	}

	.c-topnav__list {
		flex-direction: column;
	}

	.c-topnav__item {
		font-family: $font-family-primary;
		font-size: $font-size-1x-large;
		font-weight: $font-weight-medium;
	}

	.c-topnav__item-link {
		color: $text-color-light;
	}
}

// =============================================================================
// :: States
// =============================================================================
.c-header {

	&.is-open {

		.c-header__overlay {
			transform: scaleY(1);

			&::after {
				opacity: 1;

				transform: scale(1);

				@include respond-at(get-breakpoint("tablet")) {
					transform: scale(1.3);
				}
			}
		}

		.c-header__content {
			opacity: 1;

			pointer-events: auto;
		}

		.c-header__logo--pink {
			opacity: 0;

			&.c-logo {
				display: none;
			}
		}

		.c-header__logo--white {
			opacity: 1;

			&.c-logo {
				display: block;
			}
		}

		.c-header__content,
		.c-header__actions,
		.c-header__hamburger {
			z-index: $z-index-atmosphere + 1;
		}
	}
}

.c-header {
	transition:
		box-shadow 0.2s ease-in-out,
		transform 0.2s ease-in-out;

	&.is-fixed {
		position: fixed;
		top: 0;
		z-index: $z-index-roof + 2;

		background-color: $background-color-white;
		box-shadow: 0 1rem 4rem -1rem $box-shadow-color-light;

		.c-header__logo {
			transform: scale(0.8);
		}

		.c-header__nav-container {
			align-items: center;
		}
	}
}