@import url(@themeurl + "/css/font-source-sans.css");
@import "define.less";

.stickynav-mobile {
	display: block;
}

@keyframes slideInFromTop {
	from {
		transform: translateY(-100%);
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@media screen and (max-width: 1100px) {
	.editor-styles-wrapper {
		main {
			blockquote.wp-block-quote {
				font-size: 1.5rem;
				line-height: 120%;
				padding: 1rem;
				margin: 0;

				p {
					text-align: center;
					width: 100%;
					padding-right: 2rem;

					sub,
					i {
						text-align: center;
					}
				}

				&::before {
					left: 0;
					position: relative;
				}

				&::after {
					right: 0.5rem;
					padding-top: 2rem;
					padding-right: 0;
					position: relative;
				}

			}
		}
	}
}

@media screen and (max-width: 1100px) {

	max-width: none !important;

	.editor-styles-wrapper {

		h1,
		h2,
		h3,
		h4 {
			hyphens: auto;
			overflow-wrap: break-word;

		}

		ul {
			padding-left: 1vw;
			list-style: inside;
		}

		.wp-block-list {
			padding-left: 6vw;
		}

		.wp-block-site-title {
			margin-top: 10px;
			margin-bottom: 10px;
		}

		.entry-content {


			.wp-block-cover {
				min-height: auto;

				.wp-block-cover__background {
					display: none !important;
				}

				height: auto;
				padding: 0;

				img {
					max-height: 96vw;
					position: static;
				}

			}

		}
		.is-layout-grid{
			display: block !important;
			&>div{
				margin: 1em 0;
				figure{
					display: none;
				}
			}
		}
		main {
			.wp-block-post-featured-image {
				height: 15em;
			}

			.wp-block-cover .wp-block-cover__inner-container {
				font-size: unset;
			}
			.ariva-history{
				display: none;
			}
			blockquote.wp-block-quote {
				font-size: 1.5rem;
				line-height: 120%;

				p {
					width: 100%;
					text-align: center;
					hyphens: none;

					sub,
					i {
						text-align: center;
						padding: 0;
					}
				}

				&::before {
					left: 0.5rem;
				}

				&::after {
					right: 0;
				}
			}

			figure {
				&.wp-block-image {
					clear: both;
					width: 100%;
					text-align: center;
				}

				.size-full {
					img {
						width: 100%;
						height: auto;
					}
				}
			}

			.multi-col-text {
				columns: 1;
			}
		}

		.wp-block-site-title {
			display: block;
		}

		.header-navbar {
			margin: 0 !important;
			flex-basis: 55% !important;
			flex-grow: 1 !important;
		}

		nav {
			height: 64px !important;

			&.is-responsive {
				position: relative;

				.wp-block-navigation__responsive-container {
					display: none !important;

					&.has-modal-open {
						animation: slideInFromTop 0.5s ease-out;
						transform: translateY(0);
						opacity: 1;
						display: block !important;
						height: fit-content !important;
						z-index: 100 !important;
						background-image: url('/wp-content/themes/ariva/assets/ariva_ag_logo.png');
						background-repeat: no-repeat;
						background-size: 177px 54px;
						background-position: 10px 20px;


						.wp-block-navigation {
							width: 50%;
							margin-top: 50px;
							margin-bottom: 50px;
							margin-left: 1rem;
							text-align: left;
						}
					}
				}

				button {
					display: block;
					position: absolute;
					right: 3rem;
					top: 0.5rem;
					width: 40px;
					height: 40px;
					background-image: url('/wp-content/themes/ariva/css/img/hamburger.svg');
					background-size: 80% 80%;
					background-position: center;
					background-repeat: no-repeat;

					&.wp-block-navigation__responsive-container-close {
						position: absolute;
						background-image: url('/wp-content/themes/ariva/css/img/close.svg');
						width: 40px;
						height: 40px;
						background-position: center;
						background-repeat: no-repeat;
						top: 1.5rem;
						right: 3rem;
					}

					svg {
						display: none;
					}

				}

				li {
					white-space: nowrap;
				}
			}

			&.nav-main-container {

				margin: 0;
			}
		}

		nav.nav-main-container.sticky .wp-block-navigation .wp-block-navigation-item {

			max-width: none !important;
			&:first-child {
				width: 100% !important;
				height: 100% !important;
			}
		}

		.stickynav {
			display: block;
		}

		.stickynav-mobile {
			display: block;
			position: fixed;
			padding: 0;
			width: 100%;
			left: 0;
			right: auto;
			bottom: 0;
			top: unset;
			height: fit-content;
			border-radius: 0;
			box-shadow: none;
			border-right: 0.1rem solid transparent;
			background-color: @cBlue;
			z-index: 99;

			ul {
				height: fit-content;
				width: 100%;
				margin: 0;
				display: flex;
				margin-top: 0.5em;
				padding-left: 0;

				li {
					float: none;
					display: inline-block;
					vertical-align: middle;
					flex-grow: 1;
					text-align: center;

					a {
						float: none;
						display: inline-block;
						width: 50px;
						height: 50px;
					}


				}

				&.wpm-language-switcher {
					margin-top: 0;

					li {

						&.active {
							display: none;
						}

						a {

							span {
								display: none;
							}

							&:last-child {
								margin-bottom: 0;
							}


						}

						&.wpm-item-language-en,
						&.wpm-item-language-de {
							a {
								background-repeat: no-repeat;
								background-position: top right;

							}
						}

						&.wpm-item-language-en {
							a {
								background-image: url("/wp-content/themes/ariva/css/img/flagEN.svg");


							}
						}

						&.wpm-item-language-de {
							a {
								background-image: url('/wp-content/themes/ariva/css/img/flagDE.svg');

							}
						}
					}
				}
			}

		}

		.wp-block-navigation.items-justified-right {
			--navigation-layout-justification-setting: flex-start;
			--navigation-layout-justify: flex-start;
		}

		.wp-block-navigation__responsive-container {
			bottom: 5px;
		}

		footer {
			padding-top: 2rem;
		}
	}
}

@media (max-width: 967px) {

	footer {
		padding-bottom: 0 !important;
	}

	.footer-mobile {
		display: block !important;
	}

	.footer-desktop {
		display: none !important;
	}

	.editor-styles-wrapper {

		footer {
			.footerData {

				font-size: 18px !important;
				line-height: 35px !important;
				width: 80% !important;
				white-space: nowrap !important;
				display: block;
				margin: 0;
				margin-left: 0 !important;
				padding-left: 1rem !important;

				div {
					width: 100% !important;
					margin: 0.1rem auto;

					&.logo {
						text-align: center;

						p {
							text-align: left;
							margin: 0 auto;
							padding-top: 0;
						}

						img {
							max-width: none;
							width: 50%;
							margin-bottom: 1em;
						}
					}

					&.links {
						text-align: left;
					}
				}

				.link-tree {
					display: flex;
					flex-direction: row;
					justify-content: left;
				}

				.made-in-germany {

					p {

						img {
							width: 150px !important;
							top: 0%;
							left: 50%;
							right: 40px;
						}
					}
				}
			}
		}
	}
}