/** -----------------------------------------------------:[ 10.0 - Content ]:---------- */

/** ---:[ Without JavaScript ]:--- */
.no-js {
	#content {
		.max-width();
		.clearfix();
	}
	#primary {
		.column( 8 );
	}
	#main {
		.inner( left );
	}
    @media only screen and ( max-width: @max-width ) {
		#content {
			padding-left: @spacing-base;
			padding-right: @spacing-base;
		}
	}
	@media all and ( max-width: unit( ( @max-width * .8 ), px ) ) {
		#primary {
			.column( 7 );
		}
	}
	@media all and ( max-width: unit( ( @max-width * .6 ), px ) ) {
		#primary {
			.break-column();
		}
		#main {
			.inner( false );
		}
	}
}

/** ----------------------------------------:[ 10.1 - Posts and pages ]:--- */
.hentry {
	padding-top: @spacing-base;
	padding-bottom: @spacing-base;
	border-bottom: 1px solid lighten( @light, 4% );
	img {
		border-radius: 2px;
	}
}
.entry {
	&-title {
		.heading( 3, 36 );
		line-height: 1.2;
		margin-top: 0;
		.hyphens( manual );
		@media screen and (max-width: 760px) {
			.heading( 2.25, 24 );
			.hyphens();
		}
		a {
			color: @dark;
			&:hover {
				color: @primary;
			}
		}
	}
	&-meta {
		i {
			margin-right: .4em;
		}
		&-time {
			color: lighten( @dark, 50% );
			margin-bottom: @spacing-base;
			a {
				color: lighten( @dark, 50% );
			}
		}
		&-categories {
			color: lighten( @dark, 20% );
			text-transform: uppercase;
			font-weight: bold;
		}
		&-tags {
			a {
				display: inline-block;
				margin-right: .3em;
				margin-bottom: .5em;
				padding: 0 .5em;
				background: @light;
				color: darken( @light, 40% );
				.transition( ~'background 200ms linear, color 200ms ease' );
				&:hover {
					background: @primary;
					color: #FFF;
				}
			}
		}
	}
	&-image {
		margin-bottom: unit( ( 36 / @font-size-base ), em );
		img {
			margin: 0 auto;
			display: block;
		}
	}
	&-footer {
		margin-top: unit( ( 36 / @font-size-base ), em );
	}
}

/** ---:[ Single ]:--- */
.single {
	.entry {
		&-title {
			// line-height: 1.5;
		}
	}
}
/** ---:[ Pages ]:--- */
.page {
	
}

/** ---:[ Sticky Posts ]:--- */
.sticky {
	.entry {
		&-title {
			a {
				
			}
		}
	}
}

