/*
 * lsx-blog-customizer.css
 */

@import 'include-media';
@import 'customizer-blog-body-colours';
@import 'customizer-blog-banner-colours';

.widget.lsx-blog-customizer-posts {
	.tagline {
		& + .lsx-blog-customizer-posts-wrapper {
			margin-top: 0;
		}
		& + .lsx-blog-customizer-posts-slider {
			margin-top: 0;
		}
	}

	.lsx-blog-customizer-posts-archive-link-wrap {
		position: relative;
		margin-top: 6rem;
		overflow: hidden;
	}

	.lsx-blog-customizer-posts-archive-link {
		display: inline-block;
		position: relative;

		&:before,
		&:after {
			content: '';
			display: block;
			height: 2px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 999rem;
		}

		&:before {
			right: 120%;
		}

		&:after {
			left: 120%;
		}
	}
}

.widget.lsx-blog-customizer-terms {
	.tagline {
		& + .lsx-blog-customizer-terms-wrapper {
			margin-top: 0;
		}
		& + .lsx-blog-customizer-terms-slider {
			margin-top: 0;
		}
	}

	.lsx-blog-customizer-terms-archive-link-wrap {
		position: relative;
		margin-top: 6rem;
		overflow: hidden;
	}

	.lsx-blog-customizer-terms-archive-link {
		display: inline-block;
		position: relative;

		&:before,
		&:after {
			content: '';
			display: block;
			height: 2px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 999rem;
		}

		&:before {
			right: 120%;
		}

		&:after {
			left: 120%;
		}
	}
}

