/*
Theme Name: Henderson MainTheme
Theme URI: https://www.drhenderson.de
Author: the Synective Systemhaus GmbH & Co. KG
Author URI: https://www.synective.de
Description: Base Theme used on Henderson.de
Requires at least: 5.8.3 
Requires PHP: 7 / 8
Version: 0.1
*/

@font-face {
   font-family: 'Merriweather';
   font-style: normal;
   font-weight: 400;
   src: url(fonts/Merriweather-Regular.ttf) format('truetype');
}

@font-face {
   font-family: 'Merriweather Sans';
   font-style: normal;
   font-weight: 400;
   src: url(fonts/MerriweatherSans-VariableFont_wght.ttf) format('truetype');
}



:root {
	--clr-primary:		#0C357E;
	--clr-secondary:	#528FC9;
	--clr-accent:		#DDD3Ca;
	--spacer:			3rem;
	--font-header:		'Merriweather', sans-serif;
	--font-text:		'Merriweather Sans', sans-serif;
}

* { box-sizing: border-box;  }
body, html, h1, h2, h3, h4, h5 { margin: 0; padding: 0; font-size: 20px; font-family: var(--font-text), sans-serif; color: #333; }
b, strong {  }
h2 { color: var(--clr-primary); font-size: 1.4rem; text-align: left; padding-bottom: 0rem; text-transform: uppercase;  }
h3 { color: var(--clr-secondary); font-size: 1.2rem; text-align: left; text-transform: uppercase; font-weight: 100; }
a { color: var(--clr-secondary); text-decoration: none; transition: all ease-in-out 0.75s; }
a .las {transition: all ease-in-out 0.75s;}
a:hover,.current-lang { color: var(--clr-primary); }


h1, h2, h3, h4, h5, h6 { overflow-wrap: normal; font-family: var(--font-header);} 
h1::after, h2::after { content: ''; display: block; width: 6rem; height: 0.5rem; background-color: var(--clr-secondary); border-radius: 0 0 0.3rem 0rem; }

table { margin: 1rem 0; }
th { text-align: left; }
.flexer {display: flex; flex-flow: row wrap; justify-content: space-between; gap: 2rem;}
.right { text-align: right; }

header { position: fixed; top: 0; width: 100%; z-index: 9999; display: flex; flex-flow: row wrap; align-content: center; align-items: center; background: #fff; }
header .logo { width: 300px; margin: 1rem 3rem;}
header .contact { margin-left: 5%; display: flex; flex-flow: row wrap; align-content: center; align-items: center; justify-content: flex-start; gap: 2rem;}
header .contact div { }
header .contact div .las { font-size: 2rem; color: var(--clr-secondary); position: relative; top: 0.3rem;  }
a:hover .las { color: var(--clr-primary) !important; }

nav ul {
	list-style: none; 
	margin:0;
	padding: 0;
	font-size: 2rem;
	line-height: 200%;
	font-family: var(--font-header);
}

.outer-navtrigger {
	position: fixed;
	width: 6rem;
	font-size: 3rem;
	top:0;
	right: 0;
	
	aspect-ratio: 1/1;
	display: flex;
	align-items: top;
	justify-content: right;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	z-index: 9999;
	background: var(--clr-accent);
	color: #fff;
	border-bottom-left-radius: 6rem;
	padding: 0.3rem;
}

.outer-nav-open .las {
}

.outer-nav-open  {
	width: 20%; 
	height: 90%;
	aspect-ratio: revert;
	border-bottom-left-radius: 2rem;
	padding-bottom: 2rem !important;
	
}


.hidden-nav { opacity: 0; right: -200%; position: fixed; top: 4rem; transition: all 0.3s ease-in-out; text-align: right; padding-bottom: 10rem; }
.hidden-nav.open { opacity: 1; right: 0.6rem; }

.menu { font-size: 1.4rem; list-style: none; line-height: 200%; padding-bottom: 2rem; margin-bottom: 2rem; }
.menu a:hover { padding-right: 2rem; }
.menu .small-link { font-size: 1.0rem; }
.menu .small-link a:hover { padding-right: 1.2rem; }
.menu .small-link:first-child { margin-top: 3rem !important; }
.menu .mhm-menu-separator { border: none; height: 3rem; }


.wrapper { width: 50%; padding-right: 5rem; margin: 10rem auto;  }
.wp-block-group { padding: 1rem 5%; margin: 1rem 0; line-height: 200%; }



footer { 
	position: fixed;
	bottom: 0;
	left: 0;
	background: var(--clr-accent);
	width: 6rem;
	aspect-ratio: 1/1;
	display: flex;
	align-items: flex-end;
	align-content: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.75s ease-in-out;
	z-index: 9999;
	background: var(--clr-accent);
	color: #fff;
	border-top-right-radius: 100%;
	padding: 0.3rem;
	padding-bottom: 0.6rem;
	font-size: 0.7rem;
}
footer a { color: #fff;}

footer .wrapper { margin: 0; }

@media (max-width: 1440px) {
	.contact { font-size: 0.8rem; }
	.contact .las { font-size: 1.6rem !important; }
	.outer-navtrigger { width: 3.6rem; font-size: 2.4rem;  }
	header .logo { width: 275px; margin: 0.5rem 2rem; }
	.wrapper { width: 80%; padding: 0 1rem; }
}

@media (max-width: 1440px) {
	.contact { font-size: 0.8rem; flex-flow: column wrap !important; gap: 0 !important; align-items: flex-start !important; }
	.contact .las { font-size: 1.6rem !important; }
	.outer-navtrigger { width: 3.6rem; font-size: 2.4rem;  }
	header .logo { width: 250px; margin: 0.5rem 2rem; }
	.wrapper { width: 90%; padding: 0 1rem; }
}

@media (orientation: portrait) {
	body { font-size: 17px; }
	.hideonmobile { display: none !important; }
	header .logo { width: 250px; margin: 0.5rem 2rem; }
	.outer-navtrigger { width: 60px; font-size: 2rem;  }
	.wrapper { width: 100%; padding: 0 1rem; }
	.outer-nav-open { border-radius: 0; width: 100%; height: 100%; }
}