/*
Theme Name: Pit Theme - Child blaues Haus
Theme URI: http://www.pitteam.ch
Author: pit team GmbH
Author URI: http://www.pitteam.ch
Template: pit-theme
Description: Child Theme f&uuml;r Tierarztpraxis im Blauen Haus. <br>Erstellung: April 2021. <br>&Uuml;berarbeitung April 2021.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: pit-theme-child-blaues-haus
*/




/* Ab hier Styles fuer das Child Theme */




/*--------------------------------------------------------------
	Header Reihenfolge aendern
----------------------------------------------------------------*/

		@media (min-width:782px) {
		/* ab Medium */
			.wrapper {
				display: -webkit-box;  display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* or inline-flex */
				flex-direction: column;
				}
			.wrapper > * {
				order: 10;
				}
			.wrapper > #headerstart,
			.wrapper > .slider-wrap {
				order: 1;
				}
			.wrapper > #navbar {
				order: 2;
				}
			.wrapper > #scroll-to-start {
				order: 4;
				}
			}




/*--------------------------------------------------------------
	HEADERSTART & HEADERBILD
----------------------------------------------------------------*/

/* --- Abstand und Verlauf ueber Beitragsbild --- */
#headerstart:not(.with-img) {
	padding: 3rem 0 0rem 0;
	background-color: white;
	}

		@media (min-width:782px) {
		/* ab Medium */
			#headerstart:not(.with-img) {
				padding: 5.5rem 0 0rem 0;
				}
			}

		@media (min-width:1210px) {
		/* ab Large */
			#headerstart:not(.with-img) {
				padding: 7.0rem 0 0rem 0;
				}
			}

		@media (min-width:1760px) {
		/* ab X-Large */
			#headerstart:not(.with-img) {
				padding: 8rem 0 0rem 0;
				}
			}


/* --- Headerstart Home --- */
.vheight-custom {
	height: 75vh !important; /* Use vh as a fallback for browsers that do not support Custom Properties */
	height: calc(var(--vh, 1vh) * 75) !important;
	}

		@media (min-width:782px) {
		/* ab Medium */
			.vheight-custom { 
				height: 83vh !important; /* Use vh as a fallback for browsers that do not support Custom Properties */
				height: calc(var(--vh, 1vh) * 100 - 5rem) !important;
				}
			}
		@media (min-width:1210px) {
		/* ab Large */
			.vheight-custom { 
				height: calc(var(--vh, 1vh) * 100 - 6rem) !important;
				}
			}
		@media (min-width:1760px) {
		/* ab X-Large */
			.vheight-custom { 
				height: calc(var(--vh, 1vh) * 100 - 6rem) !important;
				}
			}


/* --- Headerbild Hoehe aendern & Verlauf hinzu --- */
.with-img .headerimg { height: 28rem; }

		@media (max-width:1100px) {
		/* bis Medium */
			.with-img .headerimg { height: 22rem; }
		}
		@media (max-width:781px) {
		/* bis Medium */
			.with-img .headerimg { height: 45vw; margin-top: 3rem; }
		}
		@media (min-width:782px) {
		/* ab Medium */
			.with-img .headerimg:after {
				content: '';
				position: absolute;
				width: 100%;
				top: 0;
				right: 0;
				bottom: 0;
			background: rgb(229,241,247);
			background: linear-gradient(45deg, rgba(229,241,247,1) 15%, rgba(229,241,247,0) 50%);
				}
		}
		@media (min-width:1210px) {
		/* ab Large */
			.with-img .headerimg {
				width: 100%;
				max-width: 1100px;
				background-size: 1100px auto;
				background-position: center right;
				background-color: rgb(229,241,247);
				position: relative;
				left: 50%;
				transform: translate(-50%, 0%);
				}
			.with-img .headerimg:after {
				width: 100%;
				max-width: 1100px;
				right: 0;
				}
			}


/* --- Hintergrundfarbe Headerflaeche --- */
.with-img,
.slider-wrap,
#headerstart:not(.with-img) {
	background: var(--color-accent);
	background: rgb(229,241,247) linear-gradient(45deg, rgb(255,255,255) 0%, rgb(229,241,247) 25%, rgb(0,113,180) 100%) repeat scroll 0% 0%;
	}

		@media (max-width:781px) {
		/* bis Medium */
			.slider-wrap { margin-top: 3rem; }
		}
		@media (min-width:1210px) {
		/* ab Large */
			#headerstart:not(.with-img) {
				background: rgb(229,241,247) linear-gradient(45deg, rgb(255,255,255) 0%, rgb(229,241,247) 40%, rgb(0,113,180) 100%) repeat scroll 0% 0%;
				}
			}


