@import "../scss/global/_variables";

/*--------------------------------------------------------------
1.0 Apply 100% Width to Necessary Elements
--------------------------------------------------------------*/

.gutenberg-compatible-template.using-gutenberg {
	.entry-content {
		padding: 2.4rem 0;
		@media only screen and (min-width: 768px) {
			max-width: 100%;
			width: 100%;
			float: none;
			padding-left: 0;
			padding-right: 0;
		}
	}
	.navigation,
	#respond,
	.footer-meta {
		padding: 2.4rem;
		@media only screen and (min-width: 768px) {
			padding-left: 0;
			padding-right: 0;
		}
	}
	&.page-template-default,
	&.page-template-template-cover {
		div#primary {
			margin-bottom: 0;
			margin-top: 0;
		}
		div.entry-content {
			padding-top: 0;
			padding-bottom: 0;
		}
		&:not(.has-block-banner):not(.has-block-media-text):not(.has-block-cover) {
			.entry-content {
				padding-top: 8.4rem;
			}
			&.lsx-disabled-hidden-title {
				.entry-content {
					padding-top: 25px;
				}
				&:not(.page-has-banner),
				&.to-active {
					.entry-content {
						padding-top: 70px;
					}
				}
			}
		}
	}
	// LSX Blocks "Page Title" enhancements.
	&.lsx-page-title,
	&.page-template-default.lsx-page-title,
	&.page-template-template-cover.lsx-page-title {
		div#primary {
			//margin-bottom: 8.5rem;
			margin-top: 50px;

			article {
				& > .entry-content {
					margin-top: 0px;
					padding-top: 0px;
				}
			}
		}
	}

}

.gutenberg-compatible-template.using-gutenberg {
	.content-area {
		.entry-content {
			.tab-content {
				h3 {
					margin-top: 2.4rem;
				}
			}
			.wp-block-cover {
				.wp-block-cover__inner-container {
					.wp-block-columns,
					.wp-block-jetpack-layout-grid:not(.alignfull):not(.alignwide) {
						@include media(">=desktop") {
							max-width: 90rem;
							margin-left: auto;
							margin-right: auto;
						}
					}
					.wp-block-media-text {
						.wp-block-media-text__content {
							@include media("<=tablet") {
								padding: 0 10% 0 10%;
							}
						}
					}
				}
			}
		}
	}
}

/** LSX Hero Banner Block Styles. */
.lsx-hero-banner-init {
	// Fix the breadcrumb colour
	.breadcrumbs-container {
		opacity: 1;
	}
	.lsx-hero-banner-block {
		margin: 0;
		padding: 0;

		&.wp-block-cover {
			min-height: 150px;
			height: auto;
			margin-left: auto;
			margin-right: auto;

			&.has-background-img {
				min-height: 430px;
			}

			.wp-block-cover__inner-container {
				margin: 35px auto;

				.lsx-title-block {
					padding: 0;
				}
			}

			&.aligncontent {
				max-width: 90rem;
				width: 90rem;
				margin-left: auto;
				margin-right: auto;

				.lsx-title-block.aligncontent,
				.lsx-title-block.alignfull,
				.lsx-title-block.alignwide {
					width: 100%;
					max-width: 100%;
				}
			}
		}
	}

	// This is for a blog post / page template not using blocks.
	&.page-template.using-gutenberg {
		div #primary {
			margin-top: 50px;
		}
	}
}

/*--------------------------------------------------------------
2.0 Apply Wide, Full and Default Align Styles
--------------------------------------------------------------*/

