// ===========================
// Content
// ===========================

#content-section {position: relative; margin-top: 15px; margin-bottom: 60px;
	//@include media("sm"){margin-top: 60px;}
}

.row.multi-column-query {margin-bottom: 30px;}

.sticky-title i {font-size: rem(20px);}

.page-title,
.entry-title {padding-top: 0; margin-top: 0;}

.page-meta,
.entry-meta {font-size: rem(14px); line-height: rem(21px); margin: 0 0 10px;
	i, svg {margin-right: 2px; color: #bbb;}
	.meta-item {display: inline-block; margin-right: 10px;
		a {@include link-colors($primary_color, $secondary_color);}
	}
	.modified-on {font-style: italic; font-size: 0.75em;}
	.post-tags {font-style: italic;}
}

.featured-image {margin-top: 15px; margin-bottom: 15px;
	img {display: block; width: 100%;}
}

//WordPress WYSIWYG Content
.entry-content {margin-top: 10px; font-size: rem(16px); line-height: rem(24px);
	ul {list-style-type: disc; list-style-position: inside; overflow: hidden; padding-left: 20px;}
	ol {margin: 0; padding-left: 20px;}
	img {
		&.alignnone {margin-left: 0; margin-right: 0;}
		&.alignleft {display: inline; margin-left: 0; margin-right: 24px;}
		&.alignright {display: inline; margin-left: 24px; margin-right: 0;}
		&.aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;}
	}

	//Add margin-top to entry content headings (and applicable elements)
	p, ul, ol, dl, img, form, div, pre { //Only after these elements
		& + h1, & + h2, & + h3, & + h4, & + h5, & + h6 {margin-top: 2.25em;}
		& + p img {margin-top: 1.5em; margin-bottom: 0.75em;}
	}
}

.wp-caption-text {font-style: italic;}
.bypostauthor {font-weight: bold;} //Comments made by the post author

//Gutenberg buttons
.wp-block-button {
	a.wp-block-button__link {@include link-colors(#fff, #ccc); transition: all 0.25s;
		&.has-primary-background-color {@include link-bg-colors($primary_color, darken($primary_color, 15%)); @include link-colors(readable-color($primary_color));}
		&.has-secondary-background-color {@include link-bg-colors($secondary_color, darken($secondary_color, 15%)); @include link-colors(readable-color($secondary_color));}

		&.has-primary-color {@include link-colors($primary_color, darken($primary_color, 15%));}
		&.has-secondary-color {@include link-colors($secondary_color, darken($secondary_color, 15%));}

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

	&.is-style-outline {
		a.wp-block-button__link {background: none !important;
			&.has-primary-background-color,
			&.has-primary-color {border: 2px solid $primary_color;}
			&.has-secondary-background-color,
			&.has-secondary-color {border: 2px solid $secondary_color;}
		}
	}
}

//Block Editor Template Content
.page-template-block-editor {
	&.has-featured-image #bigheadingcon {height: 500px;}

	.entry-content,
	.entry-widgets,
	.entry-comments {padding-left: 40px; padding-right: 40px;
		> * {max-width: 640px; margin: 0 auto;} //Better selector for this?

		.block-featured-image {margin-top: -400px; margin-bottom: 15px;}
		.block-breadcrumbs ol {padding-left: 0;}

		h1 {font-size: 44px; margin-top: 75px;}
		h2 {font-size: 32px; margin-top: 32px;}
		h3 {margin-top: 32px;}

		p {font-size: 18px; line-height: 32px; margin-top: 32px;}

		figure {margin-top: 32px;}
		img {max-width: 100%;}

		.alignwide {max-width: 900px;}
		.alignfull {max-width: none;
			&.wp-block-image {margin-left: -40px; margin-right: -40px;}
		}
	}
}

//Single Post Widget Area
#single-post-widget-area {margin-top: 50px;
	.widget-container {margin-bottom: 50px;}
}

.entry-caption {font-style: italic; margin-top: 15px;}

#searchresults article,
.archive .content-section article {margin-bottom: 50px;}

h2.articles-by {padding-top: 0;}
//.bypostauthor {}

.loop-section article {margin: 60px 0;
	&:first-of-type {margin-top: 0;}
	&:last-of-type {margin-bottom: 0;}

	.entry-title {font-size: rem(28px); line-height: rem(32px); margin: 0 0 10px; font-weight: 300;}
	.featured-image {display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; max-height: 400px; overflow: hidden;
		img {transition: all 0.5s ease;  will-change: transform;}

		&:hover,
		&:focus {
			img {transform: scale(1.05);}
		}
	}
	.entry-summary {font-size: rem(16px); line-height: rem(24px); margin: 0 0 10px; color: #444;}
}