/*
Theme Name: Zur alten Schule Spreewald
Theme URI: https://www.zur-alten-schule-spreewald.de/
Description: Theme für Zur alten Schule
Version: 1.0
Author: Red Aqua Media
Author URI: https://www.red-aqua-media.de/
*/

@font-face {
	font-family: 'baskervville';
	font-weight: normal;
	src: url('fonts/baskervville.woff2') format('woff2'), url('fonts/baskervville.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'open-sans';
	font-weight: normal;
	src: url('fonts/open-sans-light.woff2') format('woff2'), url('fonts/open-sans-light.woff') format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'open-sans';
	font-weight: bold;
	src: url('fonts/open-sans-bold.woff2') format('woff2'), url('fonts/open-sans-bold.woff') format('woff');
	font-display: swap;
}

:root {
	--gruen: #556750;
	--hellgrau: #e0e4e4;
	--weiss: #fff;
}

body {
	margin: 0 0 0 15vw;
	padding: 0;
	background: var(--gruen) url('zas-weiss.svg');
	background-size: 75% auto;
	background-position: right center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: var(--weiss);
	font: 12pt/1.4 open-sans, sans-serif;
}


/* ========== */
/*   HEADER   */
/* ========== */

header {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 15vw;
	max-width: 56vh;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center;
	animation: header 90s infinite ease-in-out;
	transition: width 500ms ease-in-out;
}

@keyframes header {
	0%, 100% { background-position-x: 50%; background-size: auto 100%; }
	33% { background-position: 0% 50%; background-size: auto 120%; }
	66% { background-position: 100% 0%; background-size: auto 120%; }
}

@media (max-width: 1200px) {

	header:hover {
		width: 56vh;
		max-width: 90%;
	}

	header:hover ~ main {
		opacity: 0;
	}
}


/* ================= */
/*   NAVICON & NAV   */
/* ================= */

#navicon-checkbox {
	display: none;
}

#navicon {
	position: fixed;
	top: 6px;
	right: 2vw;
	width: 60px;
	height: 60px;
	background: url('data:image/svg+xml,<svg version="1.1" viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"><g stroke="%23fff" stroke-linecap="round" stroke-width="2"><path d="m1 1h16"/><path d="m1 6h16"/><path d="m1 11h16"/></g></svg>') center/contain no-repeat;
	filter: drop-shadow(2px 2px 5px var(--gruen));
	cursor: pointer;
	z-index: 9;
}

#navicon-checkbox[type=checkbox]:checked ~ nav {
	display: flex;
	animation: navfadein 1s 1;
}

@keyframes navfadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

nav {
	display: none;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 120%; /* Background fill fix for mobile browsers */
	z-index: 8;
	backdrop-filter: blur(30px);
}

nav > ul {
	background-color: var(--hellgrau);
	box-shadow: 0 0 30px 0 var(--gruen);
	padding: 1em;
	margin: .6em;
	transform: translateY(-10%);
	display: flex;
	flex-wrap: wrap;
	overflow-y:  auto;
	max-height: calc(100vh - 150px);
	top: 20px;
	position: relative;

}

nav ul {
	list-style: none;
	padding-left: .6em;
	margin: .5em;
}

nav > ul > li {
	padding: .5em .75em;
	flex-grow: 1;
}

nav a {
	font: 1em baskervville, serif;
	color: var(--gruen);
	text-decoration: none;
	display: block;
}

nav > ul > li > a {
	font-weight: bold;
	text-decoration: underline;
}


/* ======== */
/*   MAIN   */
/* ======== */

main {
	display: block;
	position: relative;
	margin: auto;
	padding: 1em;
	max-width: 900px;
	transition: opacity 500ms ease-in-out;
	z-index: 5;
}

main a {
	color: #fff;
	text-decoration: underline dashed;
}

main img,
main video {
	border: 1px solid #839081;
}

h1 {
	display: inline-block;
	position: relative;
	background: var(--hellgrau) url('zas-gruen.svg') 1em center/auto 2em no-repeat;
	color: var(--gruen);
	font: 32pt/1.4 baskervville, serif;
	font-size: clamp(16pt, 3vw, 32pt);
	text-transform: uppercase;
	hyphens: auto;
	padding: 1em 1em 1em 4.4em;
	left: -15vw;
}