@include media(">=tablet") {
	.gutenberg-compatible-template.using-gutenberg,
	.gutenberg-compatible-template.using-gutenberg.single-post,
	.gutenberg-compatible-template.using-gutenberg.page-template-default,
	.gutenberg-compatible-template.using-gutenberg.page-template-template-cover,
	.gutenberg-compatible-template.using-gutenberg.page-template-template-no-sidebar {
		.wrap.container,
		article.post {
			max-width: 100%;
			width: 100%;
			float: none;
			padding-left: 0;
			padding-right: 0;
		}
		.row.lsx-related-posts,
		.navigation.post-navigation {
			margin: 0 auto;
			width: 100%;
			max-width: 1170px;
			padding-left: 15px;
			padding-right: 15px;
			@media (max-width: 992px) {
				max-width: 750px;
			}
			.entry-header {
				width: 100%;
				max-width: 100%;
			}
		}
		#respond {
			margin: 0 auto;
			width: 40%;
			max-width: 570px;
		}
		.alignwide {
			// max-width: 75%;
			// width: 75%;
			max-width: 120rem;
			width: calc( 100vw - 8rem );
			margin-left: auto;
			margin-right: auto;
			.blocks-gallery-grid {
				max-width: 100%;
				width: 100%;
			}
		}
		.alignfull {
			width: 100%;
			max-width: 100%;
			.blocks-gallery-grid {
				width: 100%;
				max-width: 100%;
			}
			.slick-slider,
			#lsx-team-slider{
				width: 90%;
				max-width: 90%;
				margin-left: auto;
				margin-right: auto;
			}
		}
	}

	.gutenberg-compatible-template.using-gutenberg {
		&.lsx-page-title {
			.lsx-title-block.aligncontent {
				max-width: 90rem;
				width: 90rem;
				margin-left: auto;
				margin-right: auto;
			}
		}

		.entry-content {
			> div,
			> p,
			> h1,
			> h2,
			> h3,
			> h4,
			> h5,
			> h6,
			> ul,
			> ol,
			> blockquote,
			> pre,
			> figure,
			> strong,
			> span,
			> table {
				max-width: 90rem;
				width: 90rem;
				margin-left: auto;
				margin-right: auto;
			}
			.has-drop-cap {
				&:first-letter {
					margin-bottom: 5px;
				}
			}
			.wp-block-cover {
				&.alignleft {
					margin-right: $lsx-gap;
				}
				&.alignright {
					margin-left: $lsx-gap;
				}
			}
		}
		@media only screen and (min-width: 1168px) {
			.entry-content > *,
			.entry-summary > * {
				max-width: calc(6 * (100vw / 12));
			}
		}

		.entry-header,
		.page-header,
		.post-thumbnail,
		#comments,
		#lsx-team-slider,
		.footer-meta {
			max-width: 90rem;
			width: 90rem;
			margin-left: auto;
			margin-right: auto;
		}
		&.page-template-template-cover {
			.entry-content {
				> div,
				> p,
				> h1,
				> h2,
				> h3,
				> h4,
				> h5,
				> h6,
				> ul,
				> blockquote,
				> pre,
				> figure,
				> strong,
				> span,
				> table {
					max-width: 80%;
					width: 80%;
				}
				.row {
					max-width: 1200px;
					margin-left: auto;
					margin-right: auto;
				}
				> .alignwide {
					// max-width: 90%;
					// width: 90%;
					max-width: 112rem;
					width: 100%;
				}
				> .alignfull {
					width: 100%;
					max-width: 100%;
				}
			}
			.entry-header,
			.page-header,
			.post-thumbnail,
			#comments,
			#lsx-team-slider {
				max-width: 80%;
				width: 80%;
			}
			.alignwide {
				// max-width: 90%;
				// width: 90%;
				max-width: 120rem;
				width: calc( 100vw - 10rem );
				.row {
					max-width: 1200px;
				}
			}
			.alignfull {
				width: 100%;
				max-width: 100%;
			}
		}
	}

	.gutenberg-compatible-template.using-gutenberg .post-thumbnail img,
	.gutenberg-compatible-template.using-gutenberg
		.alignwide
		figure:not(.is-resized)
		img,
	.gutenberg-compatible-template.using-gutenberg
		.alignfull
		figure:not(.is-resized)
		img {
		width: 100%;
	}
	.gutenberg-compatible-template.using-gutenberg.page-template-template-no-sidebar
		article.page,
	.gutenberg-compatible-template.using-gutenberg.page-template-default:not(.has-sidebar)
		article.page {
		width: 100%;
	}
}

// @include media("<tablet") {
// 	.gutenberg-compatible-template.using-gutenberg {
// 		.entry-content {
// 			> div,
// 			> p,
// 			> h1,
// 			> h2,
// 			> h3,
// 			> h4,
// 			> h5,
// 			> h6,
// 			> ul,
// 			> ol,
// 			> blockquote,
// 			> pre,
// 			> figure,
// 			> strong,
// 			> span,
// 			> table {
// 				max-width: 80%;
// 				width: 80%;
// 				margin-left: auto;
// 				margin-right: auto;
// 			}
// 		}
// 	}
// }

/*--------------------------------------------------------------
3.0 Mobile Only
--------------------------------------------------------------*/
@include media("<tablet") {
	.gutenberg-compatible-template.using-gutenberg,
	.gutenberg-compatible-template.using-gutenberg.single-post {
		.alignwide {
			max-width: calc( 100vw - 14rem);
			width: calc( 100vw - 14rem);
			margin-left: auto;
			margin-right: auto;
		}
		.alignfull {
			&figure,
			&.lsx-block-container,
			&.lsx-block-banner,
			&.lsx-block-cta,
			&.wp-block-cover,
			&.wp-block-media-text,
			&.wp-block-group,
			&.wp-block-jetpack-layout-grid {
				margin-left: -5rem;
				margin-right: -5rem;
				width: calc(100% + 5rem * 2);
				max-width: calc(100% + 5rem * 2);
				padding: 2em;
			}
			&.wp-block-media-text {
				padding-left: 15px;
				padding-right: 15px;
			}
			.alignfull.wp-block-jetpack-layout-grid {
				margin-left: 0;
				margin-right: 0;
				width: 100%;
				max-width: 100%;
			}
		}
		.lsx-full-width-gutenberg.alignfull {
			width: auto;
			max-width: none;
		}
		.wp-block-media-text.is-stacked-on-mobile {
			display: flex;
			flex-direction: column;
		}
	}
}
@include media("<custom") {
	.wp-block-button {
		a {
			width: 100%;
		}
	}
}

