/* natUIve – Typography */

@import 'natuive-setup';

body {
	
	color: #333;
	-webkit-text-size-adjust: none;
// 	-webkit-font-smoothing: antialiased;
	font-size: $font-size;
	line-height: $line-height;
	// 	line-height: var(--line-height);
	font-family: Helvetica Neue, sans-serif;
// 	font-weight: 300;
    letter-spacing: .02em;

}

/* Elements with double line-height */

h1, h2, h3, .overlay .close {
	
	line-height: $line-height * 2;
// 	line-height: calc(var(--line-height) * 2);
	
}

h1, h2, h3, h4, h5, h6 {
	
	margin: 0;
	padding: $line-height/2*1rem 0; // Because margin breaks siblings' baseline alignment
	word-break: break-word; // Overflow protection for long words
	word-wrap: break-word;
	font-weight: 500;

}

h1 + p:not(.drop-cap), h2 + p:not(.drop-cap), h3 + p:not(.drop-cap), h4 + p:not(.drop-cap), h5 + p:not(.drop-cap), h6 + p:not(.drop-cap) {
	
	margin-top: 0;

}

h1 {
	
	font-size: 2.5em;
    line-height: 1.2em;
    padding: 0;
    
}

h2 {
	
	font-size: 1.5em;	// 	line-height: 1.333;
	line-height: $line-height/1.5; // = standard line-height / new font-size in em
// 	line-height: calc(var(--line-height)/1.5); // = standard line-height / new font-size in em
	
}

h3 {
	
	font-size: 1.2em;
	line-height: ($line-height*1.011)/1.2;
// 	line-height: calc(var(--line-height)/1.2);

}

h4 {
	
	font-size: 1em;
	line-height: $line-height;
// 	line-height: calc(var(--line-height));

}

h5 {
	
	font-size: .8em;
	line-height: $line-height/.8/2;
// 	line-height: calc(var(--line-height)/.8);
	padding: $line-height-em/.8/4 0;

}

h6 {
	
	font-size: .6667em;
	line-height: $line-height/.6667/2;
// 	line-height: calc(var(--line-height)/.6667em);
	padding: $line-height-em/.6667/4 0;

}

pre {
	
	overflow: auto;

}

p {

	font-size: 1em;
	margin: $line-height-em 0;
// 	margin: var(--line-height-em) 0;
	line-height: $line-height;
// 	line-height: var(--line-height);

}

.drop-cap:first-letter {

	float: left;
	font-size: 5em;
	padding: .1em .1em .1em 0;
	margin-top: -.2em;
	line-height: 1em;

}

[dir=rtl] .drop-cap:first-letter {

	float: right;

}

a[href] {
	
	color: inherit;
	display: inline-block; // Remove vertical breaks on multi-line anchors. This is wrong for line breaks in a paragraph, hence the next rule:

}

p a[href] {
	
	display: inline;

}

hr {

    display: block;
    height: 1px;
    border: 0;   
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;

}

.quote, blockquote, q {
	
	border-left: 1px solid #bbb;
	padding-left: 1em;
	display: block;
	margin: $line-height-em 0 $line-height-em 1em;
	
}

[dir=rtl] .quote, [dir=rtl] blockquote {
	
	margin-left: 0;
	border-left: none;
	padding-left: 0;
	margin-right: 1em;
	border-right: 1px solid #bbb;
	padding-right: 1em;
	
}

.big-text {

	font-size: 1.125em;
	line-height: 1.3334em;
// 		line-height: var(--line-height);
	min-height: 1.3334em;
// 		min-height: var(--line-height-em);

}
