/**
 * Post Content 
 */

$post-content-output: true !default;

@mixin common-post-content {

	// When used with .post-content, should also inherit mixin text

	> :last-child {
		margin-bottom: 0;
	}
	
	h1, h2, h3, h4, h5, h6 {
		// margin-top: 1.4em;
		// margin-bottom: 0.6em;
		margin-top: calc(13px + 1.2em);
		margin-bottom: calc(10px + 0.2em);
		
		font-weight: 700;
		letter-spacing: normal;
		line-height: 1.5;
		
		-webkit-font-smoothing: antialiased;
	}
	
	a {
		color: $main-color;	
	}
	
	a:hover {
		opacity: 0.84;
	}
	
	// Prevent a hover flash for floated linked images 
	a:hover img {
		opacity: 1;
	}
	
	// Post Content - Lists
	> ul,
	> ol {
		margin: 2em 0;
		margin-left: 35px;
	}
	
	ul {
		list-style-type: disc;
	}
	
	ol {
		list-style-type: decimal;
	}
	
	li > ul,
	li > ol {
		margin-top: 0.8em;
		margin-bottom: 0.8em;
	}

	blockquote,
	.wp-block-quote.is-style-large {
		margin-top: 2em;
		margin-bottom: 2em;

		> p {
			margin-bottom: 26px;
		}
	}

	.wp-block-pullquote.alignleft, 
	.wp-block-pullquote.alignright {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.modern-quote,
	.wp-block-quote.is-style-large {
		margin-bottom: 1.7em;
	}
	
	li {
		padding-left: 5px;
		margin-bottom: 0.8em;
	}
	
	// Videos / audios
	iframe {
		max-width: 100%;
	}

	.wp-block-gallery,
	.wp-block-embed {
		margin: 40px 0;
	}

	// .wp-block-gallery {
	// 	margin-left: -$gallery-margin;
	// 	margin-right: -$gallery-margin;
	// }

	figcaption a,
	.wp-caption-text a {
		text-decoration: underline;
	}

	.wp-block-image figcaption,
	.wp-caption-text,
	figcaption {
		font-size: 14px;
		font-family: $title-font;
		font-style: normal;
		color: #777;
	}

	//
	// Remove margin-top for the likes of h1 etc.
	// DONT MOVE: Placed at end for specificity.
	//
	> :first-child {
		margin-top: 0;
	}
}

@mixin post-content {

	@if not $guten-editor {
		@include text;
		font-size: 16px;
	}

	// Gutenberg sizes
	.has-small-font-size {
		font-size: 14px;
	}

	.has-regular-font-size {
		font-size: inherit;
	}

	.has-large-font-size {
		font-size: (24px / 19px) * 1em;
		line-height: 1.71;
	}

	.has-larger-font-size {
		font-size: (30px / 19px) * 1em;
		line-height: 1.55;
	}

	// For search form in post content 
	.search-field {
		vertical-align: top;
		padding-right: 55px;
		min-width: 300px;
		-webkit-font-smoothing: initial;
	}
	
	.search-submit {
		font-size: 0;
		padding-top: 15px;
		padding-bottom: 15px;
		transform: translateX(-100%);
		margin-left: -6px;
		background: transparent;
		color: #666;
		
		.fa {
			font-size: 14px;
		}
	}
	
	.gallery {
		margin-top: 32px;
		margin-bottom: 32px;
	}

	.tiled-gallery,
	.wp-block-media-text {
		margin: 2.5em 0;
	}

	.alignwide {
		margin-left: -3.896%;
		margin-right: -3.896%;
		max-width: 107.8%;

		&.wp-block-image img {
			width: 100%;
			max-width: initial;
		}
	}

	.wp-block-cover-image.alignwide {
		width: auto;
	}

	.no-sidebar & .alignfull {
		width: 100vw;
		max-width: 100vw;
		box-sizing: border-box;
	}

	// --

	p > a,
	li > a,
	dd > a,
	td a,
	th a,
	h1 a,
	h2 a,
	h3 a,
	h4 a,
	h5 a,
	h6 a,
	em a,
	strong a {
		color: inherit;
		box-shadow: 0 -1px 0 0 var(--main-color, #000) inset;
		transition: .3s ease-in;

		&:hover {
			opacity: 1;
			box-shadow: 0 -1px 0 0 currentColor inset;
		}
	}

	figure > a:not(.pinit-btn) {
		display: block;
	}

	// Read more for large posts style b
	.read-more {
		margin-top: 22px;
		color: #000;
		font-family: $title-font;
		font-weight: 400;
		font-size: 16px;
		
		a {
			position: relative;
			display: inline-block; 
			color: #161616;
		}
		
		a span {
			position: relative;
			background: transparent;
			z-index: 1;
		}
		
		a:after {
			content: "";
			display: block;
			height: 1px;
			width: 100%;
			background: $main-color;
			transition: transform .3s ease-in;
		}

		a:hover:after {
			//transform: translateY(1px) scaleY(2);
			background: #000;
		}
	}
}

//
// Only for single posts
//
@mixin entry-content-base {
	font-family: $entry-content-font;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.79;
	color: rgba(0, 0, 0, 0.74);

	// Smaller font size for portait tablets
	@include breakpoint(large, medium) {
		font-size: 18px;
	}

	@include breakpoint(small) {
		font-size: 17px;
		hyphens: auto;
	}

	@include breakpoint(x-small) {
		font-size: 17px;
	}
}

@mixin p-element-list {
	> ul,
	> ol {
		margin-top: 1.65em;
		margin-bottom: 1.65em;
	}

	> ul,
	> ul ul {
		list-style: none;
	}

	> ul li:before {
		position: absolute;
		content: "\2022";
		margin-left: -25px;
		display: inline-block;
		text-align: right;
		opacity: 0.8;
		font-family: Georgia, Arial, system-ui;
		transform: scale(1.1);
		-webkit-font-smoothing: antialiased;
	}

	> ul ol li:before {
		display: none;
	}
}

@mixin entry-content {

	@if not $guten-editor {
		@include entry-content-base;
		@include p-element-list;
	}

	p {
		margin-bottom: 1.65em;
	}

	.modern-quote,
	.wp-block-quote.is-style-large {
		margin-top: 2em;
		margin-bottom: 1.9em;
	}

	.twitter-tweet {
		margin: 2.5em auto !important;
	}

	table {
		font-size: 17px;
		font-family: $title-font;

		@include breakpoint (large) {
			display: block;
			overflow-x: auto;
			hyphens: none;
			-webkit-overflow-scrolling: touch;
			
			tbody {
				display: table;
				table-layout: initial !important;
				width: 100%;
			}
		}

		@include breakpoint (x-small) {
			font-size: 15px;
		}
	}

	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.6315em;
	}

	h3 {
		font-size: 1.368em;
	}

	h4 {
		font-size: 1.21em;
	}

	h5 {
		font-size: 1.05em;
	}

	h6 {
		font-size: 1em;
	}
}

//
// Spacious Style
//
@mixin content-spacious {
	@include breakpoint(null, small) {
		padding-left: 3.896%;
		padding-right: 3.896%;
	}

	// For tablet view, need more space on right
	@include breakpoint(large, medium) {
		margin-right: -3.896%;
	}

	> p img.alignnone, 
	.wp-caption.alignnone,
	figure.alignnone,
	.alignwide,
	.alignfull,
	.gallery {
		margin-left: -3.896%;
		margin-right: -3.896%;
		max-width: 107.8%;
	}

	// Gutenberg doesn't add left and right spacing anymore.
	// .wp-block-gallery {
	// 	margin-left: calc(-3.896% - (#{$gallery-margin} / 2));
	// 	margin-right: calc(-3.896% - (#{$gallery-margin} / 2));
	// 	width: calc(107.8% + #{$gallery-margin});
	// 	max-width: initial;
	// }

	> p img.alignleft,
	.wp-caption.alignleft,
	figure.alignleft,
	.wp-block-pullquote.alignleft {
		margin-left: -3.896%;
	}
	
	> p img.alignright,
	.wp-caption.alignright,
	figure.alignright,
	.wp-block-pullquote.alignright {
		margin-right: -3.896%;
	}
	
	> p img.aligncenter, 
	.wp-caption.aligncenter,
	.wp-block-image.aligncenter,
	.wp-block-gallery.aligncenter,
	.gallery.aligncenter {
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
	}

	// Block fixes
	.wp-block-cover-image {
		width: auto;
	}
}

//
// Full-width variation
// 
// Used by .the-post-modern 
//
@mixin content-spacious-full {
	figure img {
		vertical-align: bottom;
	}

	.alignnone,
	.wp-block-embed,
	.wp-block-image:not(.alignleft):not(.alignright),
	.wp-block-gallery {
		margin-top: calc(40px + 0.25vw);
		margin-bottom: calc(40px + 0.25vw);
	}

	.wp-caption-text, 
	.wp-block-image figcaption,
	.blocks-gallery-caption {
		margin-top: 1em;
	}

	.alignfull {
		margin-top: calc(40px + 1vw);
		margin-bottom: calc(40px + 1vw);
	}

	// Only for large+ devices till infinity
	@include breakpoint(false, large) {
		--post-content-width: 720px;
		
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	
		> p img.alignnone, 
		.wp-caption.alignnone,
		figure.alignnone,
		.alignwide,
		.alignfull,
		.gallery {
			margin-left: -190px;
			margin-right: -190px;
			width: auto;
			width: calc(100% + 380px);
			max-width: 100vw;
		}

		> p img.alignleft,
		.wp-caption.alignleft,
		figure.alignleft,
		.wp-block-pullquote.alignleft {
			margin-left: -6%;
		}
		
		> p img.alignright,
		.wp-caption.alignright,
		figure.alignright,
		.wp-block-pullquote.alignright {
			margin-right: -6%;
		}

		// .wp-block-gallery {
		// 	margin-left: calc(-190px - (#{$gallery-margin} / 2));
		// 	margin-right: calc(-190px - (#{$gallery-margin} / 2));
		// 	width: calc(100% + 380px + #{$gallery-margin});
		// 	max-width: initial;
		// }

		> p img.aligncenter, 
		.wp-caption.aligncenter,
		.wp-block-image.aligncenter,
		.wp-block-gallery.aligncenter,
		.gallery.aligncenter {
			margin-left: auto;
			margin-right: auto;
			max-width: 100%;
		}
	}
}

//
// Output selectors?
//
@if $post-content-output {

	.post-content,
	.textwidget {
		@include common-post-content;
	}

	.post-content {
		@include post-content;
	}

	.entry-content {
		@include entry-content;
	}

	/**
	 * Spacious Style
	 */
	.content-spacious {
		@include content-spacious;
	}

	/**
	 * Full Width variation of content spacious
	 */
	.content-spacious-full {
		@include content-spacious-full;
	}
}