@include media(">=tablet") {
	.gutenberg-compatible-template {
		article.post {
			.entry-content {
				img.alignnone,
				article.post .entry-content p img[class*="wp-image-"].alignnone,
				figure.alignnone {
					text-align: left;
					margin-left: auto;
					margin-right: auto;
					width: 100%;
					max-width: 100%;
				}
			}
		}
	}
}

/*--------------------------------------------------------------
4.0 This is to make sure contents respect the max width
--------------------------------------------------------------*/

.gutenberg-compatible-template.using-gutenberg.single:not(.lsx-body-full-width) {
	.wp-block-button {
		margin-bottom: 1em;
		&.alignright,
		&.alignleft {
			float: initial;
		}
	}
}

// For single posts
@include media(">=desktop-wide") {
	.gutenberg-compatible-template.using-gutenberg.single {
		.entry-content {
			figure.wp-block-embed,
			.navbar,
			p,
			.envira-gallery-wrap,
			form,
			blockquote,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			ul,
			pre,
			.wp-block-image:not(.alignfull),
			ol,
			table,
			.wp-block-button,
			.wp-block-buttons:not(.alignfull),
			.slick-slider,
			#lsx-projects-slider.slick-slider,
			#lsx-team-slider,
			#lsx-testimonials-slider {
				max-width: 70rem;
				margin-left: auto;
				margin-right: auto;
			}
			.wp-block-preformatted,
			.wp-block-verse,
			.wp-block-code {
				max-width: 585px;
			}
		}
		.entry-meta,
		.footer-meta,
		.comment-respond,
		#comments,
		.archive-title {
			max-width: 850px;
			margin-left: auto;
			margin-right: auto;
		}
		.wp-block-columns {
			&.has-6-columns,
			&.has-5-columns,
			&.has-4-columns,
			&.has-3-columns,
			&.has-2-columns,
			&.has-1-columns {
				display: flex;
				justify-content: center;
			}
			&.has-1-columns {
				width: 100%;
				min-width: 100%;
				.wp-block-column {
					flex-basis: initial;
					max-width: 850px;
				}
			}
			&.has-2-columns {
				.wp-block-column {
					max-width: 550px;
				}
			}
			&.has-3-columns {
				.wp-block-column {
					max-width: 366px;
				}
			}
			&.has-4-columns {
				.wp-block-column {
					max-width: 250px;
				}
			}
			&.has-5-columns {
				.wp-block-column {
					max-width: 220px;
				}
			}
			&.has-6-columns {
				.wp-block-column {
					max-width: 183px;
				}
			}
		}
	}
}

@include media(">=desktop-wide") {
	.gutenberg-compatible-template.using-gutenberg,
	.gutenberg-compatible-template.using-gutenberg.page-template-template-no-sidebar {
		.entry-content {
			figure.wp-block-embed,
			.navbar,
			p,
			.envira-gallery-wrap,
			form,
			blockquote,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			ul,
			pre,
			.wp-block-image:not(.alignfull),
			ol,
			table,
			.wp-block-button,
			.wp-block-buttons:not(.alignfull),
			.slick-slider,
			#lsx-projects-slider.slick-slider,
			#lsx-team-slider {
				max-width: 90rem;
				margin-left: auto;
				margin-right: auto;
			}
			#lsx-testimonials-slider {
				max-width: 100rem;
				width: 100%;
				margin-left: auto;
				margin-right: auto;
			}
			.wp-block-preformatted,
			.wp-block-verse,
			.wp-block-code {
				max-width: 585px;
			}
			.woocommerce {
				width: 100%;
				max-width: 100%;
			}
		}
		.entry-meta,
		.footer-meta,
		.comment-respond,
		#comments,
		.archive-header {
			max-width: 1150px;
			margin-left: auto;
			margin-right: auto;
		}
		.alignwide {
			max-width: 112rem;
			width: 100%;
		}
		.wp-block-columns {
			&.has-6-columns,
			&.has-5-columns,
			&.has-4-columns,
			&.has-3-columns,
			&.has-2-columns,
			&.has-1-columns {
				display: flex;
				justify-content: center;
			}
			&.has-1-columns {
				width: 100%;
				min-width: 100%;
				.wp-block-column {
					flex-basis: initial;
					max-width: 1150px;
				}
			}
			&.has-2-columns {
				.wp-block-column {
					max-width: 550px;
				}
			}
			&.has-3-columns {
				.wp-block-column {
					max-width: 366px;
				}
			}
			&.has-4-columns {
				.wp-block-column {
					max-width: 250px;
				}
			}
			&.has-5-columns {
				.wp-block-column {
					max-width: 220px;
				}
			}
			&.has-6-columns {
				.wp-block-column {
					max-width: 183px;
				}
			}
		}
	}
}

