/**
 * theme.scss 2023-11-27 ts
 *
 * @copyright	2023 Thomas Schneider
 * @author		Thomas Schneider <thomas@inter-mundos.de>
 * @link        https://www.inter-mundos.de
 */

@import "../bootstrap/scss/bootstrap-utilities";
@import "../bootstrap/scss/bootstrap-reboot";

$main-color: #CD1C1C !default;
$contrast-color-light: lighten($main-color, 50%);
$main-text-color: #212121;
$desktop-page-width: 1160px;

@import "../bootstrap/scss/grid";
@import "../bootstrap/scss/card";
@import "../bootstrap/scss/buttons";
@import "../bootstrap/scss/nav";
@import "../bootstrap/scss/images";
@import "../bootstrap/scss/_type";

@import '../forkawesome/scss/fork-awesome.scss';
@import '_fonts';
@import '_events';
@import '_callouts';

:root {
	--bs-body-font-family: 'Quicksand', sans-serif;
	--bs-body-font-size: 20px;
	--bs-body-bg: #eee;
	--bs-body-color: #{$main-text-color};
}

body
{
	@include media-breakpoint-down(sm)
	{
		font-size: 17px;
	}
}

h1, h2, h3, h4
{
	font-weight: normal;
}

h1
{
	font-size: 2em;
	margin-bottom: 30px;

	@include media-breakpoint-down(sm)
	{
		font-size: 1.5em;
	}
}

h2
{
	font-size: 1.5em;
	margin: 40px 0 24px;

	@include media-breakpoint-down(sm)
	{
		font-size: 1.3em;
	}
}

h3
{
	margin: 35px 0 24px;
	font-size: 1.2em;

	@include media-breakpoint-down(sm)
	{
		font-size: 1.15em;
	}
}

h4
{
	font-size: 1.1em;
	padding-left: 5px;
	margin-bottom: 20px;
	text-decoration: underline;
	border-left: solid 3px $main-color;
}

a
{
	color: $main-color;
	text-decoration: none;

	&:hover:not(.btn)
	{
		text-decoration: underline;
	}
}

ul
{
	padding: 0 0 0 25px;

	li
	{
		padding: 4px 0;
	}
}

nav
{
	ul
	{
		padding: 0;

		li
		{
			padding: 0;
		}
	}
}

figcaption
{
	padding: 5px 3px;
	font-size: 0.8em;
	font-style: italic;
}

#wrapper
{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
}

.card
{
	--bs-card-bg: #fff;
}

.mobile_menu
{
	z-index: 2000;

	.inner
	{
		background-color: darken($main-color, 25%);

		ul
		{
			padding: 0;

			li
			{
				border-top: 1px solid $contrast-color-light;
				padding: 4px 25px;

				&.active,
				&.trail
				{
					background-color: $main-color;
				}

				&:last-child
				{
					border-bottom: 1px solid $contrast-color-light;
				}
			}
		}

		&, a
		{
			color: white;
		}

		.logo
		{
			text-align: center;
			margin: 15px 10px;

			img
			{
				max-width: 100%;
			}
		}

		.funding-notice
		{
			margin: 5px 25px;
			font-size: 0.8em;
		}
	}
}

.mobile_menu_overlay
{
	z-index: 1999;
}

#header
{
	flex-basis: 100%;
	background-color: $main-color;

	.inside
	{
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		max-width: $desktop-page-width;
		margin: 0 auto;

		#logo
		{
			a
			{
				img
				{
					padding: 15px 0 10px;
					height: 120px;
				}
			}

			@include media-breakpoint-down(sm)
			{
				max-width: 80%;
			}
		}

		nav
		{
			display: flex;
			align-items: stretch;

			&, a
			{
				font-weight: normal;
				text-decoration: none;
				color: white;
			}

			ul
			{
				display: flex;
				margin: 0;
				padding: 0;
				align-items: stretch;

				li
				{
					display: flex;
					align-items: center;

					&.active,
					&.trail
					{
						background-color: darken($main-color, 10%);

						strong.active
						{
							font-weight: normal;
						}
					}

					strong, a
					{
						margin: auto 20px;

						@media screen and (max-width: 1100px)
						{
							margin: auto 10px;
						}

						@media screen and (max-width: 1030px)
						{
							font-size: 0.9em;
						}
					}
				}
			}
		}

		@include media-breakpoint-down(lg)
		{
			flex-wrap: wrap;
			justify-content: center;

			#logo
			{
				text-align: center;
				flex-basis: 100%;
				padding-left: 0;

				a
				{
					img
					{
						padding-left: 0;
						max-width: 100%;
					}
				}
			}

			nav
			{
				display: none;
			}
		}
	}
}

