/*
Theme Name: MPU-thentic
Author: Christoph Adel
Author URI: https://www.pawthentic-life.de
Description: Standard Theme für MPU-Coach24.de
Version: 0.1
License: Only for intern Use of MPU-Coach24.de
License URI: ---
Tags: mpu shop accessibility light
*/

/***********************
 * Includes *
 ***********************/

 @import url("res/fonts/fonts.css");
 @import url("pawcommerce.css");



/***********************
 * Spezifische Seiten *
 ***********************/
 .page-id-2 .entry-header {display:none;}


/***********************
 * Basics *
 ***********************/

 body {
	background:var(--bg-color);
	margin:0;
	font-family: 'Gudea', sans-serif;
	color: var(--text);
	font-size: 1.25rem;
	line-height: 1.5em;
}

.screen-reader-text {
	position: absolute !important;
	height: 1px;
	width: 1px;
	left: -9999px;
	clip: rect(1px,1px,1px,1px);
	overflow: hidden;
}

:focus, button:focus {outline: 3px solid var(--secondary); outline-offset: 2px; }


.wrapper-std {width:100%; max-width:1400px; margin:0 auto;}
.wrapper-shop {width:100%; max-width:1800px; margin:0 auto;}
.single-product .wrapper-shop {max-width:1400px;}
.wrapper1800 {width:100%; max-width:1800px; margin:0 auto;}

header#site-header {padding:1em 2em 1em 2em; margin-bottom:0;}
.branding {text-align: center; padding-bottom: 1em;}
.branding img {max-height: 5.5em;}
.branding .sitename {font-weight: bold; color:var(--primary); font-size: 2rem; margin-bottom: 0.15em;}

main {background: var(--bg-color); padding: 0 2em 4em 2em;}
@media (min-width: 991px) {
	main.wrapper-full-width {padding: 0;}
}
@media (max-width: 576px) {
	main {padding: 0 1em 4em 1em;}
}


footer#site-footer {background:var(--dark-grey); color:var(--bg-color); padding: 3em 2em; }
@media (max-width: 576px) {
	footer#site-footer {padding: 2em 1em;}
}
footer#site-footer h2, footer#site-footer h3, footer#site-footer h4, footer#site-footer h5 {color:var(--primary-light); text-transform: uppercase;}
footer#site-footer a {color:var(--bg-color);} 
footer#site-footer a:hover, footer#site-footer a:focus, footer#site-footer a:active {text-decoration:underline;}
footer#site-footer ul {padding:0;}
footer#site-footer ul li {list-style: none; line-height: 175%; padding-left:0; display: list-item;}
footer :focus {outline: 3px solid var(--secondary-light);}

#footer-sbb {padding:2em 15px 3em 15px;}
#footer-sbb ul.menu li {display:Inline; margin-right:1em;}
#footer-sbb ul.menu li:not(:first-of-type)::before {content:""; border-left:2px solid var(--bg-color); margin:1em;}
aside {padding:1em;}

a, a:hover, a:visited {color:var(--secondary);} 
a:hover, a:focus {text-decoration: underline;}

nav ul {padding: 0;}
nav ul li {list-style: none; display: inline; margin-right:1em;}

.featured-image img {width:100%; height:100%;}

/* Clear-Fix Hack, e.g.: against <p>'s margin that flows out of header and footer*/
.clearfix::after, .clearfix::before {
	content: "";
	clear: both;
	display: table;
  }



/***************************************************
**** Typography (fonts, sizes, line, hights...) ****
***************************************************/

