/*
Theme Name: mellitales
Theme URI: https://wr-medien.de
Author: WR-Medien
Author URI: https://wr-medien.de
Version: 1.0.0
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.0
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: mellitales

mellitales WordPress Theme © 2024 WR-Medien
mellitales is distributed under the terms of the GNU GPL
*/

:root {
  --white: #fff;
  --primary: #fecd52;
  --secondary: #5f8251;
  --secondary-light: #b9c8b3;
}

@font-face {
    font-family: Mellitales;
    src: url(./assets/fonts/Mellitalesbold-RegularFINAL.ttf);
}
@font-face {
    font-family: poppins;
    src: url(./assets/fonts/Poppins-Regular.ttf);
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

.text-white{
	color:var(--white);
}
.text-primary{
	color:var(--primary);
}
.text-secondary{
	color:var(--secondary);
}

.background-white{
	background-color:var(--white);
}
.background-primary{
	background-color:var(--primary);
}
.background-secondary{
	background-color:var(--secondary);
}

body{
	font-family:'Mellitales',Arial,'Time New Roman';
	font-size:1.3rem;
	margin:0;
	padding:0;
}
a,
a:active,
a:hover,
a:visited{
	text-decoration:none;
	color:var(--secondary);
}
.mob-menue nav a,
.mob-menue nav a:active,
.mob-menue nav a:hover,
.mob-menue nav a:visited{
	text-decoration:none;
	color:var(--white);
}
h1{
	font-size:1.5rem;
}
h2{
	font-size:1.3rem;
}
h3{
	font-size:1.2rem;
}
h4{
	font-size:1rem;
}
#container,
#content,
#sidebar{
	padding:5px;
}

#header,
#footer{
	background-color:var(--primary);
	padding:15px;
	color:var(--white);
	text-transform:uppercase;
	position:relative;
}
#header a, #footer a,
#header a:active, #footer a:active,
#header a:hover, #footer a:hover,
#header a:visited, #footer a:visited{
	color:var(--white);
}

#header{
	position:sticky;
	top:0;
	background: url(./imgs/header_curve.svg) no-repeat;
	background-size: cover;
	background-position: center bottom;
	z-index:1000;
	min-height:200px;
}
#header.compact{
	min-height:auto;
	background: url(./imgs/header_curve_copact.svg) no-repeat;
	background-size: cover;
	background-position: center bottom;
	padding:5px;
}
#header.compact #branding img{
	height:75px;
	transition:all .3s;
}
#header.compact #menu{
	font-size:1em;
	transition:all .3s;
}

#header .top-row{
	display:flex;
	align-items:flex-start;
}

.ya-welcome{
	pointer-events: none;
}
body.home #melli{
	position:absolute;
	bottom:8vh;
	width:100%;
}

body.home #melli .tales{
	height:80vh; 
	max-height:714px;
}

body.home #header{
	position:static;
	height:80vh;
	background: url(./imgs/header_curve_home.svg) no-repeat;
	background-size: cover;
	background-position: center bottom;
}
body.home #header .top-row{
	z-index: 1000;
	position: absolute;
	width: calc(100% - 30px);
}
#footer{
	position:static;
	width:100%;
	background: url(./imgs/footer_curve.svg) no-repeat;
	background-size: cover;
	background-position: center top;
}
#footer .col-elm{
	display: flex;
	justify-content: end;
	align-items: end;
}
#footer .footer-right-col
{
	position:relative;
}
#footer .footer-right-col .books{
	position:absolute;
	left:0;
	bottom:0;
}
#content h1,#content h2,#content h3,#content h4{
	font-family:'Mellitales',Arial,'Time New Roman';
	text-transform:uppercase;
	margin:10px 0 10px 0;
	padding:0;
	letter-spacing: 3px;
	color:var(--secondary);
}

#content{
	font-family:"poppins",sans-serif, Arial, 'Times New Roman';
	color:var(--secondary);
	font-size:.8rem;
	width:100%;
	max-width:1024px;
	margin:0 auto;
}

.tk-mellitales{
	font-family:'Mellitales',Arial,'Time New Roman';
	text-transform:uppercase;
}

#footer .contact a{
	margin-left:20px;
}
#footer .contact a img{
	height:25px;
}
.bbot {
  display: flex;
  align-items: end;
}
.bhcent{
	display: flex;
	align-items: center;
}
.bhcen{
	justify-content: center;
}
.bhlef{
	justify-content: start;
}
.bhrght{
	justify-content: end;
}
.button,
button,
input[type="submit"],
.wpcf7-submit,
.wp-block-button__link,
.post-navigation .nav-links .nav-previous a,
.post-navigation .nav-links .nav-next a{
	border:0;
	padding:10px 20px 10px 20px;
	background-color:var(--primary);
	border-radius:20px;
	color:var(--white);
	cursor:pointer;
	font-family:'Mellitales',Arial,'Time New Roman';
	font-size:1.3rem;
	text-transform:uppercase;
}
.wp-block-button__link:hover{
	color:var(--white);
}
.wp-block-gallery .wp-block-image img,
.wp-block-image img{
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
}