/* --- Linie unterhalb Headerflaeche --- */
.with-img,
.slider-wrap,
#headerstart:not(.with-img) {
	border-bottom: 2.5px solid black;
	}




/* ----------------------------------
	HEADERTEXT statisches Bild & Homeslider
---------------------------------- */

.headertext-home.headertext-full .wp-block-cover__inner-container {
	width: 85% !important;
	max-width: 85% !important;
	margin-top: var(--spacer-text) !important;
	margin-bottom: var(--spacer-text) !important;
	}

		@media not print and (max-width:781px) {
			.headertext-home.headertext-full .wp-block-cover__inner-container {
				margin-right: auto !important;
				margin-left: auto !important;
				}
			}
		@media (min-width:782px) {
			.headertext-home.headertext-full .wp-block-cover__inner-container {
				width: 70% !important;
				max-width: 600px !important;
				}
			}
		@media (min-width:1210px) {
			.headertext-home.headertext-full .wp-block-cover__inner-container {
				width: 50% !important;
				max-width: 600px !important;
				}
			.headertext-home.headertext-full .wp-block-cover.is-style-height-full {
				padding: var(--spacer-big) calc(50vw - 550px) !important;
				}
			}


/* --- Textdefinition --- */
.headertext-home h1, .headertext-home h2, 
.headertext-home h3, .headertext-home h4, 
.headertext-home h5, .headertext-home h6 {
	line-height: 1.55em;
	}


/* --- Textdefinition --- */
.headertext-home strong {
	letter-spacing: 0;
	}


/* --- Button --- */
.headertext-home .wp-block-buttons .wp-block-button__link:hover {
	background-color: white !important;
	color: var(--color-accent) !important;
	text-shadow: none !important;
	box-shadow: none !important;
	}
.headertext-home.headertext-full .is-style-outline .wp-block-button__link {
	background-color: rgba(255,255,255,0) !important;
	}
.headertext-home.headertext-full .is-style-outline .wp-block-button__link:hover {
	background-color: rgba(255,255,255,1) !important;
	border: 1px solid white !important;
	box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
	}


/* --- Schattierung p & Buttons --- */
.headertext-home p:not(.has-background) {
	text-shadow: 1px 1px 0px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,0.3);
	}
.headertext-home p span.tadv-background-color {
	text-shadow: none;
	}
.headertext-home.headertext-full .wp-block-buttons .has-color-white-color:not(.has-background) {
	text-shadow: 1px 1px 0px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,0.3), 0px 0px 15px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 4px rgba(0,0,0,0.1), inset 0px 0px 4px rgba(0,0,0,0.1);
	}


/* --- Header-Home Verlauf --- */
.headertext-home.headertext-full .wp-block-cover.has-background-dim .wp-block-cover__gradient-background, 
.headertext-home.headertext-full .wp-block-cover.has-background-dim:not(.has-background-gradient)::before {
	opacity: 1 !important;
	}

		@media (orientation:portrait) {
			.has-color-header-home-gradient-background {
				background: rgba(255,255,255,0) linear-gradient(10deg, rgba(229,241,247,0.95) 5%, rgba(229,241,247,0) 35%, rgba(0,113,180,0) 60%, rgba(0,113,180,0.95) 85%) repeat scroll 0% 0% !important;
				}
			}




/* ----------------------------------
	Scroll to Start > Home
---------------------------------- */

		@media (min-width:782px) {
		/* ab Medium */
				#scroll-to-start {
					height: 0;
					margin-top: 0;
				}
			}
		@media (min-width:1210px) {
		/* ab Large */
				#scroll-to-start {
					height: 0;
					margin-top: 0;
				}
			}




/* ----------------------------------
	STICKY NAVBAR - neu mit Balkenanimation
---------------------------------- */

#navbar:before {
	background-color: var(--color-second-light) !important;
	opacity: 1;
	height: 100%;
	width: 90%;
	max-width: 1100px;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
	}
