header {
	ul.wp-block-navigation__container {
		li.wp-block-navigation-item {
			[aria-current='page'] {
				span.wp-block-navigation-item__label {
					color: inherit !important;
					font-weight: 700 !important;
				}
			}

			a.wp-block-navigation-item__content {
				position: relative;
				color: inherit;
				font-weight: normal;

				/* Base ::after styles */
				&::after {
					content: '';
					position: absolute;
					left: 0;
					bottom: -5px;
					width: 0%;
					height: 3px;
					background-color: currentColor;
					transition: width 0.3s ease;
				}

				&:hover {
					color: inherit;

					&::after {
						width: 100%;
					}
				}
			}

			/* Active menu item */
			&.current-menu-item {
				a.wp-block-navigation-item__content {
					color: inherit;

					&::after {
						width: 100%;
					}
				}
			}

			&.has-child {
				a.wp-block-navigation-item__content {
					&::after {
						display: none; /* Prevent line animation on items with submenu */
					}

					&:hover {
						font-weight: 400;
						color: inherit;
					}
				}

				/* Submenu */
				ul.wp-block-navigation__submenu-container {
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
					background-color: var(--wp--preset--color--theme-01);
					border-bottom-left-radius: var(
						--wp--custom--border--rounded-small
					);
					border-bottom-right-radius: var(
						--wp--custom--border--rounded-small
					);
					min-width: max-content !important;
					padding-bottom: 10px;

					ul.wp-block-navigation__submenu-container {
						min-width: 220px;
					}

					@media only screen and (max-width: 767px) {
						box-shadow: none;
						background-color: transparent;
					}

					li.wp-block-navigation-item {
						/* Mobile here */
						@media only screen and (max-width: 767px) {
							padding-bottom: 15px;
						}

						[aria-current='page'] {
							span.wp-block-navigation-item__label {
								color: inherit !important;
								font-weight: 700 !important;
							}
						}
						a.wp-block-navigation-item__content {
							span.wp-block-navigation-item__label {
								position: relative;
								color: inherit;
								font-weight: 700;

								/* Base ::after styles */
								&::after {
									content: '';
									position: absolute;
									left: 0;
									bottom: -5px;
									width: 0%;
									height: 3px;
									background-color: currentColor;
									transition: width 0.3s ease;
								}

								&:hover {
									color: inherit;

									&::after {
										width: 100%;
									}
								}
							}
						}

						&:last-child {
							border-bottom-left-radius: var(
								--wp--custom--border--rounded-small
							);
							border-bottom-right-radius: var(
								--wp--custom--border--rounded-small
							);
						}
					}
				}
			}
		}
	}

	.wp-block-navigation__responsive-container-content {
		padding: var(--wp--custom--spacing--24) 0;
	}
}