#search_bar
{
	flex-basis: 100%;
	background-color: white;
	border-radius: 0 0 4px 4px;

	.mod_search
	{
		width: $desktop-page-width;

		.formbody
		{
			display: flex;
			justify-content: center;
			border: solid $main-text-color 1px;

			.widget
			{
				margin: 15px 0;

				&.widget-text
				{
					input.text
					{
						padding: 4px 4px 3px;
						margin: 3px;
						border: 0;
						flex-basis: auto;
						width: 140px;
					}
				}

				&.widget-submit
				{
					button
					{
						margin: 0;
						height: 100%;
						padding: 9px 15px 8px 14px;
					}
				}
			}
		}
	}
}

#container
{
	flex-basis: $desktop-page-width;
	margin: 50px 0 0;
	padding: 60px 80px 80px;
	background-color: white;
	display: flex;
	align-items: stretch;
	justify-content: space-between;

	@include media-breakpoint-down(lg)
	{
		margin: 0;
		padding-top: 30px;
	}

	@include media-breakpoint-down(sm)
	{
		margin: 0;
		padding: 30px;
	}

	aside
	{
		flex-basis: 300px;
		font-size: 0.9em;
		flex-shrink: 0;

		@media screen and (max-width: $desktop-page-width)
		{
			flex-basis: 100%;
			margin: 0 !important;
		}

		nav
		{
			margin: 40px 0 0 ;

			a
			{
				display: block;

				&:hover
				{
					text-decoration: none;
				}
			}

			ul
			{
				margin: 0;
				padding: 0;

				li
				{
					padding: 5px 0;

					&.active
					{
						strong.active
						{
							cursor: pointer;
							font-weight: normal;
						}
					}

					&:not(.active):not(.trail).submenu
					{
						> ul
						{
							display: none;
						}
					}
				}
			}

			> ul
			{
				> li
				{
					background-color: $contrast-color-light;
					margin: 5px 0;
					padding: 7px 15px;

					&:hover
					{
						background-color: darken($contrast-color-light, 10%);
					}

					&.active, &.trail
					{
						background-color: $main-color;
						color: white;

						li.active
						{
							border-left: solid 2px $contrast-color-light;
							padding: 0 0 0 3px;
							margin: 5px 0 5px -5px;
						}

						li:hover
						{
							a
							{
								color: $contrast-color-light;
							}
						}

						a
						{
							color: white;
						}
					}

					&.active.submenu, &.trail
					{
						padding-top: 10px;
					}

					&.submenu
					{
						> ul
						{
							border-top: 1px lighten($main-color, 30%) solid;
							margin: 10px 0 0;
							padding: 3px 0 0;
						}
					}
				}
			}
		}
	}

	#left
	{
		float: none;
		order: 1;
		margin: 0 80px 0 0;
	}

	#main
	{
		float: none;
		order: 2;

		p, ul
		{
			line-height: 1.5em;
		}

		div.content-text
		{
			p
			{
				text-align: justify;
				hyphens: auto;

				@include media-breakpoint-down(sm)
				{
					text-align: left;
					hyphens: none;
				}
			}
		}

		div.mod_newsarchive
		{
			display: flex;
			flex-wrap: wrap;
			gap: 40px;

			@include media-breakpoint-down(lg)
			{
				gap: initial;
			}

			> div
			{
				flex-basis: calc(100% / 2 - 40px);

				@include media-breakpoint-down(lg)
				{
					flex-basis: 100%;
				}

				margin-bottom: 30px;

				h2
				{
					font-size: 1em;
					font-weight: bold;
					hyphens: auto;

					a
					{
						color: $main-text-color;
					}
				}

				.info
				{
					font-size: 0.9em;
					padding: 3px 8px;
					border-bottom: $main-color 4px solid;
					text-align: right;
				}

				figure
				{
					&.float_left
					{
						margin-right: 30px;
						margin-top: 30px;
					}

					&.float_right
					{
						margin-left: 30px;
						margin-top: 70px;
					}
				}

				p.more
				{
					margin-top: 0;
				}
			}
		}

		div.mod_newsreader
		{
			.info
			{
				font-size: 0.9em;
				padding: 3px 8px;
				border-bottom: $main-color 6px solid;
				text-align: right;
			}
		}
	}

	#right
	{
		float: none;
		order: 3;
		margin: 0 0 0 80px;
	}
}

