@import "define.less";

// Main Nav
nav.nav-main-container {
	box-shadow: 0px 3px 9px #00000076;
	background-color: #FFFFFF;
	color: @cDarkBlue;
    height: 96px;

	&.sticky {
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 999;

		.wp-block-navigation .wp-block-navigation-item {

			&:first-child {
				display: inline-block;
				width: 177.46px !important;
				height: 53.95px !important;
				background-image: url('/wp-content/themes/ariva/assets/ariva_ag_logo.png');
				background-size: 80% auto;
				background-repeat: no-repeat;
                top: 28px;
				margin-right: 600px !important;

				.wp-block-navigation-item__content {
					border: none !important;
				}
			}
		}

		@media screen and (min-width: 1255px) {
			&.sticky {
				.wp-block-navigation .wp-block-navigation-item {
					.wp-block-navigation-item__label {
						font-size: 100% !important;
					}

					&:first-child {
						display: inline-block;
						width: 8em;
						height: auto;
						background-image: url('/wp-content/themes/ariva/assets/ariva_ag_logo.png');
						background-size: 80% auto;
						background-repeat: no-repeat;
						background-position: center;

						.wp-block-navigation-item__content {
							border: none !important;
						}
					}

				}

			}
		}
	}

    //NUR die navigation items warum auch immer das doppelt gebaut wird
	.wp-block-navigation {
		.docwidth;
		justify-content: space-between;
		flex-wrap: nowrap;


		.wp-block-navigation-item {
			transition: width 0.25s;
			flex-grow: 2;
            padding-top: 63px !important;

			@media screen and (min-width: 1255px) {
				&:first-child {
					display: none;
                    padding: 1em !important;
					width: 0px;
					height: 0px;
					overflow: hidden;
					color: transparent;
					font-size: 0.01em;
					align-self: stretch;
					flex-grow: 0;
					white-space: nowrap;

					.wp-block-navigation-item__content {
						display: inline-block;
						width: 100%;
						height: 100%;
						//						max-height: 75px; //fix damit es beim aufpopen nicht zu groß wird

						.wp-block-navigation-item__label {
							display: none;
						}
					}
				}

			}

			&:hover .wp-block-navigation-item__content,
			&.current-menu-item .wp-block-navigation-item__content {
				border-bottom: 4px solid @cOrange;
			}

            &:active .wp-block-navigation-item__content,
			&.current-menu-item .wp-block-navigation-item__content {
				border-bottom: 4px solid @cOrange;
                color: @cOrange !important;
			}

			.wp-block-navigation-item__content {
                padding-bottom: 4px !important;
				width: auto;
				margin: auto;
				border-bottom: 4px solid transparent;

				.wp-block-navigation-item__label {
					transition: font-size 0.25s;
					text-transform: uppercase;
                    font-weight: 400;
					font-size: 24px;
					line-height: 1.4em;

					strong {
						font-size: 140%;
						font-weight: 500;
						display: block;
					}
				}
			}
		}
	}
}