@use "sass:math";

$hamburger-layer-width: 16px;
$hamburger-layer-height: 1px;
$hamburger-layer-spacing: 6px;

html.mobile-menu-default-active,
html.mobile-menu-cta-active {
	@include media-max($large) {
		overflow-y: hidden;
	}
}

.site-header {
	background-color: #000;
	transition: transform var(--header-transition-speed) ease-in-out;

	&__hello-bar {
		display: none;
		background-color: #dc150b;
		padding: 0.6rem 1.6rem;
		text-align: center;
		transition: all var(--default-transition-params);
		cursor: pointer;
		&.active {
			display: block;
		}
		&-inner {
			color: #fff;
			text-decoration: none;
			font-size: 16px;
			.button-link {
				padding-left: 0.8rem;
			}
		}
		&-close {
			position: absolute;
			right: 0;
			width: 2rem;
			height: 2rem;
			cursor: pointer;
		}
		&:hover {
			background-color: #87120c;
			.button-link {
				&:after {
					background-color: #fff;
					border-radius: 50%;
					color: #000;
					transform: rotate(45deg);
				}
			}
		}

		&.red {
			background-color: #dc150b;
			a,
			.button-link {
				color: #fff;
			}
			&:hover {
				background-color: #87120c;
			}
		}
		&.violet {
			background-color: #9e4ec4;
			a,
			.button-link {
				color: #fff;
			}
			&:hover {
				background-color: #5d137d;
			}
		}
		&.blue {
			background-color: #2c80ce;

			&:hover {
				background-color: #10487b;
			}
		}
		&.green {
			background-color: #1aa8a8;
			&:hover {
				background-color: #0f5353;
			}
		}
		&.blue,
		&.green {
			a,
			.button-link {
				color: #000;
			}
			&:hover {
				a,
				.button-link {
					color: #fff;
				}
			}
		}
	}

	&__bg-bar {
		height: 4px;
		background: linear-gradient(
			90deg,
			#0cb1f2 -0.01%,
			#12c0c5 13.53%,
			#256cd4 28.11%,
			#15a1e6 40.61%,
			#0ca6f2 64.05%,
			#01ecb0 91.53%,
			#0cf06e 99.98%
		);
	}

	&-wrapper {
		z-index: var(--z-header);
		position: sticky;
		top: var(--admin-bar-height, 0);
		left: 0;
		width: 100%;
	}

	display: flex;
	align-items: center;
	padding: 1.2rem 0;
	@include media-min($large) {
		padding: 15px 0;
	}

	&__inner {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&__logo-image {
		width: 92px;
		height: 38px;
		display: block;
		@include media-min($large) {
			width: 120px;
			height: 50px;
		}
	}

	&__cta-container {
		display: none;

		@include media-min($large) {
			display: flex;
			align-items: center;
		}
	}

	&__menu-primary {
		display: none;

		@include media-min($large) {
			display: flex;
			gap: 4px;
			flex-grow: 1;
		}
	}

	&__primary-menu-link {
		position: relative;
		font-weight: 500;
		font-size: 16px;
		line-height: 21px;
		color: var(--color-white);
		text-decoration: none;
		transition: all var(--default-transition-params);
		padding: 0px 12px;
		&:hover {
			color: #a2adb9;
		}
	}

	&__secondary-menu-link {
		font-size: 16px;
		line-height: 21px;
		color: var(--color-white);
		text-decoration: none;
		margin-right: 16px;
		font-weight: 500;
		padding: 0 16px;
		&:hover {
			color: #a2adb9;
		}
	}

	&__dropdown-menu-container {
		display: flex;
		align-items: center;
		height: 100%;

		.site-header__primary-menu-link.ai {
			background: #dc150b;
			padding-left: 20px;
			margin-right: 12px;
			&::after {
				content: "";
				content: "";
				position: absolute;
				left: 10px;
				top: 8px;
				width: 4px;
				height: 4px;
				border-radius: 50%;
				display: block;
				background: #fff;
				animation: pulse 1.8s ease-in-out infinite;
			}
		}

		.site-header__primary-menu-link,
		.site-header__cta-button {
			position: relative;

			// NOTE: this pseudo-element will help the dropdown menu to stay open
			// during diagonal mouse movement since it creates a temporary buffer
			// area for the hover state during hover
			&::before {
				content: "";
				position: absolute;
				bottom: -90px;
				left: 50%;
				width: 120px;
				height: 120px;
				transform: translateX(-50%) rotate(45deg);
				pointer-events: none;
			}
		}

		&:not(.site-header__dropdown-menu-container--click-activate):hover,
		&.active {
			.site-header__dropdown-icon {
				color: var(--color-blue);
			}

			.site-header__primary-menu-link {
				color: #a2adb9;
			}

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

			.site-header__primary-menu-link::before,
			.site-header__cta-button::before {
				pointer-events: all;
			}
		}

		&-relative {
			position: relative;
		}

		.menu-dropdown {
			position: absolute;
			top: 4.2rem;
			left: 0;
			padding: 3rem 3rem 5rem;
			transition: opacity var(--default-transition-params);

			opacity: 0;
			pointer-events: none;
		}
		.menu-dropdown-columns,
		.menu-dropdown-ai {
			padding: 0;
			left: 50%;
			border: 1px solid #424d57;
			transform: translatex(-50%);
			box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
		}

		&:first-child {
			.menu-dropdown-columns {
				left: 0;
				transform: translatex(-24%);
			}
		}

		&:nth-child(2) {
			.menu-dropdown-columns {
				transform: translatex(-34%);
			}
		}
	}

	&__mobile-menu-button {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;

		// Normalize (<button>)
		font: inherit;
		color: inherit;
		text-transform: none;
		border: 0;
		margin: 0 0 0 1.5rem;
		padding: 0;
		overflow: visible;
		min-width: 0;

		@include media-min($large) {
			display: none;
		}
	}

	&__mobile-menu-button-box {
		width: $hamburger-layer-width;
		height: 16px;
		display: inline-block;
		position: relative;
		margin-right: 4px;
	}

	&__mobile-menu-button-inner {
		display: block;
		top: 50%;
		margin-top: math.div($hamburger-layer-height, -2);

		transition-duration: 0.075s;
		transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

		&,
		&::before,
		&::after {
			width: $hamburger-layer-width;
			height: $hamburger-layer-height;
			background-color: #fff;
			border-radius: 2.5px;
			position: absolute;
			transition-property: transform;
			transition-duration: 0.15s;
			transition-timing-function: ease;
		}

		&::before,
		&::after {
			content: "";
			display: block;
		}

		&::before {
			top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
			transition: top 0.075s 0.12s ease, opacity 0.075s ease;
		}

		&::after {
			bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
			transition: bottom 0.075s 0.12s ease,
				transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
		}

		html.mobile-menu-default-active &,
		html.mobile-menu-cta-active & {
			transform: rotate(45deg);
			transition-delay: 0.12s;
			transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

			&::before {
				top: 0;
				opacity: 0;
				transition: top 0.075s ease, opacity 0.075s 0.12s ease;
			}

			&::after {
				bottom: 0;
				transform: rotate(-90deg);
				transition: bottom 0.075s ease,
					transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
			}
		}
	}
}