/** @format */

#footer {
	margin-top: var(--universal-gap);
	position: relative;
	z-index: 1;

	&::before {
		content: '';
		height: 1px;
		display: block;
		position: relative;
		z-index: 2;
		background-color: var(--color-neutral-grey);
		box-shadow: 0px 100vmax 0px 100vmax var(--color-neutral-grey);
	}

	& .footer__main {
		position: relative;
		z-index: 3;
		background-color: var(--color-roedl-light-matcha);
		box-shadow: 0px 100vmax 0px 100vmax var(--color-roedl-light-matcha);
	}

	& .footer__conclusion {
		position: relative;
		z-index: 4;
		color: var(--color-roedl-poison-green);
		background-color: var(--color-roedl-hunter-green);
		box-shadow: 0px 100vmax 0px 100vmax var(--color-roedl-hunter-green);
	}

	& :is(ul, li) {
		padding: 0px;
		display: block;
	}

	& .footer__main {
		padding: var(--universal-gap) 0px;

		& :is(.nav--footer, .menu),
		& :is(.menu > .menu-item, .roedl_socialmedia) > :last-child {
			display: flex;
			flex-flow: row wrap;
			place-content: flex-start;
			align-items: flex-start;
		}

		& :is(.menu > .menu-item, .roedl_socialmedia) > :last-child {
			margin-top: calc(var(--universal-gap) / 4);
			border-top: 1px solid var(--color-neutral-grey);
			padding-top: calc(var(--universal-gap) / 2);
		}

		& :is(.menu > .menu-item, .roedl_socialmedia) > :first-child {
			font-size: var(--fs-small);
			display: block;
		}

		& .nav--footer > :not(.roedl_socialmedia) {
			flex-grow: 1;
		}

		& :is(.nav--footer, .menu) {
			gap: calc(var(--universal-gap) * 1.5) calc(var(--universal-gap) * 4);
		}

		& .menu > .menu-item > :last-child {
			gap: 0.4lh 1.7rem;
		}
	}

	& .footer__conclusion {
		& .wrapper {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			align-content: center;
			align-items: flex-start;
			gap: calc(var(--universal-gap) * 1.5) calc(var(--universal-gap) * 4);
			padding-top: calc(var(--universal-gap) / 2);
			padding-bottom: calc(var(--universal-gap) / 2);
		}

		& .roedl_claim {
			font: var(--font-extended);
			font-size: var(--fs-navigation);
		}
	}

	@media (max-width: 850px) {
		& .footer__main {
			& .menu > .menu-item {
				text-align: center;

				& > :last-child {
					flex-flow: column nowrap;
					align-items: stretch;
				}
			}

			& .roedl_socialmedia {
				text-align: center;

				& > :last-child {
					justify-content: center !important;
				}
			}

			& :is(.nav--footer, .menu) {
				flex-flow: column nowrap;
				align-items: stretch;
			}

			& .wrapper {
				display: grid;
				grid: auto / 1fr;
				justify-items: center;
			}
		}

		& {
			margin-bottom: var(--header-bottombar-height);
		}
	}
}