/******************************************************************
Site Name:
Author:

Stylesheet: Base Mobile

******************************************************************/

/*************************
 * GENERAL
 ************************/

html {
	height: 100%;
	overflow-x: hidden;
}

body {
	height: auto;
	overflow-x: hidden;

	#container {
		height: 100%;
	}
}

/*************************
 * HEADER
 ************************/

#masthead {}

#inner-header {
	padding-top: 1em;
	padding-bottom: 1em;
}

#logo {
	&.h1 {
		margin: 0;
	}

	a {
		text-decoration: none;
	}
}

#banner {
	display: none;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;

	.spacer {
		padding-top: 19.44%; // change this value based on the aspect ratio of your header image
	}
}

/*************************
 * POSTS & CONTENT
 ************************/

#content {}

#inner-content {
	padding-top: 2em;
	padding-bottom: 2em;

	// headers

	.page-header {}

	.article-header {}

	// titles

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

	.search-title {}

	// individual post classes

	.post-id {}

	.post {}

	.page {}

	.attachment {}

	.sticky {}

	.hentry {}

	.category-slug {}

	.tag-slug {}

	// post meta

	.entry-meta {
		color: $color__tertiary;
		font-style: italic;

		time {}
	}

	.tags {
		.tags-title {
			color: $color__tertiary;
		}
	}

	.categories {}

	// entry content

	.page-content {}

	.entry-content {}

	.archive-description {}

	// footers

	.page-footer {}

	.entry-footer {}
}

// Style individual templates
.home {}

.blog {}

.archive {}

.search {}

.error404 {}

.blog,
.archive,
.search {
	#inner-content {
		.page-header {
			margin-bottom: 1em;
		}

		article {
			border-bottom: 1px solid $color__border;
			padding-top: 1em;
			padding-bottom: 1em;

			.entry-header {
				margin-top: 1em;
				margin-bottom: 1em;
			}

			.entry-title {
				margin: 0;
				// hyphenate long words
				overflow-wrap: break-word;
				word-wrap: break-word;
				hyphens: auto;
			}

			.entry-meta {
				margin: 0.5em 0 0;
			}

			.entry-header + .entry-content,
			.entry-content + .entry-footer {
				margin-top: -1em;
			}

			&:first-child {
				.entry-header {
					margin-top: 0;
				}
			}

			&:only-child {
				border-bottom: 0;
			}
		}
	}
}

.single {
	#inner-content {
		.entry-meta {
			margin: -0.5em 0 1em;
		}
	}
}

/*************************
 * FOOTER
 ************************/

#colophon {
	background-color: $color__black;
	clear: both;
	color: $color__tertiary;
	font-size: 0.875em;

	.copyright {
		text-align: center;
	}

	a {
		color: $color__tertiary;
	}
}

ul.footer-menu {
	margin: 0 1px;
	padding: 0;
	text-align: center;

	li {
		display: inline-block;
		margin: 0 -1px;
		padding: 0;

		a {
			border-left: 1px solid $color__tertiary;
			color: $color__tertiary;
			display: block;
			line-height: 1;
			padding: 0 0.675em;
		}

		&:first-child {
			a {
				padding-left: 0;
				border-left: 0;
			}
		}

		&:last-child {
			a {
				padding-right: 0;
			}
		}
	}

	ul.sub-menu {
		display: none; // hide child ul as design does not support it
	}
}

// scroll to top link
#back-top {
	margin: 0;
	bottom: 25px;
	right: 30px;
	position: fixed;
	z-index: 9999;

	a {
		background-color: rgba(0,0,0,0.55);
		color: #FFF;
		display: block;
		font-size: 1.675em;
		height: 1.675em;
		text-align: center;
		text-decoration: none;
		width: 1.675em;
		border-radius: 500px;
		transition: background-color 0.5s ease-in-out;

		&:hover,
		&:focus {
			background-color: #000;
		}
	}

	.fas {
		line-height: 1.675em;
	}
}
