/*
Theme Name: Holzbau Mann
Description: Child theme for Avada theme
Author: Heliotronic
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.1.0
Text Domain:  Avada
*/

/* Logo */
:root {
	--mann-logo-height: clamp(60px, 6.5vw, 112px); /* old site: 87px at 1366, 112px at 1920 */
}

.fusion-logo img.fusion-standard-logo {
	height: var(--mann-logo-height) !important; /* Avada renders the logo at half size because of the retina setting */
	max-height: none;
	width: auto !important;
}

/* Menu in the same row as the logo, aligned with the logo's lower edge (as on the old site) */
@media (min-width: 1025px) {
	/* As on the old site: logo 16px from the top, the header ends above the logo's lower edge,
	   so the logo reaches into the slider / header image (14px at 1920). The menu sits 3px above
	   the header's lower edge. */
	:root {
		--mann-logo-overlap: calc(var(--mann-logo-height) * 0.125);
	}

	.fusion-header-v1 .fusion-logo {
		position: relative;
		z-index: 2;
		margin-bottom: calc(-1 * var(--mann-logo-overlap)) !important;
	}

	.fusion-header-v1 .fusion-main-menu {
		margin-top: calc(var(--mann-logo-height) + 16px - var(--mann-logo-overlap) - 54px - 3px);
	}

	/* Gap between menu items: 80px as on the old site from 1600px; narrower below so the menu
	   still fits next to the logo (about 50px at 1366px). */
	.fusion-main-menu > ul > li {
		padding-right: clamp(30px, calc(12.8vw - 125px), 80px) !important;
	}

	.fusion-main-menu > ul > li:last-child {
		padding-right: 0 !important;
	}

	.fusion-header-wrapper {
		position: relative;
		z-index: 10001;
	}

	/* Old Bootstrap container: 15px inner padding inside the 1692px width */
	@media (min-width: 1692px) {
		.fusion-header-v1 .fusion-logo {
			margin-left: 15px !important;
		}

		/* The old menu ended 158px before the right content edge */
		.fusion-header-v1 .fusion-main-menu {
			margin-right: 158px;
		}
	}

	.fusion-header,
	.fusion-header .fusion-row {
		overflow: visible !important;
	}

	/* The scrolling header keeps the logo inside */
	.fusion-is-sticky .fusion-header-v1 .fusion-logo,
	.fusion-header-wrapper.fusion-is-sticky .fusion-logo {
		margin-bottom: 16px !important;
	}

	.fusion-header-wrapper.fusion-is-sticky .fusion-main-menu {
		margin-top: calc(var(--mann-logo-height) + 32px - 54px);
	}
}

/* Bold text as on the old site (semibold 600). Avada's CSS loads later and sets "bolder",
   which on the light body text only gives 400, hence the higher specificity. */
body strong,
body b {
	font-weight: 600;
}

/* Main menu: gold bar above the active item, text stays dark */
.fusion-main-menu > ul > li.current-menu-item > a,
.fusion-main-menu > ul > li.current-menu-ancestor > a,
.fusion-main-menu > ul > li > a:hover {
	color: var(--awb-color8) !important;
}

/* Header image above the title bar, full screen width in the images' own 1920x700 ratio */
.mann-banner {
	aspect-ratio: 1920 / 700;
	min-height: 160px;
	background-size: cover;
	background-position: center;
}

/* Start page slider from edge to edge: 800px high on large screens as on the old site */
.mann-start-slider .fusion-slider-sc .slides img {
	width: 100%;
	height: min(44vw, 800px);
	object-fit: cover;
}

@media (min-width: 1421px) {
	.mann-start-slider .fusion-slider-sc .slides img {
		height: 800px;
	}
}

/* Old Bootstrap container: content 15px inside the 1692px width (same as the logo in the header).
   The 30px column gutters come from Avada's col_spacing option. */
@media (min-width: 1692px) {
	#main .fusion-fullwidth:not(.mann-start-slider) > .fusion-row {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
}

/* Paragraph spacing as in Bootstrap 3 */
#main .fusion-text p {
	margin: 0 0 10px;
}

/* Start page: intro text in 5/12 and contact in 3/12 of the width, like the old Bootstrap grid */
@media (min-width: 1025px) {
	.fusion-layout-column.mann-col-5 {
		width: 41.6667% !important;
		flex-basis: 41.6667% !important;
	}

	.fusion-layout-column.mann-col-3 {
		width: 25% !important;
		flex-basis: 25% !important;
	}
}

/* Contact block: company name like Bootstrap's .lead, address blocks 20px apart, grey mail link */
.mann-kontakt .mann-lead {
	font-size: 21px;
	font-weight: 300;
	line-height: 1.4;
}

#main .mann-kontakt p {
	margin-bottom: 20px;
}

.mann-kontakt {
	padding-top: 1px; /* old <address> blocks sat 1px lower */
}

.mann-kontakt a {
	color: var(--awb-color6);
}

.mann-kontakt a.mann-tel {
	color: inherit;
}

/* Partner logos: label line (empty in the middle column) above each, all logos on one level */
.mann-partner .fusion-text {
	margin-bottom: 0 !important;
}

.mann-partner .fusion-text p {
	height: 20px;
	margin: 0 0 10px;
	line-height: 20px;
}

.mann-partner-logo img {
	border: 1px solid var(--awb-color2);
}

.mann-partner .fusion-imageframe {
	margin-top: 1px;
}

/* Intro text starts 60px below the slider, as on the old site */
.mann-start-slider + .fusion-fullwidth {
	padding-top: 19px !important;
	padding-bottom: 0 !important;
}

