@use "variables";

// main: style.scss

/* Header
------------------------------*/
.site-header {
	line-height: 75px;
	position: relative;
	width: 100%;
	background: #ffffff;
	z-index: 1000;
	-webkit-transition: all 1s ease-out;
	/* Safari */
	transition: all 0.5s ease-out;
	box-shadow: 0 5px 10px 0 rgba(50, 50, 50, 0.06);

	&.header-fixed {
		top: 0px;
		left: 0px;
		position: fixed;
	}

	.custom-logo-transparent {
		display: none;
	}
}

.followWrap {
	display: block;
}

.header-full-width .container {
	max-width: auto;
	width: auto;

	@include variables.for(medium-screens) {
		padding-left: 30px;
		padding-right: 30px;
	}
}

.is-transparent {
	.followWrap {
		z-index: 99;
		width: 100%;
		background: transparent;
		position: absolute;
		top: 0px;
		display: block;
	}

	.site-header {
		background: transparent;
		position: fixed;
		top: 0px;

		&.no-sticky {
			position: absolute;
			top: auto;
		}

		&.no-scroll {
			box-shadow: none;

			.has-t-logo {
				.custom-logo-transparent {
					display: inline-block;
				}

				.custom-logo {
					display: none;
				}
			}

			#nav-toggle {
				span {
					background-color: #ffffff;

					&::before,
					&::after {
						background-color: #ffffff;
					}
				}

				&.nav-is-visible {
					span {
						background-color: transparent;
					}
				}
			}
		}

		&.header-fixed {
			background: #ffffff;

			&.no-scroll {
				background: transparent;
				box-shadow: none;
			}
		}
	}
}

@include variables.for(large-screens) {
	.is-transparent .no-scroll.site-header {
		.onepress-menu>li>a {
			color: rgba(255, 255, 255, 0.9);
		}
	}
}

.is-transparent .hero-slideshow-fullscreen .hero__content {
	@include variables.rem("padding-top", 50px);
}

.site-branding {
	float: left;
}

.site-branding {

	.site-title,
	.site-text-logo {
		margin: 0px;
		line-height: 1;
		font-family: variables.$font_heading;
		font-size: 23px;
		letter-spacing: 1px;
		text-transform: uppercase;
		color: #000000;
		display: initial;
		vertical-align: middle;
		font-weight: 600;

		&:hover {
			text-decoration: none;
		}
	}

	.site-title {
		display: inline-block;
	}

	.site-image-logo {
		display: block;
	}

	.site-logo-div {
		line-height: 75px;
	}

	.no-logo-img.has-desc,
	.has-logo-img {
		line-height: 60px;

		.site-title {
			margin-top: -5px;
			position: relative;
		}

		.site-description {
			font-size: 12px;
			line-height: 14px;
			margin-bottom: 0;
			position: relative;
			top: -15px;
			color: #000000;
		}
	}
}

.home.header-transparent .no-scroll {

	.site-brand-inner,
	.site-text-logo {
		color: #fff;
	}
}

.header-social {
	margin-left: 0px;
	float: right;
	@include variables.for(medium-screens) {
		margin-left: 10px;
	}

	@include variables.for(screens-tiny) {
		display: none;
	}

	a {
		display: block;
		height: 100%;
		float: left;
		margin-left: 0px;
		margin-top: -2px;
		color: variables.$primary;

		@include variables.for(medium-screens) {
			margin-left: 3px;
		}
		&:hover {
			color: #000000;
			transition: all 0.2s linear 0s;
		}
	}

	

	// .fa-stack {
	//     position: relative;
	//     display: inline-block;
	//     width: 2em;
	//     height: 2em;
	//     line-height: 2em;
	//     vertical-align: middle;
	// }
	.fa-stack-1x,
	.fa-stack-2x {
		position: absolute;
		left: 0;
		width: 100%;
		text-align: center;
	}

	.fa-stack-1x {
		line-height: inherit;
	}

	.fa-stack-2x {
		font-size: 2em;
	}

	.fa-inverse {
		color: #ffffff;
	}
}