.wp-block-gallery,
.wp-block-columns{
	margin: 25px 0 25px 0;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
	border-color:var(--primary);
}
/* menue */
#header #menu{
	width:100%;
	font-size:1.2em;
}
#header #menu ul{
	display:flex;
	justify-content: end;
	color:var(--white);
}
#header #menu ul li{
	padding:10px 30px 10px 30px;
}
#header #menu ul li.current-menu-item a,
#header #menu ul li a:hover{
	background-image:url(./imgs/underline-primary.png);
	background-repeat: no-repeat;
	background-size:100% 3px;
	background-position:center bottom;
}

/* menue mobile */
button.menu-ui {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

button.menu-ui svg {
  border: 1px dotted #222;
  fill: currentColor;
  stroke: currentColor;
  color: var(--white);
  width: 50px;
  height: 50px;
}

#hamburger svg path {
  transform-origin: 50% 8px;
  transition: stroke 0.3s ease-in-out, fill 0.3s ease-in-out;
}
#hamburger svg path:nth-of-type(1) {
  animation: hamburgerTopReset 300ms ease-in-out forwards;
}
#hamburger svg path:nth-of-type(2) {
  transform-origin: 50% 15px;
  animation: hamburgerMiddleReset 300ms ease-in-out forwards;
}
#hamburger svg path:nth-of-type(3) {
  transform-origin: 50% 22px;
  animation: hamburgerBottomReset 300ms ease-in-out forwards;
}

#hamburger.is-open svg path:nth-of-type(1) {
  animation: hamburgerTopDeform 300ms ease-in-out forwards;
}
#hamburger.is-open svg path:nth-of-type(2) {
  animation: hamburgerMiddleDeform 300ms ease-in-out forwards;
}
#hamburger.is-open svg path:nth-of-type(3) {
  animation: hamburgerBottomDeform 300ms ease-in-out forwards;
}

@keyframes hamburgerTopReset {
  0% {
    transform: translateY(7px) rotate(45deg);
  }
  50% {
    transform: translateY(7px) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes hamburgerMiddleReset {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hamburgerBottomReset {
  0% {
    transform: translateY(-7px) rotate(-45deg);
  }
  50% {
    transform: translateY(-7px) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes hamburgerTopDeform {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(7px) rotate(0deg);
  }
  100% {
    transform: translateY(7px) rotate(45deg);
  }
}

@keyframes hamburgerMiddleDeform {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes hamburgerBottomDeform {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(0deg);
  }
  100% {
    transform: translateY(-7px) rotate(-45deg);
  }
}



#content ul.category-subnavigation{
	list-style-type:none;
	margin:0;
	padding:0;
	margin-bottom:80px;
}
#content ul.category-subnavigation li{
	padding:5px;
	display:inline-block;
}
#content ul.category-subnavigation li a{
	color:var(--secondary-light);
	font-size:1rem;
}
#content ul.category-subnavigation li.active a,
#content ul.category-subnavigation li a:hover{
	background-image:url(./imgs/underline-secondary.png);
	background-repeat: no-repeat;
	background-size:100% 3px;
	background-position:center bottom;
	padding-bottom:3px;
}
#content ul.category-subnavigation li.active a{
	color:var(--secondary);
}

.flex-box{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap:25px;
}
.flex-gap-4{
	width:calc(33.3333% - 25px);
}
.flex-gap-2{
	width:calc(50% - 25px);
}


article.project-card{
	position:relative;
}
article.project-card .entry-summary{
	display: flex;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	background:rgba(255,255,255,.85);
	text-align:center;
	justify-content:center;
	align-items:center;
	opacity:0;
}
article.project-card:hover .entry-summary{
	opacity:1;
	transition:opacity .5s;
}
article .entry-content{
	font-size:1rem;
}

.rf-text-medium{
	font-size:1rem;
}