/* Space below the logos as on the old site: 10px after the images, 39px to the footer
   (instead of Avada's container, column and page bottom spacing) */
.mann-start-slider + .fusion-fullwidth .fusion-layout-column,
.mann-partner {
	margin-bottom: 0 !important;
}

/* The start page was approved with Avada's former 20px below the slider column */
.mann-start-slider .fusion-layout-column {
	margin-bottom: 20px !important;
}

.mann-partner .fusion-imageframe {
	margin-bottom: 10px;
}

body.home #main {
	padding-bottom: 39px !important;
}

/* Slider dots inside the image, 16px above its lower edge: white rings, the active one filled */
/* Avada reserves 60px below the slider for the dots and stretches the slider to 100% of that */
.mann-start-slider .flexslider {
	position: relative;
	height: auto !important;
	margin-bottom: 0 !important;
}

.mann-start-slider .flex-control-nav {
	position: absolute;
	bottom: 16px;
	left: 0;
	width: 100%;
	margin: 0;
	line-height: 0;
	z-index: 5;
}

.mann-start-slider .flex-control-nav li {
	margin: 0 4px !important;
}

.mann-start-slider .flex-control-nav li a {
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
}

.mann-start-slider .flex-control-nav li a.flex-active,
.mann-start-slider .flex-control-nav li a:hover {
	background: #fff;
}

/* Breadcrumb line below the header image (old site: 11px, grey links, current page bold,
   hairline below over the full width), then the grey title bar with the uppercase title.
   Both start at the content edge: 15px inside the 1692px width, 30px from the window edge below. */
.mann-breadcrumbs {
	padding: 16px 0 19px;
	border-bottom: 1px solid #f5f5f5;
	font-size: 11px;
	line-height: 15.7px;
	color: var(--awb-color8);
}

.mann-breadcrumbs-inner,
.fusion-page-title-bar .fusion-page-title-row {
	box-sizing: border-box;
	max-width: none !important;
	padding-left: max(30px, calc((100% - 1692px) / 2 + 15px)) !important;
	padding-right: max(30px, calc((100% - 1692px) / 2 + 15px)) !important;
}

.mann-breadcrumbs a {
	color: var(--awb-color6);
}

.mann-breadcrumbs a.aktiv {
	font-weight: 800;
}

.fusion-page-title-bar {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.fusion-page-title-bar h1.entry-title {
	text-transform: uppercase !important;
	font-weight: 400;
	line-height: 24.2px !important;
	margin: 0;
}

/* Vertical claim on the start page: white 120px strip on the right, only between 1231px and 1691px (as on the old site) */
.mann-slogan {
	display: none;
}

@media (min-width: 1231px) and (max-width: 1691px) {
	.mann-slogan {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		right: 0;
		width: 120px;
		height: 100vh;
		background: var(--awb-color1);
		writing-mode: vertical-rl;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-size: 20px;
		font-weight: 600;
		color: var(--awb-color8);
		z-index: 10010; /* above Avada's sticky header */
	}

	/* Header and content stay clear of the strip; the slider runs underneath it like on the old site */
	body.home .fusion-header,
	body.home #main .fusion-fullwidth:not(.mann-start-slider) {
		padding-right: 120px !important;
	}
}

/* Slider directly below the header */
body.home #main {
	padding-top: 0 !important;
}

/* Footer like the old one: 12-column grid, logo in column 6 sitting on the line (19px above it),
   copyright from column 7, links from column 10; 11.9px text, links grey. */
.fusion-footer-copyright-area,
.fusion-copyright-content,
.fusion-copyright-notice {
	overflow: visible !important;
}

.fusion-copyright-notice {
	width: 100%;
}

.mann-footer {
	display: grid;
	grid-template-columns: 5fr 1fr 3fr 3fr;
	align-items: start;
	font-size: 11.9px;
	line-height: 17px;
	color: var(--awb-color8);
}

.mann-footer > div {
	padding: 0 15px;
}

.mann-footer a {
	color: var(--awb-color6);
}

.mann-footer-logo {
	grid-column: 2;
	height: 42px; /* the logo hangs out of its cell like on the old site; footer 73px high */
}

.mann-footer-logo img {
	position: relative;
	z-index: 2;
	width: 67px;
	height: auto;
	margin-top: -34px;
}

@media (max-width: 767px) {
	.mann-footer {
		grid-template-columns: 1fr;
		gap: 8px;
		text-align: center;
	}

	.mann-footer-logo {
		grid-column: 1;
		height: auto;
	}

	.mann-footer-logo img {
		margin-top: -50px;
	}
}

/* Referenzen: category filter as a sidebar on the left, active category in gold */
@media (min-width: 1000px) {
	.mann-referenzen .fusion-recent-works {
		display: flex;
		align-items: flex-start;
		gap: 30px;
	}

	.mann-referenzen .fusion-portfolio-wrapper {
		flex: 1;
	}
}

.mann-referenzen .fusion-filters {
	flex: 0 0 220px;
	display: block;
	margin: 0 0 30px;
	padding: 0;
	border: 0;
}

.mann-referenzen .fusion-filters .fusion-filter {
	float: none;
	display: block;
	margin: 0 0 2px;
	padding: 0;
	border: 0;
}

.mann-referenzen .fusion-filters .fusion-filter a {
	display: block;
	padding: 10px 14px;
	background: var(--awb-color2);
	color: var(--awb-color8);
	border: 0;
}

.mann-referenzen .fusion-filters .fusion-filter.fusion-active a,
.mann-referenzen .fusion-filters .fusion-filter a:hover {
	background: var(--awb-color4);
	color: var(--awb-color8);
}