h1, h2, h3, h4, h5, h6 {color:var(--primary); font-weight: bold; margin-top: 1.33em; margin-bottom: 0.5em;}
h2 {margin-top:2.1em;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, 
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {color:var(--primary);}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active,
h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {color:var(--primary); text-decoration: underline;}
h1 {font-size: 2.75rem;}
h2 {font-size: 2.25rem;}
h3 {font-size: 1.75rem;}
h4 {font-size: 1.5rem;}
h5 {font-size: 1.33rem;}
h6 {font-size: 1.25rem; color: var(--text);}




/***********************
 * Mainmenue *
 ***********************/
 
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
#navbar-mm {justify-content:center;}
nav a, nav a:hover, nav a:focus, nav a:visited {text-decoration: none;}
nav #main-menu {font-size: 1.5rem; text-transform: uppercase; }
nav #main-menu ul {margin:0; padding:0;}
nav #main-menu ul li {padding:0; margin:0;}
nav #main-menu ul li a {color: var(--primary); padding:0.5em 1.25em;}
nav #main-menu ul li a:hover, nav #main-menu ul li a:active {border-bottom: 5px solid var(--primary);}
nav #main-menu ul li.current-menu-item a  {border-bottom: 5px solid var(--secondary); color: var(--secondary);}

/* mobile Menue */
@media (max-width: 991px) {
	nav #main-menu ul {padding-top: 0.5em;}
	nav #main-menu ul li {display: block; padding: 0.5em 0; border-top:1px solid var(--light-grey);}
	nav #main-menu ul li a {padding: 0.15em 0;} 
} 

/***********************
 * Content Navi *
 ***********************/
 nav.contentnavi ul li {border-right:1px solid var(--dark-grey); margin-right: 0; padding: 0 0.5em;}
 nav.contentnavi ul li:last-of-type {border-right:none;}
 nav.contentnavi ul li:first-of-type {padding-left: 0;}
 nav.contentnavi a:hover,  nav.contentnavi a:active {text-decoration: underline;} 

/***********************
 * Content *
 ***********************/

 img {height:100%;}

 ul, ol {padding-left:1em; }
 ul li {list-style-type: square;}
 ul li, ol li {margin-bottom: .5em;}
 ul li::marker, ol li::marker {color: var(--secondary); font-size: 1.3em;  }

 @media (min-width: 991px) {
	  .wp-block-columns.reverse {flex-direction: row-reverse;}
	  
 }

.wp-block-cover {min-height:300px;}

a.wp-block-button__link {
	font-size: 1em;
	border-radius: 0.5em;
	background-color: var(--secondary);
	color: var(--bg-color);
	border:none;
	padding:.55em .85em;
}
a.wp-block-button__link:hover, 
a.wp-block-button__link:active, 
a.wp-block-button__link:focus {background-color: var(--secondary-light); text-decoration: underline; color:var(--text-dark)} 

.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color), 
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
.is-style-outline a.wp-block-button__link {
	border:2px solid var(--secondary);
	background:transparent;
	color:var(--secondary);
	padding:.5em 1.33em;
}
.is-style-outline a.wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color):hover, 
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover, 
.is-style-outline a.wp-block-button__link:active, 
.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color):active, 
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):active,
.is-style-outline a.wp-block-button__link:focus 
.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color):focus, 
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):focus {border: 2px solid var(--primary)!important; text-decoration: underline; color:var(--primary)!important;} 

.wp-block-buttons {margin-bottom: 3em;}

/* Align Wide and Full with layouts on 100% */

.wrapper-full-width h1.entry-title,
.wrapper-full-width .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 890px;
	margin-left:auto;
	margin-right:auto;
}

@media (max-width: 991px) {
	.alignfull {margin: 0 -2em; padding: 0 2em;}
}

/*.alignwide {max-width:1200px; margin-left:auto; margin-right:auto;}
@media (max-width: 1280px) {
	.wp-block-columns.alignwide {margin: 0 2em;}
}*/

/* Align Full 2 colls image and text corrections 

.wp-block-columns.alignfull {margin-bottom: 0; }
.wp-block-column {align-self: center;}

.wp-block-column:not(:first-child) {
    margin-left: 0px;
}	
.wp-block-column > * {margin-left: 3rem; margin-right: 3rem;}
.wp-block-column h3 {margin-top:1em;}
.wp-block-column .wp-block-getwid-images-slider {margin:0;}*/
.wp-block-columns.alignwide,
.wp-block-columns.alignfull {margin:0 1em;}