/** ---:[ With JavaScript ]:--- */
.js {
	.hentry {
		> [class^="entry-"] {
			/*
				NOTE Perhaps we will define this with actual classes.
			*/
			.max-width( 760px );
		}
	}
	.entry {
		&-meta {
			a {
				
			}
		}
	}
	.blog,
	.archive,
	.search {
		.hentry {
			// .transition( ~'background-color 200ms linear' );
			&:hover {
				// background-color: darken( #FFF, 1% );
			}
		}
		.entry {
			&-header,
			&-summary {
				
			}
			&-summary {
				p {
					margin-bottom: 0;
				}
			}
		}
		// Sticky posts
		.sticky {
			background-color: @primary;
			color: #FFF;
			&:hover {
				// background-color: darken( @primary, 2% );
			}
			.entry {
				&-title {
					a {
						color: #FFF;
						&:hover {
							color: darken( #FFF, 5% );
						}
					}
				}
				&-meta {
					a {
						color: #FFF;
					}
				}
			}
		}
		// Has post thumbnail
		.has-post-thumbnail {
			.backstretch {
				
				img {
					
				}
			}
		}
	}
	.page {
		&-header {
			padding-top: @spacing-base;
			padding-bottom: @spacing-base;
			background: @base-19;
			color: #FFF;
			text-align: center;
		}
		&-title {
			margin: 0;
		}
		&-description {
			margin-top: 1em;
			.max-width( 600px );
		}
		&-content {
			padding-top: @spacing-base;
			padding-bottom: @spacing-base;
			text-align: center;
		}
	}
	@media screen and (max-width: 760px) {
		.hentry {
			padding: @spacing-base;
		}
	}
}

/** ---:[ Without JavaScript ]:--- */
.no-js {
	.hentry {
		padding-top: unit( ( @spacing-base * 1.5 ), em );
		padding-bottom: unit( ( @spacing-base * 1.5 ), em );
		border-bottom: 1px solid lighten( @light, 4% );
	}
	.sticky {
		border-left: 5px solid @primary;
	}
}

/** ----------------------------------------:[ 10.2 - Post Formats ]:--- */
/** ---:[ With JavaScript ]:--- */
.js {
	.blog,
	.archive,
	.search {
		.format {
			&-image {
				&.has-post-thumbnail {
					color: #FFF;
					a {
						color: #FFF;
					}
					.entry {
						&-title {
							font-size: 1.5em;
							line-height: 2;
							a {
								padding: .5em;
								background: @light;
								border-radius: 2px;
								color: @dark;
							}
						}
						&-summary {
							p {
								display: inline-block;
								padding: .75em;
								background: @light;
								border-radius: 2px;
								color: @dark;
							}
						}
					}
				}
			}
			&-audio,
			&-video {
				.entry {
					&-title {
						font-size: 1.5em;
					}
					&-audio {
						margin-bottom: 1em;
					}
				}
			}
			&-status {
				background: @blue;
				color: #FFF;
				border-bottom-color: darken( @blue, 5% );
				> [class^="entry-"] {
					.max-width( 540px );
				}
				&:hover {
					// background: darken( @blue, 5% );
				}
				a {
					color: #FFF;
					&:hover {
						color: darken( #FFF, 5% );
					}
				}
				.entry {
					&-title {
						font-size: 1.5em;
					}
					&-summary {
						.font-size( 30 );
					}
					&-meta {
						margin-bottom: 0;
						margin-top: @spacing-base / 2;
						color: #FFF;
					}
				}
			}
			&-aside {
				background: @magenta;
				border-bottom-color: darken( @magenta, 5% );
				color: #FFF;
				> [class^="entry-"] {
					.max-width( 540px );
				}
				&:hover {
					// background: darken( @magenta, 5% );
				}
				a {
					color: #FFF;
					&:hover {
						color: darken( #FFF, 5% );
					}
				}
				.entry {
					&-title {
						font-size: 1.5em;
					}
					&-meta {
						&-categories {
							margin-bottom: 1em;
							a {
								border-bottom: 1px solid #FFF;
								.transition( ~'all 100ms linear' );
								&:hover {
									background: darken( @magenta, 15% );
									border-bottom-color: transparent;
								}
							}
						}
						&-tags {
							a {
								background-color: darken( @magenta, 5% );
								.transition( ~'background-color 100ms linear' );
								&:hover {
									background-color: darken( @magenta, 15% );
								}
							}
						}
					}
				}
			}
			&-link {
				background: @cyan;
				border-bottom-color: darken( @cyan, 5% );
				color: #FFF;
				> [class^="entry-"] {
					.max-width( 540px );
				}
				&:hover {
					// background: darken( @cyan, 5% );
				}
				a {
					color: #FFF;
					&:hover {
						color: darken( #FFF, 5% );
					}
				}
				.entry {
					&-title {
						font-size: 1.5em;
					}
					&-meta {
						margin-bottom: 1em;
					}
					&-summary {
						a {
							border-bottom: 1px solid #FFF;
							.transition( ~'all 100ms linear' );
							&:hover {
								background: darken( @cyan, 15% );
								border-bottom-color: transparent;
							}
						}
					}
				}
			}
		}
	}
	.single {
		.format {
			&-audio,
			&-video {
				.entry {
					&-meta {
						&-time {
							margin-bottom: 0;
						}
					}
				}
			}
			&-status {
				background: @blue;
				color: #FFF;
				border-bottom-color: darken( @blue, 5% );
				> [class^="entry-"] {
					.max-width( 540px );
				}
				&:hover {
					// background: darken( @blue, 5% );
				}
				a {
					color: #FFF;
					&:hover {
						color: darken( #FFF, 5% );
					}
				}
				.entry {
					&-title {
						font-size: 1.5em;
					}
					&-summary {
						.font-size( 30 );
					}
					&-meta {
						margin-bottom: 0;
						margin-top: @spacing-base / 2;
						color: #FFF;
					}
				}
			}
			&-aside {
				background: @magenta;
				border-bottom-color: darken( @magenta, 5% );
				color: #FFF;
				> [class^="entry-"] {
					.max-width( 540px );
				}
				&:hover {
					// background: darken( @magenta, 5% );
				}
				a {
					color: #FFF;
					&:hover {
						color: darken( #FFF, 5% );
					}
				}
				.entry {
					&-title {
						font-size: 1.5em;
					}
					&-meta {
						&-categories {
							margin-bottom: 1em;
							a {
								border-bottom: 1px solid #FFF;
								.transition( ~'all 100ms linear' );
								&:hover {
									background: darken( @magenta, 15% );
									border-bottom-color: transparent;
								}
							}
						}
						&-tags {
							a {
								background-color: darken( @magenta, 5% );
								.transition( ~'background-color 100ms linear' );
								&:hover {
									background-color: darken( @magenta, 15% );
								}
							}
						}
					}
				}
			}
			&-link {
				background: @cyan;
				border-bottom-color: darken( @cyan, 5% );
				color: #FFF;
				> [class^="entry-"] {
					.max-width( 540px );
				}
				&:hover {
					// background: darken( @cyan, 5% );
				}
				a {
					color: #FFF;
					&:hover {
						color: darken( #FFF, 5% );
					}
				}
				.entry {
					&-title {
						font-size: 1.5em;
					}
					&-meta {
						margin-bottom: 1em;
					}
					&-summary {
						a {
							border-bottom: 1px solid #FFF;
							.transition( ~'all 100ms linear' );
							&:hover {
								background: darken( @cyan, 15% );
								border-bottom-color: transparent;
							}
						}
					}
				}
			}
		}
	}
}

/** ----------------------------------------:[ 10.3 - Comments ]:--- */
@import 'comments';