/*
Theme Name: Pawthentic
Author: Christoph Adel
Author URI: https://www.pawthentic-life.de
Description: Standard Theme für Pawthentic Life
Version: 0.1
License: Only for intern Use of Pawthentic Life
License URI: ---
Tags: dogs 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: 5px; }


.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 {background: var(--bg); box-shadow: 0px 20px 19px #D8DCDF; padding:1em; margin-bottom:3.5em;}
.branding {text-align: center; padding-bottom: 1em;}
main {background: var(--bg-color); padding: 0 1em;}
@media (min-width: 991px) {
	main.wrapper-full-width {padding: 0;}
}
.branding .sitename {font-weight: bold; color:var(--primary); font-size: 2rem; margin-bottom: 0.15em;}


footer#site-footer {background:var(--dark-grey); color:var(--bg-color); padding: 3em 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;}
@media (min-width: 992px ){
#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;}

footer.entry-meta {background:var(--bg-darker); padding:0.2em; margin:1em 0;}

.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: 1em; margin-bottom: 0.5em; text-transform: uppercase;}
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.5rem;}
h2 {font-size: 2.0rem;}
h3 {font-size: 1.5rem;}
h4 {font-size: 1.25rem;}
h5 {font-size: 1rem;}
h6 {font-size: 1rem; 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");}
button:active .navbar-toggler-icon,
button:hover .navbar-toggler-icon,
button:focus .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%28255, 255, 255, 1%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; list-style: none; display: inline;}
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) {
	.navbar {padding: 0;}
    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 *
 ***********************/
 @media (min-width: 992px) {
 nav.contentnavi ul li {list-style: none; display: inline; margin-right:1em;}
 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;} 
 }
 @media (max-width: 991px) {
nav.contentnavi ul li {margin-left:1em; list-style-type: square;}
 }   
/***********************
 * Content *
 ***********************/

 img {height:100%;}

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

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

a.wp-block-button__link,
button,
.wpcf7-submit {
	font-size: 1em;
	border-radius: 0.5em;
	background-color: var(--secondary);
	color: var(--bg-color);
	border:none;
	padding:calc(.5em + 4px) calc(1.33em + 4px)
}
a.wp-block-button__link:hover, 
a.wp-block-button__link:active, 
a.wp-block-button__link:focus,
button:hover, 
button:active, 
button:focus,
.wpcf7-submit:hover, 
.wpcf7-submit:active, 
.wpcf7-submit:focus {background-color: var(--primary); text-decoration: underline; color:var(--bg-color)} 

.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;} 
@media (max-width:991px) {
.____wp-block-media-text { display: block } 
.wp-block-media-text.is-stacked-on-mobile {grid-template-columns: 100% !important;}
.wp-block-media-text > .wp-block-media-text__content {grid-column: 1; grid-row: 2;}
.wp-block-media-text > .wp-block-media-text__content {padding: 0;}
}
/* Align Wide and Full with layouts on 100% */

.wrapper-full-width .entry-header,
.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:1400px; margin-left:auto; margin-right:auto;}
@media (max-width: 1480px) {
	.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;}*/

#sidebar-blog .widget {	background: var(--light-grey); padding:0.75em; margin-top: 2em;}
#sidebar-blog .widget:first-of-type {margin-top: 0;}

@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;
	}

}	




/* 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%;}


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


 /***********************
 * Utilitys *
 ***********************/

.bg-primary-light {
	padding-top:3em; padding-bottom: 3em; padding-left: 2em; padding-right: 2em;
	background-color: var(--primary-light);
	color:var(--dark-grey);
}
.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-primary-light a, .bg-primary-light a:hover, .bg-primary-light a:visited {color:var(--secondary-dark);} 



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



  /***********************
 * Colours *
 ***********************/
 :root {
	--bg-color: #fff;
	--bg-darker: #eee;
	--primary-org: #5B7645;
	--primary: #577042;
	--primary-light: /*#A0B988*/ #CCD9BF;
	--seconday-org: #4d77a7;
	--secondary: #476C9A;
	--secondary-light: #6A9EDC;
	--secondary-dark: #3D5D85;
	--text: #4B4B4B;
	--text-dark: #050505;
	--dark-grey: #333;
	--grey: #8B877B;
	--light-grey: #efefef;
  }