@use './fonts';
@use './colors';
@use './responsive' as r;

$color-green-1: rgb(184,229,162);
$color-green-2: rgb(162,221,131);

$color-brown-header: rgb(0,62,41);
$color-darkgreen: rgb(1,67,39);
$color-midgreen: rgb(0,70,8);
$color-green: rgb(5,162,23);
$color-petrol: rgb(6,78,75);
$color-darkgray: rgb(0,40,39);

$major-radius: 15px;
$big-button-radius: 10px;
$button-radius: 5px;

//$width-very-narrow: 600px;
$width-narrow: 750px;
$width-normal: 1000px;
$width-wide: 1600px;

$indent-menu-left: 25px;

body {
	padding: 5px;
	margin: 0px auto;
	font-size: 12px;
	max-width: 1100px;
	min-height: 100.1vh;
	
	font-family: 'Noto Sans', sans-serif;
	
	@include r.narrow {
		padding: 20px;
	}
	
	@include r.normal {
		font-size: 15px;
	}
	
	@include r.wide {
		max-width: 70%;
	}
}

#header {
	
	> div.image_row {
		display: flex;
		flex-direction: row;
		
		> div.siderow {
			flex: auto 1 1;
			
			display: flex;
			flex-direction: column;
			
			> div.spacer {
				flex: auto 1 1;
			}
			> div.border {
				flex: 100px 0 0;
				background-color: $color-brown-header;
			}
			
		}
		
		> div > a {
			
			display: flex;
			
			> img {
				height: 150px;
				width: 150px;
				margin: 0px 20px;
			}
			
		}
		
		@media screen and (min-width: $width-narrow) {
			> div > a > img {
				height: 250px;
				width: 250px;
			}
			
			> div.siderow > div.border {
				flex: 200px 0 0;
			}
		}
	}
	
	> div.title_row {
		margin: 20px 0px;
		padding: 20px 0px;
		
		border-top-color: $color-brown-header;
		border-top-width: 4px;
		border-top-style: solid;
		
		border-bottom-color: $color-brown-header;
		border-bottom-width: 4px;
		border-bottom-style: solid;
		
		font-size: 30px;
		font-weight: bold;
		color: $color-brown-header;
		text-align: center;
		
		@media screen and (min-width: $width-narrow) {
			font-size: 60px;
		}
		
		@media screen and (min-width: $width-normal) {
			font-size: 80px;
		}
		
		> a {
			
			color: inherit;
			text-decoration: none;
			
			display: flex;
			flex-direction: column;
			
			span.title {
				font-size: 60%;
			}
			
			span.name {
				line-height: 150%;
			}
		}
		
		> a:hover {
			font-weight: 900;
		}
	}
}

#topmenu {
	background-color: $color-green-1;
	border-radius: $major-radius;
	
	margin: 20px 0px;
	
	> ul.menu, > ul.mod-menu {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		min-height: 50px;
		padding: 20px;
		
		> li {
			flex: 17% 0 0;
			
			list-style: none;
			
			> a {
				height: calc(100% - 30px);
				
				background-color: $color-darkgreen;
				border-radius: $big-button-radius;
				
				padding: 15px 10px;
				
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				color: white;
				
				font-weight: bold;
				text-align: center;
				text-decoration: none;
			}
			
			> a:hover {
				font-weight: 900;
			}
			
			margin: 12px 0px;
			
			
			@media (min-width: $width-narrow){
				font-size: 150%;
			}
			
			> .class-kita {
				background-color: $color-green;
			}
			
			> .class-eltern {
				background-color: $color-darkgreen;
			}
			
			> .class-konzept {
				background-color: $color-midgreen;
			}
			
			> .class-aktuelles {
				background-color: $color-petrol;
			}
			
			> .class-kontakt {
				background-color: $color-darkgray;
			}
		}
		
		@media screen and (min-width: $width-narrow) {
			min-height: 100px;
			flex-direction: row;
			
			> li {
				margin: 0px;
			}
		}
	}
}