/*--------------------------------------------------------------
5.0 Colors for the customizer colo options
--------------------------------------------------------------*/

// Brand Colors
// -- normal / darker / lighter
$strong-blue: nth($blue, 3);
$lighter-blue: nth($blue, 1);
$light-yellow: nth($orange, 1);
$dark-yellow: nth($orange, 2);
$dark-green: nth($green, 2);

// Gutenberg color options
// -- see editor-color-palette in functions.php

.container {
	#primary.content-area {
		.has-strong-blue-color {
			color: $strong-blue;
		}
		.has-lighter-blue-color {
			color: $lighter-blue;
		}
		.has-light-yellow-color {
			color: $light-yellow;
		}
		.has-dark-yellow-color {
			color: $dark-yellow;
		}
		.has-light-green-color {
			color: nth($green, 1);
		}
		.has-dark-green-color {
			color: $dark-green;
		}
		.has-white-color {
			color: white;
		}
		.has-black-color {
			color: black;
		}
		.has-strong-blue-background-color {
			background-color: $strong-blue;
		}
		.has-lighter-blue-background-color {
			background-color: $lighter-blue;
		}
		.has-light-yellow-background-color {
			background-color: $light-yellow;
		}
		.has-dark-yellow-background-color {
			background-color: $dark-yellow;
		}
		.has-light-green-background-color {
			background-color: nth($green, 1);
		}
		.has-dark-green-background-color {
			background-color: $dark-green;
		}
		.has-white-background-color {
			background-color: white;
		}
		.has-black-background-color {
			background-color: black;
		}
	}
}

/*--------------------------------------------------------------
6.0 Utilities
--------------------------------------------------------------*/

#primary {
	// Full width button
	.lsx-block-button.btn-full {
		a {
			max-width: 100%;
			width: 100%;
		}
	}
	// Icon below banner
	.lsx-icon-banner {
		position: relative;
		top: -7em;
		margin-bottom: -7em;
	}
}

// Row Helpers
@include media(">=tablet") {
	.has-2-columns {
		&.one-third-left {
			> .wp-block-column {
				&:first-child {
					flex-basis: 30%;
				}
				&:nth-child(2) {
					flex-basis: 70%;
					max-width: 700px !important;
				}
			}
		}
		&.one-third-right {
			> .wp-block-column {
				&:first-child {
					flex-basis: 70%;
					max-width: 700px !important;
				}
				&:nth-child(2) {
					flex-basis: 30%;
				}
			}
		}
	}
}

/*--------------------------------------------------------------
7.0 New Lsx Class 'lsx-full-width-gutenberg' (Keep it at the bottom)
--------------------------------------------------------------*/
//All
.gutenberg-compatible-template.using-gutenberg,
.gutenberg-compatible-template.using-gutenberg.page-template-template-no-sidebar,
.gutenberg-compatible-template.using-gutenberg.page-template-default,
.gutenberg-compatible-template.using-gutenberg.single:not(.lsx-body-full-width) {
	.lsx-full-width-gutenberg {
		width: 100%;
		max-width: 100%;
		background: white;
		padding-top: 8.4rem;
		padding-bottom: 8.4rem;
		// margin-top: 8.4rem;
		// margin-bottom: 8.4rem;
		&.has-1-columns {
			.wp-block-column {
				max-width: 50%;
				margin: 0 auto;
				padding: 0;
			}
		}
		&.first {
			margin-top: -2.4rem !important;
		}
	}
	//Videos
	.wp-block-video {
		video {
			width: 100%;
		}
	}
	//Quotes
	blockquote.is-style-large {
		border: 1px solid $breaker;
		padding: 4rem 4rem 2.4rem;
	}
	// WP Galleries
	.alignfull {
		.blocks-gallery-grid {
			width: 100%;
			max-width: 100%;
		}
	}
}

@include media(">=desktop-wide") {
	.gutenberg-compatible-template.using-gutenberg {
		.wp-block-group.alignfull >.wp-block-group.alignfull {
			padding: 0;
		}
	}

}

[class*="__inner-container"] .wp-block-group:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright), [class*="__inner-container"] .wp-block-cover:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
    margin-left: auto;
    margin-right: auto;
    max-width: 90rem;
}