.header-btn {
	float: right;
}

/* Site Navigation */
.onepress-menu,
.onepress-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

// Essential Styles
.onepress-menu {
	float: right;
	@extend .clearfix !optional;

	ul {
		position: absolute;
		display: block;
		height: 1px;
		overflow: hidden;
		opacity: 0;
		z-index: -1;
		top: 100%;
		left: 0;
		
		&.sub-ul-r {
			left: auto;
			right: 0px;
		}
	}

	ul ul {
		top: 0;
		left: 100%;
	}

	li {
		position: relative;
	}

	>li {
		float: left;
	}

	li:hover>ul,
	li.sfHover>ul {
		display: block;
		height: initial;
		overflow: initial;
		opacity: 1;
		z-index: 99;
	}

	a {
		display: block;
		position: relative;
	}
}

// Skin
.onepress-menu {
	ul {
		min-width: 12em; // allow long menu items to determine submenu width
		width: fit-content;
		max-width: 100vw;
		border: 1px solid variables.$border;
		border-top: none;
	}

	li {
		white-space: nowrap; // no need for Supersubs plugin
		*white-space: normal; // ...unless you support IE7 (let it wrap)
		
		-webkit-transition: background 0.2s;
		transition: background 0.2s;
	}

	li:hover,
	li.sfHover {
		// only transition out, not in
		-webkit-transition: none;
		transition: none;
	}

	a {
		color: #333333;
		font-family: variables.$font_heading;
		padding-left: 17px;
		padding-right: 17px;
		font-size: 13px;
		font-weight: 600;
		text-transform: uppercase;
		text-decoration: none;
		zoom: 1;
		letter-spacing: 1px;
		white-space: nowrap;

		&:hover {
			color: variables.$primary;
		}
	}

	ul li {
		line-height: 26px;
		width: fit-content;
		min-width: 100%;
		a {
			border-top: 1px solid variables.$border;
			padding: 8px 18px;
			color: #999999;
			font-size: 13px;
			text-transform: none;
			background: #ffffff;
			letter-spacing: 0;

			&:hover {
				color: variables.$primary;
			}
		}
	}

	li.onepress-current-item>a {
		color: variables.$primary;
	}

	ul li.current-menu-item>a {
		color: variables.$primary;
	}

	// Hover & Active
	>li:last-child>a {
		padding-right: 0px;
	}

	>li:hover>a {}

	// > li.current-menu-item, > li.current-menu-ancestor {
	//     > a {
	//         color: $primary;
	//     }
	// }
	>li a.menu-actived {
		color: variables.$primary;
	}

	.nav-toggle-subarrow {
		display: none;
	}
}

// Responsive Mobile Navigation
#nav-toggle {
	display: none;
	margin-left: 15px;
}

@include variables.for(screens-large) {
	.main-navigation {
		position: static;
	}

	.main-navigation .onepress-menu {
		width: 100% !important;
		display: block;
		height: 0px;
		overflow: hidden;
		background: #fff;
	}

	.onepress-menu.onepress-menu-mobile {
		position: absolute;
		top: 75px;
		right: 0;
		width: 100%;
		//background: transparent;
		z-index: 800;
		overflow: auto !important;
		border-top: 1px solid variables.$border;
		border-bottom: 1px solid variables.$border;
		.sub-menu {
			width: auto;
		}
		>li>a {
			padding: 12px 20px;
		}

		li:hover ul {
			display: none;
		}

		ul {
			box-shadow: none;
			padding-bottom: 0;
			border: none;
			position: relative;

			li:last-child {
				border-bottom: none;
			}

			li a {
				padding: 12px 35px;
				border-top: none;
				white-space: pre-line;

				&:hover {
					background: transparent;
				}
			}

			li li a {
				padding: 12px 70px;
				border-top: none;
			}

			li li li a {
				padding: 12px 105px;
			}

			ul {
				left: 0px;
			}
		}

		>li>a {
			//padding-left: 20px;
		}

		li {
			line-height: 20px;
			background: #ffffff;
			border-top: 1px solid variables.$border;
			width: 100% !important;
		}

		>li {
			&:first-child {
				border-top: 0px none;
			}
		}

		// li.current-menu-item {
		//     > a {
		//         color: $primary;
		//         background: #FFFFFF;
		//     }
		// }
		li.onepress-current-item {
			>a {
				color: variables.$primary;
			}
		}

		a {
			color: variables.$text;

			&:hover {
				color: #000000;
			}
		}

		.nav-toggle-subarrow {
			display: block;
			color: #999999;
			border-left: 1px solid variables.$border;
			font-weight: normal;
			position: absolute;
			top: 0;
			right: 0;
			cursor: pointer;
			text-align: center;
			padding: 11px 20px;
			z-index: 10;
			font-size: 22px;
		}

		.nav-toggle-dropdown>.nav-toggle-subarrow .fa-angle-down:before {
			content: "\f106" !important;
		}

		.nav-toggle-dropdown>ul {
			left: 0px;
			display: block !important;
			height: initial;
			overflow: initial;
			opacity: 1;
			z-index: inherit;
		}
	}

	#nav-toggle {
		display: block;
	}
}