.lsx-blog-customizer-posts-wrapper {
	margin-top: -4rem;

	.post-slot {
		margin-top: 4rem;
		padding-bottom: 2.4rem;
		background-color: #fff;
		box-shadow: 1px 1px 5px rgba(155, 155, 155, 0.7);
		margin-bottom: 3px;
		&.slick-slide {
			margin-left: 15px;
			margin-right: 15px;
		}

		.post-image {
			max-height: 150px;
			overflow: hidden;

			img {
				width: 100%;

				&.lazyload,
				&.lazyloading {
					width: auto;
				}
			}

			& + .post-info {
				margin-top: 30px;

				.post-avatar {
					left: 50%;
					margin: 0;
					position: absolute;
					top: -80px;
					transform: translateX(-50%);
				}
			}
		}

		.post-info {
			display: block;
			font-size: 13px;
			margin-bottom: 2.4rem;
			padding-left: 15px;
			padding-right: 15px;
			position: relative;
			.post-meta-info {
				margin-bottom: 10px;
			}
		}

		.post-avatar {
			background-color: #fff;
			border: 2px solid #fff;
			border-radius: 50%;
			display: block;
			height: 75px;
			margin: 0 auto 5px;
			overflow: hidden;
			transition: border 300ms ease;
			width: 75px;
		}

		.post-title {
			// padding-left: 2.4rem;
			// padding-right: 2.4rem;
			margin-bottom: 10px;
		}

		.moretag {
			text-transform: uppercase;
			&:after {
				content: '\f178';
				display: inline-block;
				font-family: 'FontAwesome';
				font-size: inherit;
				margin-left: 5px;
				text-rendering: auto;

				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		}

		.post-content {
			padding-left: 15px;
			padding-right: 15px;

			blockquote {
				max-width: none;
			}
		}

		.post-meta {
			font-size: 13px;
			margin-top: 15px;
			padding-left: 15px;
			padding-right: 15px;
			position: relative;
		}

		.post-categories {
			display: inline;
		}

		.post-tags {
			border-top: 2px solid #d8d8d8;
			font-style: italic;
			padding-top: 10px;
			display: block;
			// &:before {
			// 	content: '\f111';
			// 	display: inline-block;
			// 	font-family: 'FontAwesome';
			// 	font-size: 5px;
			// 	margin: 0 10px;
			// 	text-rendering: auto;
			// 	vertical-align: middle;

			// 	-webkit-font-smoothing: antialiased;
			// 	-moz-osx-font-smoothing: grayscale;
			// }

			& > a {
				display: inline-block;
				margin-right: 5px;

				&:before {
					content: '#';
					display: inline-block;
				}

				&:last-child,
				&:only-child {
					margin-right: 0;
				}
			}
		}
	}
}

.lsx-blog-customizer-terms-wrapper {
	margin-top: -4rem;

	.term-slot {
		margin-top: 4rem;

		&.slick-slide {
			margin-left: 15px;
			margin-right: 15px;
		}

		.term-image {
			max-height: 150px;
			overflow: hidden;

			img {
				width: 100%;

				&.lazyload,
				&.lazyloading {
					width: auto;
				}
			}
		}

		.term-title {
			text-align: center;
		}

		.moretag {
			display: block;
			margin: 0 -2rem;
			padding: 1rem 0;
			text-align: center;
			transition: background 300ms ease;

			&:after {
				color: inherit;
				content: '\f178';
				display: inline-block;
				font-family: 'FontAwesome';
				font-size: inherit;
				margin-left: 5px;
				text-rendering: auto;

				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		}

		.term-content {
			background-color: #fff;
			padding: 2.4rem 2rem 0;
		}
	}
}

#home-widgets {
	.post-content {
		& > p + p {
			margin-top: 1rem;
		}
	}
}

#categories-slider,
.lsx-blog-customizer-posts-slider,
.lsx-blog-customizer-terms-slider,
.lsx-related-posts-wrapper,
.lsx-slick-slider {
	.slick-dots {
		align-items: center;
		display: flex;
		flex-flow: row wrap;
		height: auto;
		justify-content: center;
		list-style: none;
		margin: 1rem 0 0;
		padding: 0;

		& > li {
			line-height: 1;
			padding: 5px;

			@include media('>=tablet') {
				padding: 0 7.5px;
			}

			& > button {
				background: transparent;
				border-style: solid;
				border-width: 1px;
				font: 0/0 a;
				height: 12px;
				transition: all 300ms ease-in-out;
				width: 4rem;

				@include media('>=tablet') {
					height: 6px;
				}
			}
		}
	}

	.slick-arrow {
		background: transparent;
		border-radius: 50%;
		border-style: solid;
		border-width: 2px;
		font: 0/0 a;
		height: 4rem;
		margin-top: calc((2rem - 17px) / 2);
		opacity: 1;
		padding: 0;
		position: absolute;
		text-shadow: none;
		top: 50%;
		transform: translateY(-50%);
		transition: border 300ms ease;
		width: 4rem;
		z-index: 3;

		&:before {
			display: block;
			font-family: 'FontAwesome';
			font-size: 3rem;
			line-height: 1;
			position: absolute;
			text-rendering: auto;
			top: 47%;
			transform: translateY(-50%);
			transition: color 300ms ease;

			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		&.slick-disabled {
			cursor: not-allowed;
		}

		&.slick-prev {
			left: -4rem;

			&:before {
				content: '\f104';
				left: 1.1rem;
			}
		}

		&.slick-next {
			right: -4rem;

			&:before {
				content: '\f105';
				left: 1.5rem;
			}
		}
	}
}

.lsx-blog-customizer-posts-slider,
.lsx-blog-customizer-terms-slider {
	@include media('>=tablet') {
		margin: -4rem auto 0;
		width: 100%;

		&.slick-has-arrows {
			width: calc(100% - 8rem);
		}
	}

	@include media('>=1280px') {
		margin-left: -15px;
		margin-right: -15px;
		width: calc(100% + 30px);

		&.slick-has-arrows {
			width: calc(100% + 30px);
		}
	}

	.tab-pane & {
		margin-left: -15px;
		margin-right: -15px;

		@include media('>=phone') {
			margin-left: auto;
			margin-right: auto;
			width: 100%;

			&.slick-has-arrows {
				width: calc(100% - 8rem);
			}
		}
	}

	.lsx-post-slot.slick-slide {
		margin-left: 15px;
		margin-right: 15px;
	}
}
.archive-header-wrapper {
	+ .categories-slider-title {
		padding-top: 4.25rem;
	}
	&.custom-banner-archive {
		.archive-header {
			background-position: center;
		}
		.banner-icon {
			margin-bottom: 1rem;
			max-width: 200px;
			height: auto;
		}
	}
}
.categories-slider-title {
	display: block;
	clear: both;
	margin-top: 4.25rem;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 22px;
	font-family: 'Noto Sans', sans-serif;
	color: #9b9b9b;
}
#categories-slider {
	margin-bottom: 2.4rem;

	@include media('>=tablet') {
		margin-left: auto;
		margin-right: auto;
		width: 100%;

		&.slick-has-arrows {
			width: calc(100% - 8rem - 30px);
		}
	}

	@include media('>=1280px') {
		&.slick-has-arrows {
			width: 100%;
		}
	}

	.blog:not(.lsx-hide-post-author) & {
		margin-bottom: 2.4rem;
	}

	.item {
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
		height: 100px;
		position: relative;

		&:before {
			background-color: rgba(55, 71, 80, 0.33);
			bottom: 0;
			content: '';
			left: 0;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 2;
			transition: background 400ms ease-in-out;
		}

		& > a {
			align-items: center;
			background-clip: border-box;
			border: 5px solid transparent;
			display: flex;
			justify-content: center;
			height: 100%;
			line-height: 1.25;
			position: relative;
			text-align: center;
			transition: border 300ms ease-in-out 100ms;
			z-index: 2;
		}

		&:hover {
			&:before {
				background-color: rgba(55, 71, 80, 0.75);
			}

			& > a {
				border-color: rgba(#fff, 0.1);
			}
		}
	}

	.slick-arrow {
		margin-top: calc((2rem - 40px) / 2);

		&.slick-prev {
			left: calc(-4rem - 15px);
		}

		&.slick-next {
			right: calc(-4rem - 15px);
		}
	}
}

.lsx-body-full-width:not(.has-sidebar) {
	.site-main {
		width: 100%;
	}
}

.lsx-body-full-width.single-post {
	article.post,
	article.page,
	article.lsx-slot {
		max-width: none;
		width: 100%;
	}
}

.lsx-hide-post-date {
	.post-meta > .post-meta-time {
		display: none;
	}
}

.lsx-hide-post-tags {
	.post-tags-wrapper {
		.post-tags {
			display: none;
		}
	}
}

.lsx-hide-post-author {
	.post-meta {
		& > .post-meta-avatar,
		& > .post-meta-author {
			display: none;
		}
	}
}

.lsx-hide-post-author.lsx-hide-post-date {
	&.single-post {
		// .entry-meta {
		// 	& > .post-meta.post-meta-top { display: none; }
		// }

		.archive-title {
			margin-top: 0;
		}
	}

	&.blog,
	&.archive,
	&.search-results {
		.entry-header {
			.entry-meta {
				display: none;
			}
		}
	}
}

.lsx-hide-post-category {
	& article.lsx-slot,
	&.blog,
	&.archive,
	&.search-results,
	&.single-post {
		.entry-layout .post-tags-wrapper {
			display: none;
		}
		.entry-layout .post-tags-wrapper {
			& > .post-meta-categories {
				display: none;

				& + .post-comments:before {
					display: none;
				}
			}

			& > .post-tags:before {
				display: none;
			}
		}
	}
}

.content-area .blog-description {
	margin-bottom: 4.25rem;
}
.blog-description.search-description {
	margin-top: 4.25rem;
	margin-bottom: 4.25rem;
	display: block;
	clear: both;
	text-align: center;
	@include media('<tablet') {
		padding-top: 4.25rem;
	}
	@include media('<phone') {
		padding-top: 0;
	}
}
.blog .content-area {
	margin-top: 4.25rem;
	margin-bottom: 4.25rem;
}

.lsx-body-list-layout {
	&.blog,
	&.archive {
		#categories-slider {
			+ .post-wrapper {
				margin-top: 6.3rem;
			}
		}
	}

	article.post,
	article.page,
	article.lsx-slot {
		.post-meta-avatar {
			display: none;
		}

		.entry-meta,
		.entry-title,
		.entry-summary,
		.entry-content,
		.post-meta-categories {
			padding-left: 3rem;
			padding-right: 3rem;
			word-break: break-word;
		}
		.post-tags-wrapper {
			margin-top: 0;
			margin-left: 3rem;
			margin-right: 3rem;
			padding-top: 10px;
			padding-right: 0;
			padding-left: 0;
			display: flex;
		}

		.entry-meta .post-meta,
		.entry-title,
		.gallery-item {
			text-align: left;
		}

		&:not(.no-thumb) {
			.entry-layout {
				@include media('>=phone') {
					align-items: stretch;
					display: flex;
					flex-flow: row nowrap;
					flex-direction: row-reverse;
					justify-content: flex-start;
					padding-bottom: 0;

					& > .entry-layout-content {
						flex-grow: 1;
						padding-bottom: 15px;

						.entry-title {
							font-size: 22px;
						}
						.entry-image {
							display: none;
						}
					}

					& > .entry-image {
						display: block;
						flex-basis: 40%;
						flex-shrink: 0;
						position: relative;

						& > .thumbnail {
							background: no-repeat center center transparent;
							background-size: cover;
							display: block;
							height: 100%;
							left: 0;
							position: absolute;
							top: 0;
							width: 100%;

							& > img {
								display: none;
							}
						}
					}
				}
			}
		}
		&.no-thumb {
			.label.lsx-label-post-type {
				right: 10px;
				left: auto;
			}
			.entry-layout {
				@include media('>=phone') {
					& > .entry-layout-content {
						padding-bottom: 15px;
					}
				}
			}
		}
		.entry-title {
			font-size: 22px;
		}
	}
}

.lsx-body-grid-layout,
.lsx-body-half-grid-layout {
	&.blog,
	&.archive,
	&.search-results {
		#categories-slider {
			+ .post-wrapper {
				margin-top: 6.3rem;
			}
		}
		.post-wrapper {
			align-items: flex-start;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			@include media('>=phone') {
				margin-left: -15px;
				margin-right: -15px;
			}

			& > .post,
			& > .page,
			& > .lsx-slot {
				margin-top: 0;
				margin-bottom: 30px;
				width: 100%;

				@include media('>=phone') {
					padding-left: 15px;
					padding-right: 15px;
					width: 50%;
				}

				@include media('>=desktop') {
					width: 33.33333%;
				}

				.entry-meta,
				.entry-title,
				.post-meta-categories,
				.entry-summary,
				.entry-content {
					padding-left: 1.5rem;
					padding-right: 1.5rem;
				}
				.post-tags-wrapper {
					margin-top: 0;
					margin-left: 1.5rem;
					margin-right: 1.5rem;
					padding-bottom: 1.5rem;
					display: flex;
				}
				.entry-title {
					font-size: 22px;
				}
			}
		}
	}
}