#navbar.header-change:before {
	background-color: var(--color-second-light) !important;
	opacity: 1;
	height: 100%;
	width: 100%;
	max-width: 100%;
	}

		@media (max-width:781px) {
		/* bis Medium */
			#navbar:before {
				background: var(--color-general-bg) !important;
				opacity: 1 !important;
				width: 100%;
				max-width: 100%;
				}
			#navbar.header-change:before {
				background: var(--color-general-bg) !important;
				opacity: 1 !important;
				}
			}
		@media (min-width:782px) {
		/* ab Medium */
			#navbar, 
			#navbar.navbar-home,
			#navbar.header-change {
				margin-top: -1.5rem;
				}
			.nav > .nav-links {
				position: relative;
				z-index: 10;
				right: 0;
				}
			}
		@media (min-width:1210px) {
		/* ab Large */
			#navbar, 
			#navbar.navbar-home,
			#navbar.header-change {
				margin-top: -2rem;
				}
			}




/* ----------------------------------
	RESPONSIVE NAVBAR AUFBAU
---------------------------------- */

/* --- neue Position & Schattierung dahinter --- */

.nav-title {
	z-index: 2;
	}

.nav-title img {
	position: absolute;
	top: 10% !important;
	bottom: 0% !important;
	width: 100%;
	height: 90% !important;
	object-fit: contain;
	object-position: 0 0;
	}

		@media (min-width:782px) {
			.nav > .nav-header {
				position: absolute;
				top: 0;
				transform: translate(0%, -100%);
				overflow: visible;
				}
			}

.nav > .nav-header > .nav-title,
.navbar-home .nav > .nav-header > .nav-title,
#navbar.header-change .nav > .nav-header > .nav-title {
	height: 4rem;
	line-height: 4rem;
	}
.navbar-home .nav > .nav-header > .nav-title {
	height: 6rem;
	line-height: 6rem;
	}

		@media (max-width:781px) {
			.nav > .nav-header > .nav-title,
			.navbar-home .nav > .nav-header > .nav-title,
			#navbar.header-change .nav > .nav-header > .nav-title {
				height: 3.0rem;
				line-height: 3.0rem;
				}
			.navbar-home .nav > .nav-header > .nav-title {
				height: 4rem;
				line-height: 4rem;
				}
			}

		@media (min-width:782px) {
			.nav-title {
				min-width: 15rem;
				}
			#navbar .hauptnav {
				height: initial;
				}
			#navbar.navbar-home:after {
				width: 15rem;
				height: 7.5rem;
				left: 5%;
				}
			#navbar:after,
			#navbar.header-change:after {
				content: "";
				width: 15rem;
				height: 7.5rem;
				display: block;
				position: absolute;
				left: 5%;
				bottom: calc(1rem + 2px);
				transform: translate(-20%, 0%);
				background-image: url(assets/img/aufhellung.png);
				background-size: 100% auto;
				background-position: center top;
				background-repeat: no-repeat;
				opacity: 1;
				z-index: -1;
				}
			}

		@media (min-width:1210px) {
			.nav {
				padding: 0 !important;
				width: 90% !important;
				max-width: 1100px !important;
				}
			#navbar.navbar-home:after {
				width: 18rem;
				height: 9rem;
				left: calc(50% - 550px);
				}
			#navbar:after,
			#navbar.header-change:after {
				width: 13.5rem;
				height: 6.75rem;
				left: calc(50% - 550px);
				}
			.nav > .nav-header > .nav-title,
			.navbar-home .nav > .nav-header > .nav-title,
			#navbar.header-change .nav > .nav-header > .nav-title {
				height: 5rem;
				line-height: 5rem;
				}
			.navbar-home .nav > .nav-header > .nav-title {
				height: 7rem;
				line-height: 7rem;
				}
			}

		@media (min-width:1760px) {
			#navbar.navbar-home:after {
				width: 21rem;
				height: 10.5rem;
				left: calc(50% - 550px);
				}
			#navbar:after,
			#navbar.header-change:after {
				width: 16rem;
				height: 8rem;
				left: calc(50% - 550px);
				}
			.nav > .nav-header > .nav-title,
			.navbar-home .nav > .nav-header > .nav-title,
			#navbar.header-change .nav > .nav-header > .nav-title {
				height: 6rem;
				line-height: 6rem;
				}
			.navbar-home .nav > .nav-header > .nav-title {
				height: 8rem;
				line-height: 8rem;
				}
			}




