$font: var( --jeo-font );
$font-stories: var( --jeo-font-stories );

.single-storymap {
	margin: 0;
	padding: 0;

	.embed-footer {
		position: fixed;
	}

	strong {
		font-weight: bold;
	}

	a:hover {
		opacity: 0.7;
	}

	&::-webkit-scrollbar {
		display: none;
	}

	#content {
		margin: 0;
	}

	footer {
		display: none;
	}

	#footer {
		width: 100%;
		min-height: 5vh;
		padding-top: 2vh;
		padding-bottom: 2vh;
		text-align: center;
		line-height: 25px;
		font-size: 13px;
	}
}

.story-map {
	margin: 0;
	min-height: 100vh;
	padding: 0;
	position: relative;

	&.story-map--navigating {
		min-height: 100vh;

		.navigate-map {
			background: #ffffff;
			height: 100vh;
			inset-inline: 50%;
			margin-inline: -50vw;
			overflow: hidden;
			position: relative;
			width: 100vw;

			.jeomap {
				height: 100%;
				inset: 0;
				max-width: none;
				position: absolute;
				width: 100%;
			}
		}
	}

	&.story-map--intro-active {
		min-height: 100vh;

		.not-navigating-map {
			min-height: 100vh;
		}
	}

	@media (max-width: 829px) {
		.storymap-page-title {
			margin-top: 70px;
		}

		:is(.mapboxgl-ctrl-top-left .mapboxgl-ctrl:first-of-type, .maplibregl-ctrl-top-left .maplibregl-ctrl:first-of-type) {
			margin-top: 45px;

			@media (min-width: 830px) {
				margin-top: 30px;
			}
		}
	}


	.jeomap {
		position: absolute;
	}

	.the-story {
		background-color: rgba(128, 128, 128, 0.1);
		inset-inline: 50%;
		margin: 0 -50vw;
		position: relative;
		width: 100vw;

		&.loaded {
			background-color: transparent;
			margin-top: -100vh;
		}
	}

	.not-navigating-map {
		position: relative;

		.mapboxgl-map, .maplibregl-map {
			border: none;
			height: 100vh;
			inset-inline-start: 0;
			inset-inline-end: 50%;
			margin-inline: calc(-50vw + 50%);
			max-width: unset;
			position: sticky;
			top: 0 !important;
			transition: filter 0.7s ease;
			width: 100vw;
			z-index: -5;
		}

		.story-map-element {
			:is(.mapboxgl-ctrl-attrib, .maplibregl-ctrl-attrib) {
				background: #ffffff80;
				border-radius: 0;
				box-shadow: none;
				max-width: none;
				padding: 0;
			}

			:is(.mapboxgl-ctrl-bottom-right, .maplibregl-ctrl-bottom-right) {
				inset-inline-end: 0;
				bottom: 0;
				padding: 0;
				display: flex;
				align-items: flex-end;
			}

			.mapboxgl-ctrl-bottom-right {
				max-width: calc(100% - 120px);
			}

			:is(.mapboxgl-ctrl-bottom-right, .maplibregl-ctrl-bottom-right) > :is(.mapboxgl-ctrl, .maplibregl-ctrl) {
				margin: 0;
			}

			.mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib {
				max-width: 100%;
			}

			.mapboxgl-control-container .mapboxgl-ctrl-attrib-inner,
			.maplibregl-control-container .maplibregl-ctrl-attrib-inner {
				font-size: 11px;
				line-height: 1.35;
				padding: 4px 8px;
				white-space: normal;
				color: rgba( 0, 0, 0, 0.78 );

				a[href] {
					color: rgba( 0, 0, 0, 0.78 );
					text-underline-offset: 2px;
				}
			}

			.mapboxgl-ctrl-attrib.mapboxgl-compact-show {

				.mapboxgl-ctrl-attrib-inner {
					visibility: visible;
				}
			}

			.maplibregl-ctrl-attrib.maplibregl-compact-show {

				.maplibregl-ctrl-attrib-inner {
					visibility: visible;
					display: block;
				}
			}

			.mapboxgl-ctrl-attrib.mapboxgl-compact,
			.maplibregl-ctrl-attrib.maplibregl-compact {
				min-height: 24px;
			}

			.mapboxgl-ctrl-attrib.mapboxgl-compact {
				.mapboxgl-ctrl-attrib-button {
					visibility: visible;
				}
			}

			.maplibregl-ctrl-attrib.maplibregl-compact {
				.maplibregl-ctrl-attrib-button {
					visibility: visible;
				}
			}
		}
	}

	.storymap-features {
		padding-top: 10vh;
		padding-bottom: 10vh;
		z-index: 100;

		.title {
			margin-top: 0;
			font-family: $font-stories;
		}

		p.slide-description {
			letter-spacing: 0;
			line-height: 32px;
			font-family: $font-stories;

			&:last-of-type {
				margin-bottom: 0px;
			}

			a {
				color: var( --jeo-primary-color );

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

				&:visited {
					color: var( --jeo-primary-color );
				}
			}
		}
	}

	.storymap-features--with-navigation-step {
		padding-bottom: 0;
	}

	.centered {
		width: 50vw;
		margin: 0 auto;
	}

	.lefty {
		width: 33vw;
		margin-inline-start: 5vw;
	}

	.righty {
		width: 33vw;
		margin-inline-start: 62vw;
	}

	.light {
		color: #0a0a0a;
		background-color: #ffffff;
		border-radius: 10px;
	}

	.dark {
		color: #fafafa;
		background-color: #444;
	}

	.light, .dark {

		p {
			color: inherit !important;
		}
	}

	.storymap-header {
		width: 700px;
		padding: 2vh;
		text-align: center;
		background: none;
		color: white;
		margin: auto auto 0px auto;

		.post-info {
			filter: drop-shadow( 0px 0px 4px black );
			position: relative;
			display: flex;
			flex-direction: row;

			& > * {
				font-size: 14px;
				line-height: 33px;
				opacity: 0.5;
				color: #ffffff;
				letter-spacing: 0;
				line-height: 19px;
				font-family: $font;
			}

			.author {
				margin-inline-end: auto;
			}

			.date {
				margin-inline-start: auto;
			}
		}

		.storymap-title {
			position: relative;
			font-weight: bold;
			font-family: $font-stories;
		}

		.storymap-description {
			filter: drop-shadow( 0px 0px 4px black );
			position: relative;
			line-height: 33px;
			font-family: $font-stories;

			a {
				color: var( --jeo-primary-color );

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

				&:visited {
					color: var( --jeo-primary-color );
				}
			}
		}
	}

	.step {
		padding-bottom: 50vh;
		opacity: 0.25;

		& > div {
			padding: 35px;
			line-height: 25px;
			opacity: 0.87;
			border-radius: 10px;
			background-color: #ffffff;
			box-shadow: 0 3px 6px 0 rgba( 0, 0, 0, 0.3 );
		}

		img {
			width: 100%;
			height: auto;
		}

		h2 {
			font-size: 36px;
		}

		h3 {
			font-size: 27px;
		}

		h4 {
			font-size: 18px;
		}

		p {
			color: inherit;
		}

		span[style*="background-color"] {
			border-radius: 3px;
			padding: 0 3px;
		}
	}

	.step.active {
		opacity: 0.99;
	}

	.step.storymap-navigation-step {
		opacity: 0.99;
	}

	.navigate-button-display {
		background-color: var( --jeo-primary-color );
		color: white;
		border-radius: 10px;
		width: 237px;
		height: 62px;
		font-weight: bold;
		font-size: 14px;
		position: absolute;
		inset-inline: 0;
		margin-inline: auto;
		box-shadow: 0 2px 6px 0 rgba( 0, 0, 0, 0.3 );
		font-family: $font;
	}

	.storymap-navigation-step {
		margin-bottom: 0;
		min-height: 62px;
		padding-bottom: calc( 50vh - 31px );
	}

	.storymap-start-button {
		background-color: var( --jeo-primary-color );
		color: white;
		border-radius: 10px;
		width: 237px;
		height: 62px;
		font-weight: bold;
		font-size: 14px;
		position: absolute;
		inset-inline: 0;
		margin-inline: auto;
		position: relative;
		margin-top: 20px;
		box-shadow: 0 2px 6px 0 rgba( 0, 0, 0, 0.3 );
		font-family: $font;

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

		&:active {
			background-color: var( --jeo-primary-color );
		}

		&:focus {
			background-color: var( --jeo-primary-color );
		}
	}

	.storymap-template-default {
		.navigate-button-display {
			background-color: var( --jeo-primary-color );
		}
	}

	.storymap-page-title {
		filter: drop-shadow( 0px 0px 4px black );
		font-weight: bold;
		position: relative;
		font-family: $font-stories;
	}

	.skip-intro-link {
		filter: drop-shadow( 0px 0px 4px black );
		position: relative;
		margin-top: 5px;
		text-decoration: underline;
		opacity: 0.5;
		color: #ffffff;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 0;
		line-height: 19px;
		font-family: $font;

		&:hover {
			cursor: pointer;
			text-decoration: unset;
		}
	}

	.return-to-slides-container {
		filter: drop-shadow( 0px 0px 4px black );
		position: absolute;
		inset-inline-start: 50%;
		transform: translateX( -50% );
		bottom: 28px;
		z-index: 5;

		p {
			text-decoration: underline;
			color: white;
			text-align: center;
			font-weight: bold;
			font-size: 14px;
			font-family: $font;

			&:hover {
				text-decoration: unset;
				cursor: pointer;
			}
		}

		.icon {
			display: flex;
			border-radius: 50%;
			width: 40px;
			height: 40px;
			border: 1px solid white;
			margin: auto;
			background-color: rgba( 255, 255, 255, 0.3 );

			svg {
				display: block;
				margin: auto;
				width: 11px;
			}

			&:hover {
				opacity: 0.7;
				cursor: pointer;
			}
		}
	}

	.skip-intro-icon {
		filter: drop-shadow( 0px 0px 4px black );

		svg {
			display: block;
			margin: auto;
			width: 11px;
		}

		&:hover {
			opacity: 0.7;
			cursor: pointer;
		}
	}

	.layers-selection {
		position: absolute;
		top: 40px;
		inset-inline-end: 20px;
		width: 220px;

		.layers-wrapper {
			.layer {
				display: flex;
				background-color: white;
				border-bottom: 1px solid #b0b2b4;
				padding: 7px;
				font-size: 13px;
				color: #404040;
				align-items: center;

				input {
					margin-inline-end: 10px;
				}
			}
		}
	}

	.layers-selection-icon {
		width: 11px;
	}

	.jeomap div.legend-container {
		inset-inline-end: 20px;
	}

	.navigate-map {
		:is(.mapboxgl-map, .maplibregl-map) {
			transition: filter 0.7s ease;
			width: 100% !important;
			height: 100% !important;
			max-width: none;

			:is(.mapboxgl-canvas-container, .maplibregl-canvas-container) {
				canvas {
					width: 100% !important;
					height: 100% !important;
				}
			}

			@media ( max-width: 800px ) {
				height: 100% !important;
			}
		}
	}

	@media ( max-width: 650px ) {
		.storymap-header {
			width: unset;
		}
	}

	@media ( max-width: 750px ) {
		.storymap-features {
			width: 90vw;
			margin: 0 auto;
		}

		.return-to-slides-container {
			inset-inline-start: 85px;
			bottom: 30px;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon-return {
				margin-inline-end: 10px;
			}
		}

		.jeomap div.legend-container {
			inset-inline-end: 5px;
			bottom: 75px;
		}

		.layers-selection {
			inset-inline-end: 5px;
		}
	}
}

.embed-storymap {
	border: none;
	inset-inline: 50%;
	margin: 40px -50vw;
	max-width: unset !important;
	min-height: 100vh;
	overflow: hidden;
	position: relative;
	width: 100vw;
}