.lsx-body-grid-layout {
	&.tag,
	&.archive,
	&.search-results {
		.post-wrapper {
			margin-top: -30px;
		}
	}
}

.lsx-body-half-grid-layout {
	&.blog,
	&.archive,
	&.search-results {
		.post-wrapper {
			& > .post,
			& > .page,
			& > .lsx-slot {
				@include media('>=desktop') {
					width: 50%;
				}
			}
		}
	}
}

.lsx-body-default-layout {
	&.blog,
	&.archive,
	&.search-results {
		#categories-slider {
			+ .post-wrapper {
				margin-top: -3.3rem;
			}
		}
		.post-wrapper {
			& > .post,
			& > .page,
			& > .lsx-slot {
				.entry-meta,
				.entry-title,
				.entry-summary,
				.entry-content,
				.post-meta-categories {
					padding-left: 30px;
					padding-right: 30px;
				}
				.post-tags-wrapper {
					margin-left: 30px;
					margin-right: 30px;
					margin-top: 0;
					padding-bottom: 1.5rem;
					display: flex;
				}
				.entry-title {
					font-size: 22px;
				}
				.entry-meta {
					padding-top: 0;
				}
			}
		}
		&.lsx-body-full-width {
			.post-wrapper {
				& > .post,
				& > .page,
				& > .lsx-slot {
					.entry-meta,
					.entry-title,
					.entry-summary,
					.entry-content,
					.post-meta-categories {
						padding-left: 30px;
						padding-right: 30px;
					}
					.post-tags-wrapper {
						margin-left: 30px;
						margin-right: 30px;
					}
				}
			}
		}
	}
}