h1:before {
	content: "Zur alten Schule";
	font: 14pt/1.4 open-sans, sans-serif;
	font-size: clamp(8pt, 1.5vw, 14pt);
	display: block;
}

h2 {
	font: 1.5em/1.2 baskervville, serif;
	text-transform: uppercase;
	text-align: right;
	margin: 2em 0 1em;
	/* 	border-bottom: 2px dashed var(--hellgrau); */
}

h3 {
	text-align: center;
	/* 	text-decoration: underline; */
	font-weight: normal;
	text-transform: uppercase;
	margin-top: 2em;
	border-bottom: 1px dotted;
}

h1,
.wp-block-group {
	box-shadow: 0 0 13px 0 rgba(85,103,80,.6);
}


/* =================== */
/*   WORDPRESS STYLE   */
/* =================== */

.aligncenter {
	text-align: center;
}

.wp-block-group {
	display: block;
	position: relative;
	background-color: var(--hellgrau);
	color: var(--gruen);
	padding: 1em;
	margin: 2em 0;
	box-sizing: border-box;
	left: -15vw;
	width: calc(100% + 15vw);
}

@media (max-width: 800px) AND (orientation: landscape) {
	.wp-block-group {
		left: -30vw;
		width: calc(100% + 30vw);
	}
}

@media (min-width: 800px) AND (orientation: landscape) {
	.wp-block-group {
		left: -3em;
		width: unset;
	}
}

.wp-block-group h2 {
	margin: 0;
}

.wp-block-gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.wp-block-gallery .wp-block-image {
	max-width: 45%;
}

@media (max-width: 640px) {
	.wp-block-gallery .wp-block-image {
		max-width: 100%;
	}
}

.wp-block-image {
	margin: 8px;
}

.wp-block-image img,
.wp-block-video video {
	max-width: 100%;
	height: auto;
}

/* .wp-block-image figcaption {
font-style: italic;
font-size: .8em;
} */


/* PHOTOSWIPE */

.pswp {
	--pswp-bg: var(--gruen);
	--pswp-placeholder-bg: var(--gruen);
	--pswp-preloader-color-secondary:rgba(0,0,0,.9);
	--pswp-icon-color: var(--weiss);
	--pswp-icon-stroke-width: 0px;
}

.pswp__top-bar {
	width:calc(100% - 100px); /* avoid acidentally mouseover navicon */
}


/* NINJA FORMS */

.nf-form-cont {
	margin: 1em auto;
	max-width: 600px;
}

.nf-field {
	margin-top: 1em;
}

.nf-field-label {
	margin: 0 !important;
}

.nf-field-label label {
	font-weight: normal !important;
}

.nf-element,
.time-wrap select {
	font: inherit;
	color: inherit !important;
	padding: .5em;
	width: 100% !important;
	background-color: rgba(0,0,0,.16) !important;
	border: 0;
}

.nf-response-msg {
	padding: 0 .5em;
	border: 2px dashed;
	text-align: center;
}

.nf-error-msg {
	color: #fff !important;
	background-color: #700;
	padding: .25em;
	width: 100%;
}

.eb-form {
	color: #fff !important;
}

.eb-form .eb-form-item__label,
.eb-form .eb-button,
.eb-form .eb-checkbox__label {
	color: #fff !important;
}

.eb-form .eb-form-item__label:before {
	color: inherit !important;
}

.eb-form .eb-form-item__error {
	background-color: #700;
	color: #fff;
	font-size: 1em;
	padding: .5em;
}


/* ========== */
/*   FOOTER   */
/* ========== */

footer {
	display: block;
	position: relative;
	text-align: center;
	font-size: .8em;
	opacity: .5;
	margin: 3em 0;
}

footer:hover {
	opacity: 1;
}

footer a {
	color: inherit;
	white-space: nowrap;
}


/* ============== */
/*   RESPONSIVE   */
/* ============== */

@media (orientation: landscape) {

	body {
		margin-left: 30vw;
		font-size: 14pt;
	}

	header {
		width: 30vw;
	}



	h1 {
		left: -30vw;
	}
}

@media (orientation: landscape) AND (max-width: 1200ox) {

	header:hover {
		width: 56vh;
		max-width: 90%;
	}

	header:hover ~ main {
		opacity: 0;
	}
}