/******************************************************************************************************

		set your individual fonts in css/fonts.css, if not only 
		Arial, Helvetica, system-ui should be displayed
		Copy css/fonts.example.css or rename it to css/fonts.css

*******************************************************************************************************/

@import url('fonts.css');
@import url('standard.css');
@import url('navigation.css');
@import url('icons.css');

/******************************************************************************************************

		set all desired colors and spacing for the page in :root

*******************************************************************************************************/

:root {
	
	--black: #000;
	--green: #bac00a;
	--blue: #345678;
	--lightblue: #5ab6fa;
	--red: #ff0000;
	--yellow: #ffcb3e;
	--orange: #ff4800;
	--pink: #e50046;
	--grey: #ccc;
	--lightgrey: #eee;
	
	
	--primary: #a27544;
	--secondary: var(--lightgrey);
	
	--fontcolor: #333;
	--fontsize: 18px;
	--fontsize-max: 20px;
	
	--container: 1400px;
	@media(orientation:landscape && max-width: 1200px) {
		--container: 110vh;
	}
	--gap: 1rem;
	--headerheight: calc(100px + calc(var(--gap) * 2));
	@media(max-width:800px) {
		--headerheight: calc(80px + calc(var(--gap) * 2));
	}
	
	--grid: 
		[full-width-start] 
			minmax(var(--gap), 1fr) 	
				[picture-start]
					calc(var(--gap) * 2)
						[content-start]	
							min((50% - calc(var(--gap) * 3)), calc(var(--container) / 2)) 
								[center-start] 
									0px 
								[center-end] 
							min((50% - calc(var(--gap) * 3)), calc(var(--container) / 2)) 
						[content-end] 
					calc(var(--gap) * 2)
				[picture-end]
			minmax(var(--gap), 1fr) 
		[full-width-end];
	
	
	--columns-fill-4: repeat(auto-fill, minmax(min(calc(calc(var(--container) / 4) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-4: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 4) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fill-3: repeat(auto-fill, minmax(min(calc(calc(var(--container) / 3) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-3: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 3) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fill-2: repeat(auto-fill, minmax(min(calc(calc(var(--container) / 2) - calc(var(--gap) * 1)), 100%), 1fr));
	--columns-fit-2: repeat(auto-fit, minmax(min(calc(calc(var(--container) / 2) - calc(var(--gap) * 1)), 100%), 1fr));
	
	--btn-color: var(--primary);
	--btn-color-hover: rgba(from var(--primary) r g b / .9);
	--btn-text-color: var(--fontcolor);
	--btn-text-color-reverse: #fff;
	--btn-radius: 0px;
	--btn-text-transform: normal;
	
	--link-color: var(--fontcolor);
	--link-color-hover: var(--primary);
	
	--nav-sub-color: rgb(255, 255, 255);
	--nav-sub-fontcolor: var(--fontcolor);
	--nav-sub-fontcolor-hover: var(--btn-color);
	--nav-sub-box-shadow: 0 0 3px 1px #888;
	
	--teaser-text-color: /*#fff*/ black;
	--teaser-text-shadow: /*0 0 2px var(--fontcolor)*/ none;
	
	--summary-color: var(--lightgrey);
	
	--icon-size: calc(var(--fontsize) / 3 * 2);
	--icon-color: var(--primary);
		

	
	/*@media (dynamic-range: high) {*/
  		@supports (color: color(display-p3 1 1 1)) {
			--primary: color(display-p3 0.635294 0.458824 0.266667 / 1.000000);
			--green: color(display-p3 0.729412 0.752941 0.039216);
			--blue: color(display-p3 0.203922 0.337255 0.470588);
			--lightblue: color(display-p3 0.352941 0.713725 0.980392);
			--red: color(display-p3 0.666667 0.000000 0.000000);
			--yellow: color(display-p3 1.000000 0.796078 0.243137);
			--orange: color(display-p3 1.000000 0.282353 0.000000);
			
			/*--btn-color-hover: color(display-p3 1.000000 0.796078 0.243137 / .9);*/
		}
	/*}*/
	
	--primary-light: color-mix(in srgb, var(--primary), white 60%);
	--secondary-light: color-mix(in srgb, var(--secondary), white 60%);
	--green-light: color-mix(in srgb, var(--green), white 60%);
	--blue-light: color-mix(in srgb, var(--blue), white 70%);
	--lightblue-light: color-mix(in srgb, var(--lightblue), white 70%);
	--red-light: color-mix(in srgb, var(--red), white 50%);
	--yellow-light: color-mix(in srgb, var(--yellow), white 60%);
	--orange-light: color-mix(in srgb, var(--orange), white 60%);
	--pink-light: color-mix(in srgb, var(--pink), white 50%);
	
	--footercolor: var(--lightgrey);
}

@media(max-width:800px) {
	:root {
		--grid: 
		[full-width-start] 
			var(--gap) 	
				[picture-start]
					1px
						[content-start]	
							calc(50% - var(--gap))
								[center-start] 
									0px 
								[center-end] 
							calc(50% - var(--gap))
						[content-end] 
					1px
				[picture-end]
			var(--gap) 
		[full-width-end];
		
	}
}




/***********************************************************

		Individual Styling for Page

***********************************************************/

h1, .h1, h1 *, .h1 *,
h2, .h2, h2 *, .h2 *,
h3, .h3, h3 *, .h3 *,
h4, .h4, h4 *, .h4 *,
h5, .h5, h5 *, .h5 *,
h6, .h6, h6 *, .h6 * {
	letter-spacing: 0;	
}

small {
	font-size: .9em;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
	padding-top: var(--headerheight);
	
	> * {
		scroll-margin-top: 15vh;
	}

	> header {
		position: fixed;
		top: 0;
		margin: 0;
		padding: 0;
		> div {
			justify-content: space-between;
			gap: 0;
			> a {
				display: flex;
				align-items: center;
				img {
					min-height: calc(var(--headerheight) - var(--gap));
					min-width: 250px;
				}
			}
			#navigation {
				flex: 0;
				> ul {
					gap: var(--gap);
				}
				a {
					font-size: clamp(20px, 2vw + .1em, 24px);
				}
			}
		}
	}
	&.mobilenav {
		> * {
			opacity: 1;
			transition: opacity 1.5s ease-in-out;
		}
		> header {
			overflow: hidden;
			> div {
				> a img {
					opacity: 1;
					transition: opacity 1.5s ease-in-out;
				}
				#navigation {
					transform: translate(0);
					left: 120dvw;
					transition: left .25s ease-in-out;
				}
				#opener {
					align-items: center;
				}
			}
		}
	}
	&.navopen {
		> * {
			opacity: 0;
			transition: opacity 0s ease-in-out;
		}
		> header {
			opacity: 1;
			> a img {
					opacity: 0;
					transition: opacity 0s ease-in-out;
				}
			> div {
				#navigation {
					transform: translate(0);
					left: 0;
					#close {
						margin-right: var(--gap);
					}
				}
			}
		}
		@media(max-width:800px) {
			#close {
				transform: translateX(3rem);
			}
		}
	}
	
	> #breadcrumbs {
		display: grid;
		grid-template-columns: var(--grid);	
		padding-block: calc(var(--gap) * 2);
		background: var(--primary-light);
		
		> ol {
			grid-column: content;
			display: flex;
			gap: var(--gap);
			margin: 0;
			padding: 0;
			list-style: none;
			* {
				text-transform: uppercase;
				text-decoration: none;
				white-space: nowrap;
				&:hover {
					text-decoration: underline;
					color: var(--primary);
				}
			}
			
			li+li:before {
				content: "/";
				margin-right: var(--gap);
				&:hover {
					color:inherit;
					text-decoration: none;
				}
			}
			
			@media(min-width:1000px) {
				svg {
					display: none;
				}
			}
			
			@media (max-width:1000px) {
				span:has(svg) span {
					display: none;
				}
				svg {
					display: block;
					height: 1em;
				}
			}
			@media (max-width:800px) {
				/*flex-direction: column;*/
				li:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
					display: none;
				}
			}
			@media (max-width:600px) {
				flex-direction: column;
				* {
					white-space: wrap;
				}
				li:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
					display: block;	
				}
				li+li:before {
					display: none;
				}
			}
		}
	}
	
	> figure {
		overflow: cut;
		> picture,
		> a,
		> img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	> main {
		.bg {
			display: grid;
			grid-column: full-width;
			grid-template-columns: var(--grid);	
			padding-block: var(--gap);
			background: var(--primary-light);
			
			> * {
				grid-column: content;
			}
			
			
			&.lightgrey {
				background: var(--lightgrey);
			}
			&.green {
				background-color: var(--green-light);
			}
			&.yellow {
				background-color: var(--yellow-light);
			}
			&.orange {
				background-color: var(--orange-light);
			}
			
		}
	}
	
	> footer {
		ul {
            list-style: none;
            margin: 0;
            a {
                text-decoration: none;
            }
        }

        > * {
            display: flex;
            gap: var(--gap);
            > * {
                flex: 1;
            }

            > * :has(address) {
                flex: 2;
            }

            > * :last-child {
                display: flex;
                justify-content: flex-end;
            }

            @media (max-width: 800px) {
                flex-direction: column;
                > * :last-child {
                    justify-content: flex-start;
                }
            }
        }

        > nav {
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: center;
            margin-block: var(--gap);
            ul {
                list-style: none;
                margin: 0;
                flex: 0;
                display: flex;
                gap: var(--gap);
                a {
                    text-decoration: none;
                    white-space: nowrap;
                }
				@media(max-width:800px) {
					flex-direction: column;
					gap: 0;
				}
            }
			@media(max-width:800px) {
				align-items: flex-start;
			}
        }

        #flags {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: var(--gap);
            a {
                text-transform: uppercase;
                text-decoration: none;
                &.active {
                    font-weight: 500;
                }
            }
        }

        #social-nav {
			display: flex;
            margin-block: var(--gap);
			gap: calc(var(--gap) / 2);
			align-content: flex-start;
			align-items: flex-start;
			justify-content: flex-start;
			
            a {
                display: inline-block;
            }

            .icon {
                filter: grayscale(1) brightness(0);
                transition: all .5s ease-in-out;
                &:hover {
                    filter: grayscale(0) brightness(1);
                }
            }
        }
		
	}
}



#scrolltotop {
	position: fixed;
	right: var(--gap);
	bottom: var(--gap);
	padding: calc(var(--gap) / 2);
	background: rgb(from var(--primary-light) r g b / 50%);
	z-index: 999999999;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	
	svg {
		display: block;
		width: 2rem;
	}
	&:hover {
		background: var(--primary-light);
	}
}