/**
Theme Name: Prof. Menapace – Astra Child
Author: Gregor Tatschl | greg.tatschl@gspace.at
Author URI: http://gspace.at/
Description: Just a custom theme based on Astra.
Version: 1.0.0
License: Copyright
Text Domain: prof-menapace-astra-child
Template: astra
*/


/* ======================================================
   1. GLOBAL COLORS / BRANDING
   ====================================================== */

.pm-color-primary {
	color: #318C9D;
}

.pm-color-primary-dark {
	color: #00778c
}

.pm-color-secondary {
	color: #7BBCC8;
}




/* ======================================================
   2. NAVIGATION
   ====================================================== */

.pm-header-container nav.pm-header-nav {
	font-family: "myriad-pro-semi-condensed",sans-serif;
	font-weight: 700;
	font-size: 1.3em;
}



/* ======================================================
   2. HEADER – BASIC STRUCTURE
   ====================================================== */

/* Container */
.wp-block-uagb-container.pm-header-container {
	padding: 0;
}

.pm-header-text,
.pm-header-logo-bild,
.pm-header-title,
.pm-header-name {
	margin: 0;
	padding: 0;
}

/* Header text wrapper */
.pm-header-text {
	display: block;
}

/* Logo image */
.pm-header-logo-bild {
	min-width: 8em;
	width: auto;
	max-width: 16em;
}

/* Header subtitle */
.pm-header-container {
	font-family: "myriad-pro", sans-serif;
}


.pm-header-title {
	font-weight: 400;
	font-size: 0.8em;
	color: #7BBCC8;
}

/* Name / main title */
.pm-header-name {
	font-weight: 700;
	font-size: 1.3em;
	color: #318C9D;
	position: relative;
	top: -0.3em;
	line-height: 1em;
}

/* Portrait image on the right */
.pm-header-desktop .wp-block-cover.pm-header-foto {
	margin-right: 8vw;
	min-height: 0;
	min-width: 0;
	width: 250px;
	height: 270px;
}


/* BOTTOM LINES */

.pm-header-desktop .pm-header-bottomlines {
	margin: 0;
	width: 100%;
	height: auto;
}

