@import url("./custom.reset.css");

header {
	position: fixed;
	width: 100%;
	background-color: var(--white);
	z-index: 2;
	box-shadow: rgba(100, 100, 111, 0.1) 0px 10px 10px -10px;

	& nav {
		padding-block: 1.2rem;
	}
	.v-logo {
		width: 7rem;
	}
	& :is(.v-middle-links, .v-right-links) {
		& a {
			font-size: 0.82rem;
			font-weight: 500;

			&.v-quote {
				background-color: var(--white);
				color: var(--primary-clr);
			}
			&.v-contact {
				background-color: var(--primary-clr);
				color: var(--white);
			}
		}
	}
	& .v-middle-links a {
		color: var(--text-dark);
		text-transform: capitalize;
		&:hover {
			color: var(--primary-clr);
		}
		&.active {
			color: var(--primary-clr);
			font-weight: 600;
		}
		&.active::before {
			--size: 6px;
			opacity: 0.8;
			border-radius: 50%;
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			translate: -50% 0%;
			width: var(--size);
			height: var(--size);
			background-color: var(--primary-clr);
		}
		&:not(.active)::before {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1.5px;
			background-color: var(--primary-clr);
			transform: scaleX(0);
			transform-origin: bottom right;
			transition-property: background-color, transform;
		}

		&:hover::before {
			transform-origin: right;
			transform: scaleX(1);
			transform-origin: bottom left;
		}
	}
	& .v-right-links {
		gap: 0.8rem;
		& a {
			padding: 0.6rem 1rem;
			border: 1.5px solid var(--primary-clr);
			border-radius: 4px;
		}
	}
	& .v-mobile-menu {
		background-color: transparent;
		border: none;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: var(--text-dark);
		padding: 8px;
		border-radius: 50%;

		& svg {
			--size: 1.4rem;
			width: var(--size);
			height: var(--size);
		}
	}
	&.variant {
		box-shadow: none;
		background-color: var(--primary-clr);
		border-bottom: 1px solid var(--primary-clr);
		& :is(.v-middle-links, .v-right-links) {
			& a {
				&.v-quote {
					background-color: var(--white);
					color: var(--primary-clr);
				}
				&.v-contact {
					background-color: var(--primary-clr);
					color: var(--white);
				}
			}
		}

		&.active::before {
			background-color: var(--white);
		}

		& .v-middle-links a {
			color: var(--white);

			&::before {
				background-color: var(--white);
			}
		}
		& .v-right-links a {
			border-color: var(--white);
		}
		& .v-mobile-menu {
			color: var(--white);

			&:hover {
				color: var(--primary-clr);
				background-color: var(--white);
			}
		}
	}

	&.variant-transparent {
		background-color: transparent;
		box-shadow: none;

		.v-middle-links a {
			color: var(--white) !important;
			&::before {
				background-color: var(--white);
			}
			&.active::before {
				background-color: var(--white) !important;
			}
		}
		.v-mobile-menu {
			color: var(--white);
		}
		.v-right-links {
			.v-quote {
				background-color: var(--white);
				color: var(--primary-clr);
			}
			.v-contact {
				background-color: transparent;
				border: 1.5px solid var(--white);
			}
		}
	}
}
.offcanvas {
	.offcanvas-header {
		.v-logo {
			width: 6.5rem;
		}
	}
	.offcanvas-body {
		.v-sidebar-container {
			display: flex;
			margin-top: 2rem;
			flex-direction: column;
			row-gap: 5px;

			.v-href {
				color: var(--primary-clr);
				padding: 0.7rem 1rem;
				display: flex;
				align-items: center;
				gap: 1rem;
				font-size: 0.83rem;
				border-radius: 5px;
				& svg {
					--size: 1.3rem;
					height: var(--size);
					width: var(--size);
				}
				.v-text {
					font-weight: 500;
				}
				&.active {
					color: var(--white);
					background-color: var(--primary-clr);
				}
				&:not(.active):hover {
					color: var(--primary-clr);
					background-color: var(--primary-clr-variant-2);
				}
			}
		}
	}
}