form.wpcf7-form .wpcf7-text,
form.wpcf7-form .wpcf7-textarea{
	width:100%;
	margin:0;
	margin-bottom:10px;
	padding:10px;
	border-radius:10px;
	border:2px solid var(--secondary);
}
form.wpcf7-form .textarea p{
	width:100%;
}
form.wpcf7-form .rf-col-6\@m .wpcf7-text,
form.wpcf7-form .rf-col-6\@m label{
	margin-right:10px;
	margin-left:0;
	width:calc(100% - 10px);
}
form.wpcf7-form .rf-col-6\@m:nth-child(even) .wpcf7-text,
form.wpcf7-form .rf-col-6\@m:nth-child(even) label{
	margin-left:10px;
	margin-right:0;
	width:calc(100% - 10px);
}


form.wpcf7-form .textarea textarea,
form.wpcf7-form .submit p{
	width:100%;
}

form.wpcf7-form .wpcf7-spinner{
	display:none;
}
form.wpcf7-form .submit input{
	width:100%;
}


.footer .navigation.post-navigation{
	padding:15px;
}
.footer .navigation.post-navigation .nav-links{
	display:flex;
	font-size:1rem;
}
.footer .navigation.post-navigation .nav-links .nav-previous,
.footer .navigation.post-navigation .nav-links .nav-next{
	width:50%;
}
.footer .navigation.post-navigation .nav-links .nav-next{
	text-align:right;
}
footer #book-divider{
	display:inherit;
}
footer .footer-right-col .books{
	display:none;
}
.mob-menue{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:var(--primary);
	z-index:1000;
	display:none;
}


#lightbox{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.5);
	z-index:1001;
	display: flex;
	align-items: center;
	justify-content: center;
}
#lightbox .lb-wrapper{
	background:#fff;
	width:100%;
	text-align:center;
	padding:10px;
	position:relative;
	box-shadow:0 0 10px #666;
}
#lightbox .lb-wrapper .lb-spot{
	max-width:calc(100% - 20px);
	max-height:80vh;
	min-width:340px;
	width:50%;
	margin:0 auto;
	border-radius:15px;
	overflow:hidden;
}
#lightbox .lb-wrapper .lb-spot img{
	width:100%;
}
#lightbox .lb-wrapper img{
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
figure.wp-block-image img{
	cursor:pointer;
}
#lightbox .lb-wrapper .lb-prev,
#lightbox .lb-wrapper .lb-next,
#lightbox .lb-wrapper .lb-close{
	position:absolute;
	opacity:.7;
	cursor:pointer;
}
#lightbox .lb-wrapper .lb-prev:hover,
#lightbox .lb-wrapper .lb-next:hover,
#lightbox .lb-wrapper .lb-close:hover{
	opacity:1;
}
#lightbox .lb-wrapper .lb-prev,
#lightbox .lb-wrapper .lb-next{
	visibility:hidden;
}
#lightbox .lb-wrapper .lb-prev.moveon,
#lightbox .lb-wrapper .lb-next.moveon{
	visibility:visible;
}
#lightbox .lb-wrapper .lb-prev{
	left:10px;
}
#lightbox .lb-wrapper .lb-next{
	right:10px;
}
#lightbox .lb-wrapper .lb-close{
	top:10px;
	right:10px;
}

.divider{
	height:100px;
}

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	#header #menu{
		display:none;
	}
	#branding,
	body.home #melli{
		width:100%;
		text-align:center;
	}
	#branding{
		text-align:left;
	}
	.mob-menue #branding{
		text-align:center;
	}
	body.home #melli .tales{
		max-height:500px;
	}
	body.home #melli .copyright{
		color:var(--white);
	}
	body.home #melli .ya-welcome{
		justify-content: center;
		align-items:center;
	}
	.flex-box{
		display: flex;
		flex-direction: column;
	}
	.flex-gap-4{
		width:100%;
	}
	form.wpcf7-form .submit input{
		width:100%;
	}
	.post-navigation .nav-links{
		display:block;
	}
	.footer .navigation.post-navigation .nav-links .nav-previous,
	.footer .navigation.post-navigation .nav-links .nav-next{
		width:100%;
		text-align:center;
		margin-top:15px;
	}
	form.wpcf7-form .rf-col-6\@m .wpcf7-text,
	form.wpcf7-form .rf-col-6\@m label{
		margin-left:0 !important;
		margin-right:0 !important;
		width:100% !important;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	body.home #melli .ya-welcome{
		justify-content: center;
		align-items:center;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	body.home #melli .ya-welcome{
		justify-content: left;
		align-items:end;
	}
}

@media only screen and (max-width: 1024px) {
	footer #copyright{
		font-size:1rem;
	}
	footer .col-middle{
		border-bottom:3px solid #ffd97a;
	}
	#melli .copyright{
		display:none;
	}
	footer #book-divider{
		display:none;
	}
	footer .footer-right-col .books{
		display:block;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	#content h1,#content h2,#content h3,#content h4{
		margin-left:-30px;
	}
}