.pm-header-desktop .pm-header-bottomlines .pm-header-line-top {
	height: 17px;
	background: #b4d7db;
	background: -webkit-linear-gradient(180deg, rgba(180, 215, 219, 1) 0%, rgba(180, 216, 224, 1) 34%, rgba(147, 187, 196, 1) 100%);
	background: -moz-linear-gradient(180deg, rgba(180, 215, 219, 1) 0%, rgba(180, 216, 224, 1) 34%, rgba(147, 187, 196, 1) 100%);
	background: linear-gradient(180deg, rgba(180, 215, 219, 1) 0%, rgba(180, 216, 224, 1) 34%, rgba(147, 187, 196, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#B4D7DB", endColorstr="#93BBC4", GradientType=0);
}

.pm-header-desktop .pm-header-bottomlines .pm-header-line-middle {
	height: 5px;
	background: #A8DCE6;
}

.pm-header-desktop .pm-header-bottomlines .pm-header-line-bottom {
	height: 10px;
	background: #ABD2DB;
	background: -webkit-linear-gradient(0deg, rgba(171, 210, 219, 1) 0%, rgba(168, 214, 230, 1) 50%, rgba(123, 188, 200, 1) 100%);
	background: -moz-linear-gradient(0deg, rgba(171, 210, 219, 1) 0%, rgba(168, 214, 230, 1) 50%, rgba(123, 188, 200, 1) 100%);
	background: linear-gradient(0deg, rgba(171, 210, 219, 1) 0%, rgba(168, 214, 230, 1) 50%, rgba(123, 188, 200, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ABD2DB", endColorstr="#7BBCC8", GradientType=0);
}



/* ======================================================
   3. HEADER – DESKTOP / MOBILE VISIBILITY
   ====================================================== */

.pm-header-mobile {
	visibility: visible;
	display: block;
	margin-top: 0;
}

.pm-header-desktop {
	display: none;
	background-color: white;
	overflow: visible;
	/*background-color: green; debug */
}



/* ======================================================
   4. HEADER – DESKTOP LAYOUT DETAILS
   ====================================================== */

.pm-header-desktop div h2,
.pm-header-desktop div figure,
.pm-header-desktop .wp-block-cover {
	/* border: 1px solid red; debug */
}


/* Title spacing */
.pm-header-desktop div h2 {
	margin-left: 0;
	margin-right: auto;
}

/* Image blocks */
.pm-header-desktop .wp-block-image {
	display: inline-flex;
}

.pm-header-desktop .wp-block-group {
	width: 100%;
}

/* Logo spacing */
.pm-header-desktop .wp-block-image.pm-header-logo-bild {
	width: auto;
	margin: 0;
}

.pm-header-desktop .pm-header-row-logo-title {
	margin-left: 2em;
}

/* Title positioning */
.pm-header-desktop h2 {
	width: auto;
	margin: 0;
	margin-left: 2em;
	margin-right: auto;
	float: left;
}



/* ======================================================
   5. RESPONSIVE BREAKPOINTS
   ====================================================== */

/* Phones */
@media (max-width: 599px) {
	
	header .astra-advanced-hook-78 > div:first-child{
  		display:none !important;
	}

}

/* Large phones / portrait tablets */
@media (min-width: 600px) {
	
	header .astra-advanced-hook-78 > div:first-child {
  		display:none !important;
	}
	
}

/* Landscape tablets */
@media (min-width: 768px) {
	

}

/* Laptops / desktop layout starts */
@media (min-width: 992px) {

	#page header.ast-custom-header .astra-advanced-hook-78 .pm-header-container .pm-header-desktop {
		/*visibility: visible;*/
		display: block;
		margin-top: 0;
		display:block;
		max-width:none;
		width:100vw;
		border-bottom: solid 1px #7BBCC8;
	}

	.pm-header-mobile {
		/*visibility: hidden;*/
		display:none;
		/*margin-top: -100px;*/
	}
	
	.pm-header-desktop .wp-block-cover.pm-header-foto {
		margin-right: 6vw;
	}
	.header-shrink .pm-header-desktop .wp-block-group .wp-block-cover.pm-header-foto {
		margin-right: 4vw;
	}
	
	header .astra-advanced-hook-78 > div:first-child{
  		display:block !important;
	}

}

/* Large desktops */
@media (min-width: 1200px) {
	
	.header-shrink .pm-header-desktop .wp-block-cover.pm-header-foto {
		margin-right: 12vw;
	}
}

/*Very large desktops */
@media (min-width: 1600px) {
	
	.pm-header-desktop .wp-block-cover.pm-header-foto {
		margin-right: 16vw;
	}
	
	.header-shrink .pm-header-desktop .wp-block-cover.pm-header-foto {
		margin-right: 16vw;
	}
	
}




/* ======================================================
   6. HEADER ANIMATIONS / TRANSITIONS
   ====================================================== */

.pm-header-desktop,
.pm-header-logo-bild img,
.pm-header-foto,
.pm-header-foto img,
.pm-header-title,
.pm-header-name {
	transition: transform 0.4s ease,
    	margin 0.4s ease,
    		font-size 0.4s ease;
}



/* ======================================================
   7. SHRINKING HEADER (ON SCROLL)
   ====================================================== */

/* Reduced padding */
.header-shrink .pm-header-desktop {
	padding-top: 5px;
	padding-bottom: 0px;
	background-color: white;
	height: auto;
	overflow: visible;
}

.header-shrink .pm-header-desktop .wp-block-group {
	height: auto;
}

.header-shrink .pm-header-desktop.pm-header-row-nav .pm-header-nav {
	margin:0;
	padding:0;
}

/* Logo spacing when header shrinks */
.header-shrink .pm-header-desktop .wp-block-image.pm-header-logo-bild {
	min-width: 6em;
	width: auto;
	max-width: 10em;
}

/* Smaller logo */
.header-shrink .pm-header-desktop .wp-block-image.pm-header-logo-bild img {
	height: auto;
	width: auto;
	margin: 0;
}

/* Smaller portrait */
.header-shrink .pm-header-desktop .wp-block-cover.pm-header-foto {
	margin-right: 6vw;
	min-height: 0;
	min-width: 0;
	width: 175px;
	height: 150px;
	position: relative;
	top: 1.5em;
	margin-top: -1.5em;
}

/* Smaller typography */
.header-shrink .pm-header-desktop h2 .pm-header-title {
	font-size: 0.6em;
}

.header-shrink .pm-header-desktop h2 .pm-header-name {
	font-size: 1.1em;
	line-height: 0.7em;
}

.header-shrink .pm-header-desktop h2 {
	margin-bottom: 0.2em;
}

/* Spacer adjustment */
.header-shrink .pm-header-desktop div.wp-block-spacer {
	height: 5px;
}

.pm-header-row-nav {
	margin: 0;
	
background: #d1e7eb;
background: -webkit-linear-gradient(0deg, rgba(209, 231, 235, 1) 0%, rgba(209, 231, 235, 0) 91%);
background: -moz-linear-gradient(0deg, rgba(209, 231, 235, 1) 0%, rgba(209, 231, 235, 0) 91%);
background: linear-gradient(0deg, rgba(209, 231, 235, 1) 0%, rgba(209, 231, 235, 0) 91%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#D1E7EB", endColorstr="#D1E7EB", GradientType=0);
}

.header-shrink .pm-header-bottomlines .pm-header-line-top {
	height: 8px;
}

.header-shrink .pm-header-bottomlines .pm-header-line-bottom {
	display: none;
}


/* ======================================================
   8. FOOTER
   ====================================================== */

footer {
	position: relative;
}