// Mobile Navigation Toggle
#nav-toggle {
	float: right;
	position: relative;
	width: 35px;
	overflow: hidden;
	white-space: nowrap;
	color: transparent;

	span {
		position: absolute;
		top: 50%;
		right: 5px;
		margin-top: -2px;
		-webkit-transition: rotate 0.2s, translate 0.2s;
		-moz-transition: rotate 0.2s, translate 0.2s;
		transition: rotate 0.2s, translate 0.2s;
		display: inline-block;
		height: 3px;
		width: 24px;
		background: #000000;

		&:before {
			top: -8px;
		}

		&:after {
			top: 8px;
		}

		&:before,
		&:after {
			position: absolute;
			display: inline-block;
			height: 3px;
			width: 24px;
			background: #000000;
			content: "";
			right: 0;
			-webkit-transform: translateZ(0);
			-moz-transform: translateZ(0);
			-ms-transform: translateZ(0);
			-o-transform: translateZ(0);
			transform: translateZ(0);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			-webkit-transform-origin: 0% 50%;
			-moz-transform-origin: 0% 50%;
			-ms-transform-origin: 0% 50%;
			-o-transform-origin: 0% 50%;
			transform-origin: 0% 50%;
			-webkit-transition: -webkit-transform 0.2s;
			-moz-transition: -moz-transform 0.2s;
			transition: transform 0.2s;
		}
	}
}

#nav-toggle.nav-is-visible span {
	background: transparent;

	&:before {
		-webkit-transform: translateX(4px) translateY(-1px) rotate(45deg);
		-moz-transform: translateX(4px) translateY(-1px) rotate(45deg);
		-ms-transform: translateX(4px) translateY(-1px) rotate(45deg);
		-o-transform: translateX(4px) translateY(-1px) rotate(45deg);
		transform: translateX(4px) translateY(-1px) rotate(45deg);
	}

	&:after {
		-webkit-transform: translateX(4px) translateY(0px) rotate(-45deg);
		-moz-transform: translateX(4px) translateY(0px) rotate(-45deg);
		-ms-transform: translateX(4px) translateY(0px) rotate(-45deg);
		-o-transform: translateX(4px) translateY(0px) rotate(-45deg);
		transform: translateX(4px) translateY(0px) rotate(-45deg);
	}

	&:before,
	&:after {
		background: #000000;
	}
}

/* Content
------------------------------*/
.site-content {
	border-top: 1px solid variables.$border;
	margin-top: -1px;
	//padding-top: 74px;
}

.site-content.no-border {
	border-top: none;
}

.blog .site-content,
.tax-portfolio_cat .site-content,
.single-post .site-content,
.hiding-page-title .site-content {
	margin-top: 0;
}