#main_row {
	
	display: flex;
	flex-direction: column;
	
	margin-bottom: 20px;
	
	> div {
		border-radius: $major-radius;
	}
	
	> #left_column {
		flex: auto 0 0;
		margin-right: 0px;
		margin-bottom: 20px;
		
		background-color: $color-green-2;
		
		display: flex;
		flex-direction: column;
		
		padding: 20px;
		
		ul.nav, ul.nav-item, ul.nav-child, ul.mod-menu__sub {
			
			margin: 0px 0px 0px $indent-menu-left;
			padding: 0px 0px 0px 10px;
			
			> li {
				list-style: none;
				
				padding: 7px 0px 7px 7px;
				
				border-top-style: solid;
				
				> a {
					color: inherit;
					text-decoration: none;
					display: block;
					padding: 8px 0px;
				}
				
				> a:hover {
					font-weight: bold;
				}
				
				ul.nav-child, ul.mod-menu__sub {
					margin-top: 7px;
					padding: 0px;
				}
				
				display: none;
			}
			
			
			> li.active {
				display: list-item;
				
				li {
					display: list-item;
				}
			}
			
			> li:last-child {
				padding-bottom: 0px;
			}
			
		}
		
		> ul.nav, > ul.nav-item {
			margin-left: 0px;
			
			> li.active {
				border-bottom-style: solid;
			}
		}
		
		ul.nav-child, ul.mod-menu__sub {
			> li.parent {
				> a::after {
					content: " →";
				}
			}
		}
		
		div.traeger {
			
			div.header {
				border-radius: $button-radius;
				background-color: $color-darkgreen;
				
				margin: 20px 0px;
				padding: 10px;
				width: initial;
				
				color: white;
				font-weight: bold;
				
				@media screen and (min-width: $width-narrow) {
					margin-left: -15px;
					width: 70%;
				}
			}
		}
		
	}
	
	> #main {
		flex: auto 1 1;
		
		background-color: $color-green-1;
		padding: 20px;
		font-size: 15px;
		
		text-align: justify;
		hyphens: auto;
		
		div.blog > div.items-more > .nav {
			
			display: block;
			padding: 0px;
			
			> li {
				display: block;
				
				> a {
					padding: 4px;
					margin: 12px 0px;
					list-style-type: none;
					display: block;
				}
			}
		}
		
		@media screen and (min-width: $width-normal) {
			font-size: 20px;
			
			div.blog {
				> div.items-leading > div {
					// Settings for intro articles
					> div {
						p.readmore {}
					}
				}
				
				> div.items-leading > div,
				> div.items-row > div
				{
					p {
						margin-bottom: 0px;
					}
					p:first-child {
						margin-top: 0px;
					}
					p.readmore {
						font-size: smaller;
						text-align: right;
						margin-bottom: 20px;
					}
				}
				
				> div.items-row {
					
					display: flex;
					
					> div {
						// Settings for the two column articles
						margin-right: 20px;
						flex: 0px 1 0;
					}
					
					> div:last-child {
						margin-right: 0px;
					}
				}
			}
			
			
		}
		
		div.pagination {
			
			margin: 20px 0px;
			font-size: smaller;
			
			> ul {
				display: inline-block;
				
				padding: 0px;
				margin: 0px;
				
				> li {
					list-style: none;
					display: inline;
					
					margin: 7px 13px;
					
					.pagenav {
						padding: 8px 12px;
					}
				}
			}
			
			> p.counter {
				margin: 0px 5px;
				padding: 0px 0px 15px 0px;
				
				float: initial;
				
				@media screen and (min-width: $width-normal) {
					float: right;
					padding: 0px;
				}
			}
		}
		
		// Make tables responsive
		@media screen and (max-width: $width-narrow) {
			table {
				display: block;
				
				> tbody {
					display: block;
					
					> tr {
						display: block;
						
						border-bottom-style: solid;
						border-width: 1px;
						
						padding: 7px 0px;
						
						> td {
							display: block;
							
							text-align: left !important;
							
							> p{
								text-align: justify !important;
							}
						}
					}
					
					> tr:first-child {
						border-top-style: solid;
					}
				}
			}
		}
		
		// Enable left and right floating elements
		.pull-right {
			float: right;
		}
		.pull-left {
			float: left;
		}
		
		// Style links in blogs
		.blog {
			.page-header {
				> h2 {
					> a {
						display: block;
						margin-right: 10px;
						text-decoration: none;
						color: $color-darkgreen;
						font-weight: bold;
					}
					
					> a:hover {
						font-weight: 900;
					}
				}
			}
			.readmore {
				margin-top: 8px;
				> a {
					text-decoration: none;
					font-size: smaller;
					color: white;
					background-color: $color-darkgreen;
					padding: $button-radius;
					border-radius: $button-radius;
				}
				
				> a:hover {
					font-weight: bold;
				}
			}
			.items-more {
				a {
					text-decoration: none;
					font-weight: bold;
					color: $color-darkgreen;
				}
			}
			.pagination {
				ul {
					color: $color-darkgreen;
					
					> li,
					> .pagination-start,
					> .pagination-prev,
					> .pagination-next,
					> .pagination-end {
						span, a {
							font-weight: normal;
							font-size: inherit;
							color: inherit;
							text-decoration: none;
						}
						a {
							font-weight: bolder;
						}
						
						a:hover {
							font-weight: 900;
						}
					}
					
					> li > span {
						font-weight: 900;
						font-size: larger;
					}
					
				}
			}
		}
	}
	
	@media screen and (min-width: $width-narrow) {
		flex-direction: row;
		
		> #left_column {
			margin-right: 20px;
			margin-bottom: 0px;
			width: 300px;
		}
	}
}

#bottommenu {
	background-color: $color-green-1;
	border-radius: $major-radius;
	
	position: relative;
	
	padding: 20px;
	margin-bottom: 30px;
	
	> #impressum {
		> ul.nav {
			padding: 0px;
			margin: 0px;
			
			display: flex;
			flex-direction: column;
			z-index: 1;
			
			> li {
				list-style: none;
				
				display: block;
				
				margin: 12px 0px;
				
				> a {
					color: inherit;
					text-decoration: none;
					
					background-color: $color-darkgreen;
					border-radius: $big-button-radius;
					color: white;
					font-weight: bold;
					
					text-align: center;
					padding: 10px 20px;
					
					display: block;
				}
				
				> a:hover {
					font-weight: 900;
				}
			}
			
			@media (min-width: $width-narrow) {
				display: flex;
				justify-content: end;
				flex-direction: row;
				
				> li {
					margin: 0px 0px 0px 20px;
				}
			}
		}
	}
	
	> #copyright {
		font-size: 10px;
		text-align: center;
	}
}