#header {
	z-index: 99;
	background-color: var(--color-white);
	transition: box-shadow 0.3s, background-color 0.3s, opacity 0.3s;

	.container {
		max-width: var(--header-container-max-width);

		@media (width < 1200px) {
			padding-inline: 0;
		}
	}

	.navbar {
		--bs-navbar-padding-y: 0;
	}

	.navbar-wrapper {
		@media (width < 1200px) {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-inline: 2rem;
		}
	}

	.navbar-brand {
		--bs-navbar-brand-margin-end: 0;
		--bs-navbar-brand-padding-y: 1rem;

		display: inline-flex;
		align-items: center;
		max-width: 9.750rem;
		img {
			filter: brightness(0);
		}
	}

	.navbar-toggler {
		--bs-navbar-toggler-padding-y: 0;
		--bs-navbar-toggler-padding-x: 0;
		--bs-navbar-toggler-icon-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="rgb(51 49 50)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16"/></svg>');

		border: none;
		outline: none;
		background-color: transparent;
		color: var(--color-mine-shaft);
		transition: all 0.3s;

		&[aria-expanded="true"] {
			--bs-navbar-toggler-icon-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="rgb(51 49 50)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-x-icon lucide-x" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>');
		}

		&:hover,
		&:focus {
			box-shadow: none;
		}
	}

	.navbar-collapse {
		@media (width < 1200px) {
			background-color: var(--color-white);
		}
	}

	.navbar-nav {
		padding: 1rem 1.5rem;

		.menu-item {
			position: relative;

			a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 0.5rem;
				font-family: var(--font-primary);
				font-size: 0.875rem;
				font-weight: 600;
				letter-spacing: 0.12em;
				padding: 1rem 0;
				color: var(--color-mine-shaft);
				text-transform: uppercase;
				transition: all 0.15s;

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

	.dropdown-toggle-icon {
		display: grid;
		place-items: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 2rem;
		height: 3rem;
		font-size: 0.875rem;
		cursor: pointer;
		transition: all 0.3s;

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

			> .dropdown-menu {
				border: none;
				padding: 0;
				.menu-item {
					a {
						font-size: 0.875rem;
						padding: 0.875rem 1.25rem;
						&:hover {
							color: var(--color-primary);
							background-color: var(--color-liliana);
						}
					}
				}
			}

      &.menu-item-has-children {
        > .nav-link {
          &:after {
			border: 0;
			margin: 0;
			padding: 0;
			
            @media (width >= 1200px) {
              display: inline-block;
              content: '\f078';
              font-family: 'Font Awesome 7 Free';
              font-weight: 900;
              font-size: 0.625rem;
              transition: all 0.3s;
            }
          }
        }
        &:hover {
          > .nav-link {
            &:after {
              rotate: 180deg;
            }
          }
        }
      }

			@media (width >= 1200px) {
				a {
					font-size: 14px;
					padding: 0.5rem 0.7rem;
					color: oklch(from var(--color-mine-shaft) l c h / 0.7);
				}
				> .dropdown-menu {
					min-width: 14rem;
					border: 1px solid rgb(from var(--color-mine-shaft) r g b / 0.1);
					border-radius: 0;
					padding: 0;
					margin-top: 0;
					box-shadow: 0 0.5rem 1rem rgb(from var(--color-mine-shaft) r g b / 0.15);
					display: block !important;
					visibility: hidden;
					opacity: 0;
					pointer-events: none;
					transition: opacity 0.15s, visibility 0.15s;
					.menu-item {
						a {
							font-size: 0.625rem;
							padding: 0.75rem 1.25rem;
							color: rgb(from var(--color-mine-shaft) r g b / 0.7);
						}
					}
				}
				&:hover {
					a {
						.dropdown-toggle-icon {
							transform: rotate(180deg);
						}
					}
					> .dropdown-menu {
						visibility: visible;
						opacity: 1;
						pointer-events: auto;
					}
				}
			}
		}
		@media (width < 1200px) {
			> .menu-item:not(:last-child) {
				border-bottom: 1px solid rgb(from var(--color-mine-shaft) r g b / 0.1);
			}
		}
	}

	&.is-sticky {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		background-color: var(--color-white);
	}

	&.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	&.is-overlay {
		background-color: transparent;

		.navbar-brand {
			--bs-navbar-brand-padding-y: 1rem;
			max-width: 9.750rem;
			img {
				filter: brightness(0) invert(1);
			}
		}

		.navbar-toggler {
			--bs-navbar-toggler-icon-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="rgb(255 255 255)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16"/></svg>');

			&[aria-expanded="true"] {
				--bs-navbar-toggler-icon-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="rgb(255 255 255)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="lucide lucide-x-icon lucide-x" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></svg>');
			}
		}

		@media (width >= 1200px) {
			.navbar-nav {
				.menu-item {
					a,
					.nav-link {
						color: rgb(from var(--color-white) r g b / 0.8);
						font-size: 14px;
						font-weight: 600;
						letter-spacing: 0.2em;
						line-height: 1.2;
						&:hover {
							color: var(--color-white);
						}
					}
					> .dropdown-menu {
						.menu-item {
							a {
								color: rgb(from var(--color-mine-shaft) r g b / 0.7);
								&:hover {
									color: var(--color-primary);
									background-color: var(--color-liliana);
								}
							}
						}
					}
				}
			}
		}
	}

	&.is-scrolling {
		box-shadow: 0 0 0.25rem #00000033;
	}
}

/* Fix: .dropdown-item.active should not show Bootstrap blue */
.dropdown-item.active,
.dropdown-item.active:focus {
    background-color: transparent;
    color: inherit;
}