/* --------------------------------------------------------------------
	MOBILE-NAVIGATION 
	mit Burger-Menu
-------------------------------------------------------------------- */

		@media (max-width:781px) {

			#nav-check:checked ~ .nav-links {
				background-color: var(--color-second) !important;
				}
			.navbar-home .nav > #nav-check:checked ~ .nav-header:before {
				background: var(--color-general-bg);
				}
			.navbar-home .nav > .nav-btn > label {
				padding: 1.3rem 1.2rem 1.1rem 1.2rem;
				}
			.navbar-home .nav > #nav-check:checked ~ .nav-header:before {
				height: 4rem;
				}
			.navbar-home .nav > #nav-check:checked ~ .nav-links {
				height: calc(100vh - 4rem);
				height: calc(var(--vh, 1vh) * 100 - 4rem);
				}
			.navbar-home.header-change .nav > #nav-check:checked ~ .nav-links {
				height: calc(100vh - 3rem);
				height: calc(var(--vh, 1vh) * 100 - 3rem);
				}
			.navbar-home .nav > .nav-links {
				top: 4rem;
				}
			.navbar-transparent .nav > #nav-check:checked ~ .nav-btn > label > span:first-of-type, 
			.navbar-transparent .nav > #nav-check:checked ~ .nav-btn > label > span:last-of-type {
				border-color: var(--color-accent);
				}
			.nav > .nav-btn > label > span {
				border-top: 3px solid var(--color-accent);
				}
			#navbar.header-change .nav > #nav-check:not(checked) ~ .nav-btn > label > span {
				border-color: var(--color-accent);
				}
					/* --- farbwechsel Burgermenu --- */
					.navbar-transparent .nav > .nav-btn > label > span { 
						border-top: 3px solid var(--color-accent);
						}
					.header-change .nav > .nav-btn > label > span { 
						border-top: 3px solid var(--color-accent);
						}
			}



/* --------------------------------------------------------------------
	DESKTOP-NAVIGATION
	mit aufklappbarer Subnav
-------------------------------------------------------------------- */

		@media (min-width:782px) {
			#navbar {
				position: sticky !important;
				top: 0 !important;
				}
			.nav > .nav-links {
				background-color: var(--color-second-light);
				}
			nav.hauptnav ul a {
				line-height: 2.5rem;
				padding: 0 0.9rem 0 0.9rem;
				}
			nav.hauptnav ul ul {
				top: 2.5rem;
				-webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.05), inset 0px 7px 10px 0px rgba(0,0,0,0.07);
				-moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.05), inset 0px 7px 10px 0px rgba(0,0,0,0.07);
				box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.05), inset 0px 7px 10px 0px rgba(0,0,0,0.07);
				}
			}

		@media (min-width:1210px) {
			nav.hauptnav ul a {
				line-height: 2.9rem;
				padding: 0 1.4rem 0.1rem 1.4rem;
				}
			nav.hauptnav ul ul {
				top: 3.0rem;
				}
			}

		@media (min-width:1760px) {
			nav.hauptnav ul a {
				font-size: 1.05em;
				}
			}


/* --- FARBEN --- */
		@media (min-width:782px) {
		/* ab Medium */
			nav.hauptnav .menu > li {
				border-right: 1px solid var(--color-second-light);
				}
			nav.hauptnav .menu > li:last-child {
				border-right: none;
				}
			nav.hauptnav .menu > li:hover {
				position: relative;
				background-color: var(--color-accent);
				}
			nav.hauptnav .menu > li:hover::after {
				content: '';
				height: 10%;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				border-bottom: 2.5px solid black;
				}
			nav.hauptnav .sub-menu > li + li {
				margin-top: 1px;
				}
			
			/* Rollover fuer Hauptnavig */
			nav.hauptnav li:hover > a,
			nav.hauptnav a:focus {
				color: var(--color-nav-color-link);
				}
			/* Aktiver Zustand der Hauptnavigations-Elemente */
			/* Die definierten Elemente muessen auch in der Subnavigaton aufgefuehrt werden, damit nichts uebersteuert wird. */
			nav.hauptnav .menu > li.current_page_item > a,
			nav.hauptnav .menu > li.current_page_ancestor > a,
			nav.hauptnav .menu > li.current_page_item > a, 
			nav.hauptnav .menu > li.current-page-ancestor > a,
			nav.hauptnav .menu > li.current-menu-item > a, 
			nav.hauptnav .menu > li.current-menu-ancestor > a,
			nav.hauptnav .menu > li.current-menu-parent > a,
			nav.hauptnav .menu > li.current-post-parent > a,
			nav.hauptnav .menu > li.current-category-ancestor > a {
				background-color: var(--color-accent);
				}
			/* Aktiver Zustand der Subnavigations-Elemente */
			/* Die definierten Elemente muessen auch in der Hauptnavigaton aufgefuehrt werden, damit nichts uebersteuert wird. */
			nav.hauptnav ul ul .current_page_item > a,
			nav.hauptnav ul ul .current_page_ancestor > a,
			nav.hauptnav ul ul li.current_page_item > a, 
			nav.hauptnav ul ul li.current-page-ancestor > a,
			nav.hauptnav ul ul li.current-menu-item > a, 
			nav.hauptnav ul ul li.current-menu-ancestor > a,
			nav.hauptnav ul ul li.current-menu-parent > a,
			nav.hauptnav ul ul li.current-post-parent > a,
			nav.hauptnav ul ul li.current-category-ancestor > a {
				background-color: var(--color-subnav-hover);
				}
			}