.lsx-layout-switcher {
	bottom: 60px;
	position: absolute;
	right: 3rem;
	z-index: 5;
	width: 140px;
	text-align: center;
	@include media('<=phone') {
		display: none;
	}

	.lsx-layout-switcher-option {
		display: inline-block;
		font-size: 28px;
		line-height: 1;
		padding: 0 3px;
		transition: color 300ms ease;
		white-space: nowrap;

		.fa {
			margin-right: 0px;
		}
	}
}

.lsx-layout-switcher-label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.5px;
	line-height: 1.4;
	margin-bottom: 1rem;
}

.lsx-hide-posts-navigation {
	.post-navigation {
		display: none;
	}
}

.single-post .lsx-related-posts .lsx-related-posts-headline {
	margin-top: 8.5rem;
	margin-bottom: 0;
	text-align: center;
}

.footer-meta {
	.post-tags-wrapper {
		@include media('>=tablet') {
			display: flex;
			justify-content: space-between;
		}
		.post-tags {
			@include media('<tablet') {
				text-align: center;
			}
		}
	}
}

.single-post .lsx-related-posts .lsx-related-posts-wrapper {
	@include media('>=phone') {
		align-items: flex-start;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		margin-left: -15px;
		margin-right: -15px;
	}

	article.post,
	article.page,
	article.lsx-slot {
		margin: 4.25rem 0 0;

		@include media('>=phone') {
			padding-left: 15px;
			padding-right: 15px;
			width: 50%;

			.entry-meta,
			.entry-title,
			.entry-summary,
			.entry-content,
			.post-meta-categories {
				padding-left: 2rem;
				padding-right: 2rem;
			}

			.post-tags-wrapper {
				margin-top: 1rem;
				margin-left: 20px;
				margin-right: 20px;
				padding-bottom: 0;
			}
		}

		@include media('>=tablet') {
			width: 33.3333%;
		}

		.entry-title {
			font-size: 22px;
		}
	}
}

