%serif		  { font-family: unquote($default-serif-font); }
%sans-serif	 { font-family: unquote($default-sans-font); }
%cursive		{ font-family: unquote($default-cursive-font); }

html {
	@extend %sans-serif;
	@extend .word-wrap;
	font-size: percentage($default-font-size / 16px);
	line-height: $default-line-height;
	color: $neutral;
}

%paragraph,
%list-item {
	font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
}

%heading,
%paragraph,
%list,
%table,
%pre {
	@extend %ends--soft;
}

p { @extend %paragraph; }

b, strong, .bold { @extend %font-weight--bold; }
em, i, small, .italic { @extend %font-style--italic; }

hr {
	@extend %ends--soft;
	border: none;
	height: 2px;
	background-color: $light;
}


@if $editor-style {
	.wp-caption-dd {
		font-size: 85%;
		font-weight: lighter;
	}
} @else {
	.wp-caption-text, .gallery-caption {
		font-size: 85%;
		font-weight: lighter;
	}
}

.site-title {
	@extend %ends--hard;
}

.entry-title, .archive-title {
	@extend %h1;
}

.page-title .archive-title {
	line-height: 1.1;
}

.archive-subtitle {
	display: block;

	font-size: rem(17px);
	font-weight: normal;
}

.archive,
.search,
.page-template-archive-page {
	.entry-title {
		@extend %sans-serif;

		font-size: rem(23px);
		font-weight: 900;
		color: $dark;

		text-shadow: none;

		* {
			background: none;
			box-shadow: none;
		}
	}
}



// Titles vertical rhythm based on map

.entry-title {
	margin-bottom: rem(map-get($rhythm-title, $default));
}

@each $breakpoint, $value in $rhythm-title {

	@if $breakpoint != $default {

		@if $value != 0000 {

			@include query-above( $breakpoint ) {
				.entry-title {
					margin-bottom: rem($value);
				}
			}

		}
	}
}

$container: ".entry-content, .comment__content";

@if $editor-style {
	$container: "html" !global;
}

#{$container} {
	h1 { @extend %h1; }
	h2 { @extend %h2; }
	h3 { @extend %h3; }
	h4 { @extend %h4; }
	h5 { @extend %h5; }
	h6 { @extend %h6; }

	dl { @extend %dl; }
	ul { @extend %ul; }
	ol { @extend %ol; }

	blockquote {
		@extend %blockquote;

		cite {
			display: block;
			margin-top: rem(12px);
			@extend %sans-serif;
			@extend %h4;

			font-style: normal;
		}
	}

	a {
		@extend %a;
	}

	pre {
		@extend %pre;
	}
}

@mixin responsive-body-text($font-size) {
	body {
		font-size: rem($font-size);
	}
}

@include responsive-body-text( map-get($responsive-body-text, $default) );

// Using $responsive-body-text map(settings.scss) to set body font-size depending on screen size;
// font-size for $palm is default, used above; it will be skipped in the loop;
// "0000" is a dummy value, it means it must not taken into consideration;
// output example: < @include query-above($lap) { @include responsive-body-text( 16px ) }; >.
@each $breakpoint, $font-size in $responsive-body-text {

	@if $breakpoint != $default {

		@if $font-size != 0000 {

			@include query-above( $breakpoint ) {
				@include responsive-body-text( $font-size );
			}

		}
	}
}