/* -------------------------------------------------------------------------- */
/*	Main-Menu Zusatz-Styles fuer die Kategorien
/* -------------------------------------------------------------------------- */

body.is-single-praxis .menu-item-home > a,
body.is-single-grosstiere .menu-item-home > a,
body.is-single-kleintiere .menu-item-home > a {
	color: var(--color-nav-start-txt) !important;
	font-weight: var(--font-general-regular) !important;
	}

		@media (min-width:782px) {
			body.is-single-praxis .praxis-main > a,
			body.is-single-grosstiere .grosstiere-main > a,
			body.is-single-kleintiere .kleintiere-main > a {
				background-color: var(--color-accent) !important;
				font-weight: var(--font-general-bold);
				}
			body.is-single-praxis .menu-item-home > a,
			body.is-single-grosstiere .menu-item-home > a,
			body.is-single-kleintiere .menu-item-home > a {
				background-color: transparent !important;
				font-weight: var(--font-general-regular) !important;
				}
			}




/* -------------------------------------------------------------------------- */
/*	Toggle Search
/* -------------------------------------------------------------------------- */

/* --- Such-Icon im Menu --- */
		@media (min-width:782px) {
		/* ab Medium */
			#navbar li.menu-search {
				float: right;
				}
			#navbar .search-icon {
				height: 2.5rem;
				}
			#toggle-search {
				padding: 0 0.9rem 0 0.9rem;
				}
			}

		@media (min-width:1210px) {
		/* ab Large */
			#navbar .search-icon {
				height: 3.0rem;
				}
			#toggle-search {
				padding: 0 1.2rem 0 1.2rem;
				}
			}

		@media (min-width:1760px) {
		/* ab Large */
			}




/* -------------------------------------------------------------------------- */
/* 	ARCHIV
/* -------------------------------------------------------------------------- */

		@media (min-width:782px) {
			.theme-archive.archive-list .archive-item a:before {
				border-left: none;
				}
			.theme-archive.archive-list .archive-item:hover a:before {
				border-left: none;
				}
			.theme-archive.archive-grid .archive-item a:before {
				border-top: none;
				}
			.theme-archive.archive-grid .archive-item:hover a:before {
				border-top: none;
				}
			}




/* ----------------------------------
	Footer Suchfeld
---------------------------------- */

.footer input[type="text"], 
.footer input[type="search"] {
	border: 1px solid #777777 !important;
	color: var(--color-footer-txt) !important;
	background-color: #777777;
	}
.footer .searchform #searchsubmit {
	background-image: url(assets/img/icon-search-white.svg) !important;
	border: 1px solid #777777 !important;
	border-left: none !important;
	}




/* ----------------------------------
	PLUGIN Accordion Block
---------------------------------- */

.c-accordion__title--button {
	background-color: var(--color-accent-light);
	color: var(--color-accent);
	display: inline;
	width: auto;
	padding: 0 25px 0 10px;
	}
.c-accordion__title--button:focus, 
.c-accordion__title--button:hover {
	background-color: var(--color-accent);
	color: white;
	}

.c-accordion__title::after {
	color: inherit;
	font-weight: inherit;
	right: 10px;
	}

.wp-block-pb-accordion-item p.has-background {
	width: calc(100% - 2em);
	max-width: calc(1100px - 2em);
	}




.wp-block-latest-posts__post-excerpt:after {
	content: 'weiterlesen';
	font-size: 0.9em;
	color: var(--color-accent);
	text-decoration: underline;
	margin-left: 5px;
	}
		@media (min-width:782px) {
			li:hover .wp-block-latest-posts__post-excerpt:after {
				color: black;
				}
			}