.archive {
	&.category,
	&.tag {
		.content-area {
			margin-bottom: 4.25rem;
		}
		.archive-category-title {
			padding-top: 4.25rem;
			display: block;
			clear: both;
			h2 {
				margin-top: 5px;
			}
			a.back-to-blog {
				text-transform: uppercase;
				&:before {
					content: '\f177';
					display: inline-block;
					font-family: 'FontAwesome';
					font-size: inherit;
					margin-right: 5px;
					text-rendering: auto;

					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
				}
			}
		}
	}
}

@include customizer-blog-body-colours(#dadddf, #4a4a4a, #418ad0, #f7ae00, #919191);
@include customizer-blog-banner-colours(#fff);

.lsx-hide-post-category article.lsx-slot .post-meta-categories,
.lsx-hide-post-category.blog .post-meta-categories,
.lsx-hide-post-category.archive .post-meta-categories,
.lsx-hide-post-category.search-results .post-meta-categories,
.lsx-hide-post-category.single-post .post-meta-categories {
	display: none;
}
.lsx-hide-post-category article.lsx-slot .entry-layout .post-tags-wrapper > .post-meta-categories,
.lsx-hide-post-category.blog .entry-layout .post-tags-wrapper > .post-meta-categories,
.lsx-hide-post-category.archive .entry-layout .post-tags-wrapper > .post-meta-categories,
.lsx-hide-post-category.search-results .entry-layout .post-tags-wrapper > .post-meta-categories,
.lsx-hide-post-category.single-post .entry-layout .post-tags-wrapper > .post-meta-categories {
	display: none;
}
.lsx-hide-post-category
	article.lsx-slot
	.entry-layout
	.post-tags-wrapper
	> .post-meta-categories
	+ .post-comments:before,
.lsx-hide-post-category.blog
	.entry-layout
	.post-tags-wrapper
	> .post-meta-categories
	+ .post-comments:before,
.lsx-hide-post-category.archive
	.entry-layout
	.post-tags-wrapper
	> .post-meta-categories
	+ .post-comments:before,
.lsx-hide-post-category.search-results
	.entry-layout
	.post-tags-wrapper
	> .post-meta-categories
	+ .post-comments:before,
.lsx-hide-post-category.single-post
	.entry-layout
	.post-tags-wrapper
	> .post-meta-categories
	+ .post-comments:before {
	display: none;
}
.lsx-hide-post-category article.lsx-slot .entry-layout .post-tags-wrapper > .post-tags:before,
.lsx-hide-post-category.blog .entry-layout .post-tags-wrapper > .post-tags:before,
.lsx-hide-post-category.archive .entry-layout .post-tags-wrapper > .post-tags:before,
.lsx-hide-post-category.search-results .entry-layout .post-tags-wrapper > .post-tags:before,
.lsx-hide-post-category.single-post .entry-layout .post-tags-wrapper > .post-tags:before {
	display: none;
}