@media (min-width: 992px) and (max-width: 1200px) {
	.wp-block-column, .wp-block-media-text__content {font-size: 0.95rem; line-height: 1.4rem;}
}

@media (min-width: 0px) and (max-width: 991px) {
	.wp-block-columns {flex-wrap:wrap !important; margin-bottom:3em!important;}
	.wp-block-column, .wp-block-column:not(:only-child) {flex-basis:100%; margin-left:0 !important;}
}
@media (min-width:600px) and (max-width:781px) {
	.wp-block-column:not(:only-child) {
		flex-basis: 100% !important;
		flex-grow: 0;
	}
}


.wp-block-column > .wp-block-image {margin-top:2em;}

/* summary / accordeon */
summary {
	font-size: 1.1em;
	background-color: var(--secondary-light);
	padding:0.5em;
	margin-bottom: .2em;
	border-radius: .5em 0.5em 0.25em 0.25em;
}
summary::marker {color: var(--secondary);}
summary + * {margin: 1em 0;}
summary + .wp-block-media-text > .wp-block-media-text__content {padding: 0 8% 0 1.75em;}

/* Tabels */
table {
    border: 0.1rem solid var(--grey);
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    margin: 1rem 0;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
}

th, td {
    border: 0.1rem solid var(--grey);
    line-height: 1.4;
    margin: 0;
    overflow: visible;
    padding: 0.5em;
}	

th {
    font-weight: bold;
}


/* Contactform 7 */
input.wpcf7-form-control:not(.wpcf7-submit),
textarea.wpcf7-form-control {display: block; width: 100%;}

/***********************
* Blog *
***********************/
.blog h1 {margin-top:.5em;}
.blog article:first-of-type h2.entry-title {margin-top:1em;}
.widget h3.wp-block-heading {margin-top:.25em;}

:root :where(.wp-block-latest-posts.wp-block-latest-posts__list) {padding-left: 1em;}
.wp-block-search__input {border-radius: 0.5em;}

footer.entry-meta {background:var(--bg-darker); padding:0.5em; margin:1em 0;}
footer.entry-meta p {margin-bottom: 0;}
#sidebar-blog .widget {	background: var(--light-grey); padding:0.75em; margin-top: 2em; border-radius: 0.5em;}
#sidebar-blog .widget:first-of-type {margin-top: 0;}

/***********************
* Comments *
***********************/
#comments ul {padding:0;}
#comments ul li {list-style: none; margin-top:1em;}
#comments ul li ul {padding-left: 3em;}


/***********************
* Utilitys *
***********************/
.mt-0 {margin-top:0!important;}
.mt-2 {margin-top:2em!important;}
.mt-4 {margin-top:4em!important;}

.mb-0 {margin-bottom:0!important;}


.bg-primary-light {
	padding-top:.1em; padding-bottom: 3em; padding-left: 2em; padding-right: 2em;
	margin-top: 3em;
	background-color: var(--primary-light);
	color:var(--text-dark);
}
.bg-primary-light h1, .bg-primary-light h2, .bg-primary-light h3, .bg-primary-light h4, .bg-primary-light h5   {
	color:var(--text-dark);
}

.bg-grey {
	padding-top:.2em; padding-bottom: 2em; padding-left: 2em; padding-right: 2em;
	margin-top: 3em;
	background-color: var(--light-grey);
}

.text-white {color:var(--bg-color)!important;}
.text-dark {color:var(--text)!important;}



  /***********************
 * Colours *
 ***********************/
 :root {
	--bg-color: #fff;
	--bg-darker: #eee;
	--primary-org: #384B80;
	--primary: #384B80;
	--primary-light: #869BCA;
	--secondary: #427056;
	--secondary-light:#B1D2C1;
	--text: #333;
	--text-dark: #030303;
	--text-light: #fff;
	--dark-grey: #333;
	--grey: #8B877B;
	--light-grey: #E0E7EF;
  }