.page-header {
	padding: 30px 0px;
	border-top: 1px solid variables.$border;
	background: #f8f9f9;
	border-bottom: 1px solid variables.$border;

	position: relative;

	&:before {
		position: absolute;
		top: 0px;
		bottom: 0;
		left: 0;
		width: 100%;
		display: block;
		content: " ";
	}

	.entry-title,
	.page-title {
		margin-bottom: 0px;
		font-size: 24px;
		font-weight: 600;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	p {
		margin: 6px 0px 0px 0px;
	}

	&.page--cover {
		position: relative;
		padding: 8% 0px;
		text-align: center;
		border-top: 0 none;
		border-bottom: 0 none;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;

		&:before {
			position: absolute;
			top: 0px;
			bottom: 0;
			left: 0;
			width: 100%;
			display: block;
			background: rgba(0, 0, 0, 0.3);
			content: " ";
		}

		.entry-title {
			font-size: 2.5rem;
			font-weight: 800;
			color: #ffffff;
		}

		.entry-tagline {
			color: #ffffff;
			font-style: italic;
			font-weight: 300;

			@include variables.for(large-screens) {
				font-size: 20px;
			}

			@include variables.for(screens-medium) {
				font-size: 18px;
			}

			@include variables.for(screens-small) {
				font-size: 16px;
			}
		}

		&.is-t-above {
			.container {
				margin-top: 30px;
			}
		}
	}
}

/* Footer
------------------------------*/
.site-footer {
	background: #111111;
	color: #bbbbbb;
	font-size: 14px;

	a {
		color: variables.$primary;

		&:hover {}
	}

	.footer-connect {
		padding: 90px 0px;
		@include variables.rem("padding", 80px 0px);
		text-align: center;

		@include variables.for(screens-medium) {
			//@include rem('padding', 40px 0px);
		}

		@include variables.media-breakpoint-down(sm) {
			.footer-subscribe {
				margin-bottom: 40px;
			}
		}

		.follow-heading {
			color: #ffffff;
			margin-bottom: 20px;
			letter-spacing: 0.8px;
		}

		.subs_input {
			background-color: rgba(255, 255, 255, 0.145);
			color: #cccccc;
			border-bottom: none;
			box-shadow: none;
			padding: 12px 15px 12px;
			border-radius: 2px;
			width: 60%;
			font-size: 13px;

			&:focus {
				border: none;
			}

			@include variables.for(screens-large) {
				width: 100%;
				margin-bottom: 4px;
			}

			@include variables.for(screens-medium) {
				width: 70%;
				margin-bottom: 4px;
			}

			@include variables.for(screens-small) {
				width: 100%;
				margin-bottom: 4px;
			}
		}

		.subs-button {
			margin: 0px;
			position: relative;
			top: 0px;
			padding: 16px 23px 16px;

			@include variables.for(screens-large) {
				width: 100%;
			}

			@include variables.for(screens-medium) {
				width: 70%;
			}

			@include variables.for(screens-small) {
				width: 100%;
			}
		}

		input[type="text"]:focus {
			border: none !important;
		}
	}

	.footer-social {
		text-align: center;

		a {
			font-size: 30px;
			margin: 0px 13px;
			color: #ffffff;

			&:hover {
				color: variables.$primary;
			}
		}
	}

	.site-info {
		position: relative;
		text-align: center;
		padding: 35px 0px;
		background: #222222;
		font-weight: 500;
		color: #bbbbbb;

		a {
			color: #dddddd;

			&:hover {
				text-decoration: underline;
			}
		}

		.container {
			position: initial;
		}
	}

	.btt a {
		border-radius: 0px 20px 0 0;
		color: #999999;
		background: #222222;
		display: block;
		font-size: 30px;
		height: 50px;
		line-height: 50px;
		margin: auto;
		position: absolute;
		right: 60px;
		top: -25px;
		transition: all 0.2s linear 0s;
		width: 50px;
		z-index: 99;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);

		&:hover {
			color: variables.$primary;
		}

		i {
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			margin-left: 3px;
		}

		@include variables.for(screens-medium) {
			right: 0;
			left: 0;
		}
	}
}