.mod_article
{
	a {
		@include media-breakpoint-down(md)
		{
			word-break: break-all;
		}
	}

	figure
	{
		img
		{
			@extend .img-fluid;
		}
	}

	.ce_accordion
	{
		margin: 8px 0;

		.toggler
		{
			background-color: $contrast-color-light;
			color: $main-color;
			cursor: pointer;
			font-size: 1.2em;
			padding: 7px 40px 8px 15px;
			position: relative;

			&:not(.active)::after
			{
				content: '\3009';
				font-weight: lighter;
				position: absolute;
				top: 3px;
				right: 10px;
			}

			&.active
			{
				&::after
				{
					content: '\FE40';
					font-weight: normal;
					position: absolute;
					top: 10px;
					right: 16px;
				}
			}
		}

		.accordion
		{
			padding: 7px 30px 8px 15px;
			text-align: justify;
		}
	}


	&.member_listing
	{
		div.content-text.member:not(:last-child)
		{
			position: relative;
			padding-bottom: 30px;
			margin-bottom: 50px;

			&::after
			{
				position: absolute;
				content: '';
				border-bottom: solid $main-color 1px;
				width: 60%;
				transform: translateX(-50%);
				bottom: 0;
				left: 50%;
			}
		}
	}
}

.media
 {
	 &.content-text
	 {
		 @include media-breakpoint-up(sm)
		 {
			 &.media--left,
			 &.media--right
			 {
				 & > figure
				 {
					 img
					 {
						 max-width: 400px;
					 }
				 }

				 & + *
				 {
					 clear: both;
					 padding-top: 5px;
				 }
			 }

			 &.media--left
			 {
				 & > figure
				 {
					 margin: 0 25px 10px 0;
				 }
			 }

			 &.media--right
			 {
				 & > figure
				 {
					 margin: 0 0 10px 25px;
				 }
			 }

			 & > div
			 {
				 ul
				 {
					 list-style-position: inside;
				 }
			 }
		 }

		 @include media-breakpoint-down(lg)
		 {
			 &.media--left,
			 &.media--right
			 {
				 & > figure
				 {
					 img
					 {
						 max-width: 40vw;
					 }
				 }
			 }
		 }

		 @include media-breakpoint-down(sm)
		 {
			 &.media--left,
			 &.media--right
			 {
				 & > figure
				 {
					 float: none;

					 img
					 {
						 //max-width: calc(100vw - 60px);
						 max-width: 100%;
					 }

				 }
			 }
		 }
	 }
 }


#overlay-buttons,
#mobile-menu-button
{
	display: flex;
	position: fixed;
	bottom: 30px;
	right: 30px;
	flex-direction: column;
	z-index: 1500;

	.button
	{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30px;
		border-radius: 50% 50%;
		background-color: $main-color;
		height: 60px;
		width: 60px;
		padding: 0;
		border: solid 2px #fff;
		margin: 10px 0 0;
		transition-duration: .4s;

		a,
		> i
		{
			cursor: pointer;
			margin-top: -7px;
			color: #fff;
		}

		&#elevator
		{
			display: none;
		}
	}

	&:is(#mobile-menu-button)
	{
		position: absolute;
		top: 88px;
		left: 20px;
		right: unset;
		bottom: unset;

		.button
		{
			height: 45px;
			width: 45px;

			> i
			{
				margin-top: -2px;
			}
		}
	}
}


#footer
{
	flex-basis: 100%;
	font-size: 0.9em;
	text-align: center;

	.nav
	{
		--bs-nav-link-hover-color: #{$main-color};
	}

	.nav-link
	{
		--bs-nav-link-font-size: 1em;
	}

	nav
	{
		@extend .nav;
		@extend .justify-content-center;

		ul
		{
			@extend .nav;

			@include media-breakpoint-down(sm)
			{
				margin: 10px 0;
				flex-wrap: wrap;

				.nav-link
				{
					--bs-nav-link-padding-y: 4px;
				}

				li
				{
					flex-basis: 100%;
				}
			}



			li
			{
				@extend .nav-item;

				a,
				strong
				{
					@extend .nav-link;
					color: lighten($main-text-color, 20%);
				}

				&.active > *
				{
					@extend .active;
					color: $main-color;
				}
			}
		}
	}
}

#footer-infos
{
	font-size: 0.8em;
	text-align: center;
	display: flex;
	justify-content: center;
	color: lighten($main-text-color, 30%);
	background-color: #eeeeee;
	margin: 10px 30px;

	.inside
	{
		flex-basis: $desktop-page-width;
	}
}